@charset "UTF-8";
/* -------------------------------------------------*/
/* フォント設定 */

@font-face {
	font-family: 'Monotype-LucidaHandwritingStd';
	src: url(../../font/Monotype-LucidaHandwritingStd.otf) format('opentype');
}
#result.font1 { font-family: franklin-gothic-atf, sans-serif; }
#result.font2 { font-family: 'Monotype-LucidaHandwritingStd', serif; }

/* -------------------------------------------------*/
.content { height:auto!important; }
.main_content { position:static; }
#contents-inner { margin:100px auto 60px; }
#clientselectList { display:none; }
.red { color:red; }

/* -------------------------------------------------*/
/* 選択エリア */
.clientselect{
	max-width:1220px;
	margin:60px auto;
	padding:0 20px;
}
.clientselect h3{
	display:block;
	font-size:16px;
	font-weight:bold;
	padding-bottom:6px;
	border-bottom:1px solid #E1E1E1;
}
@media screen and (max-width: 720px) {
	
}

/* -------------------------------------------------*/
/* 選択項目 */
.selectitem{
	padding:20px 20px 30px;
	background-color:#E1E1E1;
}
.selectitem > ul{ margin:20px 0 0; padding:0; display:flex; }
.selectitem > ul > li{
	width:212px;
	list-style: none;
	margin-right:10px;
}
.selectitem > ul > li > label{
	display:flex;
	flex-direction:column;
}
.selectitem > ul > li > label > img {
	width:100%;
	height:auto;
	flex-shrink: 0;
}
.selectitem > ul > li > label > div{
	margin-top:4px;
}
.selectitem > ul > li > label input{
	margin-right:6px;
}
.selectitem > input#name {
	font-size:30px;
	font-weight:bold;
	text-align:center;
	width:100%;
	border: none;
	outline: none;
	padding:22.5px 0;
}
.selectitem > input#name.none {
	font-size:20px;
	padding: 30px 0;
}
.selectitem > .attention_input {
	margin:5px 0 10px;
}
.selectitem > .attention {
	margin:25px 0 0;
}
.selectitem > .attention > div {
	display:none;
}
.selectitem > .attention > div.active {
	display:block;
}
.selectitem .noConfirm {
	display:none;
	color:red;
}
.selectitem .noConfirm.active {
	display:inline-block;
}
.font-result {
	margin:60px 0 0;
}
.font-result > p {
	font-size:16px;
	font-weight:bold;
}
.font-result > #result {
	font-size:30px;
	font-weight:bold;
	text-align:center;
	width:100%;
	border: none;
	outline: none;
	padding:23px 0;
	pointer-events : none;
}
.font-result > #result.none {
	font-size:20px;
	font-family:initial!important;
	padding: 30px 0;
}
input#item_amount,
input#nameplate_amount {
	font-size:14px;
	font-weight:normal;
	text-align:center;
	width:50px;
	border: none;
	outline: none;
	padding:6px 0;
	margin:0 8px;
}
@media screen and (max-width: 720px) {
	.selectitem > ul {
		flex-wrap:wrap;
		justify-content: space-between;
	}
	.selectitem > ul > li{
		width:49%;
		margin:0;
	}
	
	.selectitem > input#name {
		font-size:4vw;
	}
	.selectitem > input#name.none {
		font-size:4vw;
	}
	.font-result > #result {
		font-size:4vw;
	}
	.font-result > #result.none {
		font-size:4vw;
	}
	input#item_amount,
	input#nameplate_amount {
		font-size:16px;
	}
}

/* -------------------------------------------------*/
/* ボタンエリア */
.btnarea{
	margin:60px auto 60px;
}
#btn-sendForm,
#btn-goToConfirmScreen {
	border-radius: 0;
	width: 310px;
	height: 36px;
	margin:15px auto;
}

