@charset "utf-8";
/* CSS Document */

/*-----------------------------------------------

 can-badge　缶バッジ制作
 
-----------------------------------------------*/

/*h3*/
.itemBadge .itemH3Box{
	border-bottom: 4px double #11b6c5;
}
.itemBadge .itemH3Box h3{
	color: #11b6c5;
}

/*ページ内リンク*/
.itemBadge .anchorLink ul li{
	width: 160px;
}
.itemBadge .anchorLink ul li a{
	font-size: 15px;
	border: 1px solid #11b6c5;
	border-bottom: 4px solid #11b6c5;
}

/*----サイズから選ぶ----*/
.itemBadge .orderItemSize .itemLinkBox dl dt{
	border-bottom: 5px solid #11b6c5;
}
.itemBadge .orderItemSize .itemLinkBox dl dd{
	border: 1px solid #11b6c5;
}

/*----背面仕様から選ぶ----*/
.itemBadge .orderItemBack .itemLinkBox dl dt{
	border-bottom: 5px solid #45bd50;
}
.itemBadge .orderItemBack .itemLinkBox dl dd{
	border: 1px solid #45bd50;
}

/*----納品形態から選ぶ----*/
.itemBadge .orderItemPackage .inner{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
.itemBadge .orderItemPackage .inner dl{
	width: 210px;
}

.itemBadge .orderItemPackage .requestBox{
	margin: 20px 0;
}
.itemBadge .orderItemPackage .requestBox h4{
	color: #ff7e00;
	margin-bottom: 15px;
	font-size: 20px;
	position: relative;
}
.itemBadge .orderItemPackage .requestBox h4:before{
	content: "■";
	width: 12px;
	height: 12px;
}

/*----コストを抑える方法----*/
.itemBadge .orderItemCost .inner{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
	gap: 20px 0;
}
.itemBadge .orderItemCost .inner dl{
	width: 440px;
}
.itemBadge .orderItemCost dl dt{
	margin-bottom: 10px;
}

@media screen and ( max-width: 736px ){
	/*ページ内リンク*/
	.itemBadge .anchorLink ul li{
		width: 32%;
	}
	/*----納品形態から選ぶ----*/
	.itemBadge .orderItemPackage div{
		margin-bottom: 20px;
	}
	.itemBadge .orderItemPackage .inner dl{
		width: 48%;
		margin: 0 1% 10px;
	}
	.itemBadge .orderItemPackage .inner dl dt{
		text-align: center;
	}
	.itemBadge .orderItemPackage .inner dl dt img{
		max-width: 210px;
	}
	
	.itemBadge .orderItemPackage .requestBox{
		margin: 20px 1%;
	}
	.itemBadge .orderItemPackage .requestBox h4{
		font-size: 18px;
	}
	.itemBadge .orderItemPackage .requestBox img{
		max-width: 500px;
	}
		
	/*----コストを抑える方法----*/
	.itemBadge .orderItemCost .inner{
		width: 95%;
		margin: auto;
	}
	.itemBadge .orderItemCost .inner dl{
		width: 48%;
	}

}
@media screen and ( max-width: 480px ){
	/*ページ内リンク*/
	.itemBadge .anchorLink ul li{
		width: 48%;
	}
	/*----コストを抑える方法----*/
	.itemBadge .orderItemCost .inner dl{
		width: 100%;
	}
}