/* ===========================================
	TBS search
=========================================== */

/* link */
a:link {
	text-decoration:underline;
	color:#ff7b00;
}
a:visited {
	text-decoration:none;
	color:#ff7b00;
}
a:active {
	text-decoration:none;
	color:#ff7b00;
}
a:hover {
	text-decoration:none;
}


/* h1 */
div.con-lef h1 {
	color:#4e4e4e;
	line-height:1.25;
	height:49px;
}
div.con-lef h1 span {
	color:#7b7b7b;
	font-size:83%;
}
div.con-lef h1:before {
	content:"";
	display:block;
	float:left;
	width:49px;
	height:49px;
	background-image:url(../img/di2_icons.svg);
	background-position:left top;
	background-size:50px 800px;
	border-radius:12px;
}
div.con-lef h1:after {
	display:block;
	line-height:1.5;
	font-size:12px;
	color:#999;
}
div.con-lef h1:after {
	content:"Search Result List";
}


/* ks */

div#srchForm {
	padding: 15px;
	background-color:#bfdcf3;
	border-radius: 8px;
}
div#srchForm div.seach-q-box {
	padding-bottom:10px;
}
div#srchForm div.seach-q-box input.qbox {
	display: block;
	font-size:16px;
	line-height:22px;
	border: 1px solid #fff;
	margin:0 0 0 0;
	padding:5px;
	float:left;
	/* */
	-moz-appearance: none;
	-webkit-appearance: none;
	-o-appearance: none;
	-ms-appearance: none;
	appearance: none;
	/* */
}
div#srchForm div.seach-q-box input.qbox:focus {
	outline:none;
}
div#srchForm div.seach-q-box button {
	display: block;
	background: url(../img/ks_slider_btn.svg) -50px 0 no-repeat;
	width:38px;
	height:34px;
	cursor: pointer;
	border: none;
	margin: 0;
	padding:0;
	border-radius: 0 8px 8px 0;
}
div#srchForm div.seach-q-box button span {
	display:none;
}
div#srchForm p {
	border-top:1px dotted #fff;
	padding-top:10px;
	color:#6c7e98;
	font-size: 83%;
	line-height: 1.5;
	margin-bottom:0.5em;
}
div#srchForm ul {
	list-style-type:none;
}
div#srchForm ul li {
	position: relative;
	display: inline-block;
	margin: 0 0 5px;
	padding: 0;
}
div#srchForm ul li input {
	display: block;
	cursor: pointer;
	position: absolute;
	top: 0;
	opacity: 0;
	width: 100%;
	height: 100%;
	margin:0;
	padding:0;
}
div#srchForm ul li input[type="radio"] + label {
	display: block;
	background-color:#7cba31;
	text-align:center;
	/*padding: 5px 10px;*/
	font-size:87.5%;
	border-radius: 8px;
	background-color:#ffec66;
	background-image:-moz-linear-gradient(transparent 50%, #ffe000 50%);
	background-image:-webkit-gradient(linear, left top, left bottom, from(transparent),color-stop(0.5,transparent),color-stop(0.5,#ffe000),to(#ffe000));
	background-image:-ms-linear-gradient(transparent 50%, #ffe000 50%);
	background-image:linear-gradient(transparent 50%, #ffe000 50%);
	line-height:32px;
	padding:0 1em;
	margin:0;
}
div#srchForm ul li input[type="radio"]:checked + label {
	background-color:#ffec66;
}

@media all and (min-width: 768px) {
div#srchForm {
	margin-bottom:20px;
}
div#srchForm div.seach-q-box input.qbox {
	width:320px;
}
}
@media all and (max-width: 767px) {
div#srchForm {
	margin-bottom:10px;
}
div#srchForm div.seach-q-box input.qbox {
	width:80%;
}
}



/*	hint
============================== */

