@charset "Shift_JIS";

#OrderHistory {
	display: grid;
	gap: 80px 20px;
	grid-template-columns: 1fr minmax(320px, 30%);
	grid-template-areas: $orderhistory_css_areas;
}

#OrderHistory h2 {
	font-size: 22px;
	font-weight: bold;
	color: #333;
	display: block;
	border-left: 8px solid #333;
	padding-left: 8px;
}

#OrderHistory .bbs_formset {
	grid-area: bbsform;
}

#OrderHistory .orderhistory_side {
	grid-area: side;
}

#OrderHistory .orderhistory_sideinner {
	position: sticky;
	top: 35px;
	display: grid;
	gap: 20px;
}
#OrderHistory .orderhistory_sidetop {
	text-align:center;
}

#OrderHistory h3 {
	font-size: 1.3em;
	font-weight: bold;
	background-color: #efefef;
	display: grid;
	grid-template-columns: 22px 1fr;
}

#OrderHistory h3:before {
	content: "";
	width: 0;
	height: 0;
	border-right: 6px solid transparent;
	border-top: 10px solid var(--main-font-color);
	border-left: 6px solid transparent;
	display: block;
	transform: translate(6px, 6px);
}

#ChumonNavi {
	grid-area: navi;
	display: grid;
	gap: 10px;
}

#RepService {
	grid-area: rep;
	display: grid;
	gap: 10px;
}

#ChumonShousai {
	grid-area: shousai;
	display: grid;
	gap: 10px;
}

#ChumonShousai .orderhistory_chumonshousai__blocks{
	background-color: rgba(var(--mainthema-background-rgb), 0.1);
	border-radius: 10px;
	padding: 10px;
	border: 1px solid #ccc;
}
#ChumonShousai .orderhistory_chumonshousai__itemblock_line1{
	border-bottom: 1px dotted #000;
	padding-bottom: 10px;
	display: grid;
	grid-template-columns: 100px 1fr;
	grid-template-rows: auto 1fr;
	gap: 0 5px;
}
#ChumonShousai .orderhistory_chumonshousai__itemblock_line2{
	border-bottom: 1px dotted #000;
	padding: 10px 0;
}
#ChumonShousai .orderhistory_chumonshousai__itemblock_line3{
	padding-top: 10px;
}
#ChumonShousai .orderhistory_chumonshousai__itemimage{
	grid-column: 1/2;
	grid-row: 1/3;
	border: 1px solid #ccc;
	padding: 5px;
	background-color: #fff;
	display: grid;
	place-items: center;
}
#ChumonShousai .orderhistory_chumonshousai__itemname{
	grid-column: 2/3;
	grid-row: 1/2;
}
#ChumonShousai .orderhistory_chumonshousai__itemlink{
	grid-column: 2/3;
	grid-row: 2/3;
	text-align: right;
}

#ChumonShousai .orderhistory_chumonshousai__sumblock{
	text-align:right;
}
#ChumonShousai .orderhistory_chumonshousai__sumblock_line1{
	display: grid;
	gap: 5px;
}
#ChumonShousai .orderhistory_chumonshousai__sumblock_line2{
	border-top: 1px solid #000;
	padding-top: 5px;
	margin-top:5px;
}

dl.item_options dt { font-weight:bold; }
dl.item_options dt:before { content:"��"; }
dl.item_options dt:after { content:"��"; }
dl.item_options dd { margin-left:20px; margin-bottom:5px; }
dl.item_options dd:last-child { margin-bottom:0; }

@media screen and (max-width: 768px) {
	#OrderHistory { grid-template-columns: 1fr; grid-template-areas:$orderhistory_css_areas_mo; }
	#OrderHistory .bbs_formset { grid-column: 1/2; }
	#OrderHistory .orderhistory_main { grid-column: 1/2; }
	#OrderHistory .orderhistory_side { grid-column: 1/2; }
}