@charset "Shift_JIS";

/* ================================================================================
Import(Don't edit)
================================================================================ */

@import url("reset.css");
@import url("utility.css");




/* ================================================================================
General Style
================================================================================ */

body {
	font: 12px/1.4 "‚l‚r ‚oƒSƒVƒbƒN", "MS PGothic", "ƒqƒ‰ƒMƒmŠpƒS Pro W3", "Hiragino Kaku Gothic Pro", sans-serif;
	color: #333333;
	background: url(../../images/ypc/body/bg.gif);
}

body sup {
line-height:1.4;
}

a:link,
a:visited {
	color:#3385ad;
	text-decoration:underline;
}
a:hover,
a:active {
	color:#3385ad;
	text-decoration:underline;
}




/* ================================================================================
Container
================================================================================ */

#container {
	width: 770px;
	margin: 25px auto 0;
}




/* ================================================================================
Header
================================================================================ */

#header {
	height: 38px;
	background: url(../../images/ypc/header/bg.gif) no-repeat;
}

#header p {
	float: left;
	padding: 0 0 0 15px;
}

#header ul {
	float: right;
	padding: 9px 19px 0 0;
}

#header li {
	float: left;
	padding: 0 0 0 4px;
}

#header #mysb {
	margin         : 9px 0px 0px 18px;
}

/* ================================================================================
Footer
================================================================================ */

#foorter {
	clear: both;
}

#footer dl {
	text-align: center;
	padding: 7px 0 9px 0;
	background: url(../../images/ypc/footer/bg.gif) no-repeat;
}

#footer dt,
#footer dd {
	display: inline;
	font-size: 10px;
	color: #dddddd;
	border-right: #ffffff solid 1px;
	padding: 0 7px 0 7px;
}

#footer dl a {
	color: #ffffff;
}

#footer-corp {
	float: left;
	padding: 9px 0 0 4px;
}

#footer-copy {
	float: right;
	padding: 9px 5px 0 0;
}




/* ================================================================================
Main
================================================================================ */

#main {
	padding: 14px 30px 26px;
	background: #ffffff;
	border-left: #a5a5a6 solid 1px;
	border-right: #a5a5a6 solid 1px;
}



/* Breadcrumb
====================================================================== */

#breadcrumb {
	margin-bottom: 10px;
}

#breadcrumb li {
	display: inline;
	padding: 0 18px 0 0;
}



/* Title
====================================================================== */

h1 {
	clear: both;
	padding: 0 0 8px 0;
	border-bottom: #e5e5e5 solid 1px;
	font-size: 1px;
}



/* Contents
====================================================================== */

#contents {
	position: relative;
	background: #ffffff url(../../images/ypc/content/bg.gif) repeat-y;
	border-bottom: #ffffff solid 1px;
	margin: 34px 0 0 0;
}



/* ===================== Navi ======================= */

#navi {
	float: left;
	width: 185px;
	padding: 3px 0 20px 0;
	background: url(../../images/ypc/navi/bg_top.gif) no-repeat;
}

#navi .partition {
	background: url(../../images/ypc/navi/bg_list_border.gif) left bottom repeat-x;
	margin-bottom: 17px;
	padding: 0 5px 17px;
}

#contents div#navi #user-login-name {
	margin: 0 10px;
	padding: 10px 0 0;
	text-align: center;
	font-weight: bold;
}

#navi #user-login {
	text-align: center;
	padding: 17px 0 0;
}

#navi p#maintenance {
	margin: 0 10px 10px;
}
#navi p#maintenance a {
	text-indent: -9999px;
	outline: none;
	overflow: hidden;
	display: block;
	width: 160px;
	height: 39px;
	background: url(../../images/ypc/navi/bnr_maintenance.gif) no-repeat left center;
}

#navi .nav-link-user-change,
#navi .nav-link-user-setting {
	padding: 0 11px;
}

#navi .nav-link-user-change a,
#navi .nav-link-user-setting a {
	padding: 0 0 0 9px;
	background: url(../../images/ypc/navi/icn_bullet_user.gif) no-repeat 0 4px;
}

#navi .nav-link-user-change {
	text-align: right;
}

#navi .nav-link-user-change a {
	font-weight: bold;
}

#navi .nav-link-user-setting {
	text-align: center;
	margin: 5px 0 0;
}

#navi .nav-link-user-setting a {
	font-size: 10px;
}

#navi #user-tel {
	margin: 13px 10px 0;
	padding: 0 0 0 18px;
	background: url(../../images/ypc/navi/icon_tel.gif) no-repeat left;
}

