@charset "utf-8";


/* ===================================== */
/* Common styles.
/* ===================================== */
img {
	/*image-rendering: pixelated;*/
	-ms-interpolation-mode: bicubic;

}
.user-selectable {
	cursor: pointer;
}
.icon {
	vertical-align: middle;
}
img.insertion {
	max-width: 100%;
}
.fa.icon-lg {
	font-size: 1.4em !important;
}
.text-condensed {
	letter-spacing: -0.1em;
}
.text-center {
	text-align: center;
}

.btn:active,
.btn:focus {
	outline: none !important;
	box-shadow: none !important;
}
.btn {
	border-radius: 1px;
}
.btn.btn-default {
	background: #fff;
	color: #778;

}
/* 緑のボタン */
.btn.btn-green {
	color: #fff;
	border-color: #6cb800;
	background-color: #6cb800;
	-webkit-transition: background-color 0.15s, color 0.15s;
	   -moz-transition: background-color 0.15s, color 0.15s;
	        transition: background-color 0.15s, color 0.15s;
}
.btn.btn-rounded {
	border-radius: 600px !important;
}
.btn.btn-ghost {
	background: transparent;
}
.btn-green.btn-ghost {
	color: #6cb800;
	border-color: #6cb800;
}
.btn-green.btn-ghost:hover,
.btn-green.btn-ghost:focus {
	color: #fff !important;
	background: #6cb800;
}
.btn-wide-100 {
	min-width: 100px;
}
.btn-lg {
	padding: 12px 20px;
	height: 50px;
}
.btn-link-muted {
	color: #999;
}
.btn-link-muted:hover {
	text-decoration: none;
	color: #666;
}
.btn-llg {
	padding: 0 20px;
	min-width: 80px;
	height: 40px;
	font-size: 17px;
}
img {
	-webkit-user-drag: none;
	user-drag: none;
	-ms-user-select: none;

}
input[type=number] {
	text-align: right;
}

.page {
	padding: 30px;
}
.form-control {
	border: 1px solid #dadada !important;
	border-radius: 0 !important;
	box-shadow: none !important;
}
.form-control:focus {
	border-color: #43a3fb !important;
}
input[type=text].input-lg,
input[type=number].input-lg{
	height: 50px;
	padding: 10px;
}
input[type=text].input-llg,
input[type=number].input-llg{
	height: 40px;
	padding: 8px;
	font-size: 16px;
}
.form-group {
	margin-bottom: 25px;
}
.input-group-addon-text {
	background: transparent !important;
	border: none !important;
}
.form-actions {
	margin-top: 40px;
}
.help-block {
	font-size: 9pt;
}
.page .modal .modal-content {
	border-radius: 0;
	border: none;
	padding: 25px;
	box-shadow: 0 3px 10px rgba(0,0,0,.3);
}
.page .modal .modal-header {
	padding-top: 30px;
	border: none;
	text-align: center;
}
.page .modal .modal-header h4 {
	font-size: 25px;
}
.page .modal .modal-footer {
	padding-top: 30px;
	border: none;
	text-align: center;
}

/* modal */
.modal .modal-dialog {

}
.modal-backdrop {
	background: rgba(255, 255, 255, 1);
}
.modal-llg {
	width: 600px;
}
/* tabs */
.nav-tabs.nav-tabs-center {
	text-align:center;
}
.nav-tabs.nav-tabs-center > li {
	float:none;
	display:inline-block;
	*display:inline; /* ie7 fix */
	zoom:1; /* hasLayout ie7 trigger */
}
/* icon */
.icon-chevron-bottom::before {
	border-style: solid;
	border-width: 0.1em 0.1em 0 0;
	content: '';
	display: inline-block;
	height: 0.45em;
	left: 0.15em;
	position: relative;
	vertical-align: top;
	width: 0.45em;
	top: 0.2em;
	transform: rotate(135deg);
}
.icon-chevron-let::before {
	border-style: solid;
	border-width: 0.1em 0.1em 0 0;
	content: '';
	display: inline-block;
	height: 0.45em;
	left: 0.15em;
	position: relative;
	vertical-align: top;
	width: 0.45em;
	top: 0;
	transform: rotate(-135deg);
}

/*.icon-chevron-right:before {
	left: 0;
	transform: rotate(45deg);
}
.icon-chevron-bottom:before {
	top: 0;
	transform: rotate(135deg);
}
.icon-chevron-left:before {
	left: 0.25em;
	transform: rotate(-135deg);
}*/

/* ===================================== */
/* Application styles.
/* ===================================== */
body {
	width: 100%;
	-webkit-font-smoothing: antialiased;
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
	/*padding: 30px;*/
}
header {
	height: 50px;
}
header .brand img {
	width: 170px;
	height: auto;
}
header .title_ {
	margin-bottom: 0;
	margin-top: 11px;
	margin-left: 25px;
}
header .title_ a {
	color: #888;
}
header .series {
    margin: 0 20px;
    float: right;
    padding: .5em .75em;
    background-color: #f6f6f6;
    border: 1px solid #eee;
}
header .title {
    float: right;
    padding: 5px 0;
    text-align: left;
	padding: .5em .75em;
}
header .title span {
	display: block;
	margin-bottom: .2em;
	color: #aaa;
	font-size: .9em;
}
header .btn {
	margin-left: 5px;
}
/* ===================================== */
/* basic page style.
/* ===================================== */
.basic-page {
}
.basic-page .content {
	padding: 0 15%;
	margin-top: 60px;
}
@media (max-width: 767px) {
	.basic-page .content {
		padding: 0 30px !important;
	}
}
.basic-page .page-header {
	border: none !important;
	margin: 0;
	margin-bottom: 10px;
}
.basic-page .page-header h2 {
	font-weight: 600;
	-webkit-font-smoothing: antialiased;
	font-size: 26px;
	color: #111411;
}
.basic-page .page-header h2 em {
	font-style: normal;
	color: #6cb800;
}
.basic-page .lead {
	color: #666966;
	font-size: 16px;
	line-height: 1.8em;
	margin-bottom: 2em;
}

/* ===================================== */
/* Welcome page styles.
/* ===================================== */
#welcome-page header {

}
#welcome-page .insertion img {
	max-width: 230px;
	margin: 1.5em 0;
	/*margin-left: 70px;*/
}
#welcome-page form .form-actions {
	margin: 2em 0;
}
#welcome-page form .btn {
	min-width: 300px;
	text-align: left;
	margin-bottom: 15px;
}
/* ===================================== */
/* Continue page styles.
/* ===================================== */
#continue-page {
}
#continue-page form {
/*	margin: 0 auto;
	height: 50px;
	width: 400px;
	padding: 10px;
	border: 2px solid #dadada;*/
	max-width: 400px;
	margin: 2em 0;
}
#continue-page .form-actions {
	margin: 2em 0;
}
#continue-page .btn {
	/*margin: 20px;
	padding: 15px;*/
}

