@charset "UTF-8";

/* a name 関連                                            */
#main-box a.name{
	font   : 1px/1px sans-serif;
	height : 1px;
}


/*　fee index　*/

		#main-box .feeCelect h2{
			background:none;
			font-size:1.8rem;
			margin:0;
			padding:10px 0;
		}
		.feeCelect{
			margin-top:20px;
		}
		.feeCelect h2 span{
			display:inline-block;
			margin-left:10px;
			font-size:1rem;
		}
		.feeCelect .box{
			border-top:5px solid #cc0000;
			border-left:1px solid #cccccc;
			border-right:1px solid #cccccc;
			border-bottom:1px solid #cccccc;
			border-radius:3px;
			box-sizing:border-box;
			background:rgba(204,204,204,0.1) no-repeat;
			padding:10px 20px 20px;
		}
			.feeCelect .box:nth-child(1){
				background-image:url(../img/fee/bg_country.png);
				background-position:right 10px top 6px;
				background-size:20%;
			}
			.feeCelect .box:nth-child(2){
				background-image:url(../img/fee/bg_foreign_countries.png);
				background-size:25%;
				background-position:right 10px top 0px;
			}
		.feeCelect .box span.btn{
			display:block;
			border:1px solid rgba(153,153,153,0.8);
			background:rgba(255,255,255,0.7);
			border-radius:5px;
			width:100%;
			margin:10px 0;
			padding:10px 20px;
			box-sizing:border-box;
		}
			.feeCelect .box span.btn.sp{
				display:none;
			}
		.feeCelect .box span.btn img{
			width:100%;
		}
		
		.feeCelect .box span.priceList{
			display:block;
		}
			.feeCelect .box span.priceList:before{
				font-family:"jpsmt";
				color:#cc0000;
				margin-right:4px;
				font-weight:bold;
			}
				.feeCelect .box:nth-child(1) span.priceList:before{
					content:"\32";
				}
				.feeCelect .box:nth-child(2) span.priceList:before{
					content:"\69";
					font-size:1.1rem;
				}
		
		
		@media screen and (max-width: 640px) {
			#main-box .feeCelect h2{
				border:none;
				margin:0;
				color:#333333;
			}
			#main-box .feeCelect h2:before{
				content:"";
			}
			.feeCelect .box{
				margin-bottom:20px;
				padding:10px 10px 20px;
			}
			.feeCelect .box span.btn{
				padding:10px 4px;
			}
				.feeCelect .box span.btn.sp{
					display:block;
				}
				.feeCelect .box span.btn.pc{
					display:none;
				}
		}



/*　fee simulator index　*/

		.divLink{
			margin-bottom:10px;
		}
			.divLink1clm{
				margin-top:20px;
				border:#BFBFBF 1px solid;
				position:relative;
				padding:0 15px;
			}
			.divLink .link{
				width:441px;
				border:#BFBFBF 1px solid;
				border-radius:3px;
				/* box-shadow */
				box-shadow:rgb(240, 240, 240) 2px 2px 0px 0px;
				-webkit-box-shadow:rgb(240, 240, 240) 2px 2px 0px 0px;
				-moz-box-shadow:rgb(240, 240, 240) 2px 2px 0px 0px;
				padding:0 15px;
				position:relative;
				transition:0.5s;
			}
				.divLink .link:nth-of-type(1){
					margin-top:10px;
				}
			.divLink .link:hover,
			.divLink1clm:hover{
				background:#FFEDED;
			}
			.divLink .link .service strong{
				color: #1E4EA6;
				text-decoration: underline;
			}
		
			.divLink .link a.box,
			.divLink1clm a.box{
				display: block;
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
				text-indent: -999px;
				background/*\**/: #fff\9; /*IE7、8用ハック*/
				filter:alpha(opacity=0); /*フィルターで透明に*/
			}
		
			.divLink .link .service span{
				color:#4B4B4B;
				text-decoration:none;
			}
			.divLink span.sp{
				display:none;
			}

		@media screen and (max-width: 640px) {
			.divLink .link{
				width:100%;
			}
			.divLink span.pc{
				display:none;
			}
			.divLink span.sp{
				display:block;
			}
		}



/*　youpack_choice　*/

div.youpackCoice{
	position:relative;
}

