@charset "utf-8";

/*=====================================================
 * Style Name: Form Screen Interface
 * Style URL: /e-library/common/css/system.css
 * Description: Category Style Sheet
 * Version: 2.5
 * Last Up Date: 2014/6/12
 * Author: Prime works
 * Author URL: http://www.primeworks.jp/
 *
 * Markup Reference:
 *
=====================================================*/



/*----- contents -------

	1: Main Interface setting
		: content page
		: main
		: sub
	2: Header Block
	3: Form Elements
	4: Block Elements
		: error-area
		: input-box
		: inquiry-box
			- login sub
		: confirm-box
		: for selectable.js
		: list-select
	5: Terms Page

----------------------*/




/*
===== 1: Main Interface setting ===========================*/

/* content page
--------------------*/

div#content {
	background: url(../img/bg_form.gif) center 10px no-repeat;
}


div#content div.page {
/*	padding: 10px 20px 20px;	*/
	width: 960px;
	background: #ffffff;
}



/* main
--------------------*/

div.main {
	float: left;
	width: 712px;
}


div.main img.icon {
	margin: 0 5px 0 0;
	vertical-align: middle;
}



/* sub
--------------------*/

div.sub {
	float: right;
	width: 190px;
}


div.sub ul {
	color: #333333;
	border-top: 1px solid #d9d9d9;
}


div.sub ul li {
	padding: 15px 10px;
	border-bottom: 1px solid #d9d9d9;
}


div.sub ul li.active {
	font-weight: bold;
}




/*
===== 2: Header Block ===========================*/

h1 {
	margin-bottom: 15px;
}


h2 {
	margin: 0 0 15px;
	padding: 0;
	background: none;
}





/*
===== 3: Form Elements ===========================*/

div.input-box { position: relative; }


div.input-box fieldset,
div.input-box legend {
	padding: 0 0 15px;
	width: 678px;
}


div.input-box legend img {
	margin-right: 10px;
}


div.input-box textarea.input-text {
	padding: 3px;
	width: 460px;
	height: 5em;
	border: 1px solid #d6d6d6;
}


div.input-box input.input-text {
	padding: 3px;
	width: 340px;
	border: 1px solid #d6d6d6;
}


div.input-box input.input-s { width: 64px; }
div.input-box input.input-m { width: 82px; }
div.input-box input.input-l { width: 152px; }


div.input-box label,
div.input-box span.sub-text {
	padding: 0 10px;
	font-size: 116%;
	vertical-align: baseline;
}


div.input-box label.first-item,
div.input-box span.first-item {
	padding: 0 10px 0 0;
}


div.input-box span.input-note {
	display: block;
	margin-top: 10px;
}




/*
===== 4: Block Elements ===========================*/

ul.note {
	margin-top: 15px;
}


ul.note li {
	padding-left: 1em;
	font-size: 71%;
	text-indent: -1em;
}

html:not(:target) ul.note li { font-size: 86%; } /* for IE 86% font-size bug */


dl.case {
	margin: 15px 20px;
}


dl.case dt,
dl.case dd {
	margin: 0 0 10px;
	padding-left: 10px;
}


dl.case dt {
	background: url(../img/icon_arrow_right.gif) left center no-repeat;
	font-weight: bold;
}


dl.case dd { margin-bottom: 20px; }



p.note {
	margin: 1em 0 0;
	padding-left: 1em;
	text-indent: -1em;
}


p.button {
	text-align: center;
}

p.button span {
	display: block;
	padding-top: 8px;
	color: #5994d4;
	font-size: 95%;
}

p#lead-btn {
	margin-bottom: 20px;
	padding: 17px 0 10px 0;
	background: #ececec;
	width: 920px;
}

p.button img,
p.button input {
	margin: 0 4px;
}


p.invite {
	margin-bottom: 1em;
	padding: 1em;
	border: 1px solid #1582c5;
}


p.btn-forget {
	margin-top: 15px;
}


/*--- sp-char ---*/