article.hints ul {
	list-style-type:circle;
	margin-left:30px;
}
article.hints div.inner {
	background-color:#fff !important;
}
article.hints ul li {
	display:list-item;
	font-size:83%;
	line-height:1.5;
	margin-right:15px;
	margin-bottom:0.5em;
}
article.hints p {
	font-size:83%;
	line-height:1.5;
	margin-left:30px;
	margin-right:15px;
}
article.hints p span {
	font-weight:bold;
	color:#005ca6;
}
@media all and (max-width: 767px) {
article.hints {
	margin:0 !important;
}
article.hints h2 {
	border-radius: 10px 10px 0 0 !important;
}
}
@media all and (min-width: 768px) {
}




/*	head
============================== */
div#head {
	background-color:#ccdae6;
	padding:20px;
}
div#head ul {
	list-style-type:none;
}
div#head ul li {
	font-size:87.5%;
	line-height:1.6;
	margin-bottom:10px;
}
div#head ul li:last-child {
	margin-bottom:0;
}
div#head strong {
	color:#0073cf;
}
@media all and (max-width: 767px) {
div#head {
	margin-bottom:10px;
}
}
@media all and (min-width: 768px) {
div#head {
	margin-bottom:20px;
}
}




/*	tbs search
============================== */

div#tbs_body hr {
	display:none;
}
div#tbs_body ul {
	list-style-type:none;
}
div#tbs_body ul li {
	display:block;
	font-size: 83%;
	line-height: 1.5;
}
div#tbs_body ul li.tit {
	font-size: 87.5%;
	clear: both;
	padding:4px 6px;
	font-weight: bold;
	color:#005ca6;
	background-color:#bfdcf3;
	margin-bottom:8px;
	border-top:#80b9e7 2px solid;
	word-break:break-all;
}
div#tbs_body ul li.descri, div#tbs_body ul li.bdy {
	margin-bottom:8px;
	word-break:break-all;
}
div#tbs_body ul li.descri b, div#tbs_body ul li.bdy b {
	background-color:#ffea7b;
}
div#tbs_body ul li.urls {
	word-break:break-all;
	margin-bottom:15px;
}
div#tbs_body ul li.thumbs {
	display:none;
/*
	width:120px;
	float:right;
	margin-left:15px;
	margin-bottom:15px;
*/
}



