@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;
}
#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: -1em;
  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: -0.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: 1rem;
}
#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: 0px;
}
#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: 1rem;
  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: 1rem;
  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: 0.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: 1rem;
}
#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: 0.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: 2rem;
  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: 1rem;
  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;
}

/*# sourceMappingURL=style.css.map */