@charset "UTF-8";

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

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

div.half {
	margin-bottom: 0;
}

/* 点線 */

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

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{
	width:250px;
	margin:30px auto 0;
}


ul.tools{
	margin:10px 0;
}

ul.tools li{
	display:inline-block;
	vertical-align:top;
	width:33.33%;
	padding:0 10px;
	box-sizing:border-box;
}
ul.tools li a{
	display:block;
	text-align:center;
	color:rgba(51,51,51,1);
	text-decoration:none;
	font-weight:bold;
	margin-bottom:10px;
}

ul.tools li a span{
	width:60%;
	margin:0 auto;
	padding:10px 0;
	border:2px solid #ce0000;
	border-radius:5px;
	transition:0.5s;
}
	ul.tools li a:hover span{
		background:rgba(255,51,51,0.1);
	}

ul.tools li span{
	display:block;
}
ul.tools li span.txt{
	font-size:87.5%;
}

	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");
		}

div.advantageBox{
}
div.advantageBox dl{
	display:inline-block;
	vertical-align:top;
	width:50%;
	padding:14px 10px 14px;
	margin:0;
	box-sizing:border-box;
	border-top:1px dotted #CCCCCC;
}
	div.advantageBox dl:nth-child(1), div.advantageBox dl:nth-child(2){ 
		border-top:none;
	}
	div.advantageBox dl:nth-child(1){
		width:100%;
	}
		div.advantageBox dl:nth-child(even){ 
			border-left:1px dotted #CCCCCC;
		}
		div.advantageBox dl:nth-child(2){ 
			border-left:none;
		}
	div.advantageBox dl.wide{
		width:100%;
	}
	div.advantageBox dl dt{
		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:inline-block;
	vertical-align:top;
	width:50%;
	padding-right:20px;
	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;
		font-size:0.9rem;
	}


/* (advantage) ------------------------------------------ */

/* メリット1 */

#advantage-index #merit1-upper {
	background: #FFFFFF;
	padding: 1px 13px;
	border-width: 1px;
	border-style: solid solid none;
	border-color: #CCCCCC;
}

#advantage-index #merit1-lower {
	background: #F5F5F5;
	padding: 1px 13px;
	border-width: 1px;
	border-style: none solid solid;
	border-color: #CCCCCC;
}

#advantage-index div.merit1-head {
	width: 492px;
}

#advantage-index div.merit1-head div.col2-l {
	width: 196px;
}

#advantage-index div.merit1-head div.col2-r {
	width: 281px;
}

#advantage-index div.merit1-body {
	padding: 5px 0 15px;
}

#advantage-index div.merit1-body div.inner {
	background: url("/img/service/you_pack/advantage/bg_merit1.gif") repeat-y 50%;
	width: 654px;
}

#advantage-index div.merit1-body div.col2-l {
	width: 301px;
}

#advantage-index div.merit1-body div.col2-r {
	width: 301px;
}

/* メリット2 */

#advantage-index #merit2-upper {
	background: url("/img/service/you_pack/advantage/bg_merit2.gif") repeat-y;
	margin-top: 10px;
}

#advantage-index #merit2-upper div.box {
	background: #FFFFFF;
	padding: 1px 13px;
	border-width: 1px;
	border-style: solid solid none;
	border-color: #CCCCCC;
}

#advantage-index #merit2-lower div.box {
	background: #F5F5F5;
	padding: 1px 13px;
	border-width: 1px;
	border-style: none solid solid;
	border-color: #CCCCCC;
}

#advantage-index div.half div.col2-l {
	width: 336px;
}

#advantage-index div.half div.col2-r {
	width: 336px;
}

/* その他のメリット */

#advantage-index p.signpost {
	margin: 12px 0 -12px;
	text-align: center;
}

#advantage-index p.you-merit {
	margin-top: 20px;
	padding-top: 10px;
	border-top: 1px dotted #CCCCCC;
}
/* (charge) ------------------------------------- */

.spLink{
	display:none;
}

/*youpack ryokin*/

#feeArea{
	position:relative;
	height:650px;
}
#feeArea:after{
	display:block;
	content:"";
}

div.feeObject{
	position:absolute;
	width:800px;
	right:-10px;
	bottom:0px;
	z-index:0;
}
div.feeObject a:hover{
	opacity:0.75;
}

div.feeObject svg{
	height: 100%;
	width: 100%;
}


div.part.custom-select select{
	width:30%;
	font-size:1.15em;
}

div.feeTable table{
	width:49%;
	float:left;
}
div.feeTable table:nth-of-type(2n){
	margin-left:15px;
}
div.feeTable table:nth-of-type(2n+1){
	clear:both;
}
div.feeTable table td{
	text-align:right;
}
div.feeTable:after{
	clear:both;
	display:block;
	content:"";
}

div.feeTable th.h1 small{
	display:block;
	width:100%;
	box-sizing:border-box;
	text-align:left;
	background:#f9f8f1;
	font-weight:normal;
	padding:12px;
	margin-top:6px;
}
div.feeTable th.h1 small strong{
	font-weight:bold;
}
div.feeTable th.h1 small{
	display:none;
}
div.feeTable th.h1 div{
	position:relative;
	cursor:pointer;
}
div.feeTable th.h1 div:after{
	position:absolute;
	font-family: 'jpsmt';
	content: "\2b";
	font-weight:normal;
	right:10px;
	top:0;
	color:#ce0000;
}


.collapsible2{
	position:absolute;
	left:0;
	top:0;
	width:680px;
	z-index:1;
}