/*	program list
============================== */
article.programlists {
	display:none;
}
article.programlists,
article.hints {
	margin-bottom:20px;
}
article.programlists h2,
article.hints h2 {
	padding:0 10px;
	background-color:#4e4e4e;
}
article.programlists h2 span,
article.hints h2 span {
	display:block;
	padding:0 5px;
	font-size:87.5%;
	color:#fff;
	height:35px;
	line-height:35px;
	background-image:-moz-linear-gradient(transparent 50%, #333 50%);
	background-image:-webkit-gradient(linear, left top, left bottom, from(transparent),color-stop(0.5,transparent),color-stop(0.5,#333),to(#333));
	background-image:-ms-linear-gradient(transparent 50%, #333 50%);
	background-image:linear-gradient(transparent 50%, #333 50%);
}
article.programlists h2 > span:before,
article.hints h2 > span:before {
	content:"";
	background-image:url(/um/v7/img/di2_parts.svg);
	background-repeat:no-repeat;
	background-position:0 -400px;
	display:block;
	float:left;
	width:21px;
	height:21px;
	margin-top:7px;
	margin-right:8px;
}
article.programlists div.inner,
article.hints div.inner {
	border:3px solid #333;
	border-top:none;
	background-color:#ededed;
	position:relative;
}
article.programlists div.ovrflow {
	-webkit-transform: translateZ(0);
/*	-ms-touch-action : none ; *//* for *IE10 */
/*	touch-action : none ;*/
	overflow:auto;
	margin:0 40px;
}
article.programlists div#programlist_body {
	/* display:table; */
}
article.programlists div#programlist_body hr {
	display:none;
}
article.programlists ul.ctrl {
	list-style-type:none;
}
article.programlists ul.ctrl a {
	display:none;
	position:absolute;
	width:32px;
	background-image:url(../img/ks_slider_btn.svg);
	background-repeat:no-repeat;
}
article.programlists ul.ctrl a {
	top:50%;
	height:64px;
	margin-top:-32px;
}
article.programlists ul.ctrl a.ctrl-lef {
	left:0;
	background-position:left top;
}
article.programlists ul.ctrl a.ctrl-rig {
	right:0;
	background-position:right top;
}
article.programlists div#programlist_body a.urls {
	float:left;
	display:block;
	padding-right:6px;
	text-decoration:none;
	color:#333;
}
article.programlists div#programlist_body a.urls ul {
	/* display:table-cell; */
	list-style-type:none;
	box-sizing:border-box;
	margin:0;
	padding:0;
	border:0;
	background-color:#fff;
	border-radius:10px;
}
article.programlists div#programlist_body a.urls:nth-last-child(2) {
	padding-right:0;
}
article.programlists div#programlist_body a.urls ul li {
	display:block;
	font-size:83%;
	line-height:1.5;
}
article.programlists div#programlist_body a.urls ul li.oa {
	color:#4096db;
}
article.programlists div#programlist_body a.urls ul li.tit {
	font-weight:bold;
	font-size:87.5%;
	color:#005ca6;
	margin-bottom:0.2em;
}
article.programlists div#programlist_body a.urls ul li.descri {
}
article.programlists div#programlist_body a.urls ul li.thumbs {
}
article.programlists div#programlist_body a.urls ul li.thumbs img {
	display:block;
}
article.programlists div#programlist_body a.urls ul li.bdy {
	display:none;
}
article.programlists div#programlist_body a.urls ul li.urls {
	display:none;
}
article.programlists div#programlist_body a.urls ul li.thumbs {
	display:none;
/*
	width:120px;
	margin:0 auto;
*/
}


@media all and (min-width: 768px) {
article.programlists h2,
article.hints h2 {
	border-radius: 10px 10px 0 0;
}
article.programlists div.inner,
article.hints div.inner {
	padding:20px 0;
}
article.programlists div#programlist_body a.urls ul {
	width:259px;
	padding:15px;
}
article.programlists div#programlist_body ul li.descri {
	margin-bottom:1em;
}
}


@media all and (max-width: 767px) {
article.programlists {
	margin:0 -12px 15px;
}
article.programlists div.inner {
	border:none;
}
article.programlists div.inner,
article.hints div.inner {
	padding:10px 0;
}
article.programlists div#programlist_body a.urls ul {
	width:240px;
	padding:10px;
}
article.programlists div#programlist_body ul li.descri {
	margin-bottom:10px;
}
}




/*	foot
============================== */
div#foot {
	clear:both;
}
div#foot ul li {
	font-size: 83%;
	line-height: 1.5;
	float: left;
}
div#foot ul li:before {
	content: "｜";
}
div#foot ul li:first-child:before {
	content: "";
}
div#foot ul li a {
	padding:0 0.25em;
}
@media all and (max-width: 767px) {
div#foot {
	padding-bottom:10px;
}
}
@media all and (min-width: 768px) {
div#foot {
	padding-bottom:30px;
}
}



@media all and (min-width: 768px) {

div.con-lef main {
	padding:25px 25px 0;
}
div.con-lef h1 {
	font-size: 125%;
	margin-top:2px;
	margin-bottom:15px;
}
div.con-lef h1:before {
	margin-top:-2px;
	margin-right:14px;
}


}


@media all and (max-width: 767px) {

div.con-lef main {
	padding:12px 12px 1px;
}
div.con-lef main h1 {
	font-size: 100%;
	margin-top:5px;
	margin-bottom:10px;
}
div.con-lef h1:before {
	margin-top:-5px;
	margin-right:10px;
}


}