#navi h2 {
	margin-top: 15px;
	zoom: 1;
}

/* == List Nav ==*/
#navi .list-nav {
	margin: 10px 0 0 5px;
}
#navi ul.list-nav li {
	margin-top: 5px;
	padding-left: 10px;
	background: url(../../images/ypc/navi/icn_bullet_list-nav.gif) no-repeat 0 0.45em;
}
#navi ul.list-nav li span#current {
	display: block;
	margin-right: 10px;
	padding: 2px 3px 1px;
	background-color: #a9d44f;
	color: #ffffff;
	font-weight: bold;
	text-decoration: none;
}

#nav-end {
	position: absolute;
	bottom: -1px;
	width: 185px;
	height: 3px;
	background: url(../../images/ypc/navi/bg_btm.gif) no-repeat bottom;
}



/* ===================== Local ======================= */

#local {
	float: left;
	width: 508px;
	background: #ffffff;
	margin: 0 -2px 0 0;
	padding: 0 0 0 15px;
}

#local h2 {
	font-size: 14px;
	font-weight: bold;
	padding: 0 0 4px 0;
	border-bottom: #e5e5e5 solid 1px;
}
#local h3 {
	margin-top: 25px;
	font-size: 14px;
	font-weight: bold;
	padding: 1px 0 2px 7px;
	border-left: #92ccd9 solid 6px;
}
#local h3.cs {
	margin-top: 25px;
	font-size: 14px;
	font-weight: bold;
	padding: 1px 0 2px 7px;
	border-left: #FFC0CB solid 6px;
}
#local p {
	margin-top: 10px;
}



/* ===== Button ===== */

ul.btn-area {
	width: 508px;
	text-align: center;
}
ul.btn-area-s {
	padding: 0 0 0 139px;
}
ul.btn-area li,
ul.btn-area-s li,
p.btn-area-s, {
	background-color: transparent;
	background-position: center top;
	background-repeat: no-repeat;
}

ul.btn-area li {
	width: 155px;
	margin: 10px auto 0;
}
p.btn-area-s,
ul.btn-area-s li {
	width: 105px;
}
#local p.btn-area-s {
	margin-top: 0;
}
ul.btn-area-s li {
	float: left;
	margin: 10px 20px 0 0;
}


/* Short */

.btn_back_s {
	background-image: url(../../images/ypc/content/btn_back_s_on.gif);
}
.btn_next_s {
	background-image: url(../../images/ypc/content/btn_next_s_on.gif);
}
.btn_setting_s {
	background-image: url(../../images/ypc/content/btn_setting_s_on.gif);
}
.btn_order_s {
	background-image: url(../../images/ypc/content/btn_order_s_on.gif);
}
.btn_cancellation_s {
	background-image: url(../../images/ypc/content/btn_cancellation_s_on.gif);
}
.btn_change_s {
	background-image: url(../../images/ypc/content/btn_change_s_on.gif);
}
.btn_stop_s {
	background-image: url(../../images/ypc/content/btn_stop_s_on.gif);
}
.btn_restart_s {
	background-image: url(../../images/ypc/content/btn_restart_s_on.gif);
}
.btn_entry_s {
	background-image: url(../../images/ypc/content/btn_entry_s_on.gif);
}
.btn_cancel_s {
	background-image: url(../../images/ypc/content/btn_cancel_s_on.gif);
}
.btn_reset_s {
	background-image: url(../../images/ypc/content/btn_reset_s_on.gif);
}
.btn_get_s {
	background-image: url(../../images/ypc/content/btn_get_s_on.gif);
}
.btn_del_s {
	background-image: url(../../images/ypc/content/btn_del_s_on.gif);
}
.btn_on_s {
	background-image: url(../../images/ypc/content/btn_on_s_on.gif);
}
.btn_off_s {
	background-image: url(../../images/ypc/content/btn_off_s_on.gif);
}
.btn_add_s {
	background-image: url(../../images/ypc/content/btn_add_s_on.gif);
}


/* Long */

