@charset "UTF-8";
@import url("/assets/font/fontawesome.min.css");
@import url("//use.fontawesome.com/releases/v5.0.11/css/all.css");
/* ////////////////////////////////////////////////////////////////////
	sim
//////////////////////////////////////////////////////////////////// */
#main section {
  margin: 0 auto 80px;
  margin-bottom: 20px;
}

#main {
  margin-bottom: 0;
  position: relative;
  letter-spacing: 0.25em;
}

#main::after {
  content: "";
  display: block;
  clear: both;
}

#main h3 {
  margin: 20px 0;
  text-align: center;
  font-size: 1.8rem;
  font-weight: normal;
  color: #444444;
}

#main p.lead {
  text-align: center;
  font-size: 1rem;
  color: #444444;
}

#main a.back {
  color: #444444;
  display: inline-block;
  padding: 3px 0;
  margin: 30px 2.5% 0;
  border-bottom: dotted 1px #CCC;
}

@media print {
  #main a.back {
    display: none;
  }
}

#main p.print {
  cursor: pointer;
  position: absolute;
  top: 30px;
  right: 2.5%;
  font-size: 1rem;
  background-color: #CCC;
  color: #FFF;
  display: block;
  width: 45px;
  height: 45px;
  margin-top: 1px;
  margin-left: 1px;
  text-align: center;
  padding-top: 5px;
}

#main p.print.canuse {
  background-color: #5c3723;
}

#main p.print i {
  margin-top: 5px;
  margin-bottom: 5px;
  display: block;
  font-size: 1.2rem;
}

#main section.common {
  background-color: #fff;
  border: solid 1px #444444;
  max-width: 1100px;
  margin: 20px auto !important;
  position: relative;
}

#main section.common #ctrl-area {
  position: absolute;
  display: flex;
  justify-content: flex-start;
  z-index: 9;
  right: 0;
  top: 0;
}

#main section.common #ctrl-area button {
  font-size: 1rem;
  background-color: #CCC;
  color: #FFF;
  display: block;
  width: 45px;
  height: 45px;
  margin-top: 1px;
  margin-left: 1px;
}

#main section.common #ctrl-area button.canuse {
  background-color: #5c3723;
}

#main section.common #ctrl-area button i {
  margin-top: 5px;
  margin-bottom: 3px;
  display: block;
  font-size: 1.2rem;
}

#main section.common#sim {
  letter-spacing: normal;
}

#main section.common div.mvitem, #main section.common div.item, #main section.common div.ite {
  margin: 3px 4px;
  position: relative;
  display: inline-block;
  cursor: move;
}

#main section.common div.mvitem .blind, #main section.common div.item .blind, #main section.common div.ite .blind {
  display: none;
}

#main section.common div.mvitem button.delbtn, #main section.common div.item button.delbtn, #main section.common div.ite button.delbtn {
  width: 18px;
  line-height: 18px;
  background-color: #f62644;
  opacity: 0.8;
  color: #FFF;
  border-radius: 20px;
  text-align: center;
  position: absolute;
  right: -2px;
  top: -10px;
  z-index: 999;
}

#main section.common div.mvitem:hover, #main section.common div.item:hover, #main section.common div.ite:hover {
  box-sizing: content-box;
  border-left: solid 2px rgba(52, 51, 52, 0.8);
  border-right: solid 2px rgba(52, 51, 52, 0.8);
}

#main section.common div.mvitem p.name, #main section.common div.item p.name, #main section.common div.ite p.name {
  position: absolute;
  text-align: center;
  display: block;
  bottom: 4px;
  left: 50%;
  width: 45px;
  margin-left: -22px;
  font-size: 0.8rem;
  padding: 2px;
  border-radius: 2px;
  background-color: rgba(255, 255, 255, 0.6);
  z-index: 5;
}

#main section.common div.mvitem p.name.min-mode, #main section.common div.item p.name.min-mode, #main section.common div.ite p.name.min-mode {
  bottom: auto;
  top: -40px;
  border: solid 1px #CCC;
  width: 50px;
  margin-left: -25px;
}

#main section.common div.mvitem p.name.min-mode:after, #main section.common div.item p.name.min-mode:after, #main section.common div.ite p.name.min-mode:after {
  border-left: 1px solid #CCC;
  content: "";
  flex-grow: 1;
  margin-top: 1rem;
  position: absolute;
  height: 17px;
  left: 50%;
  z-index: 0;
}