/*	di2 common
============================== */

body {
	background-color:#ededed;
	-webkit-text-size-adjust:100%;
	-ms-text-size-adjust: 100%;
}

/* small button */
.smbtn a {
	display:block;
	font-size:83%;
	height:28px;
	line-height:28px;
	border-radius:14px;
	color:#333;
	text-align:left;
	font-weight:bold;
	text-decoration:none;
	background-color:#ffec66;
	background-image:-moz-linear-gradient(transparent 50%, #ffe000 50%);
	background-image:-webkit-gradient(linear, left top, left bottom, from(transparent),color-stop(0.5,transparent),color-stop(0.5,#ffe000),to(#ffe000));
	background-image:-ms-linear-gradient(transparent 50%, #ffe000 50%);
	background-image:linear-gradient(transparent 50%, #ffe000 50%);
	padding-left:6px;
}
.smbtn a:before {
	content:"";
	display:block;
	width:16px;
	height:16px;
	background-image:url(/um/v7/img/di2_parts.svg);
	background-position:0 -450px;
	background-repeat:no-repeat;
	float:left;
	margin-right:6px;
	margin-top:6px;
	border-radius:8px;
}

@media all and (min-width: 768px) {

div.con-bg {
	min-width:980px;
	position:relative;
	background-color:#0073cf;
	background-image:url(../img/di2_pc_bg.svg);
	padding:30px 0;
}
div.con-bg div.cover {
	width:980px;
	margin:0 auto;
}
div.con-bg div.cover:after {
	content: "";
	clear: both;
	display: block;
}
div.con-bg div.cover div.con-lef {
	float:left;
	width:660px;
	background-color:#fff;
	-webkit-box-shadow: rgba(0,0,0,0.2) 0px 0px 5px 1px;
	-moz-box-shadow: rgba(0,0,0,0.2) 0px 0px 5px 1px;
	-ms-box-shadow: rgba(0,0,0,0.2) 0px 0px 5px 1px;
	-o-box-shadow: rgba(0,0,0,0.2) 0px 0px 5px 1px;
	box-shadow: rgba(0,0,0,0.2) 0px 0px 5px 1px;
	border-radius:24px;
}
div.single div.cover {
	width:920px;
	background-color:#fff;
	-webkit-box-shadow: rgba(0,0,0,0.2) 0px 0px 5px 1px;
	-moz-box-shadow: rgba(0,0,0,0.2) 0px 0px 5px 1px;
	-ms-box-shadow: rgba(0,0,0,0.2) 0px 0px 5px 1px;
	-o-box-shadow: rgba(0,0,0,0.2) 0px 0px 5px 1px;
	box-shadow: rgba(0,0,0,0.2) 0px 0px 5px 1px;
	border-radius:24px;
}

p.smbtn a:hover {
	background-color:#ffe000;
}

}


@media all and (max-width: 767px) {

div.con-lef {
	background-color:#fff;
}
div.single div.cover main {
	padding:10px;
	background-color:#fff;
}

}


@media all and (min-width: 768px) and (max-width: 979px)  {

div.single {
	padding:25px 0;
}
div.single div.cover {
	width:auto;
	margin:0 25px;
}
div.single div.cover main {
	padding:20px;
}

}

@media all and (min-width: 980px) {
div.single div.cover main {
	padding:25px;
}
}

/*	right column
============================== */

div.con-rig ul {
	list-style-type:none;
}

@media all and (min-width: 768px) {

div.con-rig {
	float:right;
	width:300px;
}
div.con-rig div.recta {
	width:300px;
	height:250px;
	overflow:hidden;
	margin-bottom:20px;
}

}



@media all and (max-width: 767px) {

div.con-rig {
	background-color:#eaeaea;
}
div.con-rig div.recta {
	width:300px;
	margin:0 auto;
	padding:10px 0;
}

}