/* ===================================== */
/* Setspace page styles.
/* ===================================== */
#setspace-page {
}
#setspace-page form {
	margin: 2em 0;
}
/* ===================================== */
/* Loading page styles.
/* ===================================== */
#loading .loading {
    padding:15px;
    position:fixed;
    width: 100%;
    height: 100%;
    top:0;
    left:0;
    background-color:#FFF;
	z-index: 110;
}
#loading .loading .loading-msg {
	position: absolute;
    text-align:center;
    padding-top: 100px;
    left: 45%;
    top: 45%;
	background: url("../img/loading.gif") no-repeat center top;
}

/* ===================================== */
/* canvas common.
/* ===================================== */
/* ルーラー */
.canvas-correct .ruler {
	font-size: 9pt;
	color: #666;
}
/** 横 |-----200cm ------| */
.canvas-correct .horizontal-ruler {
	display: block;
	position: absolute;
	top: -30px;
	left: 0;
	content: "";
	height: 15px;
	width: 100%;
	border-left: 1px solid #e6e6e6;
	border-right: 1px solid #e6e6e6;
	text-align: center;
}
.canvas-correct .horizontal-ruler span {
	display: inline-block;
	background: #fff;
	text-align: center;
	padding: 0 10px;
	position: relative;
	white-space: nowrap;
	line-height: 1.5;
}
/** ------ */
.canvas-correct .horizontal-ruler:before {
	display: block;
	position: absolute;
	content: "";
	height: 1px;
	width: 100%;
	border-top: 1px solid #e6e6e6;
	top: 50%;
	left: 0;
}

/** |         | */
.canvas-correct .vertical-ruler {
	display: block;
	position: absolute;
	left: -35px;
	top: 0;
	content: "";
	width: 15px;
	height: 100%;
	border-top: 1px solid #e6e6e6;
	border-bottom: 1px solid #e6e6e6;
	text-align: center;
}
/** |-----200cm ------| */
.canvas-correct .vertical-ruler span {
	display: block;
	background: #fff;
	text-align: center;
	padding: 5px 0;
	top: 35%;
	margin-top: -0.5em;
	margin-left: -10px;
	position: relative;
	white-space: nowrap;
	line-height: 1;
}
/** ------ */
.canvas-correct .vertical-ruler:before {
	display: block;
	position: absolute;
	content: "";
	width: 1px;
	height: 100%;
	border-left: 1px solid #e6e6e6;
	top: 0;
	left: 50%;
}
.canvas-correct .selection-helper {
	position: absolute;
	top: -10px;
	left: -10px;
	bottom: -10px;
	right: -10px;
}
/* ===================================== */
/* Main page (layout page) styles.
/* ===================================== */
body #main-page {
	overflow: hidden;
}

#main-page {
	position: absolute;
	overflow: hidden;
	margin: 0 auto;
	/*padding: 30px;*/
	width: 100%;
	height: 100%;
	/*border: 1px solid #efefef;!*補助線*!*/
}
#main-page .color-dropdown {
	position: absolute;
	top: 100px;
	left: 30px;
}
#main-page .grade-dropdown {
	position: absolute;
	top: 180px;
	left: 30px;
}
#main-page .color-title {
	/*width: 110%;*/
	font-size: 12px;
    padding-left: 5px;
	color: #5f5f5f;
    /*padding-bottom: 2px;*/
    /*margin-bottom: 10px;*/
    /*border-bottom: dotted 3px #b3b3b3;*/
}
#main-page .canvas {
	position: absolute;
	bottom: 175px;
	width: 100%; /* TODO: Calculate dynamically. */
	height: 100%;
	/*left: -5%;*/
	left: 0;
	right: 0;
	margin-right: auto;
	margin-left: auto;
	border-bottom: 1px solid #b3b3b3;
	background: rgba(255, 255, 255, 0.5);
	line-height: 0;
	/* background-color: #778899; */
}
#main-page .canvas-correct {
	position: absolute;
	bottom: 175px;
	width: 100%; /* TODO: Calculate dynamically. */
	height: 100%;
	/*left: -5%;*/
	left: 0;
	right: 0;
	margin-right: auto;
	margin-left: auto;
	background: rgba(255, 255, 255, 0.5);
	line-height: 0;
	border: 1px solid #b3b3b3;
	box-shadow: 0 0 0 5px rgba(239, 239, 239, 0.5) inset;
	/* background-color: #667482; */
}
#main-page .canvas .beam-back {
	position: absolute;
    width: 100%;
    top: 0;
    background-color: #f2f2f2;
    border-bottom: dashed 2px #dadada;
}
#main-page .canvas .beam-left {
    position: absolute;
    top: 0;
    left: 0;
    background-color: #f8f8f8;
    border-right: dashed 2px;
    border-bottom: dashed 2px;
    border-color: #e4e4e4;
}
#main-page .canvas .beam-right {
    position: absolute;
    top: 0;
    right: 0;
    background-color: #f8f8f8;
    border-left: dashed 2px;
    border-bottom: dashed 2px;
    border-color: #e4e4e4;

}
#main-page .canvas .snap-guide {
	/*background: #94d5f0;*/
	background: #43a3fb;
	opacity:0.8;
	z-index: 100;
}
#main-page .canvas .left-side {
	position: absolute;
	width: 100px;
	height: 100%;
	right: 100%;
	z-index: -1;
	/*border: 1px solid #efefef;*/
}
#main-page .canvas .left-side .color {
	width: 80%;
	margin-top: 30%;
	margin-left: 10%;
	margin-right: auto;
}
#main-page .canvas .left-object {
	position: absolute;
	bottom: -10px;
	right: 100%;
	margin-right: 25px;
}
#main-page .canvas .right-side {
    position: absolute;
    width: 200px;
    left: 100%;
    height: 100%;
	/*border: 1px solid #efefef;*/
}
#main-page .canvas .right-object {
	position: absolute;
	bottom: -10px;
	left: 100%;
	margin-left: 20px;
}

#main-page .canvas .bottom {
    position: fixed;
    left: 0;
    right: 0;
    margin: 0 auto;
    z-index: -1;
}
#main-page .canvas .bottom img {
	height: 23px;
}
#main-page .canvas .bottom .floor-m {

}
#main-page .canvas .bottom .floor-m img {
	width: 100%;
}
#main-page .canvas .bottom .floor-l {
	position: absolute;
	top: 0;
	right: 100%;
}
#main-page .canvas .bottom .floor-r {
	position: absolute;
	top: 0;
	left: 100%;
}


