@charset "utf-8";

/*--------------------------------
	tv care.css
---------------------------------*/
#contents{
    margin-left: 0.5em;
}


#contents h1{
	margin-bottom: 2em;
}

@media (max-width: 640px){
    #contents{
    margin-left: 0;
    }
    #contents h1 img{
	width: 100%;
    }
}

#contents section{
	margin-bottom: 2em;
	margin-top: 3em;
}

#contents section h2{
	font-size: 1.846rem;
	border-top: 5px solid #4d9936;
	border-bottom: 1px dotted #999;
	padding: 1.5rem 13px 0.8rem;
	margin-bottom: 1em;
}

/* indexArea */
#contents .indexArea{
	display: table;
	width: 100%;
}

#contents .indexArea p.left{
	background: #ccc;
	color: #fff;
	font-size: 14px;
	padding: 0.5em;
	margin: 0;
	display: table-cell;
	height: 100%;
	vertical-align: middle;
	width: 1.5em;
	text-align: center;
}

#contents .indexArea.green p.left{
	background-color: #4d9936;
}

#contents .indexArea ul{
	border: 1px solid #ccc;
	padding: 1.5em 1em 1em 1.5em;
	list-style-type: none;
	margin: 0;
	width: 100%;
	box-sizing: border-box;
	height: 100%;
	background-color: #fff;
}

#contents .indexArea.green ul{
	border-color: #4d9936;
}

@media (max-width: 640px){
   #contents .indexArea ul{
	padding: 1em;
} 
}

/*m-style*/
#contents div.m-style{
    margin: 1em 0 2em 5em;
}

@media (max-width: 640px){
    #contents div.m-style{
    margin: 1em 0 2em 0;
    }
    #contents div.m-style img{
    width: 100%;
    max-width: 280px;
    }
}

/*textLink*/
#contents span.textLink{
	background: url(/support/share/images/arrow_black.gif) no-repeat;
	background-position:0 6px;
	padding-left:1em;
}

/* Link button */
#contents ul.btnlist {
    margin-left: 0.5em;
}
   
#contents ul.btnlist li {
	list-style: none;
	float: left;
}

#contents ul.btnlist li a {
	background: url(/support/share/images/bg_mod-linkButton.jpg) repeat-x scroll left center;
	border: solid 1px #CCCCCC;
	border-radius: 5px;
	color: #000;
	padding: 0.7em 1em;
	display: inline-block;
	width: 450px;
}

#contents ul.btnlist li a:hover{
    opacity: 0.7;
}

#contents ul.btnlist li a span.textLink {
	background: url(/share/images/arrow_black.gif) no-repeat;
	background-position: 0 5px;
	margin-left: 0;
	display: inline-block;
	padding: 0 0 0 10px;
}

@media (max-width: 640px) {
    #contents ul.btnlist{
        margin-left: 0;
    }
    #contents ul.btnlist li {
		margin-left: 0;
	}
    #contents ul.btnlist li a {
		width: 100%;
	}
}

/* open close */
#contents .Gray {
	margin-left: 1em;
	padding: 0.75em 0.5em;
	border: #d2d2d2 1px solid;
	border-radius: 6px;
	background: url(/support/share/images/bg_mod-linkButton.jpg) repeat-x scroll left center;
	cursor: pointer;
	margin-top: 0.75em;
	width: 555px;
    height: 40px;
	box-sizing: border-box;
}

#contents .Gray:hover, .Gray:active {
	text-decoration: none;
	opacity: 0.5;
}

#contents .Gray:focus {
	outline: thin dotted;
	opacity: 0.5;
	outline-offset: -1px;
}

#contents .Gray p{
        display: inline-block;
	}

#contents .detailArea {
	margin-left: 1em;
	padding: 1em;
	border: 1px solid #d2d2d2;
    background-color: #fff;
}

#contents .detailArea > .stepArea{
    margin-top: 0.5em;
	margin-bottom: 0;
}


@media screen and (max-width: 640px){
	#contents .stepArea{
		margin-left: 5px;
	}
	#contents .stepArea ol.stepList > li >p.lead {
		padding-top: 0;
	}
	#contents .stepArea ol.stepList > li > * {
		margin-left: 0;
	}
	#contents .Gray {
		width: 100%;
        margin-left: 0;
        display: table;
	}
    
    #contents .Gray img.icon{
        width: auto!important;
        height: auto!important;
        max-width: none!important;
	}
    
    #contents .Gray p{
        display: table-cell;
        width: 100%;
        padding-left: 5px;
	}
    
    #contents .detailArea {
	margin-left: 0;
    }
    
    #contents .detailArea ol li img{
	width: 100%;
    }
}

/* annotation */
#contents p.annotation,
#contents ul.annotation{
	margin-left:1em;
}
#contents p.annotation,
#contents ul.annotation li{
	padding-left: 1em;
	text-indent: -1em;
}

#contents ul.annotation li{
	margin-left: 0;
}

#contents p + p.annotation{
	margin-top:0.5em;
}

@media screen and (max-width: 640px){
	#contents p.annotation,
	#contents ul.annotation{
		margin-left:0.5em;
	}
}


/* movie short 2025/07/23 */
#i_frame.short {
	width: 403px;
	height: 716px;
	overflow: unset;
	padding-bottom: unset;
}

@media screen and (max-width: 640px) {
	#i_frame.short{
		width: 283px;
		height: 503px;
	}
}

@media screen and (max-width: 375px) {
	#i_frame.short{
		width: 248px;
		height: 445px;
	}
}
@media screen and (max-width: 375px) {
	#i_frame.short{
		width: 222px;
		height: 398px;
	}
}

#contents ul.txtlink.inner > li {
    background: url(/support/share/images/arrow_underline.gif) no-repeat 0 0.5em !important;
	padding-left: 1em;
}