.btn_back {
	width: 155px;
	background-image: url(../../images/ypc/content/btn_back_on.gif);
}
.btn_next {
	background-image: url(../../images/ypc/content/btn_next_on.gif);
}
.btn_setting {
	background-image: url(../../images/ypc/content/btn_setting_on.gif);
}
.btn_cancellation {
	background-image: url(../../images/ypc/content/btn_cancellation_on.gif);
}
.btn_confirmation {
	background-image: url(../../images/ypc/content/btn_confirmation_on.gif);
}
.btn_ok {
	background-image: url(../../images/ypc/content/btn_ok_on.gif);
}
.btn_entry {
	background-image: url(../../images/ypc/content/btn_entry_on.gif);
}
.btn_change {
	background-image: url(../../images/ypc/content/btn_change_on.gif);
}
.btn_deli-stop {
	background-image: url(../../images/ypc/content/btn_delivery-stop_on.gif);
}
.btn_mysoftbank {
	background-image: url(../../images/ypc/content/btn_mysoftbank_on.gif);
}
.btn_suspend {
	background-image: url(../../images/ypc/content/btn_suspend_on.gif);
}
.btn_restart {
	background-image: url(../../images/ypc/content/btn_restart_on.gif);
}
.btn_del {
	background-image: url(../../images/ypc/content/btn_del_on.gif);
}
.btn_order {
	background-image: url(../../images/ypc/content/btn_order_on.gif);
}


/* ===== Box Gray ===== */

div#contents div.box_gray {
	background: #f7f3f3;
	margin: 20px 0 0 30px;
	padding: 20px 25px;
}
div#contents div.box_gray h4 {
	font-size: 16px;
	font-weight: bold;
}


/* ===== Table ===== */

table.contract-info {
	width: 100%;
	border-collapse: collapse;
	margin: 10px 0 0 0;
	border-bottom: #cccccc solid 1px;
}

table.contract-info th,
table.contract-info td {
	border-top: #cccccc dashed 1px;
	text-align: left;
	vertical-align: middle;
	padding: 13px 10px
}

table.contract-info .first th,
table.contract-info .first td {
	border-top: #cccccc solid 1px;
}

table.contract-info th {
	width: 155px;
	background: #f0f6f6;
	font-weight: bold;
}

table.contract-info td {
	border-left: #cccccc dashed 1px;
	font-weight: normal;
}

table.contract-info td.td-btn {
	text-align: right;
	width: 157px;
	padding-right: 0px;
}
#local table.contract-info td.td-btn p.btn-area-s {
	float: right;
	margin: 0;
}


table.contract-info input.set-price {
	text-align: right;
	width: 2em;
	margin-right: 5px;
}

table.cs-contract-info {
	width: 100%;
	border-collapse: collapse;
	margin: 10px 0 0 0;
	border-bottom: #cccccc solid 1px;
}

table.cs-contract-info th,
table.cs-contract-info td {
	border-top: #cccccc dashed 1px;
	text-align: left;
	vertical-align: middle;
	padding: 13px 10px
}

table.cs-contract-info .first th,
table.cs-contract-info .first td {
	border-top: #cccccc solid 1px;
}

table.cs-contract-info th {
	width: 155px;
	background: #FFC0CB;
	font-weight: bold;
}

table.cs-contract-info td {
	border-left: #cccccc dashed 1px;
	font-weight: normal;
}

table.cs-contract-info td.td-btn {
	text-align: right;
	width: 157px;
	padding-right: 0px;
}
#local table.cs-contract-info td.td-btn p.btn-area-s {
	float: right;
	margin: 0;
}

table.cs-contract-info input.set-price {
	text-align: right;
	width: 2em;
	margin-right: 5px;
}

/* Notes
====================================================================== */

.notes {
	margin: 15px 0 0 0;
	padding: 13px 17px 11px;
	border: #eaedef solid 3px;
}

.notes dt {
	font-size: 14px;
	font-weight: bold;
	padding: 0 0 5px 20px;
	background: url(../../images/ypc/content/icon_notes.gif) no-repeat 0 1px;
}

.notes dd {
	padding: 5px 0 2px 0;
	color: #666666;
}


/* ====== Utility ===== */

.indent1 {
	padding-left: 12px!important;
}

.indent2 {
	padding-left: 16px!important;
}



/* Clear
====================================================================== */

#contents:after,
ul.btn-area-s:after {
	content        : ".";
	height         : 0px;
	clear          : both;
	visibility     : hidden;
	display        : block;
}

#contents,
ul.btn-area-s {
	zoom:100%;
}



/* Judge
====================================================================== */

#agreement-box {
	text-align: center;
	margin: 10px 0 0 0;
	padding: 3px 0;
}

#agreement-box .unchecked {
	background: #ffe2e8;
}

#agreement-box input {
	margin: -2px 5px 0 0;
	padding: 0;
	vertical-align: middle;
}

#defined {
	display: none;
}