/* ここにドラッグ&ドロップしてください */
#main-page .canvas .step-guide {
	opacity:0;
	position: absolute;
	top: -2px;
	bottom: -2px;
	left: -2px;
	right: -2px;
	border: 4px solid #94d5f0;	/* #29abe2 の opacity=0.5くらい (線を消すために透明を使わない) */
	box-shadow: 0 0 1px #29abe2;
	box-sizing: content-box;
	-webkit-transition: opacity 0.1s, color 0.1s;
	   -moz-transition: opacity 0.1s, color 0.1s;
	        transition: opacity 0.1s, color 0.1s;
}
#main-page .canvas .step-guide.active {
	opacity: 1;
}
#main-page .canvas .step-guide .message {
	display: table;
	height: 100%;
	width: 100%;
}
#main-page .canvas .step-guide .message p {
	color: #29abe2;
	font-weight: bold;
	display: table-cell;
	text-align: center;
	vertical-align: middle;
}
#main-page .canvas .step-guide .arrow {
	position: absolute;
	bottom: -80px;
	left: 50%;
	margin-left: -30px;
	z-index: 1000;
	opacity: 0.8;
}
/* 梁ボタン */
.beam-setting-btn {
	position: absolute;
	top: -60px;
	right: -80px;
	border: 1px solid #b3b3b3;
	border-radius: 300px;
	overflow: hidden;
}
.beam-setting-btn.enabled {
	border-color: #6cb800;
}
.beam-setting-btn img {
	width: 60px;
}

/* 配置するオブジェクト */
#main-page .canvas .geometry {
	position: absolute;
	cursor: pointer;
}
#main-page .canvas .geometry .actions {
	display: none;
	position: absolute;
	top: -15px;
	left: 100%;
	margin-left: -15px;
	white-space: nowrap;
	z-index: 4;
}
#main-page .canvas .geometry .actions .btn {
	border-radius: 200px;
	width: 30px;
	height: 30px;
	color: #fff;
	padding: 0;
	font-size: 18px;
	font-family: "Open Sans", Helvetica, Arial, sans-serif;
	font-weight: 100;
	line-height: 1em;
	background: rgba(0, 0, 0, 0.4);
}
#main-page .canvas .geometry .actions .adj-width-btn {
	background: #94ba6f;
}
#main-page .canvas .geometry .actions .adj-height-btn {
	background: #94ba6f;
}
#main-page .canvas .geometry.selected:after {
	position: absolute;
	content: "";
	display: block;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: 2;
	background: rgba(41, 171, 226, 0.3);
}
/** 選択中だけボタンを出す */
#main-page .canvas .geometry.selected .actions {
	display: block;
}
#main-page .canvas .warning {
	position: absolute;
	top: 50%;
	left: 50%;
	margin-left: -15px;
	margin-top: -15px;
	width: 30px;
	height: 30px;
	background: orange;
	color: #fff;
	z-index: 3;
	border-radius: 100px;
	text-align: center;
	vertical-align: middle;
	padding-top: 7px;
}
#main-page .canvas .geometry.dragging {
	box-shadow: 0 0 3px rgba(0, 0, 0, 0.5) !important;
}
#main-page .refine {
	display: none;
}

#main-page .refine.active {
	display: table-cell;
}
#main-page .thumbnail-wrapper {
	display: table-cell;
    padding: 0 5px;
}


#main-page .item.thumbnail {
    height: 100px;
    width: 100px;
    padding: 10px;
    border-radius: 0;
    border: 1px solid #dde;
    border-top: 1px solid #e8e8f8;
    border-left: 1px solid #e8e8f8;
    cursor: pointer;
    float: left;
    position: relative;
}
#main-page .item.thumbnail img {
	min-width: 1.5px;
    max-height: 65px;
    max-width: 80px;
    position: absolute;
    top: -10px;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
}
#main-page .item.thumbnail .caption {
	height: 20px;
    text-overflow: ellipsis;
    overflow: hidden;
    font-size: 7pt;
    padding: 4px 0 0 0;
    display: block;
    text-align: center;
    margin-top: 68px;
}
/*#main-page .nav.nav-tabs {
	white-space: nowrap;
}*/
#main-page .note {
	position: absolute;
	right: 0;
	width: 250px;
	height: 100%;
	border: 1px solid #efefef;/*補助線*/
}
#main-page .note img {
	width: 100%;
}
#main-page .specification {
	overflow-y: auto;
	margin-top: 10px;
	height: 250px;
	width: 100%;
	border: 1px solid #efefef;/*補助線*/
}
#main-page .specification table {
	border-collapse: separate;
	border-spacing: 1px;
	text-align: left;
	line-height: 1.5;
}
#main-page .specification table th {
	width: 150px;
	padding: 10px;
	font-weight: bold;
	vertical-align: top;
}
#main-page .specification table td {
	width: 350px;
	padding: 10px;
	vertical-align: top;
	border-bottom: 1px solid #ccc;
}
#main-page .note-modal .modal-body {
    position: relative;
    padding: 0;
    margin: 30px;
}
#main-page .note-modal .modal-body .upload {
	position: absolute;
    top: 0;
    left: 50%;
    height: 200px;
}
#main-page .note-modal .modal-body .upload img {
	height: 150px;
}
#main-page .note-modal .modal-body .upload .label {
	width: 100px;
    background-color: rgb(255, 156, 91);
    color: #fff;
    padding: 8px;
    margin-bottom: 10px;
    border-radius: 5px;
    font-size: 100%;
    display: block;
}
#main-page .note-modal input[type="text"] {
	height: 2.5em;
	width: 45%;
	padding: 10px;
}
#main-page .note-modal textarea {
	resize: none;
	width: 100%;
	padding: 10px;
	height: 15em;
}

/* 配置したオブジェクト ---------------------- */
.item.layout-object img {
	width: auto !important;
	cursor: pointer;
}
.item.layout-object img {
	/* TODO: あるとかっこいいけど、テレビが微妙 */
	box-shadow: 2px 2px 8px #ccc;
}

/* z-index ----------------------
	100. ドラッグ中 - 前面に出す
	 60. 選択中
	 50. テレビとかの自由配置のヤツ
	 20. 最後に選択（あるいは移動）したやつ (選択が解除される事で裏に移動する事を避ける)
	 10. geometry (配置物)
		1. 本体
		2. 選択した時のマスク
		3. ワーニングアイコン
		4. 削除ボタンなどのactions
*/
#main-page .geometry { z-index: 10;  }
/*#main-page .geometry.has-warning {  z-index: 20;  }*/
#main-page .geometry.last-selected {  z-index: 20;  }
#main-page .geometry.freely-positing {  z-index: 50;  }
#main-page .geometry.selected {  z-index: 60;  }
#main-page .geometry.dragging {  z-index: 100 !important;  }