#main section.common div.mvitem p.name.sel, #main section.common div.item p.name.sel, #main section.common div.ite p.name.sel {
  z-index: 100;
  background-color: #343334;
  color: #fff;
}

#main section.common div.mvitem p.price, #main section.common div.item p.price, #main section.common div.ite p.price {
  left: 50%;
  width: 50px;
  margin-left: -25px;
  position: absolute;
  text-align: center;
  font-size: 1.1rem;
  font-weight: bold;
  bottom: 20px;
  background-color: rgba(255, 255, 255, 0.8);
}

#main section.common div.mvitem.ite, #main section.common div.item.ite, #main section.common div.ite.ite {
  position: absolute;
  bottom: 0;
}

#main section.common div.mvitem.item, #main section.common div.item.item, #main section.common div.ite.item {
  opacity: 1;
  margin: 0 auto;
  position: absolute;
}

#main section.common div.mvitem.item.btm, #main section.common div.item.item.btm, #main section.common div.ite.item.btm {
  bottom: 0;
}

#main section.common div.mvitem.item.mdl, #main section.common div.item.item.mdl, #main section.common div.ite.item.mdl {
  bottom: 122.3px;
}

#main section.common div.mvitem.item.mdl2, #main section.common div.item.item.mdl2, #main section.common div.ite.item.mdl2 {
  bottom: 125.7px;
}

#main section.common div.mvitem.item.top, #main section.common div.item.item.top, #main section.common div.ite.item.top {
  bottom: 196.6px;
}

#main section.common div.mvitem.item.inner, #main section.common div.item.item.inner, #main section.common div.ite.item.inner {
  bottom: 68px;
}

#main section.common div.mvitem.item.inner p.name, #main section.common div.item.item.inner p.name, #main section.common div.ite.item.inner p.name {
  background-color: #623c31;
  color: #FFF;
  margin-left: -25px;
  width: 50px;
}

#main section.common div.mvitem.item.inner button.delbtn, #main section.common div.item.item.inner button.delbtn, #main section.common div.ite.item.inner button.delbtn {
  width: 18px;
  line-height: 18px;
  background-color: #f62644;
  opacity: 0.8;
  color: #FFF;
  border-radius: 20px;
  text-align: center;
  position: absolute;
  right: -65px;
  top: -30px;
  z-index: 999;
}

#main section.common div.mvitem.item.history, #main section.common div.item.item.history, #main section.common div.ite.item.history {
  cursor: text;
}

#main section.common div.mvitem.item.history.btm, #main section.common div.item.item.history.btm, #main section.common div.ite.item.history.btm {
  bottom: 0;
}

#main section.common div.mvitem.item.history.mdl, #main section.common div.item.item.history.mdl, #main section.common div.ite.item.history.mdl {
  bottom: 42px;
}

#main section.common div.mvitem.item.history.mdl2, #main section.common div.item.item.history.mdl2, #main section.common div.ite.item.history.mdl2 {
  bottom: 43px;
}

#main section.common div.mvitem.item.history.top, #main section.common div.item.item.history.top, #main section.common div.ite.item.history.top {
  bottom: 69px;
}

#main section.common div.mvitem.item.history:hover, #main section.common div.item.item.history:hover, #main section.common div.ite.item.history:hover {
  border: none;
}

#main section.common div.mvitem.item.print, #main section.common div.item.item.print, #main section.common div.ite.item.print {
  cursor: text;
}

#main section.common div.mvitem.item.print.btm, #main section.common div.item.item.print.btm, #main section.common div.ite.item.print.btm {
  bottom: 0;
}

#main section.common div.mvitem.item.print.mdl, #main section.common div.item.item.print.mdl, #main section.common div.ite.item.print.mdl {
  bottom: 140px;
}

#main section.common div.mvitem.item.print.mdl2, #main section.common div.item.item.print.mdl2, #main section.common div.ite.item.print.mdl2 {
  bottom: 144px;
}

#main section.common div.mvitem.item.print.top, #main section.common div.item.item.print.top, #main section.common div.ite.item.print.top {
  bottom: 230px;
}

#main section.common div.mvitem.item.print:hover, #main section.common div.item.item.print:hover, #main section.common div.ite.item.print:hover {
  border: none;
}

