@charset "UTF-8";

/* ====================================================== */
/* [当該カテゴリ共通のスタイル] 						  */
/* ====================================================== */

/* 本文部分を2列カラムで表示 */

div.half {
	margin-bottom: 0;
}

/* 点線 */

div.separate {
	margin-top: 15px;
	border-top: 1px dotted #CCCCCC;
	padding:10px 0 0px;
}

div.separate.first-item {
	margin: 0;
	border: none;
}

/* ゆうパック 基本料金表 */

#main-box table.you-charge {
	font-size: 100%;
}

#main-box table.you-charge th {
	padding: 4px;
	font-size: 75%;
}

#main-box table.you-charge td {
	padding: 4px;
	font-size: 75%;
}

#main-box table.you-charge td.area {
	padding: 4px 2px;
	width: 50px;
}

/* ====================================================== */
/* [特定のページ専用のスタイル] 						  */
/* ====================================================== */


/* index ------------------------------------------ */

div.half.size .section{
	text-align:center;
}


ul.tools{
	margin:-12px -12px 0;
	padding:12px 0;
	box-sizing:border-box;
}

ul.tools li{
	display:table;
	border-collapse: separate;
	border-spacing: 4px;
}

ul.tools li a{
	display:table-cell;
	width:40%;
	text-align:center;
	color:rgba(51,51,51,1);
	text-decoration:none;
	font-weight:bold;
	margin-bottom:10px;
	padding-bottom:10px;
	border:2px solid #ce0000;
}

	ul.tools li a span:before{
		display:block;
		margin:-40px -40px;
		transform: scale(0.4,0.4);
		-ms-transform:scale(0.4,0.4);
		-webkit-transform:scale(0.4,0.4);
	}
		ul.tools li:nth-child(1) a span:before{
			content: url("/img/common/resp/icon-05.png");
		}
		ul.tools li:nth-child(2) a span:before{
			content: url("/img/service/you_pack/icon-02.png");
		}
		ul.tools li:nth-child(3) a span:before{
			content: url("/img/common/resp/icon-06.png");
		}

ul.tools li span.txt{
	display:table-cell;
	vertical-align:middle;
	width:60%;
	padding-left:8px;
}

ul.tools li span.title{
	font-size:88%;
}

div.advantageBox{
}
div.advantageBox dl{
	display:block;
	box-sizing:border-box;
	margin-bottom:15px;
}
	div.advantageBox dl dt{
		display:block;
		color:#ce0000;
		font-weight:bold;
		margin-bottom:6px;
	}
	div.advantageBox dl dd{
		display:block;
		width:100%;
		margin:0;
		font-size:0.95rem;
	}


ul.optionService li{
	display:block;
	box-sizing:border-box;
	margin-bottom:20px;
}

ul.optionService li strong.heading{
	display:block;
	margin-bottom:4px;
}
	ul.optionService li strong.heading:before{
		display:inline-block;
		content:url("/img/common/mkr_arrow-r.gif");
		margin-right:4px;
	}
	ul.optionService li span{
		display:block;
		padding-left:1rem;
	}


/* (charge) ------------------------------------- */

.pcLink{
	display:none;
}

/* (charge_ichiran) ------------------------------------- */


/**/

div.feeTable{
	width:100%;
}
div.feeTable table td{
	text-align:right;
}
div.feeTable th.h1{
	pointer-events : none;
	
}
div.feeTable th.h1 small{
	font-weight:normal;
}
div.feeTable th.h1 small strong{
	font-weight:bold;
}

#charge-ichiran div.col2-l {
	width: 300px;
}

#charge-ichiran div.col2-r {
	width: 415px;
}

/*youpack ryokin*/

#feeArea .feeObject{
	height:65vw;
}



.collapsible2 div.areaBox h3{
	border-top:1px solid #ce0000;
}
.collapsible2 div.areaBox:nth-of-type(1) h3{
	border-top:none;
}
.collapsible2 div.areaBox ul.list li{
	border-top:1px dotted #ce0000;
}
.collapsible2 div.areaBox ul.list:nth-of-type(1){
	border-top:none;
}
.collapsible2 div.areaBox .list{
	padding:0px 0;
}

	.collapsible2 .list:before{
		display:none;
		height:0 !important;
		overflow:hidden !important;
	}
	.collapsible2 .list:after{
		display:none;
		height:0 !important;
		overflow:hidden !important;
	}

svg{
	width:100%;
	height:auto !important;
}



/* (index.html) ----------------------------------------- */


p.manual{
	margin-bottom:15px;
}

/* link,nav
---------------------------------------------------------- */

.box.bl2 span.mkr-next{
	position:relative;
	display:block;
	border: 1px solid #C70210;
	border-radius:5px;
}
	.box.bl2 span.mkr-next:after{
		content:"";
		margin-left:0px;
	}
	.box.bl2 span.mkr-next a{
		display:block;
		font-weight:bold;
		font-size:0.8rem;
		color:#333333;
		text-decoration:none;
		padding:8px 20px 8px 8px;
	}
	.box.bl2 span.mkr-next a:after{
		position:absolute;
		font-family: 'jpsmt';
		content: "\3e";
		font-weight:normal;
		color:#ce0000;
		margin-left:2px;
		top:20%;
		right:4px;
	}