#btn-sendForm .btn,
#btn-goToConfirmScreen .btn{
	width:100%;
	background-color: #707070;
	border: 1px solid #707070;
	padding: 8px;
	cursor: default;
	color: #ffffff;
	font-weight: bold;
	text-align: center;
	-webkit-user-select: none;
	   -moz-user-select: none;
	    -ms-user-select: none;
	        user-select: none;
}
#btn-sendForm .btn{ padding: 4px 8px; }
#btn-sendForm .btn > div{ margin-top: 6px; margin-bottom: 2px; }

#btn-sendForm.active .btn,
#btn-goToConfirmScreen.active .btn{
	background-color: #FE9A2E;
	border: 1px solid #FE9A2E;
	cursor: pointer;
}
#submitbtn{
	display: flex;
	justify-content: center;
	align-items: center;
}
#submitbtn img{ width:20px; height:auto;margin-right:4px; }

@media screen and (max-width: 720px) {
	#btnarea{
		width: 100%;
		height: 60px;
		margin-left:auto;
	}
	#btn-sendForm,
	#btn-goToConfirmScreen{
		width:80%;
		margin: 7px auto;
		display: block;
		height: 45px;
		line-height: 45px;
		padding: 0;
	}
}

/* -------------------------------------------------*/
/* カート商品 */
.cartitems { max-width:1218px; margin:60px auto; padding:0 20px; }
.cartitems > dl { border: solid 1px #707070; }
.cartitems > dl > dt {
	padding: 0 1em;
	height: 65px;
	font-size: 24px;
	line-height: 65px;
	color: #fff;
	background: #707070;
}
.cartitems > dl > dd {
	padding: 30px;
}
.cartitems > dl > dd .item{
	display: flex;
	justify-content: flex-start;
	align-items: flex-start;
}
.cartitems > dl > dd .item > figure {
	margin: 0 20px 0 0;
}
.cartitems > dl > dd .item > figure img {
	width: 192px;
	height: auto;
}
.cartitems > dl > dd .item > div p {
	font-size: 16px;
	margin: 0px;
	padding: 0;
	line-height: 1.8em;
	word-break: break-all;
}
.cartitems > dl > dd .item > div > form > p:nth-child(5) {
	font-weight: bold;
	font-size: 16px;
}

@media screen and (max-width: 720px) {
	.cartitems > dl > dd .item {
		flex-direction:column;
	}
	.cartitems > dl > dd .item > figure {
		margin:0 auto;
	}
	.cartitems > dl > dd .item > div p {
		font-size: 12px;
	}
}


/* -------------------------------------------------*/
/* 仕様確認 */
#ConfirmArea {
	max-width: 1220px;
	margin: 60px auto;
	padding: 0 20px;
	margin: 60px auto;
	display:none;
}
#ConfirmArea.active {
	display:block;
}

#ConfirmArea .inner{
	border: solid 1px #707070;
}

#ConfirmArea .inner h3{
	padding: 0 1em;
	height: 65px;
	font-size: 24px;
	line-height: 65px;
	color: #fff;
	background: #707070;
	margin:0;
}

#ConfirmArea .inner .ConfirmItems{
	
}

#ConfirmArea .inner .ConfirmItems .confitem {
	padding: 30px 20px 0px 20px;
}

#ConfirmArea .inner .ConfirmItems .confitem .name{
	display: block;
	font-size: 16px;
	font-weight: bold;
	padding-bottom: 4px;
	border-bottom: 1px solid #E1E1E1;
}

#ConfirmArea .inner .ConfirmItems .confitem dl{
	margin:10px 0;
}

#ConfirmArea .inner .ConfirmItems .confitem dd{
	margin:7px 0;
	font-weight:bold;
	color:#707070;
}
#ConfirmArea .inner .ConfirmItems .confitem dd span{
	color:#000;
}

#ConfirmArea .inner .ConfirmItems .nameplateTotal{
	font-size: 16px;
	font-weight: bold;
	padding: 20px;
	margin-top:20px;
}
#ConfirmArea .inner .ConfirmItems .nameplateAttention{
	padding: 0 20px 20px;
}


.str_red {
	color:red;
}