#main section.common div.mvitem.item.print p.name, #main section.common div.item.item.print p.name, #main section.common div.ite.item.print p.name {
  position: absolute;
  background-color: #FFF;
  text-align: center;
  display: block;
  bottom: 4px;
  left: 50%;
  width: 65px;
  margin-left: -32.5px;
  font-size: 0.8rem;
  padding: 2px;
  border-radius: 2px;
  text-shadow: 1px 1px 0 #FFF;
  z-index: 99;
}

#main section.common div.mvitem.item.print p.name.min-mode, #main section.common div.item.item.print p.name.min-mode, #main section.common div.ite.item.print p.name.min-mode {
  bottom: auto;
  top: -40px;
  border: solid 1px #CCC;
}

#main section.common div.mvitem.item.print p.name.min-mode:after, #main section.common div.item.item.print p.name.min-mode:after, #main section.common div.ite.item.print p.name.min-mode:after {
  border-left: 1px solid;
  content: "";
  flex-grow: 1;
  margin-top: 1rem;
}

#main section.common #sim-area {
  width: 645px;
  height: 350px;
  margin: 60px 0 25px 50px;
  background: rgba(195, 195, 195, 0.1);
  position: relative;
  z-index: 1;
  border-bottom: solid 1px #EEE;
  /*
			div.item{
				position: absolute;
				cursor: move;
				box-sizing: content-box;
				&.caution{
					border: solid 2px red;
					z-index: 999;
				}
				&:hover{
					box-sizing: content-box;
					border-left:solid 2px rgba($ciColorSub,0.8);
					border-right:solid 2px rgba($ciColorSub,0.8);
					//box-sizing:content-box;
				}
				button.delbtn{
					width: 18px;
					line-height:18px;
					background-color: #f62644;
					opacity: 0.8;
					color: #FFF;
					border-radius: 20px;
					text-align: center;
					position: absolute;
					right: -2px;
					top:-10px;
					z-index: 99;

					&:before{
						//content: '×';
					}
				}
				button.adjust-plus{
					width: 16px;
					line-height:15px;
					background-color: #969696;
					color: #FFF;
					border-radius: 0 20px 20px 0;
					text-align: center;
					position: absolute;
					right: -5px;
					top:10px;
					z-index: 999;
					&:before{
						//content: '≻';
					}
				}
				button.adjust-minus{
					width: 16px;
					line-height:15px;
					background-color: #969696;
					color: #FFF;
					border-radius: 20px 0 0 20px;
					text-align: center;
					position: absolute;
					right: 10px;
					top:10px;
					z-index: 999;
					&:before{
						//content: '<';
					}
				}
				button.adjust-plus2{
					width: 18px;
					line-height:15px;
					background-color: #000;
					opacity: 0.8;
					color: #FFF;
					border-radius: 0 20px 20px 0;
					text-align: center;
					position: absolute;
					right: -7px;
					top:23px;
					z-index: 998;
					&:before{
						//content: '>>';
					}
				}
				button.adjust-minus2{
					width: 18px;
					line-height:15px;
					background-color: #000;
					opacity: 0.8;
					color: #FFF;
					border-radius: 20px 0 0 20px;
					text-align: center;
					position: absolute;
					right: 10px;
					top:23px;
					z-index: 998;
					&:before{
						//content: '<<';
					}
				}
				.blind{
					display: none;
				}

				&.del{
					border:solid 2px #f62644;
					//box-sizing:content-box;
				}
				&.over{
					//border:solid 2px #2238f6;
				}
				div.wrap {
					position: relative;
					top: 0;
					div.img{
						width: 100%;
						height:100%;
						//background-size: contain;
						background-size: 100% 100%;
					}
					p.name {
						position: absolute;
						//background-color: #FFF;
						text-align: center;
						display: block;
						bottom: 4px;
						left:50%;
						width: 55px;
						margin-left:-27px;
						font-size: 0.8rem;
						padding: 2px;
						border-radius: 2px;
						background-color: rgba(255, 255, 255, 0.6);
						z-index: 99;
						&.sel{
							z-index: 100;
							background-color: $ciColorSub;
							color: $ftColorSub;
							//font-size: 1.0rem;
						}
						&.min-mode{
							bottom:auto;
							top:-60px;
							border: solid 1px #CCC;
							&:after{
								border-left: 1px solid #CCC;
								content: "";
								flex-grow: 1;
								margin-top: 1rem;
								position: absolute;
								height: 30px;
								left: 50%;
								z-index: 0;
							}
					}
					}
					p.price {
						position: absolute;
					}
				}
			}
*/
}

