/*
オーダーシート用
*/
#container{
	width: 100%;
	max-width: 1020px;
	margin: 0 auto;
	font-size: 13px;
	padding: 16px 24px 28px;
	box-sizing: border-box;
}

#order{
	line-height: 1.32;
}
#order > div,
.ordersheet-design-set,
.ordersheet-members-section,
.ordersheet-size-section{
	margin-bottom: 12px;
}
#order h2{
	font-size: 24px;
	line-height: 1.2;
	margin: 0 0 10px;
	border-bottom: 2px solid #333;
}
.ordersheet-top-grid{
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	gap: 10px;
	align-items: start;
	margin-bottom: 12px;
}
.ordersheet-info-card{
	min-width: 0;
}
.ordersheet-info-card table.column2 th{
	width: 34%;
	word-break: keep-all;
	overflow-wrap: anywhere;
}
.ordersheet-info-card table.column2 td{
	word-break: break-word;
	overflow-wrap: anywhere;
	white-space: normal;
}
.ordersheet-design-set{
	display: grid;
	grid-template-columns: 580px minmax(0, 1fr);
	gap: 10px 14px;
	padding: 10px 0 12px;
	border-top: 2px solid #333;
	align-items: start;
}
.ordersheet-preview-section{
	grid-row: span 3;
}
.ordersheet-customize-section,
.ordersheet-marking-section,
.ordersheet-emblem-section{
	min-width: 0;
}
.ordersheet-design-set > .ordersheet-members-section,
.ordersheet-design-set > .ordersheet-size-section,
.ordersheet-design-set > .ordersheet-marking-section,
.ordersheet-design-set > .ordersheet-emblem-section{
	grid-column: 1 / -1;
	width: 100%;
	max-width: 100%;
}
#design_image{
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 6px;
	align-items: start;
}
#design_image img.design{
	width: 100%;
	min-width: 280px;
	max-width: 280px;
	height: auto;
	vertical-align: top;
}
#order h2.about{
	font-size: 32px;
	margin-top: 50px;
	margin-bottom: 15px;
	text-align: left;
	font-weight: bold;
	border-bottom: 3px solid #333;
}
#order h3.about2 {
	font-size: 15px;
	line-height: 1;
	font-weight: bold;
	padding: 4px 0;
	border-style: none; 
	color:#333;
	margin-top: 8px;
	margin-bottom: 5px;
	border-bottom: 1px solid #333;
}
#order h4{
	font-size: 13px;
	line-height: 1.25;
	margin: 6px 0 3px;
}
.page{
	background: #fff !important;
}
table.column2{
	border: 1px solid #333;
	table-layout: fixed;
	text-align:center;
	width: 100%;
	max-width: 100%;
	margin-bottom: 7px;
}
table.column2 th,
table.column2 td{
	border: 1px solid #333;
	text-align:left;
	padding: 2px 5px;
	line-height: 1.22;
}
table.column2 th{
	background-color: #ddd;
	width: 190px;
	font-weight: bold;
}
table.column2 td.count{
	text-align:right;
}

table.normal{
	table-layout: fixed;
	text-align:center;
	width: 100%;
	margin-bottom: 5px;
}
table.normal th, table.normal td{
	border: 1px solid #333;
	width: 25%;
	text-align:center;
	padding: 2px 4px;
	line-height: 1.2;
	word-break: break-word;
}
table.normal th{
	background-color: #ddd;
}
table.normal td.count{
	text-align:right;
}
table.normal td.ordersheet-color-cell{
	font-weight: 700;
}
.ordersheet-member-group{
	margin-bottom: 8px;
}
.ordersheet-member-preview{
	display: flex;
	gap: 5px;
	align-items: flex-start;
	margin: 0 0 4px;
}
.ordersheet-member-preview img{
	width: 58px;
	height: auto;
	display: block;
}
table.ordersheet-member-table{
	width: 100%;
}
table.ordersheet-member-table th,
table.ordersheet-member-table td{
	width: auto;
}