/* アイテムボックス (item-box) ---------------------- */
#main-page .item-box {
	position: absolute;
	width: 100%;
	height: 140px;
	/*height: 210px;*/
	bottom: 0px;
	/*bottom: 30px;*/
	/*margin-bottom: -30px;*/
	margin-left: -30px;
	margin-right: -30px;
	border-top: solid 1px #cecece;


}
#main-page .item-box .category-nav {
	padding-left: 30px;
	padding-right: 30px;
	bottom: 30px;
	width: 100%;
	border-bottom: 1px solid #d4d4d4;
}
#main-page .item-box .category-nav .nav-item {
}
#main-page .item-box .category-nav .nav-item > a {
	border-radius: 0 !important;
	border: none;
	border-bottom: 3px solid transparent;
	color: #aaaaac;
	font-size: 12px;
	-webkit-transition: border-color 0.1s, color 0.1s;
	   -moz-transition: border-color 0.1s, color 0.1s;
	        transition: border-color 0.1s, color 0.1s;
}
#main-page .item-box .category-nav .nav-item > a:hover {
	color: #333 !important;
	font-weight: bold;
	background: transparent;
	border-color: transparent;
}
#main-page .item-box .category-nav .nav-item.active > a,
#main-page .item-box .category-nav .nav-item > a:focus {
	color: #333 !important;
	font-weight: bold;
	border-color: #94ba6f !important;
}

#main-page .item-box .tab-filter {
	height: 100%;
	/* width: 100%; */
	/* margin: 0 auto; */
	/* background-color: #fff; */
	padding: 10px 18px;
	 position: relative;
	float: left;
}

#main-page .item-box .tab-filter:before {
	content: "";
	position: absolute;
	top: 50%;
	left: 100%;
	margin-top: -12px;
	border: 12px solid transparent;
	border-left: 12px solid #fff;
	z-index: 1;
}

#main-page .item-box .tab-filter:after {
	border-top: 12px solid #fff;
	border-right: 12px solid transparent;
	border-left: 12px solid transparent;
	content: '';
	margin-left: -36px;
	position: absolute;
	bottom: -16px;
	left: 50%;
	z-index: 1;
}

/*!* 吹き出し・全共通 *!*/
/*.balloon {*/
	/*position: relative;*/
	/*transform-style: preserve-3d;*/
	/*!*width: 200px; !* 幅 *!*!*/
	/*!*min-height: 60px; !* 最小の高さ *!*!*/
	/*!*margin: 20px; !* 外側の余白 *!*!*/
	/*!*padding: 10px; !* 内側の余白 *!*!*/
	/*border-radius: 5px; !* 角の丸め方　*!*/
/*}*/
/*.balloon::before,*/
/*.balloon::after {*/
	/*content: '';*/
	/*position: absolute;*/
	/*width: 20px; height: 20px; !* 吹き出しサイズ *!*/
	/*z-index: 1;*/
/*}*/
/*.balloon,*/
/*.balloon::before {*/
	/*background: #fff; !* 背景色（linear-gradientもこの色と統一する必要がある）*!*/
	/*box-shadow: 0 0 10px 0 rgba(163,163,163,0.50); !* ぼかし距離(第3引数)，拡散距離(第4引数)，色(第5引数) *!*/
	/*z-index: 1;*/
/*}*/

/*!* 吹き出し・右辺共通 *!*/
/*.balloon--right_top::after,*/
/*.balloon--right_middle::after,*/
/*.balloon--right_bottom::after {*/
	/*background: linear-gradient(-135deg, #fff 51%, transparent 51%); !* 第2引数にbackgroundと共通の背景色を指定 *!*/
/*}*/

/*!* 吹き出し・右辺中央 *!*/
/*.balloon--right_middle::before,.balloon--right_middle::after {*/
	/*right: -10px; top: 50%; !* 位置 *!*/
	/*transform: translateY(-50%) rotate(45deg) skew(-20deg,-20deg) translateZ(-1px); !* 傾斜角(skew) *!*/
/*}*/
/*.balloon--right_middle::after {*/
	/*transform: translateY(-50%) rotate(45deg) skew(-20deg,-20deg) translateZ(1px); !* 傾斜角(skew) *!*/
/*}*/

#main-page .item-box .tab-filter .tab-filter-content {
	/*top: 0;*/
	/*bottom: 0;*/
	/*left: 0;*/
	/*right: 0;*/
	/*position: absolute;*/
	/*margin: auto 20px;*/
	/*height: 60px;*/
}
#main-page .item-box .tab-filter button {
	color: #5a5a5a;
	border-radius: 5px;
	box-shadow: none !important;
	outline: none !important;
	padding: 6px 10px;
}
#main-page .item-box .tab-filter a {
	outline: none !important;
}
#main-page .item-box .tab-filter .dropdown-menu>.active>a {
	background-color: #9aca6c;
	background-image: -webkit-linear-gradient(top,#9aca6c 0,#9aca6c 100%);
	background-image: -o-linear-gradient(top,#9aca6c 0,#9aca6c 100%);
	background-image: -webkit-gradient(linear,left top,left bottom,from(#9aca6c),to(#9aca6c));
	background-image: linear-gradient(to bottom,#9aca6c 0,#9aca6c 100%);
}
#main-page .item-box .tab-filter .sub-title {
	font-size: 11px;
	color: #5f5f5f;
}
#main-page .item-box .tab-filter .tab-category {
	/*display: table-cell;*/
	/*margin-right: 20px;*/
}
#main-page .item-box .tab-filter .tab-arrow {
	/*display: table-cell;*/
}
#main-page .item-box .tab-filter .tab-arrow-content {
	/*position: relative;*/
	/*top: 20px;*/
	/*margin: 0 15px;*/
	text-align: center;
}
#main-page .item-box .tab-filter .tab-refine {
    /*display: table-cell;*/
	margin-top: 10px;
}