#main section.common #sim-area.printarea {
  width: 650px;
  margin: 60px 0 25px 70px;
}

#main section.common #sim-area.printarea div.line-y {
  left: -60px !important;
}

#main section.common #sim-area p.msg {
  width: 100%;
  text-align: center;
  line-height: 80px;
}

#main section.common #sim-area.ini {
  background-color: #fcffdc;
}

#main section.common #sim-area div#replace-item {
  position: absolute;
  width: 0;
  height: 100%;
  background-color: rgba(239, 237, 231, 0.8);
}

#main section.common #sim-area div.line-x {
  color: #999;
  font-size: 1rem;
  display: flex;
  align-items: center;
  position: absolute;
  bottom: -1.5em;
  text-align: center;
  left: 0;
}

#main section.common #sim-area div.line-x:before {
  border-top: 1px solid;
  content: "";
  flex-grow: 1;
  margin-right: 1rem;
}

#main section.common #sim-area div.line-x:after {
  border-top: 1px solid;
  content: "";
  flex-grow: 1;
  margin-left: 1rem;
}

#main section.common #sim-area div.line-y {
  color: #999;
  font-size: 1rem;
  color: #999;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: absolute;
  bottom: 0;
  text-align: center;
  width: 50px;
  left: -50px;
}

#main section.common #sim-area div.line-y:before {
  border-left: 1px solid;
  content: "";
  flex-grow: 1;
  margin-bottom: 1rem;
}

#main section.common #sim-area div.line-y:after {
  border-left: 1px solid;
  content: "";
  flex-grow: 1;
  margin-top: 1rem;
}

#main section.common #sim-area div.grand-price {
  position: absolute;
  top: auto;
  bottom: 13.6em;
  font-size: 2.6rem;
  right: 0;
}

#main section.common #sim-area div.grand-price span {
  font-size: 1.2rem;
}

#main section.common div.ctrl-topboard-sel {
  font-size: 1rem;
  position: absolute;
  right: 20px;
  top: 50px;
  font-weight: bold;
}

#main section.common div.ctrl-topboard-sel ul {
  margin-top: 10px;
}

#main section.common div.ctrl-topboard-sel ul li {
  margin-bottom: 10px;
  display: block;
  text-align: center;
  padding: 10px 10px;
  border-radius: 10px;
  background-color: #EEE;
  cursor: pointer;
}

#main section.common div.ctrl-topboard-sel ul li:hover {
  background-color: #d0cbb9;
}

#main section.common div.ctrl-topboard-sel ul li.active {
  background-color: #d0cbb9;
}

#main section.common div.ctrl-topboard-sel ul li p {
  cursor: pointer;
}

#main section.common .color-list {
  width: 450px;
  position: absolute;
  top: 55px;
  right: 0px;
  background: rgba(195, 195, 195, 0.1);
  margin: 5px 2.5% 5px;
  /*
			position: relative;
			padding: 0 3em 0 1em;
			width: 560px;
			*/
  /*
			&:before{
				position: absolute;
				font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "MS P明朝", "MS 明朝", serif;
				content:'{';
				font-size: 4.5rem;
				color: #666;
				left:-.1em;
				transform: scale(0.5, 1);

			}
			&:after{
				position: absolute;
				font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "MS P明朝", "MS 明朝", serif;
				content:'}';
				font-size: 4.5rem;
				color: #666;
				right:0;
				top:0;
				transform: scale(0.5, 1);

			}

 */
}

#main section.common .color-list ul {
  display: flex;
  align-items: center;
}

#main section.common .color-list ul li {
  text-align: center;
  padding: 5px;
  width: 16%;
  cursor: pointer;
}

#main section.common .color-list ul li div {
  background-size: cover;
  width: 20px;
  height: 20px;
  margin: 0 auto;
}

#main section.common .color-list ul li.active {
  background-color: #d0cbb9;
}

#main section.common .color-list ul li.active span {
  color: #444444;
}