/*二行の表のスタイル*/
table.harf{
	width: calc(50% - 10px);
	max-width: 100%;
	margin-bottom: 5px;
	text-align: center;
	table-layout: fixed;
}
table.harf th, table.harf td{
	border: 1px solid #333;
	padding: 2px 5px;
	line-height: 1.22;
}
table.harf th{
	font-weight: bold;
	background-color: #ddd;
}
table.harf td{
	text-align: center;
}
table.harf td.count{
	text-align:right;
}
/*3行のテーブルのスタイル*/
table.three{
	width: 25%;
	max-width: 100%;
	margin-bottom: 5px;
	text-align: center;
	table-layout: fixed;
}
table.three th, table.three td{
	border: 1px solid #333;
	padding: 2px 5px;
	line-height: 1.22;
}
table.three th{
	font-weight: bold;
	background-color: #ddd;
}
table.three td{
	text-align: center;
}
td.order-opitions {
	white-space: pre-wrap;
	word-break: break-word;
	overflow-wrap: anywhere;
}
.ordersheet-customize-grid{
	display: block;
}
.ordersheet-marking-grid{
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 10px 20px;
}
.ordersheet-marking-card{
	min-width: 0;
	break-inside: avoid;
	page-break-inside: avoid;
}
.ordersheet-marking-card h4{
	margin-top: 0;
	border-bottom: 1px solid #bbb;
	padding-bottom: 2px;
}
.ordersheet-emblem-grid{
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 20px;
	margin-bottom: 6px;
}
.ordersheet-emblem-card{
	break-inside: avoid;
	page-break-inside: avoid;
}
.ordersheet-emblem-card h4{
	margin-top: 0;
	border-bottom: 1px solid #bbb;
	padding-bottom: 2px;
}
.ordersheet-emblem-card__body{
	display: block;
}
.ordersheet-emblem-card__image{
	text-align: center;
}
.ordersheet-emblem-card__image img{
	width: 100px;
	object-fit: contain;
	display: block;
	padding: 5px 0;
}
table.ordersheet-emblem-card__table{
	margin-bottom: 0;
	font-size: 13px;
	table-layout: fixed;
}
table.ordersheet-emblem-card__table th,
table.ordersheet-emblem-card__table td{
	padding: 1px 2px;
	line-height: 1.12;
	width: auto;
	white-space: normal;
	word-break: normal;
	overflow-wrap: anywhere;
	vertical-align: middle;
}
table.ordersheet-emblem-card__table th{
	width: 42%;
}
/*合計金額のスタイル*/
.price{
	text-align:right;
	margin-bottom: 60px;
	margin-top: 50px;
}
.price p{
	font-size:23px;
	font-family: "游ゴシック";
	font-weight: 450;
	line-height: 1.6;
	border-bottom:3px solid #333;
	padding-bottom:8px;
	display:inline;
}
.price_total{
	text-align:right;
	margin-bottom: 60px;
	margin-top: 100px;
}
.price_total p{
	font-size:23px;
	font-family: "游ゴシック";
	font-weight: 450;
	line-height: 1.6;
	border-bottom:3px solid #333;
	padding-bottom:8px;
	display:inline;
}
.ordersheet-price-grid{
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 20px;
	align-items: start;
}
.ordersheet-price-card{
	min-width: 0;
}
.ordersheet-price-card table.harf{
	width: 100%;
}
.ordersheet-total-block{
	break-inside: avoid;
	page-break-inside: avoid;
}
/*印刷ボタン*/
.submit{
	text-align: center;
}
input[type=button] {
	font-size: 15px;
	padding: 8px 100px;
	margin-top: 40px;
	cursor: pointer;
	display: inline-block;
	background-color: #208DC3;
	color: white;
}
/*スマートフォンの印刷仕方のリストスタイル*/
.sp_ol{
	list-style-type: decimal;
	border-radius :1px;
	padding: 0.5em 0.5em 0.5em 2em;
	width:50%;
	background-color: whitesmoke;
}
.sp_li{
	line-height: 1.5;
	padding: 0.5em 0;
	margin-left: 10px;
}
.sp_print_chrome {
	margin: 30px 0px;
}
.sp_print_subtitle{
	margin-top:20px;
	margin-bottom:10px;
}