#main-page .item-box .tab-content {
    position: relative;
    background: #f2f2f2;
    /*height: 100%;*/
	height: 140px;
	/*border: 1px solid transparent;	!** dummy *!*/
	overflow: hidden;
	-webkit-box-shadow: inset 0px 0px 3px #ccc;
	-moz-box-shadow: inset 0px 0px 3px #ccc;
	box-shadow: inset 0px 0px 3px #ccc;
}
#main-page .item-box .tab-content .tab-pane {
    /*height: 130px;*/
	height: 100%;
    position: relative;
    /*margin: 0 30px 30px 30px;*/
	margin-left: 30px;
	margin-right: 30px;
    overflow: hidden;
}
#main-page .item-box .tab-content .tab-pane .tab-header {
    position: absolute;
    height: 35px;
    width: 100%;
    top: 0;
    left: 0;
    overflow: hidden;
}
#main-page .item-box .tab-content .tab-pane .tab-upper {
	position: absolute;
    height: 100%;
    padding-top: 6px;
    font-size: 11px;
    white-space: nowrap;
    left: 0;
}
#main-page .item-box .tab-content .tab-pane .tab-upper .categories {
    margin: 0 2.5px;
    height: 1.5em;
    padding: 2px 6px;
    font-size: 1em;
    color: #4f4f4f;
    background: #d5d5d5;
    border: none;
    box-shadow: none;
}
#main-page .item-box .tab-content .tab-pane .tab-upper .categories:hover {
    margin: 0 2.5px;
    height: 1.5em;
    padding: 2px 6px;
    font-size: 1em;
    color: #000000;
    background: #d5d5d5;
    border: none;
    box-shadow: none;
}
#main-page .item-box .tab-content .tab-pane .tab-upper .categories.active {
    padding: 1px 6px;
    color: #000000;
    font-size: 1em;
    font-weight: bold;
    background: rgb(180, 222, 120);
    border: solid 0.5px rgb(108, 184, 0);
}
#main-page .item-box .tab-content .tab-pane .mark-left,
#main-page .item-box .tab-content .tab-pane .mark-right {
	position: absolute;
	top: 0;
	bottom: 0;
	content: "";
	width: 80px;
	background: blue;
	z-index: 20;
}
#main-page .item-box .tab-content .tab-pane .tab-header .mark-left {
	left: 0;
	margin:0;
	background: linear-gradient(to right, rgba(242, 242, 242, 1) 0%,rgba(242, 242, 242, 0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
}
#main-page .item-box .tab-content .tab-pane .tab-header .mark-right {
	right: 0;
	margin:0;
	background: linear-gradient(to left, rgba(242, 242, 242, 1) 0%,rgba(242, 242, 242, 0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
}
#main-page .item-box .tab-content .tab-pane .mark-left {
	left: 0;
	margin-top: 10px;
	margin-bottom: 10px;
	background: linear-gradient(to right, rgba(242, 242, 242, 0.8) 0%,rgba(242, 242, 242, 0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
}
#main-page .item-box .tab-content .tab-pane .mark-right {
	right: 0;
	margin-bottom: 10px;
	margin-top: 10px;
	background: linear-gradient(to left, rgba(242, 242, 242, 0.8) 0%,rgba(242, 242, 242, 0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
}
/*#main-page .item-box .tab-content .tab-pane .mask {*/
	/*position: absolute;*/
	/*top: 20px;*/
	/*left: 30px;*/
	/*right: 30px;*/
	/*bottom: 40px;*/
	/*background: #000;*/
	/*opacity: 0.5;*/
	/*z-index: 2;*/
/*}*/
#main-page .tab-content .tab-scroll {
	white-space: nowrap;
    position: absolute;
    overflow: hidden;
    height: 100px;
    /*top: 30px;*/
    top: 20px;
    padding: 0;
    left: 0;
}

#main-page .tab-content .refine-control .btn.scroll-btn {
    position: absolute;
    bottom: 137px;
    width: 40px;
    height: 18px;
    z-index: 100;
    background: rgba(0, 0, 0, 0.4);
    border-radius: 100px;
    border: none;
    outline: none;
    color: #fff;
    text-shadow: none;
    padding: 1px 0 0 0;
}

#main-page .tab-content .control .btn.scroll-btn {
	position: absolute;
	bottom: 50px;
	/*margin-top: -20px;*/
	width: 40px;
	height: 40px;
	z-index: 100;
	background: rgba(0, 0, 0, 0.4);
	border-radius: 100px;
	border: none;
	outline: none;
	color: #fff;
	text-shadow:none;
	padding: 12px 0 0 0;
}
#main-page .item-box .btn.scroll-left-btn {
	left: 20px;
}

#main-page .item-box .btn.scroll-right-btn {
	right: 20px;
}
/* 詳細情報の表示 ====== */
#main-page .detail {
	position: absolute;
	/*display: none;*/
	right: 30px;
	width: 240px;
	top: 75px;
	opacity: 0;
	border: 1px solid transparent;
	padding: 20px 20px 25px 25px;
	border-radius: 10px;
	background: #fff;
	background: rgba(255, 255, 255, 0.9);
	z-index: -1;
	-webkit-transition: opacity 0.5s;
	   -moz-transition: opacity 0.5s;
	        transition: opacity 0.5s;
}
#main-page .specs {
}
#main-page .detail > * {
}
#main-page .detail.active {
	/*display: block;*/
	opacity: 1;
	border-color: #6cb800;
	z-index: 30;
}
#main-page .detail img {
	margin-bottom: 1em;
	width: 180px;
	height: 180px;
	/*max-width: 180px;*/
}
#main-page .detail .name {
	font-size: 14px;
	font-weight: 400;
	margin-top: 0;
	margin-bottom: 0.6em;
}
#main-page .detail .description {
	font-size: 12px;
}
#main-page .detail form {
	border-top: 1px dotted #ccc;
	padding: 15px 0;
	margin-top: 15px;
}
#main-page .detail form .form-group:last-child {
	margin-bottom: 0;
}
#main-page .detail .warning {
    font-size: 9px;
    color: #d9534f;
}
/* ===================================== */
/* Print page styles.
/* ===================================== */
#print-page .print-navbar {
	height: 50px;
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	padding: 10px;
	background: #FFFBE0;
	z-index: 1;
	border-radius: 0;
	border: none;
	border-bottom: 1px solid #C3BFA1;
	text-align: center;
}
#print-page .print-navbar .navbar-nav,
#print-page .print-navbar .navbar-text {
	display: inline-block;
	float: none;
	vertical-align: top;
}
#print-page .print-navbar .navbar-text {
	/* float: left; */
	font-weight: bold;
	padding: 0;
	margin: 5px 0 0 0;
	font-size: 15px;
}
#print-page .print-content {
	margin-top: 50px;
}
#print-page .save-code {
    float: left;
    font-size: 110%;
    background-color: #e8e8e8;
    padding: 7px;
    border-radius: 5px;
}
#print-page .print-button {
	float: left;
	margin-right: 5px;
}
#print-page {
	overflow: hidden;
	margin: 0 auto;
	padding: 30px;
	width: 100%;
}
@media print {
	#print-page {
	width: 280mm !important;
	}

}
#print-page .canvas-area {
    width: 100%;
    height: 100%;
    position: relative;
}
#print-page .canvas {
	position: relative;
	right: 0;
	width: 100%; /* TODO: Calculate dynamically. */
	height: 100%;
	margin:50px auto 0 auto;
	line-height: 0;
	/* background-color: #778899; */
}
#print-page .canvas-correct {
	position: absolute;
	right: 0;
	left: 0;
	bottom: 0;
	margin: auto;
	width: 100%; /* TODO: Calculate dynamically. */
	height: 100%;
	border: 1px solid #b3b3b3;
	line-height: 0;
	box-shadow:0 0 0 4px rgba(239, 239, 239, 0.5) inset;
	/* background-color: #667482; */