#main section.common .color-list ul li:hover {
  background-color: rgba(239, 237, 231, 0.8);
}

#main section.common .color-list ul li:hover span {
  color: #444444;
}

#main section.common .color-list ul li.ttl {
  font-size: 1.2rem;
}

#main section.common .color-list ul li.ttl:hover {
  background-color: #FFF;
}

#main section.common .color-list ul li span {
  color: #666666;
  display: block;
  padding: 10px 5px 10px 30px;
  cursor: pointer;
}

#main section.common .color-list ul li .ttl {
  margin-top: 3px;
  font-size: 0.8rem;
  height: 2em;
}

#main section.common .color-list-mini {
  position: relative;
  width: auto;
  display: inline-block;
  float: right;
  background-color: #FFF;
  margin-top: -1.0em;
  padding: 0 5px;
}

#main section.common .color-list-mini:before {
  position: absolute;
  font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "MS P明朝", "MS 明朝", serif;
  content: '{';
  font-size: 2rem;
  color: #CCC;
  left: -.1em;
  transform: scale(0.5, 1);
}

#main section.common .color-list-mini:after {
  position: absolute;
  font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "MS P明朝", "MS 明朝", serif;
  content: '}';
  font-size: 2rem;
  color: #CCC;
  right: 0;
  top: 0;
  transform: scale(0.5, 1);
}

#main section.common .color-list-mini ul {
  display: flex;
  align-items: center;
}

#main section.common .color-list-mini ul li {
  padding: 2px;
}

#main section.common .color-list-mini ul li div {
  background-size: cover;
  width: 15px;
  height: 15px;
  cursor: pointer;
  border: solid 1px #CCC;
}

#main section.common .color-list-mini ul li.active {
  position: relative;
  /*
						background-color: darken($ciColorSub, 15%);
						font-weight: bold;

						span {
							color: $ftColorMain;
						}

						 */
}

#main section.common .color-list-mini ul li.active:after {
  position: absolute;
  font-family: "Font Awesome 5 Free";
  font-weight: bold;
  content: "\f00c";
  top: 3px;
  font-size: 1.2rem;
  left: 3px;
  text-shadow: 1px 1px 0 #FFF;
}

#main section.common .color-list-mini ul li:hover {
  background-color: rgba(239, 237, 231, 0.8);
}

#main section.common .color-list-mini ul li:hover span {
  color: #444444;
}

#main section.common .color-list-mini ul li span {
  color: #666666;
  display: block;
  padding: 10px 5px 10px 30px;
  cursor: pointer;
}

#main section.common .color-list-mini ul li.ttl {
  font-size: 1.0rem;
}

#main section.common .color-list-mini ul li.ttl:hover {
  background-color: #fff;
}

#main section.common #item-area {
  width: 95%;
  position: relative;
  margin-bottom: 0 !important;
}

#main section.common #item-area #low-item {
  width: 390px;
  display: inline-block;
}

#main section.common #item-area #middle-item {
  width: 320px;
  padding-left: 25px;
  display: inline-block;
  vertical-align: top;
}

#main section.common #item-area #middle-item .box-lst {
  min-width: 100px;
}

#main section.common #item-area #high-item {
  width: 220px;
  padding-left: 25px;
  display: inline-block;
  vertical-align: top;
}

#main section.common #item-area #other-item {
  width: 380px;
  position: absolute;
  top: -220px;
  right: -20px;
}

#main section.common #item-area #other-item div.vartical-grp {
  display: inline-block;
}

#main section.common #item-area #other-item .box-lst {
  padding: 10px 5px;
}

#main section.common #item-area #other-item .mvitem {
  margin: 5px 10px;
}

#main section.common #item-area #other-item .narrow .mvitem {
  margin: 5px 15px;
}

#main section.common #item-area #other-item .narrow .name {
  text-align: right;
  min-height: 95px;
  margin-left: -12px;
  width: 10px;
  -webkit-writing-mode: vertical-lr;
  -ms-writing-mode: tb-lr;
  writing-mode: vertical-lr;
  text-orientation: upright;
  -webkit-text-orientation: upright;
}

#main section.common #item-area #other-item h5 {
  width: 95%;
  font-size: 1.2rem;
}

#main section.common #item-area h5 {
  width: 100%;
  position: relative;
  margin-bottom: 10px;
}

