.page-head {margin-bottom: 15px;}
.page-head .phn .phn-nav ul {margin-bottom:0;border: none;}

.object-field {
	margin-bottom: 30px;
	padding: 0 10px;
}
.object-field .charge-head {margin-bottom: 10px;}
.object-field .charge-head h3 {
	margin-bottom: 5px;
	font-size: 24px;
	border-bottom: 2px solid currentColor;
}
.object-field .charge-summary {
	font-size: 14px;
	opacity: 0.75;
}
.object-field .charge-foot .charge-summary {
	width: 85%;
	margin: auto;
	padding: 10px 15px;
	border-radius: 5px;
	text-align: center;
	border: 1px dashed currentColor;
	/*opacity: 0.5;*/
}
body#white-base .object-field .charge-summary p {color: #000;}
body#black-base .object-field .charge-summary p {color: #fff;}

.object-field .charge-body .charge-summary {
	width: 100%;
	margin-top: -3px;
	background: none;
}
.object-field .charge-body,
.object-field .charge-body dd {display: flex;}
.object-field .charge-body {
	margin-bottom: 20px;
	padding: 0 10px;
	flex-wrap: wrap;
}
.object-field .charge-body .charge-body-name {
	width: 100%;
	margin: 0 0 7px -10px;
	padding-left: 5px;
	font-size: 18px;
	font-weight: bold;
	font-family: 游ゴシック , sans-serif;
	border-left: 4px solid currentColor;
}
.object-field .charge-body .charge-area {
	width: 100%;
	align-self: flex-start;
	
}

.object-field.basic-charge dl.charge-body dd {
	padding: 0 5px;
	font-size: 14px;
	background: none !important;
}

.credit-charge .credit-use {
	margin-bottom: 10px;
	font-size: 14px;
}
.credit-charge .credit-list {
	padding-top: 10px;
	border: 1px solid rgba(153,153,153,0.3);
}
.credit-charge .credit-list li {
	width: 80px;
	margin-bottom: 10px;
	text-align: center;
	font-size: 12px;
	font-family: 'arial','Helvetica', sans-serif;
	
}
.credit-charge .credit-list .credit-off {
	color: #999;
	filter: grayscale(100%) brightness(130%);
	opacity: 0.3;
}

.credit-charge .credit-list li img {width: 40px;}

.transport-charge .charge-body {align-items: stretch;}
.transport-charge .charge-body dd {
	width: calc(100% / 3 - 10px);
	margin-bottom: 10px;
	padding: 5px 8px;
	display: block;
}
.transport-charge .charge-body .charge-price {
	width: 100%;
	margin-bottom: 4px;
	padding-bottom: 3px;
	text-align: center;
	border-bottom: 1px dotted #999;
}

#guide-field .morebtn {text-align: center;}
#guide-field .morebtn a {width: 20%; display: inline-block;}

/* black & white */
#black-base.black-label .basic-charge .cs-d-color ,
#black-base.white-label .basic-charge .cs-d-color {color: #999;}
#white-base.black-label .basic-charge .cs-d-color,
#white-base.white-label .basic-charge .cs-d-color {color: #777;}

@media screen and (min-width: 1500px) {
	.service-charge ,
	#main-column .object-field.oddlast {width: 100%;}
	.course-field ,
	.more-field {display: flex; flex-wrap: wrap;}
	
	.course-field .object-field ,
	.more-field .object-field {width: 50%;}
}

@media screen and (min-width: 769px){
	.object-field {height: auto !important;}
	.object-field .charge-body dd:not(:last-child) {margin-right: 10px;}
	#black-base .charge-body dd:not(.charge-summary) {background: rgba(153,153,153,0.35);}
	#white-base .charge-body dd:not(.charge-summary) {background: rgba(153,153,153,0.2);}
	.object-field:not(.transport-charge) .charge-body dd {
		height: 30px;
		margin-bottom: 5px;
		padding: 0 8px;
		line-height: 30px;
	}
	.object-field:not(.transport-charge) .charge-body .charge-price:before {
		content: ':';
		margin: 0 5px;
	}
	.credit-charge .credit-list li:not(:last-child){margin-right: 10px;}
}/* pc-tb */