p.sp-char {
	position: absolute;
	top: 16px;
	right: 16px;
	padding: 5px;
	background: #f8f8f8;
	font-size: smaller;
	border: 1px solid #0088d2;
}


div#sp-char { display: none; }
#TB_ajaxContent p.sp-char-window { padding: 45px 0 0; }


/* error-area
--------------------*/

ul.error-area {
	margin: 0 0 15px;
	padding: 16px 15px;
	width: 680px;
	background: #f8f8f8;
	color: #ff0000;
	border: 1px solid #d9d9d9;
}


ul.error-area li {
	font-weight: bold;
	line-height: 1.7;
}



/* input-box
--------------------*/

div.input-box,
div.inquiry-box {
	margin: 15px 0;
	padding: 16px 14px;
	border: 1px solid #d9d9d9;
}


div.input-box table {
	width: 680px;
	border-top: 1px solid #d9d9d9;
}


div.input-box th,
div.input-box td {
	padding: 15px 10px;
	width: 167px;
	border-bottom: 1px solid #d9d9d9;
}


div.input-box th {
	font-weight: bold;
}


div.input-box td {
	padding: 15px;
	background: #f8f8f8;
	width: auto;
}


div.input-box strong.note { font-weight: normal; line-height: 2; }


div.input-box th img.icon {
	float: right;
	margin: 0;
}


div.input-box ul.floating-list li {
	float: left;
	padding: 2px 10px 2px 0;
	white-space: nowrap;
}
div.input-box ul.mailing { width: 50%; }
div.input-box ul.mailing li.not-wish { float: right; }


div.input-box dl.inquiry-content dt {
	padding: 15px 0;
}


div.input-box dl.inquiry-content dd {
	padding: 10px;
	background: #f8f8f8;
	border: 1px solid #d9d9d9;
	border-width: 1px 0;
}


div.input-box dl.inquiry-content textarea {
	width: 652px;
}


/* inquiry-box
--------------------*/

div.inquiry-box table {
	width: 680px;
	border-top: 1px solid #d9d9d9;
}


div.inquiry-box th,
div.inquiry-box td {
	padding: 10px 0;
	background: url(../img/line_vertical.gif) left 10px no-repeat;
	vertical-align: top;
	border-bottom: 1px solid #d9d9d9;
}


div.inquiry-box th {
	width: 124px;
	background: none;
}


div.inquiry-box td span.inquiry-cell {
	display: block;
	margin: 0 10px;
	padding: 0 10px;
	border: 1px solid #d9d9d9;
	border-width: 0 1px;
}


div.inquiry-box td span.title-text {
	display: block;
	clear: left;
	float: left;
	width: 65px;
}


div.inquiry-box td img {
	padding-bottom: 5px;
}


/* login sub */

ul.login-sub {
	margin: 0 0 -20px 202px;
}


ul.login-sub li {
	margin: 10px 0 0;
}


ul.login-sub label {
	font-size: 100%;
}


/* confirm-box
--------------------*/

div.confirm-box table {
    table-layout: fixed;
}

div.confirm-box td,
td.confirm-box {
	font-size: 116%;
	line-height: 1.7;
	word-wrap:break-word;
}


/* change-item */

table.change-item th,
table.change-item td {
	padding: 8px 10px;
}


table.change-item thead th,
table.change-item td {
	background: url(../img/line_dotted_gray_v.gif) repeat-y;
	text-align: center;
}


table.change-item thead th.line-head {
	background: none;
	text-align: left;
}


table.change-item td {
	background-color: #f8f8f8;
}


table.change-item td.new {
	background-color: #e0f4ff;
}


/* for selectable.js
--------------------*/

div.sBox.flexible,
a.sctble_display.flexible span {
	width: 316px !important;
}
div.sBox.flexible a { border-left: none; }



/* list-select
--------------------*/

ul.list-select {
	margin: 15px 0;
	border-top: 1px solid #d9d9d9;
}


ul.list-select li {
	text-align: center;
	border: 1px solid #d9d9d9;
	border-top: 0;
}