#main section.common #item-area h5 span {
  padding-right: 10px;
  background-color: #FFF;
  z-index: 1;
  position: relative;
}

#main section.common #item-area h5::before {
  width: 100%;
  border-top: solid 1px #666;
  content: ' ';
  display: block;
  top: 0.5em;
  position: absolute;
}

#main section.common #item-area h5::after {
  background-color: #666;
  border-radius: 5px;
  width: 5px;
  content: " ";
  height: 5px;
  position: absolute;
  top: 50%;
  margin-top: -2px;
  right: 0;
  display: inline-block;
}

#main section.common #item-area ul.group.width-group {
  width: 100%;
}

#main section.common #item-area ul.group.width-group li ul.box-ttl li {
  width: 20%;
}

#main section.common #item-area ul.group.no-group {
  width: auto;
  display: inline-block;
  padding-right: 10px;
  vertical-align: top;
}

#main section.common #item-area ul.group.no-group li .box-lst {
  padding: 10px 20px;
}

#main section.common #item-area ul.group li {
  position: relative;
}

#main section.common #item-area ul.group li ul.box-ttl {
  width: 100%;
  display: flex;
  font-size: 1.0rem;
  margin: 0;
  font-weight: bold;
}

#main section.common #item-area ul.group li ul.box-ttl li {
  text-align: center;
}

#main section.common #item-area ul.group li .box-ttl {
  font-size: 1.0rem;
  background-color: #FFF;
  display: inline-block;
  z-index: 1;
  font-weight: bold;
  color: #666;
  margin-top: -2em;
}

#main section.common #item-area ul.group li .help-icon {
  right: 5px;
  top: 20px;
  position: absolute;
  background-color: #442C0D;
  color: #FFF;
  border-radius: 10px;
  line-height: 1.5em;
  width: 1.5em;
  text-align: center;
  cursor: pointer;
  z-index: 9999;
}

#main section.common #item-area ul.group li .help-icon:after {
  color: #FFF;
  font-family: "Font Awesome 5 Free";
  content: '\f128';
  font-weight: bold;
}

#main section.common #item-area ul.group li .help-icon.bikkuri:before {
  content: 'チェック';
  font-size: 0.8rem;
  position: absolute;
  top: -2em;
  color: #442C0D;
  left: -1.25em;
  width: 5em;
}

#main section.common #item-area ul.group li .help-icon.bikkuri:after {
  color: #FFF;
  font-family: "Font Awesome 5 Free";
  content: '\f12a';
  font-weight: bold;
}

#main section.common #item-area ul.group li .help-icon.close:after {
  content: '\f00d';
}

#main section.common #item-area ul.group li .help-win {
  display: none;
  position: absolute;
  width: 260px;
  height: auto;
  z-index: 9999999;
  top: 50px;
  right: 5px;
  border: solid 1px #CCC;
  background-color: #FFF;
  box-shadow: 2px 2px 4px;
}

#main section.common #item-area ul.group li .box-lst {
  border: solid 1px #CCC;
  margin-bottom: 5px;
  min-width: 140px;
}

#main section.common #item-area ul.group li .box-lst.opt {
  border: dashed 1px #CCC;
  position: relative;
}

#main section.common #item-area ul.group li .box-lst.opt:before {
  position: absolute;
  content: 'オプション';
  right: 0;
  top: 0;
  font-size: .9rem;
  color: #fff;
  font-weight: bold;
  background-color: #999;
  display: block;
  padding: 3px;
}

#main section.common #item-area ul.group li .box-lst li {
  display: flex;
  justify-content: space-evenly;
}

#main section.common #item-area ul.group li .box-lst li.btm {
  align-items: flex-end;
}

#main section.common #item-area ul.group li .box-lst li div.grp {
  width: 20%;
  text-align: center;
  padding: 13px 0 10px;
}

#main section.common#recommendlst {
  width: 1100px;
  margin: auto;
  border: none;
  background: transparent;
}

#main section.common#recommendlst h3 img {
  width: auto;
  height: 2rem;
}

#main section.common#recommendlst ul {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 3em;
}

#main section.common#recommendlst ul li {
  position: relative;
  width: 25%;
  padding: 3.5em 2.5% 3.5rem;
  border-right: 1px #d0cbb9 solid;
  border-bottom: 1px #d0cbb9 solid;
  text-align: center;
  transition: background-color 0.3s;
}