/* 	position: absolute;
	bottom: 175px;
	width: 100%; TODO: Calculate dynamically.
	height: 100%;
	left: -5%;
	right: 0;
	margin-right: auto;
	margin-left: auto;
	background: rgba(255, 255, 255, 0.5);
	line-height: 0;
	border: 1px solid #b3b3b3;
	box-shadow: 0 0 0 5px rgba(239, 239, 239, 0.5) inset;
 */
 }
#print-page .canvas .beam-back {
	position: absolute;
    width: 100%;
    top: 0;
    background-color: #f2f2f2;
    border-bottom: dashed 2px #dadada;
}
#print-page .canvas .beam-left {
    position: absolute;
    top: 0;
    left: 0;
    background-color: #f8f8f8;
    border-right: dashed 2px;
    border-bottom: dashed 2px;
    border-color: #e4e4e4;
}
#print-page .canvas .beam-right {
    position: absolute;
    top: 0;
    right: 0;
    background-color: #f8f8f8;
    border-left: dashed 2px;
    border-bottom: dashed 2px;
    border-color: #e4e4e4;

}
/*#print-page .canvas .snap-guide {
	background: red;
	opacity: 0.3;
	z-index: 100;
}*/
#print-page .canvas .left-side {
	position: absolute;
	width: 130px;
	height: 100%;
	right: 100%;
}
#print-page .canvas .left-object {
	position: absolute;
	bottom: -10px;
	right: 100%;
	margin-right: 20px;
}

#print-page .canvas .left-side .color {
	width: 80%;
	margin-top: 30%;
	margin-left: 10%;
	margin-right: auto;
}

#print-page .canvas .right-side {
	position: absolute;
	width: 130px;
	height: 100%;
	left: 100%;
}
#print-page .canvas .right-object {
	position: absolute;
	bottom: -10px;
	left: 100%;
	margin-left: 20px;
}
#print-page .canvas .bottom {
    position: absolute;
    left: -100px;
    bottom: -15px;
    z-index: -1;
}
#print-page .canvas .bottom img {
	height: 23px;
}
#print-page .canvas .bottom .floor-m {
}
#print-page .canvas .bottom .floor-m img {
	width: 100%;
}
#print-page .canvas .bottom .floor-l {
	position: absolute;
	top: 0;
	right: 100%;
}
#print-page .canvas .bottom .floor-r {
	position: absolute;
	top: 0;
	left: 100%;
}


#print-page .canvas .geometry {
	position: absolute;
	cursor: pointer;
}
/*#print-page .canvas .geometry .actions {
	display: none;
	position: absolute;
	top: 0;
	left: 100%;
	margin-left: 10px;
	white-space: nowrap;
}
#print-page .canvas .geometry.selected .actions {
	display: block;
}
#print-page .canvas .geometry .actions .btn {
	border-radius: 200px;
	width: 30px;
	height: 30px;
	padding: 5px;
	background: rgba(0, 0, 0, 0.6);
	border: none;
}
#print-page .canvas .geometry .actions .remove-btn {  }
#print-page .canvas .geometry.selected {
	box-shadow: 0 0 2px blue, 0 0 2px blue, 0 0 2px blue;
}
*/

#print-page .canvas .warning {
	position: absolute;
	top: -5px;
	right: -5px;
	background: orange;
	color: #fff;
	z-index: 2;
}
#print-page .canvas .geometry.dragging {
	box-shadow: 0 0 3px rgba(0, 0, 0, 0.5);
}

/*#print-page .tab-content {*/
	/*position: relative;*/
/*}*/

/*#print-page .tab-content .tab-pane {*/
	/*height: 200px;*/
	/*overflow-x: hidden;*/
	/*position: relative;*/
/*}*/


/*#print-page .tab-content .btn.scroll-left-btn {*/
	/*position: absolute;*/
	/*top: 50px;*/
	/*left: 0;*/
	/*z-index: 100;*/
/*}*/

/*#print-page .tab-content .btn.scroll-right-btn {*/
	/*position: absolute;*/
	/*top: 50px;*/
	/*right: 0;*/
	/*z-index: 100;*/
/*}*/


/*#print-page .tab-scroll {*/
	/*white-space: nowrap;*/
	/*position: absolute;*/
	/*top: 0;*/
	/*left: 0;*/
	/*padding: 20px;*/
/*}*/




#print-page .thumbnail-wrapper {
	display: inline-block;
	padding-right: 10px;
}


#print-page .item.thumbnail {
	height :100px;
	width : 100px;
	padding: 5px;
	box-shadow: none !important;
	border-radius: 0;
	border: 1px solid #dde;
	cursor: pointer;
	float: left;

}
#print-page .item.thumbnail img {
	min-height :75px;
	max-height :75px;
	max-width : 88px;
}
#print-page .item.thumbnail .caption {
	height: 20px;
	text-overflow: ellipsis;
	overflow: hidden;
	font-size: 7pt;
	padding: 2px 0 0 0;
	display: block;
	text-align: center;
}
/*#print-page .nav.nav-tabs {
	white-space: nowrap;
}*/
#print-page .enclosure {
	position: relative;
	padding-right: 300px;
	min-width: 100%;
	height: 100%;
}
#print-page .note {
	position: absolute;
	padding-left: 30px;
	top: -50px;
	right: 0;
	width: 275px;
}
#print-page .note-title {
	padding: .5em .75em;
    background-color: #f6f6f6;
    border-left: 6px solid #6cb800;
}
#print-page .note img {
    width: 100%;
    padding: 15px;
    border: 2px solid #efefef;
}
#print-page .memo.solid{
    margin-bottom: 20px;
}
#print-page .memo-line {
    white-space: pre-wrap;
}
#print-page .beam-detail {
    border: 2px solid #d5d5d5;
    border-radius: 9px;
    padding: 0 15px;
}
#print-page .beam-detail .headline {
	border-bottom: 2px solid #e3e3e3;
}
#print-page .beam-detail .back-beam {
    margin-left: 10px;
}
#print-page .beam-detail .beam-side {
    margin-left: 10px;
}
#print-page .specification {
    margin-top: 25px;
    width: 100%;
    padding: 0 25px;
}
#print-page .specification .part-number {
	white-space: normal;
}
#print-page .specification-title {
	padding: .5em .75em;
	background-color: #f6f6f6;
	border-left: 6px solid #6cb800;
}
#print-page .specification .bottom {
	font-weight: bold;
}
#print-page .specification table {
	border-spacing: 1px;
	text-align: left;
	line-height: 1.5;
	white-space: nowrap;
}
#print-page .specification table th {
	width: 150px;
	padding: 5px 0;
	font-weight: bold;
	vertical-align: top;
	border-bottom: 3px solid #acacac;
}
#print-page .specification .total {
	text-align: end;
}
#print-page .specification table td {
	width: 350px;
	padding: 11px 0;
	vertical-align: top;
	border-top: 1px solid #ccc;
}
#print-page .specification .quantity{
	text-align: center;
}
#print-page .note-modal input[type="text"] {
	height: 2.5em;
	padding: 10px;
}
#print-page .note-modal textarea {
	resize: none;
	width: 100%;
	padding: 10px;
	height: 15em;
}
#print-page .attachment {
    width: 100%;
    margin-top: 20px;
    padding-top: 20px;
    border-top: 3px dashed #e6e6e6;
}