ul.list-select a {
	display: block;
	padding: 24px 0;
	width: 100%;
	background: url(../../user/img/bg_btn_select.gif) 2px no-repeat;
}


ul.list-select a:hover {
	background-color: #f2f2f2;
}





/*
===== 5: Terms Page ===========================*/

div#terms-box {
	padding: 10px;
	height: 300px;
	overflow: auto;
	border: 1px solid #d9d9d9;
}


h1#terms-hl {
	color: #426bba;
	font-weight: bold;
	line-height: 18px;
}


div#terms h2 {
	margin: 2em 0 1em;
	font-weight: bold;
}
div#terms-box h2.terms-head { margin-top: 0; text-align: center; }


div#terms div.input-box {
	border-color: #426bba;
}


div#terms p,
div#terms ol {
	margin-bottom: 1.4em;
}





/*
===== 6: Remind Page ===========================*/

div#content.remind { background: url(../img/bg_form_s.gif) center 10px no-repeat; }


div#content.remind div.page {
	text-align: center;
	padding: 10px 15px 20px 15px;
	width: 960px;
}


div#content.remind div.main,
div#content.remind div.page h1 {
	float: none;
	width: 700px;
	margin: 0 auto;
	text-align: left;
}
div#content.remind div.page h1 { margin-bottom: 20px; }


div#content.remind div.main div {
	position: relative;
	background: url(../../user/img/bg_created.gif) left bottom no-repeat;
	width: 700px;
	margin: 0 auto 40px;
}


div#content.remind div.page h2 { margin: 0; }
div#content.remind div.page p.button { padding: 15px 0; }


div#content.remind div.main dl {
	margin: 0 2px;
	padding: 10px 15px;
	width: 666px;
	background: #ffffff;
}


div#content.remind div.main dd {
	margin: 5px 0 20px;
	font-size: 85%;
	letter-spacing: 1px;
	text-indent: 20px;
}


div#content.remind div.main dt input {
	margin-right: 8px;
}





/*
===== 7: ID/PW Page ===========================*/

.idpw-box {
	width: 920px;
	background: url(../../user/img/bg_identity_info.gif) 0 bottom repeat-y;
	text-align: center;
}
#login-box {
	margin-bottom: 15px;
	padding-bottom: 35px;
	background-image: url(../../user/img/bg_identity_login.jpg);
	background-repeat: no-repeat;
}

.idpw-box h1,
.idpw-box h2 { margin-bottom: 25px; }


#login-box input { margin-bottom: 10px; padding: 3px 0; width: 485px; border: 1px solid #bcc6d8; }
#login-box input.left  { margin-bottom: 10px; padding: 3px 0; width: 240px; border: 1px solid #bcc6d8; padding-left : 0px; }
#login-box input.right { margin-bottom: 10px; padding: 3px 0; width: 240px; border: 1px solid #bcc6d8; padding-right : 0px; }
#login-box input.btn { margin-bottom: 20px; padding: 0; border: 0; }
#login-box input.checkbox { padding: 0; width: auto; border: 0; }
#login-box p#remind a {
	padding-left: 20px;
	background: url(../../user/img/icon_key.gif) 0 0 no-repeat;
	font-weight: bold;
}


#info-box p { margin-bottom: 25px; }
#info-box p.button { margin-bottom: 10px; }
.baloon {
	margin: 0 0 60px 217px;
	/margin: 0 0 60px;
	padding: 30px 0 0;
	width: 485px;
	background: url(../../user/img/bg_info_baloon.gif) 0 0 no-repeat;
	color: #5994d4;
	text-align: left;
}
#info-box .baloon p {
	margin: 0;
	padding: 0 15px 15px;
	background: url(../../user/img/bg_info_baloon.gif) 0 bottom no-repeat;
}

@media screen and (max-device-width: 480px) {
#info-box .baloon p {font-size: 7px;}
}


p#go-sample { font-weight: bold; text-align: center; }
#info-box .baloon p#go-sample { padding: 20px 15px 30px; }