#main section.common#recommendlst ul li:hover {
  cursor: pointer;
}

#main section.common#recommendlst ul li:hover .button span {
  box-shadow: none;
  background-color: #5c3723;
  color: #fff;
}

#main section.common#recommendlst ul li h5 {
  text-align: left;
  margin-bottom: 10px;
  padding-left: 2.25em;
  line-height: 1.2em;
  font-size: 1.8rem;
  font-weight: normal;
}

#main section.common#recommendlst ul li h5::before {
  position: absolute;
  left: 0;
  top: 20px;
  display: inline-block;
  padding: 0.5em 0.75em 0.5em 8%;
  line-height: 1em;
}

#main section.common#recommendlst ul li:nth-of-type(1) h5::before {
  content: "1";
}

#main section.common#recommendlst ul li:nth-of-type(2) h5::before {
  content: "2";
}

#main section.common#recommendlst ul li:nth-of-type(3) h5::before {
  content: "3";
}

#main section.common#recommendlst ul li:nth-of-type(4) h5::before {
  content: "4";
}

#main section.common#recommendlst ul li:nth-of-type(5) h5::before {
  content: "5";
}

#main section.common#recommendlst ul li:nth-of-type(6) h5::before {
  content: "6";
}

#main section.common#recommendlst ul li:nth-of-type(7) h5::before {
  content: "7";
}

#main section.common#recommendlst ul li:nth-of-type(8) h5::before {
  content: "8";
}

#main section.common#recommendlst ul li:nth-of-type(9) h5::before {
  content: "9";
}

#main section.common#recommendlst ul li:nth-of-type(10) h5::before {
  content: "10";
}

#main section.common#recommendlst ul li:nth-of-type(11) h5::before {
  content: "11";
}

#main section.common#recommendlst ul li:nth-of-type(12) h5::before {
  content: "12";
}

#main section.common#recommendlst ul li:nth-of-type(13) h5::before {
  content: "13";
}

#main section.common#recommendlst ul li:nth-of-type(14) h5::before {
  content: "14";
}

#main section.common#recommendlst ul li:nth-of-type(15) h5::before {
  content: "15";
}

#main section.common#recommendlst ul li:nth-of-type(16) h5::before {
  content: "16";
}

#main section.common#recommendlst ul li p.lead {
  display: block;
  text-align: left;
  line-height: 1.5em;
  margin: 0 auto;
  font-size: 1.2rem;
  color: #444444;
}

#main section.common#recommendlst ul li p.button {
  position: absolute;
  bottom: 3em;
  left: 0;
  width: 100%;
  text-align: center;
  font-size: 1.0rem;
}

#main section.common#recommendlst ul li p.button span {
  position: relative;
  padding: 0.75em 1.5em;
  text-align: center;
  background-color: #efede7;
  border-radius: 0.25em;
  color: #5c3723;
  transition: .3s;
}

#main section.common#recommendlst ul li div.sim-area {
  position: relative;
  background-color: #EEE;
  margin-bottom: 30px;
  z-index: -2;
}

#main section.common#recommendlst ul li div.sim-area div.item {
  position: absolute;
  box-sizing: content-box;
  padding: 5px;
  z-index: 0;
}

#main section.common#recommendlst ul li div.sim-area div.item div.wrap {
  position: relative;
  top: 0;
}

#main section.common#recommendlst ul li div.sim-area div.item div.wrap div.img {
  width: 100%;
  height: 100%;
  background-size: 100% 100%;
}

#main section.common#savelst {
  border: none;
  background-color: transparent;
  max-width: 730px;
  letter-spacing: normal;
}

#main section.common#savelst ul {
  display: flex;
  flex-wrap: wrap;
}

#main section.common#savelst ul li {
  position: relative;
  width: 33.3333333333%;
  padding: 20px 2.5%;
  border-right: solid 1px #dcdcdc;
  border-bottom: solid 1px #dcdcdc;
}

#main section.common#savelst ul li:nth-of-type(1), #main section.common#savelst ul li:nth-of-type(2), #main section.common#savelst ul li:nth-of-type(3) {
  border-top: solid 1px #dcdcdc;
}