/*印刷用CSS*/
@media print
{
	html,body{
		height: auto;
		font-size: 13px;
	}
	@page{
		size: A4;
		margin: 7mm;
	}
	#container{
		width: 1020px;
		min-width: 1020px;
		max-width: 1020px;
		padding: initial;
		box-sizing: border-box;
	}
	#order{
		line-height: 1.32;
	}
	#order > div,
	.ordersheet-design-set,
	.ordersheet-members-section,
	.ordersheet-size-section{
		margin-bottom: 5px;
	}
	.ordersheet-top-grid{
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 5px;
		margin-bottom: 5px;
	}
	.ordersheet-design-set{
		grid-template-columns: 580px minmax(0, 1fr);
		gap: 10px 14px;
		padding: 10px 0 12px;
	}
	.ordersheet-preview-section{
		grid-row: span 3;
	}
	.ordersheet-marking-grid{
		grid-template-columns: repeat(4, minmax(0, 1fr));
		gap: 20px;
	}
	#design_image img.design{
		width: 100%;
		min-width: 280px;
		max-width: 280px;
		height: auto;
		max-height: none;
		object-fit: contain;
	}
	#order {
		width: 1020px;
		min-width: 1020px;
		padding: 0px;
	}
	#order h2{
		margin-top:0px;
		margin-bottom: 4px;
		font-size: 15px;
	}
	#order h3.about2{
		margin-top: 4px;
		margin-bottom: 3px;
		padding: 2px 0;
		font-size: 13px;
	}
	#order h4{
		margin: 3px 0 1px;
		font-size: 13px;
	}
	#header, #footer,.submit,
	.order__message .orderMode_confirm,
	.sp_print,#mycos_contact_wrap
	{
		display:none;
	}
	.page-break-before{
		page-break-before:always;
	}			
	#order,.price_total{
		margin-bottom:0px;
		padding-bottom:0px;}
	.price{
		margin-top:12px;
		margin-bottom:12px;
	}
	body {
		-webkit-print-color-adjust: exact;
		print-color-adjust: exact;
	}
	table.harf th,table.normal th {
		background-color: #ddd !important;
	}
	table.column2,
	table.normal,
	table.harf,
	table.three{
		margin-bottom: 5px;
	}
	.ordersheet-total-block,
	.ordersheet-total-table{
		break-inside: avoid;
		page-break-inside: avoid;
	}
	table.column2 th,
	table.column2 td,
	table.normal th,
	table.normal td,
	table.harf th,
	table.harf td,
	table.three th,
	table.three td{
		padding: 2px 4px;
		line-height: 1.2;
	}
	table.column2 th{
		width: 42%;
	}
	.ordersheet-info-card table.column2 th{
		width: 34%;
	}
	.ordersheet-info-card table.column2 td{
		word-break: break-word;
		overflow-wrap: anywhere;
		white-space: normal;
	}
	.ordersheet-member-group{
		margin-bottom: 8px;
		break-inside: avoid;
		page-break-inside: avoid;
	}
	.ordersheet-member-preview{
		gap: 5px;
		margin-bottom: 4px;
	}
	.ordersheet-member-preview img{
		width: 58px;
	}
	.ordersheet-emblem-grid{
		grid-template-columns: repeat(4, minmax(0, 1fr));
		gap: 20px;
	}
	.ordersheet-emblem-card{
		padding: 2px;
	}
	.ordersheet-emblem-card h4{
		margin-bottom: 2px;
		padding-bottom: 1px;
	}
	.ordersheet-emblem-card__image img{
		width: 100px;
		max-height: 100px;
		padding: 10px 0;
	}
	table.ordersheet-emblem-card__table{
		font-size: 13px;
	}
	table.ordersheet-emblem-card__table th,
	table.ordersheet-emblem-card__table td{
		padding: 1px 2px;
		line-height: 1.05;
	}
	.box{
		width:100%;
		height:60px;
		border:1px solid #333;
		margin-bottom:10px;
	}
}