.serviceLink{
	padding:20px 0;
	position:relative;
	overflow:hidden;
	margin:0 -12px;
}
	.serviceLink a{
		display:block;
		position:absolute;
		height:100%;
		width:100%;
		top:0;
		left:0;
		color:#333;

	}
	.serviceLink dl{
	}
	.serviceLink dt{
		float:left;
		max-width:65px;
		max-height:65px;
		display:inline-block;
		margin-left:15px;
		vertical-align:middle;
	}
		.serviceLink dt img{
			width:65px;
			height:65px;
		}
		.serviceLink dt.icon{
			font-family: 'jpsmt';
			font-weight:normal;
			font-size:65px;
			color:#ce0000;
			vertical-align:top;
			position:relative;
		}
			.serviceLink dt.icon span{
				text-indent:100%;
				white-space:block;
				overflow:hidden;
				position:absolute;
				top:5em;
			}
			.serviceLink dt.icon-chilled:before{
				content: "\45";
			}
			.serviceLink dt.icon-cd:before{
				content: "\44";
			}
			.serviceLink dt.icon-auction:before{
				content: "\43";
			}
			.serviceLink dt.icon-golf:before{
				content: "\42";
			}
			.serviceLink dt.icon-airpo:before{
				content: "\41";
			}
	.serviceLink dd{
		max-width:70%;
		float:left;
		padding-left:10px;
		vertical-align:middle;
	}
		@media only screen and (orientation:landscape) {
			.serviceLink dd{
				max-width:80%;
			}
		}
	.serviceLink dd p{
		line-height:1.4;
		font-size:14px;
		padding-right:15px;
	}
	.serviceLink dd em{
		font-weight:bold;
	}
	.serviceLink dd:after{
		clear:both;
	}
	.serviceLink:after{
		position:absolute;
		font-family: 'jpsmt';
		content: "\3e";
		font-weight:normal;
		font-size:18px;
		top:45%;
		right:10px;
		color:#ce0000;
	}
	.serviceLink + .serviceLink{
		border-top:#cccccc solid 1px;
	}
	div.serviceLinkBox .serviceLink:nth-last-of-type(1){
		border-bottom:none;
	}


.serviceLink.non{
	padding:0px 0;
}
	.serviceLink.non:after{
		content: "";
	}

.serviceLinkBox.nonIcon .serviceLink dt{
		width:0px;
		margin-left:0px;
	}
.serviceLinkBox.nonIcon .serviceLink dd{
		max-width:92%;
		padding-left:12px;
		vertical-align:top;
		-webkit-margin-start:0;
	}


ul.relationService{
	background:rgba(204,204,204,0.3);
	padding:12px 8px;
	margin:0 -12px;
	border-top:1px solid rgba(204,204,204,1);
	border-bottom:1px solid rgba(204,204,204,1);
}
ul.relationService li{
	position:relative;
	display:block;
	padding:4px 8px;
	border:4px solid rgba(204,204,204,0.3);
	box-sizing:border-box;
	background:rgba(255,255,255,1);
	border-radius:8px;
}
	ul.relationService li strong{
		display:block;
	}

ul.relationService li a{
	position:absolute;
	display:block;
	height:100%;
	width:100%;
	top:0;
	left:0;
}




/* add -------------------------------------------------- */
#main-box table.layout.idx_list{
	border-top: 1px dotted #CCCCCC;
}
#main-box table.layout.idx_list td{
	padding:10px 15px;
}
#main-box table.layout.idx_list td.cel-l{
	border-right: 1px dotted #CCCCCC;
}
#main-box table.layout.idx_list_end{
	border-top: 1px dotted #CCCCCC;
	border-bottom: 1px dotted #CCCCCC;
}
#main-box table.layout.idx_list_end td{
	padding:10px 15px;
}
#main-box table.layout.idx_list_end td.cel-l{
	border-right: 1px dotted #CCCCCC;
}


	#main-box h2.merit_jp1:before {
		content: "メリット 1";
	}
	
	#main-box h2.merit_jp2:before {
		content: "メリット 2";
	}
	
	#main-box h2.merit_jp3:before {
		content: "メリット 3";
	}
	
	#main-box h2.merit_jp4:before {
		content: "メリット 4";}
	
	#main-box h2.merit_jp5:before {
		content: "メリット 5";
	}
	
	#main-box h2.merit_jp6:before {
		content: "メリット 6";
	}
	
	#main-box h2.merit_jp7:before {
		content: "メリット 7";
	}

#main-box h2.merit_en1:before {
	content: "Advantage 1";
}

#main-box h2.merit_en2:before {
	content: "Advantage 2";
}

#main-box h2.merit_en3:before {
	content: "Advantage 3";
}

#main-box h2.merit_en4:before {
	content: "Advantage 4";}

#main-box h2.merit_en5:before {
	content: "Advantage 5";
}

#main-box h2.merit_en6:before {
	content: "Advantage 6";
}

#main-box h2.merit_en7:before {
	content: "Advantage 7";
}



h1#yuPack_en img{
	display:none;
	}
h1#yuPack_en:after{
	content:"Yu-Pack (parcel)";
	}
*.box.bl2.sp-t30{
	margin-top:0 !important;	
}

/* 空港ゆうパック　*/
h1#airport_en img{
	display:none;
	}
h1#airport_en:after{
	content:"Airport Yu-Pack";
	}

/* オークションゆうパック　*/
#main-box h3.auction{
	background:none;
	color:#3e9fda;
	border:1px dotted #3e9fda;
	border-radius:5px;
	padding:8px 10px;
	font-size: 1.2rem;
	margin:8px 0px;
	}
.auctionFlow span{
	display:block;
	margin-bottom:15px;
}


/* youapack メリット*/
#main-box h2[class^="merit"]:before{
	padding:3px 6px;
	font-size:14px;
    color: #FFFFFF;

}