dl.info-sample {
	margin: 0 0 30px 25px;
	width: 870px;
	background: url(../../user/img/bg_info_box_top.gif) 0 0 no-repeat;
	text-align: left;
}
dl.info-sample dt { padding: 8px 0 15px 20px; }
dl.info-sample dd {
	position: relative;
	padding: 20px 10px 10px 20px;
	background: url(../../user/img/bg_info_box.gif) 0 bottom no-repeat;
	/zoom : 1;
}
dl.info-sample dd:after { content : ''; display : block; clear : both; }
dl.info-sample dd img {
	position: relative;
	float: right;
	top: -35px;
	margin-bottom: -33px;
	padding-left: 30px;
}


/*
===== 8: sample Page ===========================*/

div.lead-box {
	margin: 25px 0 30px;
}

div.lead-box {
	padding-left: 443px;
	min-height: 239px;
	background: url(../../library/docs/img/bg_lead.jpg) no-repeat left top;
	line-height: 1.8;
}

div.sample-box {
	width: 920px;
	margin-bottom: 20px;
	background: url(../../library/docs/img/bg_samplebox.gif) 0 bottom repeat-y;
	line-height: 1.8;
}

div.sample-box02 {
	width: 920px;
	margin-bottom: 20px;
	background: url(../../library/docs/img/bg_samplebox02.gif) 0 bottom repeat-y;
	line-height: 1.8;
}

div.sample-box p.button {
	padding: 20px 0;
}

div.sample-box02 p.button {
	padding: 1px 0;
}

div.sample-wrap {
	margin-bottom: 25px;
	padding: 0 30px;
}

div.sample-wrap p {
	margin-bottom: 25px;
}

div.txt-s {
	float: left;
	width: 269px;
	margin-right: 30px;
	_margin-right: 28px;
	background: url(../../library/docs/img/bg_txtbox_s_bottom.gif) no-repeat left bottom;
}

div.txt-s-inner {
	padding: 20px;
	background: url(../../library/docs/img/bg_txtbox_s_top.gif) no-repeat left top;
}

div.txt-m {
	float: left;
	width: 348px;
	margin-right: 20px;
	_margin-right: 18px;
	background: url(../../library/docs/img/bg_txtbox_m_bottom.gif) no-repeat left bottom;
}

div.txt-m-inner {
	padding: 20px;
	background: url(../../library/docs/img/bg_txtbox_m_top.gif) no-repeat left top;
}

div.txt-l {
	width:478px;
	background: url(../../library/docs/img/bg_txtbox_l_bottom.gif) no-repeat left bottom;
}

div.txt-l-inner {
	padding: 18px;
	background: url(../../library/docs/img/bg_txtbox_l_top.gif) no-repeat left top;
}

span.txt-info {
	color: #0e78c0;
	font-weight: bold;
}

dl.neurology-tit dt,
dl.neurology-tit dd {
	color: #d31168;
	font-weight: bold;
}

dl.mental-tit dt,
dl.mental-tit dd {
	color: #023588;
	font-weight: bold;
}

dl.gastro-tit dt,
dl.gastro-tit dd {
	color: #ea7274;
	font-weight: bold;
}

dl.heart-tit dt,
dl.heart-tit dd {
	color: #0388d3;
	font-weight: bold;
}

dl.blood-tit dt,
dl.blood-tit dd {
	color: #740971;
	font-weight: bold;
}

dl.news-tit dt {
	float: left;
	width: 110px;
}

dl.doc-name {
	margin-bottom: 15px;
}

dl.doc-name dt,
dl.doc-name dd {
	font-weight: bold;
	letter-spacing: -0.1em;
}

dl.doc-name dl dd {
	text-align: right;
}

/*===========================================
	09. clearfix hack
=============================================*/

/*===== 1: clearfix hack ===========================*/

.clear:after {
	content: ".";
	display: block;
	clear: both;
	height: 0;
	visibility: hidden;
}

.clear{
	display: inline-block;
}

/*===== 2: cIE hack (except macIE) ===========================*/

/* Hides from IE-mac \*/

* html .clear {
	height: 1%;
}

.clear{
	display: block;
}

/* End hide from IE-mac */