#main section.common#savelst ul li:nth-of-type(1), #main section.common#savelst ul li:nth-of-type(3n+1) {
  border-left: solid 1px #dcdcdc;
}

#main section.common#savelst ul li button {
  position: absolute;
  bottom: 20px;
  left: 50%;
  margin-left: -50px;
  padding: 0.5em 1em;
  text-align: center;
  width: 100px;
  border-radius: 0.25em;
  background-color: #d0cbb9;
}

#main section.common#savelst ul li button:hover {
  background-color: #efede7;
}

#main section.common#savelst ul li p.close {
  position: absolute;
  background-color: #d0cbb9;
  border-radius: 50px;
  color: #FFF;
  font-size: 2.0rem;
  width: 2em;
  line-height: 2em;
  text-align: center;
  top: 15px;
  right: 15px;
  cursor: pointer;
  z-index: 999;
}

#main section.common#savelst ul li p.close:hover {
  background-color: #efede7;
}

#main section.common#savelst ul li div.sim-area {
  position: relative;
  background-color: #F6F6F6;
  margin-top: 40px;
  margin-bottom: 50px;
  z-index: -9;
  /*
						div.item{
							position: absolute;
							box-sizing: content-box;
							padding:5px;
							z-index: 0;

							div.wrap {
								position: relative;
								top: 0;
								div.img{
									width: 100%;
									height:100%;
									//background-size: contain;
									background-size: 100% 100%;
								}
								p.name {
									position: absolute;
									//background-color: #FFF;
									text-align: center;
									display: block;
									bottom: 4px;
									left:50%;
									width: 55px;
									margin-left:-27px;
									font-size: 0.8rem;
									padding: 2px;
									border-radius: 2px;
									background-color: rgba(255, 255, 255, 0.6);
									z-index: 99;
									&.min-mode{
										bottom:auto;
										top:-40px;
										border: solid 1px #CCC;
										z-index: 99;
										&:after{
											border-left: 1px solid;
											content: "";
											flex-grow: 1;
											margin-top: 1rem;
										}
									}
								}
								p.price {
									position: absolute;
								}
							}
						}
*/
}

#main section.common#print-area {
  max-width: 800px;
}

#main section.common#print-area h3 {
  padding: 20px;
  border-bottom: solid 1px #CCC;
}

#main table#sheet-area {
  border-top: solid 1px #444444;
  border-right: solid 1px #444444;
  margin: 20px auto;
  position: relative;
  width: 800px;
  padding: 20px;
  font-size: 1.3rem;
}

#main table#sheet-area th, #main table#sheet-area td {
  border-left: solid 1px #444444;
  border-bottom: solid 1px #444444;
  padding: 10px 3px;
  background-color: #fff;
}

#main table#sheet-area th {
  background-color: #fcfcfc;
  color: #999;
  font-weight: bold;
}

#main table#sheet-area td.r {
  text-align: right;
}

#main table#sheet-area td.n {
  background-color: transparent;
  border-bottom: 0;
  border-left: 0;
}

*[draggable=true] img {
  -webkit-touch-callout: none;
}

.modal {
  position: absolute;
  z-index: 9;
  background-color: #FFF;
  opacity: 0.8;
  display: none;
}

div#sim-leftarea {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  background-color: #f6f1ff;
  opacity: 0.8;
  z-index: 0;
}

div#sim-lowarea {
  position: absolute;
  height: 100%;
  width: 105px;
  opacity: 0.8;
  z-index: 0;
  font-size: 1.0rem;
  padding: 10px;
  line-height: 1.5em;
}

.candrop {
  border: solid 3px #fff;
  box-sizing: border-box;
  z-index: 1 !important;
  position: relative;
}

.candrop:before {
  font-size: 0.8rem;
  content: 'ここに配置できます';
  position: absolute;
  color: #000;
  width: 45px;
  top: 50%;
  margin-top: -1.5em;
  left: 50%;
  margin-left: -24px;
  background-color: rgba(255, 255, 255, 0.6);
  padding: 3px;
  border-radius: 2px;
  z-index: 99999999;
}

.cantdrop {
  z-index: 1 !important;
  position: relative;
}

.cantdrop:before {
  font-size: 4rem;
  content: '×';
  position: absolute;
  color: red;
  top: -0.5em;
  right: -0.2em;
  z-index: 99999999;
}