div.youpackCoice dl{
	display:inline-block;
	vertical-align:top;
	width:49%;
	border:1px solid rgba(204,204,204,1);
	border-radius:3px;
	margin-top:0;
	font-weight:bold;
	box-sizing:border-box;
	box-shadow:rgb(240, 240, 240) 2px 2px 0px 0px;
	transition:0.5s;
}
	
	div.youpackCoice dl.standard{
		width:99%;
	}
	div.youpackCoice dl:nth-child(2n){
		margin-right:1%;
	}
	div.youpackCoice dl dd a:nth-child(1){
		color:#333333;
	}
	
	
div.youpackCoice dl dt{
	display:inline-block;
	vertical-align:top;
	width:110px;
	padding:1rem;
	box-sizing:border-box;
}
	div.youpackCoice dl dt img{
		width:100%;
	}
div.youpackCoice dl dd{
	display:inline-block;
	vertical-align:top;
	width:350px;
	margin:0;
	padding:1rem 1rem 1rem 0;
	box-sizing:border-box;
}
	div.youpackCoice dl.standard dd{
		width:820px;
	}
	

div.youpackCoice dl small{
	display:block;
	font-weight:normal;
}
div.youpackCoice dl em{
	display:block;
	
}

#main-box .toolTip p{
	font-size:100%;
	font-weight:normal;
}
.toolTip{
	z-index:999;
}


@media screen and (max-width: 640px) {
	div.youpackCoice dl{
		display:block;
		width:100%;
		margin-bottom:0.8rem;
	}
	div.youpackCoice dl.standard{
		width:100%;
	}
	div.youpackCoice dl:nth-child(2n){
		margin-right:0%;
	}

	div.youpackCoice dl dt{
		width:28%;
	}
	div.youpackCoice dl dd{
		width:70%;
	}
		div.youpackCoice dl.standard dd{
			width:70%;
		}
	a.clickToolTip{
		display:block !important;
		width:30%;
		text-align:center;
	}
}





/* 特殊 box                                            */
div.box.bl1-tn {
	border-color : #CCCCCC;
	border-width : 1px;
	border-style : none solid solid;
}
body.wide1200 div.index-d_box {
	background: url("/img/fee/simulator/ind_d_box_lower.gif") repeat-x 0 100%;
}
body.wide1200 div.index-d_box.solo {
	background-repeat: no-repeat;
}
body.wide1200 div.index-d_box div.inner {
	background: url("/img/fee/simulator/ind_d_box_upper.gif") repeat-x 0 0;
}
body.wide1200 div.index-d_box.solo,
body.wide1200 div.index-d_box.solo div.inner {
	background-repeat: no-repeat;
}

/* マージン制御                                           */
#main-box table.layout td.mkr-popup {
	padding-left: 10px;
}
#main-box *.sp-h0{
	padding-left : 0 !important;
	padding-right: 0 !important;
}

#main-box p.info-popup span.mkr-popup{
	padding-bottom: 10px;
	font-size: 85.75%;
}

#main-box div.foot-navi {
	border-top: 1px dotted #C3C3C3;
	padding-top: 1em;
	text-align: center;
}
/* safari only                                           \*/
html:\66irst-child #main-box div.foot-navi {
	border-top: 1px dotted #C3C3C3;
	padding: 1em 0;
	text-align: center;
}
/* end */

#main-box div.foot-navi span.partition{
	padding: 0 1em;
}

#main-box div.price-upper div.arrange-r{
	margin-top: 10px;
}

#main-box div.index-z {
	width: 680px;
}
#main-box div.index-z h3.box{
	background: none #F5F4E8;
	margin: 30px 0 0;
	padding: 12px 12px 8px;
	border-width: 1px;
	border-style: solid solid none;
	border-color: #CCCCCC;
	font-size: 100%;
	margin: 15px 0 0 0;
}
#main-box div.index-z div.box.bl1{
	margin : 0;
	padding: 0;
	border : 1px solid #C4C3C3;
	width: 333px;
}
#main-box div.index-z div.box.bl1 div.inner{
	margin : 0;
	padding: 0 15px;
}
#main-box div.index-z div.box.bl1 img{
	margin : 10px 0 0 0;
}

#main-box table.layout.type1 td{
	padding-right : 5px;
}

#main-box input.num{
	width: 70px;
}