#print-page .attachment .title {
	border: 2px solid #eee;
    padding: .5em .75em;
    background-color: #f6f6f6;
}
#print-page .img {
	margin: 20px 0;
}
/* 印刷画面 ---------------------- */
@media print  {
	body {
		width: 100% !important;
		margin: 0 !important;
		padding: 0 !important;
		line-height: 1.45;
		color: #000;
		background: none;
	}
	#print-page .print-content {
		margin-top: 0;
	}
}
/* 配置したオブジェクト ---------------------- */
.item.layout-object img {
	width: auto !important;
	cursor: pointer;
}
.item.layout-object img {
	/* TODO: あるとかっこいいけど、テレビが微妙 */
	box-shadow: 2px 2px 8px #ccc;
}

/* z-index ----------------------
	100. ドラッグ中 - 前面に出す
	 60. 選択中
	 50. テレビとかの自由配置のヤツ
	 20. ワーニングがある.geometry
	 10. geometry (配置物)

*/
#print-page .geometry {
	z-index: 10;
}
#print-page .geometry.has-warning {
	z-index: 20;
}
#print-page .geometry.freely-positing {
	z-index: 50;
}
#print-page .geometry.selected {
	z-index: 60;
}
#print-page .geometry.dragging {
	z-index: 100 !important;
}
@keyframes zoom-in {
	from {
		-webkit-transform: scale(0.5);
		transform: scale(0.5);
	}
	to {
		-webkit-transform: scale(1);
		transform: scale(1);
	}
}

.zoom.in {
	--animation-duration: 0.1s;
	--animation-name: zoom-in;
}

/*
.detail-modal .modal-dialog {
	margin-top: 150px;
	width: 400px;
}

.detail-modal {

}
.modal-backdrop {
	background: rgba(255, 255, 255, 0.01) !important;
}
*/
/*
.sidebar {
	position: fixed;
	top: 0;
	bottom: 0;
	right: -250px;
	width: 250px;
	padding: 30px;
	box-shadow: 0 0 3px rgba(0, 0, 0, 0.5);
	display: block;
	background: rgba(255, 255, 255, 1);
	z-index: 60;
}
.sidebar-body img{
	width: 100%;

}
.modal-sidebar .modal-dialog {
	margin: 0;
	border: none;
	padding: 0;
	position: fixed;
	top: 0;
	bottom: 0;
	left: 0;
	width: 250px;
}
.modal-sidebar .modal-content {
	border: none;
	border-radius: 0;
	position: fixed;
	width: 250px;
	left: 0;
	bottom: 0;
	height: auto;
	top: 0;
	overflow-y: scroll;
}
.modal-sidebar.slide .modal-dialog,
.modal-sidebar.slide.in .modal-dialog {
	-o-transition: -o-transform 0.3s ease-out;
	-webkit-transition: -webkit-transform 0.3s ease-out;
	   transition: transform 0.3s ease-out;
}

.modal-sidebar.slide .modal-dialog {
	-webkit-transform: translate(-250px, 0);
	-moz-transform: translate(-250px, 0);
	-ms-transform: translate(-250px, 0);
	-o-transform: translate(-250px, 0);
	transform: translate(-250px, 0);

}
.modal-sidebar.slide.in .modal-dialog {
	-webkit-transform: translate(0, 0);
	-moz-transform: translate(0, 0);
	-ms-transform: translate(0, 0);
	-o-transform: translate(0, 0);
	transform: translate(0, 0);
}

.modal-sidebar.right .modal-dialog {
	left: auto !important;
	right: 0 !important;
}
.modal-sidebar.right.slide .modal-dialog {
	-webkit-transform: translate(250px, 0);
	-moz-transform: translate(250px, 0);
	-ms-transform: translate(250px, 0);
	-o-transform: translate(250px, 0);
	transform: translate(250px, 0);
}
.modal-sidebar.slide.in .modal-dialog {
	-webkit-transform: translate(0, 0);
	-moz-transform: translate(0, 0);
	-ms-transform: translate(0, 0);
	-o-transform: translate(0, 0);
	transform: translate(0, 0);
}

*/



/*&.modal-sidebar-right,*/
/*&.right {*/
/*.modal-dialog {*/
	/*left: auto !important;*/
	/*right: 0 !important;*/
/*}*/
/*&.slide .modal-dialog {*/
 /*.transform(translate(@sidebar-width, 0));*/

 /*}*/
/*//.transform(translate(0, -500));*/
/*&.in .modal-dialog {*/
 /*.transform(translate(0, 0)) !important;*/
 /*}*/

/*}*/