.collapsible2 div.areaBox{
	box-sizing:border-box;
	border:1px solid rgba(204,204,204,1);
	border-radius:5px;
	width:220px;
	height:100px;
	display:inline-block;
	vertical-align:top;
	padding:10px 8px;
	margin-bottom:5px;
}



.collapsible2 div.areaBox ul.list l{
		display:inline;
	}

#feeArea .collapsible2 div.areaBox ul.list.en{
	margin-top:0;
	font-size:14px;
	}


	.collapsible2 div.areaBox h3{
		padding:0;
		margin:0;
	}
	
	.collapsible2 div.areaBox ul.list li{
		display:inline;
	}
	.collapsible2 div.areaBox:nth-of-type(1){
		border-left:5px solid #cfa7cd;
	}
	.collapsible2 div.areaBox:nth-of-type(2){
		border-left:5px solid #f9c270;
	}
	.collapsible2 div.areaBox:nth-of-type(3){
		border-left:5px solid #addef8;
	}
	.collapsible2 div.areaBox:nth-of-type(4){
		border-left:5px solid #4090f3;
	}
	.collapsible2 div.areaBox:nth-of-type(5){
		border-left:5px solid #e07961;
	}
	.collapsible2 div.areaBox:nth-of-type(6){
		border-left:5px solid #59bc88;
	}
	.collapsible2 div.areaBox:nth-of-type(7){
		border-left:5px solid #b6d56a;
	}
	.collapsible2 div.areaBox:nth-of-type(8){
		border-left:5px solid #f4b4d0;
	}
	.collapsible2 div.areaBox:nth-of-type(9){
		border-left:5px solid #ffed61;
	}
	.collapsible2 div.areaBox:nth-of-type(10){
		border-left:5px solid #aea1ef;
	}
	.collapsible2 div.areaBox:nth-of-type(11){
		border-left:5px solid #a3d6ca;
	}
	.collapsible2 div.areaBox:nth-of-type(12){
		border-left:5px solid #addef8;
	}



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


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

.serviceLink{
	display:inline-block;
	vertical-align:top;
	width:50%;
	padding:15px 0;
	position:relative;
	overflow:hidden;
	margin:0 0;
	box-sizing:border-box;
}
	.serviceLink a{
		display:block;
		position:absolute;
		height:100%;
		width:100%;
		top:0;
		left:0;
		color:#333;
		transition:0.5s;
	}
	.serviceLink a:hover{
		background:rgba(255,51,51,0.1);
	}
	.serviceLink dt{
		float:left;
		width:40px;
		display:inline-block;
		padding:10px;
		vertical-align:middle;
		box-sizing:border-box;
		-webkit-margin-start:0;
	}
		.serviceLink dt img{
			width:65px;
			height:65px;
		}

	.serviceLink dd{
		max-width:70%;
		float:left;
		padding-left:10px;
		vertical-align:middle;
	}
	.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{
		border-bottom:#cccccc solid 1px;
	}
	.serviceLink:nth-child(odd){
		border-right:#cccccc solid 1px;
	}
	.serviceLink:nth-last-of-type(1){
		border-bottom:none;
	}


.serviceLink.non:after{
	content: "";
}


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


ul.relationService{
	background:rgba(204,204,204,0.3);
	padding:4px;
	box-sizing:border-box;
}
ul.relationService li{
	position:relative;
	display:inline-block;
	vertical-align:top;
	width:50%;
	height:100px;
	padding:8px 10px;
	border:4px solid rgba(204,204,204,0.3);
	box-sizing:border-box;
	background:rgba(255,255,255,1);
	border-radius:8px;
	transition:0.5s;
}
	ul.relationService li strong{
		display:block;
	}
	ul.relationService li strong:before{
		display:inline-block;
		content:url("/img/common/mkr_arrow-r.gif");
		margin-right:4px;
	}
	ul.relationService li:hover{
		background:rgba(204,204,204,0.1)
	}

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";
}



#main-box h2[class^="merit"]{
	background:none;
}
#main-box h2[class^="merit"] span.inner{
	display:inline;
	background:none;
	width:auto;
	padding:8px 10px 0px;
	border:none;
}

#main-box h2[class^="merit"]:before{
	width:30%;
	padding:3px 6px;
	font-size:14px;
	color: #FFFFFF;
	border:1px solid  #ce0000;
	border-radius:5px;
	background:#ce0000;
}
#main-box h2[class^="merit"] ~ h4{
	border: 1px dotted #C3C3C3;
	padding:4px 8px;
	border-radius:3px;
}

#advantage h2[class^="merit"]{
	text-indent:-6.7em;
	padding-left:6.7em;
}

#advantage div.half.ad div.col2-l, #advantage div.half.ad div.col2-r{
	border:1px solid rgba(204,204,204,1);
	padding:6px;
	box-sizing:border-box;
}
	#advantage div.col2-l ul.notes-s{
		padding-right:20px;
	}

#advantage hr{
	margin:20px 0;
	display:block;
	border:1px solid rgba(204,204,204,1);
}




/* オークションゆうパック　*/
#main-box h3.auction{
	background:none;
	color:#3e9fda;
	border:1px dotted #3e9fda;
	border-radius:5px;
	padding:8px 10px;
	font-size: 1.2rem;
	}
div.auctionFlow{
	text-align:center;
	margin-bottom:20px;
}
	div.auctionFlow span{
		display:inline-block;
		vertical-align:top;
	}
	div.auctionFlow span img{
		height:160px;
	}
	div.auctionFlow:nth-of-type(2) span img{
		height:180px;
	}