/* 荷物の種類を選択                                       */
#main-box div.choice h2.choice{
	margin : 15px 0 0;
	padding: 0 4px 15px;
	background: none;
	background-color: #F8F7EF;
	border-bottom: 1px dotted #CCCCCC;
	font-size: 100%;
}
#main-box div.choice div.pad{
	border: none;
	margin : 0;
	padding: 20px 15px;
}
#main-box div.choice div.part{
	margin-top : 10px;
}

/* トップ > 料金を計算する > 国内の料金表 > 荷物          */
#main-box div.size-distinction{
	width: 680px;
}
#main-box div.size-distinction div.col2-l{
	width: 395px;
}
#main-box div.size-distinction div.col2-r{
	width: 305px;
	text-align: center;
}
#main-box div.size-distinction div.col2-r table.layout{
	margin: 0 auto;
}
#main-box div.size-distinction div.col2-r table.layout td{
	text-align: left;
}
#main-box table.layout.sp-fare td.cel2{
	padding: 0.18em 0 0 10px;
}


/* [定ボ] エラー表示 (個別)1200 2015/04/03追記 */

#main-box div.err-item1200{
	color: #FFFFFF;
	background: #C7000E url("/img/common/err_balloon_1200.gif") no-repeat 0 100%;
	margin: 10px 0 5px;
	padding: 5px 10px 12px;
	font-weight: bold;
	font-size: medium;
}
#main-box div.err-item1200 p {
	margin: 0;
	font-size: 87.5%;
}





/*　後納ポストイン　*/

ul.postin{
	text-align:center;
}
ul.postin li{
	display:inline-block;
	vertical-align:text-top;
	padding:0 10px;
	border-right:3px dotted #e60012;
}
	ul.postin li:nth-last-child(1){
		border-right:none;
	}

		@media screen and (max-width: 640px) {
			ul.postin li{
				display:block;
				border-right:none;
				padding:10px 0;
				border-bottom:3px dotted #e60012;
			}
				ul.postin li:nth-last-child(1){
					border-bottom:none;
				}
		}


/* --- fee result --- */

/* accordion */

.price-upper .detail {
	max-width: 100%;
	margin: 10px auto;
	padding: 0;
	border-radius:3px;
}

.price-upper label {
	display: block;
	position:relative;
	padding :10px;
	line-height: 1;
	color :#cc0000;
	cursor :pointer;
	-webkit-transition: all 0.5s;
	-moz-transition: all 0.5s;
	-ms-transition: all 0.5s;
	-o-transition: all 0.5s;
	transition: all 0.5s;
}
	.price-upper label:hover{
		background:#FFF;
	}
	.price-upper label:before{
		content:"＋";
		background:#FFF;
		border:1px solid #FFF; border-radius:15px;
		font-size:19px;
		margin:0 0.3em 0 0 ;
		position:relative; top:1px;
		font-weight:bold;
		text-decoration: none;
		display:inline-block;
		padding:3px;
		line-height:1;
		border:1px solid #CC0000;
	}
	.price-upper #detail_label:checked + label:before{
		content:"－";
	}

.price-upper input {
	display: none;
}

.price-upper .detail #detail_cont {
	max-height: 0;
	overflow-y: hidden;
	opacity: 0;
}

.price-upper #detail_label:checked ~ #detail_cont{
	max-height: none;
	opacity: 1;
	-webkit-transition: all 0.8s;
	-moz-transition: all 0.8s;
	-ms-transition: all 0.8s;
	-o-transition: all 0.8s;
	transition: all 0.8s;
}
	.price-upper #detail_label:checked ~ #detail_cont .inner{
		width:70%;
		margin:8px auto;
	}
.price-upper .detail #detail_cont .inner{
	text-align:left;
}
	.price-upper .detail #detail_cont .inner dl,
	.price-upper .detail #detail_cont .inner dd{
		margin:0;
	}
	.price-upper .detail #detail_cont .inner dl dt{
		font-size:13px;
		font-weight:bold;
		border-bottom:1px solid #A9A29C;
		padding:0.3em 0.5em;
	}
	.price-upper .detail #detail_cont .inner dd .arrange-r{
		font-size:15px;
	}
	.price-upper .detail #detail_cont .inner dl ~ dl{
		margin-top:13px;
	}