/* 色選択ドロップダウン */
.color-dropdown .dropdown-toggle {
	display: inline-block;
	text-align: left;
	position: relative;
	border: none;
	color: #777;
	letter-spacing: -0.2mm;
	line-height: 1em;
	border-radius: 8px;
	border: solid 1px #9c9c9c;
	padding: 6px;
}
.color-dropdown .dropdown-toggle span {
	vertical-align: middle;
}
.color-dropdown .dropdown-toggle:hover {
	text-decoration: none;
	background: #efefef;
}
.color-dropdown.open .dropdown-toggle {
	/*background: #fff !important;*/
	background: #efefef;
	text-decoration: none;
}
.color-dropdown .dropdown-toggle .caret_ {
	display: inline-block;
	margin-left: 5px;
	margin-bottom: 0;
}
.color-dropdown .icon {
	line-height: 1em;
	display: inline-block;
}
.color-dropdown .icon img {
	display: inline-block;
	position: relative;
	vertical-align: top;
	border-radius: 200px;
}
.color-dropdown .icon {
	border-radius: 200px;
	padding: 2px;
	margin-right: 5px;
	border: 1px solid #ddd;
	position: relative;
	/*top: -3px;*/
}
.color-dropdown .dropdown-toggle .icon img {
	border-radius: 200px;
	width: 20px;
	height: 20px;
	vertical-align: top;
}
.color-dropdown .dropdown-menu {
	font-size: 13px;
}
.color-dropdown .dropdown-menu .active {
	color: #ffffff;
	background-color: #9aca6c;
	background-image: -webkit-linear-gradient(top,#9aca6c 0,#9aca6c 100%);
	background-image: -o-linear-gradient(top,#9aca6c 0,#9aca6c 100%);
	background-image: -webkit-gradient(linear,left top,left bottom,from(#9aca6c),to(#9aca6c));
	background-image: linear-gradient(to bottom,#9aca6c 0,#9aca6c 100%);
}
.color-dropdown .dropdown-menu .icon {
	top: -2px;
}
.color-dropdown .dropdown-menu .icon img {
	width: 18px;
	height: 18px;
}
.color-dropdown.dropdown .dropdown-menu {
	margin: 0 !important;
	-webkit-transition: all 0.3s;
	   -moz-transition: all 0.3s;
	    -ms-transition: all 0.3s;
	     -o-transition: all 0.3s;
	transition: all 0.3s;
	max-height: 0;
	display: block;
	overflow: hidden;
	opacity: 0;
	border-radius: 0 !important;
}

.color-dropdown.dropdown .dropdown-menu {
	padding: 8px 0;
}
.color-dropdown.dropdown .dropdown-menu a {
	padding: 10px 20px;
}

.color-dropdown.dropdown.open .dropdown-menu {
	max-height: 400px;
	overflow-y: scroll;
	opacity: 1;
}


/* グレード選択ドロップダウン */
.grade-dropdown .dropdown-toggle {
	display: inline-block;
	text-align: left;
	position: relative;
	border: none;
	color: #777;
	letter-spacing: -0.2mm;
	line-height: 1em;
	border-radius: 8px;
	border: solid 1px #9c9c9c;
	padding: 10px;
}
.grade-dropdown .dropdown-toggle span {
	vertical-align: middle;
}
.grade-dropdown .dropdown-toggle:hover {
	text-decoration: none;
	background: #efefef;
}
.grade-dropdown.open .dropdown-toggle {
	/*background: #fff !important;*/
	background: #efefef;
	text-decoration: none;
}
.grade-dropdown .dropdown-toggle .caret_ {
	display: inline-block;
	margin-left: 5px;
	margin-bottom: 0;
}
.grade-dropdown .icon {
	line-height: 1em;
	display: inline-block;
}
.grade-dropdown .icon img {
	display: inline-block;
	position: relative;
	vertical-align: top;
	border-radius: 200px;
}
.grade-dropdown .icon {
	border-radius: 200px;
	padding: 2px;
	margin-right: 5px;
	border: 1px solid #ddd;
	position: relative;
	/*top: -3px;*/
}
.grade-dropdown .dropdown-toggle .icon img {
	border-radius: 200px;
	width: 20px;
	height: 20px;
	vertical-align: top;
}
.grade-dropdown .dropdown-menu {
	font-size: 13px;
	min-width: 0px;
}
.grade-dropdown .dropdown-menu .active {
	color: #ffffff;
	background-color: #9aca6c;
	background-image: -webkit-linear-gradient(top,#9aca6c 0,#9aca6c 100%);
	background-image: -o-linear-gradient(top,#9aca6c 0,#9aca6c 100%);
	background-image: -webkit-gradient(linear,left top,left bottom,from(#9aca6c),to(#9aca6c));
	background-image: linear-gradient(to bottom,#9aca6c 0,#9aca6c 100%);
}
.grade-dropdown .dropdown-menu .icon {
	top: -2px;
}
.grade-dropdown .dropdown-menu .icon img {
	width: 18px;
	height: 18px;
}
.grade-dropdown.dropdown .dropdown-menu {
	margin: 0 !important;
	-webkit-transition: all 0.3s;
	   -moz-transition: all 0.3s;
	    -ms-transition: all 0.3s;
	     -o-transition: all 0.3s;
	transition: all 0.3s;
	max-height: 0;
	display: block;
	overflow: hidden;
	opacity: 0;
	border-radius: 0 !important;
}

.grade-dropdown.dropdown .dropdown-menu {
	padding: 8px 0;
}
.grade-dropdown.dropdown .dropdown-menu a {
	padding: 10px 20px;
}

.grade-dropdown.dropdown.open .dropdown-menu {
	max-height: 400px;
	overflow-y: scroll;
	opacity: 1;
}



/* ===================================== */
/* resize-modal.
/* ===================================== */



/* ===================================== */
/* beam-modal.
/* ===================================== */

#beam-modal .nav-tabs {
	border-bottom: 1px solid #d4d4d4;
	margin-bottom: 40px;
}
#beam-modal .nav-tabs .nav-item {
}
#beam-modal .nav-tabs .nav-item > a {
	border: none;
	border-bottom: 3px solid transparent;
	color: #aaaaac;
	transition: border-color 0.1s, color 0.1s,
		color 0.1s, color 0.1s;
}
#beam-modal .nav-tabs .nav-item > a:hover {
	color: #333 !important;
	background: transparent;
	border-color: transparent;
}
#beam-modal .nav-tabs .nav-item.active > a,
#beam-modal .nav-tabs .nav-item > a:focus {
	color: #94ba6f !important;
	border-color: #94ba6f !important;
}
#beam-modal .tab-content {
}

/* ===================================== */
/* save-modal.
/* ===================================== */

#save-modal .code {
	background: #efefef;
	padding: 10px;
	border: 1px solid #dfdfdf;
	border-radius: 2px;
	margin: 30px 30px 0 30px;
	font-size: 15pt;
}

/* ===================================== */
/* manual-modal.
/* ===================================== */

#manual-modal .modal-content .left-button {
	position: absolute;
	top: 50%;
	left: -20px;
    bottom: 60px;
    width: 45px;
    height: 45px;
    z-index: 100;
    background: rgba(0, 0, 0, 0.4);
    border-radius: 100px;
    border: none;
    outline: none;
    color: #fff;
    text-shadow: none;
    padding: 4px 3px 0px 0px;
    margin-left: 0px;
}
#manual-modal .modal-content .right-button {
    position: absolute;
	top: 50%;
    right: -20px;
    bottom: 60px;
    width: 45px;
    height: 45px;
    z-index: 100;
    background: rgba(0, 0, 0, 0.4);
    border-radius: 100px;
    border: none;
    outline: none;
    color: #fff;
    text-shadow: none;
    padding: 4px 0px 0px 3px;
}
#manual-modal .modal-content .manual {
	width: 100%;
}

/* ===================================== */
/* contact-modal.
/* ===================================== */

#contact-modal .modal-content .about-us {
	margin: 14px 0px;
}
#contact-modal .modal-content .about-us p {
	font-weight: bold;
}
#contact-modal .modal-content  .required::after {
	content: "必須";
	background-color: #f17d7d;
	color: #fff;
	font-size: 12px;
	font-weight: bold;
	min-width: 10px;
	padding: 3px 7px;
	margin: 0px 5px;
	margin-top: -4px;
	line-height: 1;
	vertical-align: middle;
	white-space: nowrap;
	text-align: center;
	border-radius: 4px;
	display: inline-block;
}