@media screen and (max-width: 768px) {
	.object-field .charge-head h3 {
		padding: 0 30px 0.5em 0;
		font-size: 16px;
		line-height: 1em;
		position: relative;
	}
	.object-field .charge-head h3:after {
		content: '\e96a';
		font-family: 'h-ico';
		width: 30px;
		color: #999;
		display: block;
		position: absolute;
		bottom: 10px;
		right: 0;
		transform: rotate(-90deg);
		cursor: pointer;
	}
	.object-field .charge-head h3.close:after {bottom: 0; transform: rotate(90deg);}
	.object-field {transition: 0.2s;}
	.object-field.close {overflow: hidden;}
	
	
	.object-field .charge-body {font-size: 14px;}
	.object-field .charge-body dd {width: 100%;}
	.object-field .charge-body dd:not(.charge-summary) p {
		padding: 3px 5px;
		line-height: 1.3;
	}
	.object-field:not(.basic-charge) .charge-body dd:not(.charge-summary) .charge-title {background: linear-gradient(to right , rgba(153,153,153,0.15) ,transparent);}
	.object-field:not(.transport-charge) .charge-body dd .charge-title {width: 65%;}
	.object-field:not(.transport-charge) .charge-body dd .charge-price {width: 45%;}
	.credit-charge .credit-list {justify-content: center;}
	.credit-charge .credit-list li {width: calc(100% / 3);}
	
	#black-base .object-field:not(.transport-charge) dd:not(.charge-summary) .charge-title {
		border-bottom: 1px solid rgba(153,153,153,0.35);
		border-left: 1px solid rgba(153,153,153,0.35);
	}
	#black-base .object-field:not(.transport-charge) dd:first-child .charge-title ,
	#black-base .object-field:not(.transport-charge) dt + dd .charge-title {border-top: 1px solid rgba(153,153,153,0.35);}
	#black-base .object-field:not(.transport-charge) .charge-price {
		border-bottom: 1px solid #222;
	}
	#black-base .object-field:not(.transport-charge) dd:last-child .charge-price {border-bottom: none;}
	
	#black-base .object-field:not(.transport-charge) .charge-price {background: rgba(153,153,153,0.35);}
	#white-base .object-field:not(.transport-charge) .charge-price {background: rgba(153,153,153,0.2);}
	.object-field .charge-summary {width: 100%; line-height: 1.3em;}
	.object-field .charge-body .charge-summary {margin-top: 3px;}
	.object-field:not(.transport-charge) .charge-body .charge-summary .charge-title {width: 100%;}
	.transport-charge .charge-body {padding: 0; justify-content: space-between;}
	.transport-charge .charge-body dd {width: calc(99% / 2);}
	#black-base .transport-charge .charge-body dd {background: rgba(153,153,153,0.35);}
	#white-base .transport-charge .charge-body dd {background: rgba(153,153,153,0.2);}
	.transport-charge .charge-body .charge-area {font-size: 14px;}
	.transport-charge .charge-body .charge-area li {
		line-height: 1.3em;
		margin-bottom: 0.4em;
	}
	.basic-charge dl.charge-body {padding: 0;}
	.object-field.basic-charge dl.charge-body dd {
		min-width: -webkit-max-content;
		min-width: -moz-max-content;
		min-width: max-content;
		max-width: -webkit-max-content;
		max-width: -moz-max-content;
		max-width: max-content;
	}
	.object-field.basic-charge dl.charge-body dd p {
		width: auto !important;
		border: none !important;
		opacity: 0.8;
	}
	.xs .charge-head h3 {cursor: pointer;}
	.page-head .phn .phn-nav li {
		font-size: 11px;
		font-weight: bold;
	}
}/* sp */



#system_base p {display: none;}
#system_base ul {
  display: flex;
  flex-wrap: wrap;
}
#system_base ul li {
  margin: 0 8px 5px 0;
  padding: 5px;
}
#system_base .extx {
  padding: 5px 5px 0;
  font-size: 12px;
}

.basic-charge h4 {
  margin: 20px 0 0;
  padding: 0 8px;
  border-left: 4px solid currentColor;
  text-align: left;
  font-size: 16px;
}
.system-layout {
  margin: 0 0 10px;
  display: flex;
  align-items: end;
  flex-wrap: wrap;
}
.system-layout .pd {
  width: 240px;
  margin: 3px 7px;
  padding: 5px;
  border-bottom: 1px solid rgba(150,150,150,0.3);
}
.system-layout .pd.spl {
  width: 100%;
  /*font-size: 12px;*/
}
.system-layout .pd .x1 .bftext {
  display: block;
  float: left;
}
.system-layout .pd .ps {
  display: flex;
  float: right;
  align-items: center;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 16px;
  font-weight: bold;
}
.system-layout .pd .ps .minute {
  width: 70px;
  text-align: right;
  font-weight: normal;
}
.system-layout .pd .ps .minute::after {
  content: "：";
  font-weight: normal;
}
.system-layout .pd .ps .price {
  min-width: 75px;
  padding: 0 0 0 5px;
  text-align: right;
}
.system-layout .pd .memo {
  padding: 3px 0 0;
  clear: both;
  text-align: right;
  font-size: 11px;
  /*color: rgba(150,150,150,0.7);*/
}
body#white-base .system-layout .pd .memo {color: #000;}
body#black-base .system-layout .pd .memo {color: #fff;}

@media screen and (min-width: 1500px) {
  .system-layout .pd {width: calc(50% - 15px);}
}
@media screen and (max-width: 768px) {
  .system-layout .pd {width: calc(50% - 15px);}
}
@media screen and (max-width: 450px) {
  .system-layout .pd {width: calc(100% - 15px);}
}