@charset "UTF-8";

@font-face {
    font-family: 'Noto Sans CJK JP Light';
    font-style: normal;
    font-weight: 200;
    src: url('/font/NotoSansCJKjp-Light.woff2') format('woff2'),
	     url('/font/NotoSansCJKjp-Light.woff') format('woff'),
	     url('/font/NotoSansCJKjp-Light.ttf')  format('truetype'),
         url('/font/NotoSansCJKjp-Light.eot') format('embedded-opentype');
}
@font-face {
    font-family: 'Noto Sans CJK JP Regular';
    font-style: normal;
    font-weight: 400;
    src: url('/font/NotoSansCJKjp-Regular.woff2') format('woff2'),
	     url('/font/NotoSansCJKjp-Regular.woff') format('woff'),
	     url('/font/NotoSansCJKjp-Regular.ttf')  format('truetype'),
         url('/font/NotoSansCJKjp-Regular.eot') format('embedded-opentype');
}
@font-face {
    font-family: 'Noto Sans CJK JP Bold';
    font-style: normal;
    font-weight: 700;
    src: url('/font/NotoSansCJKjp-Bold.woff2') format('woff2'),
	     url('/font/NotoSansCJKjp-Bold.woff') format('woff'),
	     url('/font/NotoSansCJKjp-Bold.ttf')  format('truetype'),
         url('/font/NotoSansCJKjp-Bold.eot') format('embedded-opentype');
}


body{
	*font-size:small;
	*font:x-small;
	font-size:13px;
	line-height:1.75;
	/* color:#000; */
	color:#4A5564;
	font-feature-settings:"palt";
	font-family: "Noto Sans CJK JP Regular","MS Pゴシック", "MS PGothic", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", sans-serif;
	text-align:center;
	width:100%;
	margin:0px;
	padding:0px;
	background:#fff;
	-webkit-text-size-adjust:100%;
}
body.top,
body.registration{
	background:#e6e6e6;
}
/* body::before{
	content: "";
	display: block;
	width: 160px;
	height: 17px;
	position: fixed;
	top: 50%;
	left: 50%;
	z-index: 1000;
	transform: translate(-50%,-50%);
	background: url("/common/img/loading_logo.svg") no-repeat center;
	background-size: 100%;
	-webkit-transition:opacity 0.1s;
	-ms-transition:opacity 0.1s;
	transition:opacity 0.1s;
}
body::after{
  content: "";
  display: block;
  width: 100%;
  height: 100vh;
  background: #fff;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 999;
	-webkit-transition:opacity 0.1s;
	-ms-transition:opacity 0.1s;
	transition:opacity 0.1s;
}
body.loadEnd::before{
	-webkit-transition:opacity 0.5s;
	-ms-transition:opacity 0.5s;
	transition:opacity 0.5s;
  opacity: 0;
  pointer-events: none;
}
body.loadEnd::after{
	-webkit-transition:opacity 0.5s;
	-ms-transition:opacity 0.5s;
	transition:opacity 0.5s;
  opacity: 0;
  pointer-events: none;
} */
body *,
body *::before,
bory *::after{
  box-sizing: border-box;
}
form,
select,
option,
input,
textarea{
	font-feature-settings:"palt";
	font-family: "Noto Sans CJK JP Regular","MS Pゴシック", "MS PGothic", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", sans-serif;
}
h1,h2,h3,h4,h5,p,ul,ol,li,img,table,th,td,dl,dt,dd{
	margin:0px;
	padding:0px;
	font-size:13px;
	line-height:1.75;
	font-weight: normal;
}
li{
	list-style-type:none;
}
table{
	border-spacing:0px 15px;
	width: 100%;
}
a:link,a:visited{
	cursor:pointer;
	color:#000;
	text-decoration:none;
}
a{
  outline:none;
	transition:opacity 0.2s;
	-webkit-tap-highlight-color:transparent;
}
img{
	vertical-align:top;
	border:0;
	max-width:100%;
	height:auto;
	backface-visibility:hidden;
}
input, 
textarea, 
select,
button,
label{
	font-feature-settings:"palt";
	font-family: "Noto Sans CJK JP Regular","MS Pゴシック", "MS PGothic", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", sans-serif;
	font-weight: normal;
  outline:none;
	-webkit-tap-highlight-color:transparent;
}
#scene canvas{
	background: linear-gradient(to right, #CDCCCA, #F9F9F8 42%,#F9F9F8 64%,#CDCCCA);
	background: -webkit-linear-gradient(left, #CDCCCA, #F9F9F8 42%,#F9F9F8 64%,#CDCCCA);
}
#wrap{
	position:relative;
	text-align:left;
	overflow:hidden;
}

/* header */
header{
	position: fixed;
	top: 0;
	left: 0;
	z-index: 102;
	width: 100%;
	height: 100px;
	background: #333333;
}
header::after {
	content: "";
	display: block;
	clear: both;
}
#galleryTtl::before {
	content: "";
	display: block;
	width: 100%;
	height: 100%;
	padding-top: 69.6428%;
	background: url(https://3d-tenji-dev.cksv.biz/img/logo.png) no-repeat center;
	background-size: 100%;
}
#galleryTtl {
	position: absolute;
	top: 50%;
	left: 30px;
	font-size: 0;
	line-height: 1;
	width: 55px;
	transform: translate(0%,-50%);
	height: 71px;
}
#userBar {
	position: absolute;
	top: 50%;
	right: 100px;
	font-size: 0;
	transform: translate(0%,-50%);
}
#userId a {
	display: block;
	width: 100%;
	height: 100%;
	border-radius: 3px;
	background: #3a4351;
	color: #fff;
	font-size: 14px;
	line-height: 50px;
	letter-spacing: 0.08em;
}
#menuBtn {
	display: block;
	width: 38px;
	height: 38px;
	position: absolute;
	top: 50%;
	right: 30px;
	z-index: 103;
	transform: translate(0%,-50%);
	cursor: pointer;
}
#menu {
	position: absolute;
	top: 110px;
	right: 0;
	width: 442px;
	height: calc(100vh - 0px);
	background: #F2F2F2;
	transform: translate(100%,0%);
	transition: transform .5s;
	color: #3a4351;
}
#menu ul .forAuto{
	display: none;
}
#userId {
	display: inline-block;
	vertical-align: middle;
	width: 220px;
	height: 50px;
	margin-right: 20px;
	text-align: center;
}
#logout {
	display: inline-block;
	vertical-align: middle;
	width: 100px;
	height: 50px;
	border: none;
	border-radius: 3px;
	background: #3a4351;
	color: #fff;
	font-size: 14px;
	line-height: 50px;
	letter-spacing: 0.08em;
	text-align: center;
	cursor: pointer;
}
#menuBtn::before, #menuBtn::after {
	content: "";
	display: block;
	width: 100%;
	height: 4px;
	background: #3a4351;
	position: absolute;
	top: 50%;
	left: 50%;
	transition: transform .2s;
}
#menuBtn::before {
	transform: translate(-50%,-14px);
}
#menuBtn span {
	font-size: 0;
	display: block;
	width: 100%;
	height: 4px;
	background: #3a4351;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
}
#menuBtn::after {
	transform: translate(-50%,10px);
}
#menuBtn.active::before{
	transform: translate(-50%,-50%) rotate(45deg);
}
#menuBtn.active::after{
	transform: translate(-50%,-50%) rotate(-45deg);
}
#menuBtn.active span{
	display: none;
}
#menu .inner {
	height: 100%;
	padding: 50px;
	overflow-y: auto;
}
#menu #menuName {
	font-size: 14px;
	line-height: 1.5;
	font-family: "Noto Sans CJK JP Bold","MS Pゴシック", "MS PGothic", "ヒラギノ角ゴ Pro W6", "Hiragino Kaku Gothic Pro", sans-serif;
}
#menu ul {
	display: block;
	margin-top: 40px;
}
#userBarSp {
	display: none;
}
#menuBtn.active + #menu {
	transform: translate(0%,0%);
}
#menu li {
	display: block;
	font-size: 14px;
	line-height: 1.2;
	font-weight: bold;
	margin-top: 30px;
	padding-left: 30px;
}
#menu li.current {
	position: relative;
}
#menu li.current::before {
	content: "";
	display: block;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: #3a4351;
	position: absolute;
	top: 50%;
	left: 0;
	transform: translate(0%,-50%);
}
#menu li.underlayer{
	padding-left: 25%;
}
/*----------------------------------------------------------------
modal
----------------------------------------------------------------*/
.modal {
	z-index: 103;
	width: 100%;
	height: 100%;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	display: none;
}
.modal::before {
	content: "";
	display: block;
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	opacity: 0;
	background-color: RGBA(0,0,0,0.9);
	transform: scale(0.8);
	transition: all 1s .5s cubic-bezier(.210, .60, .350, 1);
}
.modal.active::before {
	transition: all 1s cubic-bezier(.210, .60, .350, 1);
	opacity: 1;
	transform: scale(1);
}
.modal .modal_window {
	width: 100%;
	height: 100%;
	text-align: left;
	font-size: 0;
}
.modal_inner {
	position: relative;
	width: 100%;
	height: 100%;
	overflow: hidden;
}
.modal_image,
.modal3D {
	display: block;
	width: 100%;
	height: 100%;
	position: absolute;
	opacity: 0;
	transition: opacity .5s cubic-bezier(.210, .60, .350, 1);
}
.modal.active .modal_image,
.modal.active .modal_3d {
	transition: opacity .5s 1s cubic-bezier(.210, .60, .350, 1);
	opacity: 1;
}
#itemCvs{
	width: 100%;
	height: auto;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	transition: transform .2s, width .2s, height .2s;
}
#iframe3D {
	width: 100%;
	height: 100%;
	position: absolute;
}
#itemCvs.h100 ,
#iframe3D.h100{
	width: auto;
	height: 100%;
}

#itemMenu {
	position: fixed;
	bottom: 20px;
	right: 22px;
	z-index: 1;
}
#itemMenu, #plus, #minus {
	width: 26px;
	height: 26px;
	background: #fff;
	position: relative;
	cursor: pointer;
	border-radius: 50%;
	transition: opacity .2s;
}
#itemInfo {
	display: none;
}
#itemInfo, #plus {
	margin-bottom: 5px;
}
#plus::before, #minus::before {
	content: "";
	display: block;
	width: 14px;
	height: 4px;
	background: #000;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
}
.close{
	position: fixed;
	right: 10px;
	top: 10px;
	width: 50px;
	height: 50px;
	border: none;
	cursor: pointer;
	background: #000;
}
.modal .close {
	opacity: 0;
	transition: opacity .5s cubic-bezier(.210, .60, .350, 1);
}
.modal.active .close {
	transition: opacity .5s 1s cubic-bezier(.210, .60, .350, 1);
	opacity: 1;
}
.close::before,.close::after{
	content: "";
	display: block;
	width: 80%;
	margin: auto;
	height: 2px;
	background-color: #fff;
	border-radius: 2px;
	position: absolute;
	left: 0;
	right: 0;
	top: calc((100% - 4px)/2);
}
.close::before{
	transform: rotate(45deg);
}
.close::after{
	transform: rotate(-45deg);
}
@media screen and (max-width: 768px){
	.close, .menu_close {
			width: 30px;
			height: 30px;
	}
}
#loadImg {
	display: none;
	position: absolute;
	width: 6%;
	height: auto;
	top: 50%;
	left: 50%;
	font-size: 13px;
	transform: translate(-50%, -50%);
	z-index: 104;
}
#loadImg img{
	vertical-align: top;
	border: 0;
	max-width: 100%;
	height: auto;
	backface-visibility: hidden;
}
/*----------------------------------------------------------------
video
----------------------------------------------------------------*/
video{
	display: none;
}

/*----------------------------------------------------------------
index.html
----------------------------------------------------------------*/
#dashboardTtl.flex{
	display: flex;
}
#viewer #dashboardTtl{
  position: fixed;
  top: 159px;
	z-index: 10;
}
#top #message{
	margin: 2.08% 0 0 0;
}
#dashboardList{
	max-width: 1245px;
	margin: 0 auto;
}
#dashboardList ul{
	font-size: 0;
}
#top #dashboardList ul li {
	display: inline-block;
	vertical-align: top;
	margin-top: 170px;
	text-align: center;
	width: 20%;
}

#top #dashboardList ul li .thumb {
	width: 185px;
	margin: 0 auto 25px;
}
#dashboardList ul li .thumb::before{
	content: "";
	display: block;
	width: 100%;
	height: 0;
	padding-top: 100%;
	background-repeat: no-repeat;
	background-position: center;
	background-size: 100%;
}
#dashboardList ul li.boothdesign .thumb::before{
	background-image: url(/img/icon_boothdesign.png);
}
#dashboardList ul li.exhibition .thumb::before{
	background-image: url(/img/icon_exhibition.png);
}
#dashboardList ul li.releace .thumb::before{
	background-image: url(/img/icon_releace.png);
}
#dashboardList ul li strong{
	display: block;
	font-size: 20px;
	line-height: 1.5;
	font-family: "Noto Sans CJK JP Bold","MS Pゴシック", "MS PGothic", "ヒラギノ角ゴ Pro W6", "Hiragino Kaku Gothic Pro", sans-serif;
	color: #4A5564;
}
#dashboardList ul li span {
	display: block;
	font-size: 13px;
	line-height: 1.5;
	font-family: "Noto Sans CJK JP Light","MS Pゴシック", "MS PGothic", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", sans-serif;
	margin-top: 10px;
	color: #4A5564;
}
/* container */
#top #container{
	height: 100vh;
}
#contents{
	/* padding: 144px 95px 144px 0; */
	padding: 159px 1.74%;
}

/* boothdesign_design.php */
#viewer #loading span{
	font-size: 30px;
	color: #000;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

#boothSetting .boothList{
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
}
.close-button.close-bottom{
	display: none;
}
#linkToWorksPage{
	position: absolute;
	top: 160px;
	right: 60px;

}
.dg .selector{
	display: block !important;
	position: relative !important;
	margin: 0 !important;
	background: transparent !important;
	padding: 0 !important;
	width: 94px;
	height: 98px;
	box-shadow: none !important;
	/* border: none!important; */
}
#formContainer .dg {
	color: #4A5564;
	width: 100% !important;
}
#formContainer {
	position: fixed;
	top: 110px;
	right: 0;
	width: 380px;
	background: rgba(255,255,255,1.0);
	transform: translateX(0%);
	transition: transform .5s;
	/* z-index: 100; */
}
#formContainer form {
	width: 100%;
	height: calc(100vh - 180px);
	overflow-y: auto;
}
#formContainer.active {
	transform: translateX(100%);
}
#formContainerBtn {
	width: 60px;
	height: 60px;
	background: #3a4351;
	position: absolute;
	top: 0;
	left: 0;
	transform: translate(-100%,0%);
	cursor: pointer;
}
#formContainerBtn {
	width: 60px;
	height: 60px;
	background: #3a4351;
	position: absolute;
	top: 0;
	left: 0;
	transform: translate(-100%,0%);
	cursor: pointer;
}
#formContainerBtn.active::before {
	margin-left: 5px;
	transform: translate(-50%,-50%) rotate(-135deg);
}
#formContainerBtn::before {
	content: "";
	display: block;
	width: 21px;
	height: 21px;
	border-top: solid 2px #fff;
	border-right: solid 2px #fff;
	position: absolute;
	top: 50%;
	left: 50%;
	margin-left: -5px;
	transform: translate(-50%,-50%) rotate(45deg);
	transition: transform .5s, margin-left .5s;
}
#loading{
	background: #FFFFFF;
	position: fixed;
	width: 100%;
	height: 100%;
	padding: 0;
	margin: 0;
	overflow: hidden;
	z-index: 10;
	top: 0;
    left: 0;
}
#formContainer #designSaveBtn {
	display: block;
	width: 100%;
	max-width: 220px;
	height: 50px;
	/* margin: 30px auto 0; */
	margin: 30px auto;
	background: #3a4351;
	border: none;
	padding: 0;
	color: #fff;
	font-size: 14px;
	letter-spacing: 0.08em;
	cursor: pointer;
	-webkit-border-radius: 4px;
	border-radius: 4px;
	-webkit-appearance: none;
	-webkit-tap-highlight-color: rgba(0,0,0,0);
}
#formContainer .title{
	background: none;
	border: none;
	box-shadow: none;
	height: auto;
	padding: 0;
	cursor: default;
	font-size: 20px;
	line-height: 1.2;
	font-family: "Noto Sans CJK JP Bold","MS Pゴシック", "MS PGothic", "ヒラギノ角ゴ Pro W6", "Hiragino Kaku Gothic Pro", sans-serif;
	/* margin: 0 0 30px; */
	text-shadow: none;
	text-align: left;
	position: relative;
}
#formContainer .dg .cr.number {
	border: none;
	padding: 0;
	margin: 0;
	background: none;
	height: auto;
	line-height: inherit;
	overflow: visible;
}
#formContainer .folder{
	border-bottom: #C9C8C6 1px solid !important;
}
#formContainer #colorGUI,
#formContainer #floorGUI,
#formContainer #rightGUI,
#formContainer #camerapos ul ,
#formContainer #option ul,
#formContainer #other ul,
#formContainer #textColGUI,
#formContainer #logo{
	padding: 30px 20px 30px 40px;
}
#colorGUI .c,
#textColGUI .c{
	text-align: left;
}
#colorGUI .c input[type=text] ,
#floorGUI .c input[type=text] ,
#textColGUI .c input[type=text]{
	background: #4A5564 !important;
	display: inline-block;
	width: 86px !important;
	float: none !important;
	color: #fff !important;
	text-shadow: none !important;
	margin: 0 !important;
}
#formContainer .dg .cr.number input[type=text] {
	display: none;
}
.dg .property-name {
	display: block !important;
	float: none !important;
	width: 100% !important;
	text-align: left !important;
	margin: 0 0 15px;
}
#formContainer .dg .c .slider {
	background: #b3b3b3;
	width: 100%;
	float: none;
	margin: 0;
	height: 8px;
	cursor: default;
}
#formContainer .dg .c .slider-fg {
	background: #3a4351;
	position: relative;
}
#formContainer .dg .c .slider-fg::before {
	content: "";
	display: block;
	width: 24px;
	height: 24px;
	background: #3a4351;
	border-radius: 50%;
	position: absolute;
	top: 50%;
	right: 0;
	transform: translate(50%,-50%);
	box-shadow: 7px 7px 5px rgb(0 0 0 / 25%);
	cursor: pointer;
}
.dg li:not(.folder) {
	height: auto !important;
	background: transparent !important;
	border: none !important;
}
.dg .c {
	float: none !important;
	width: 100% !important;
}
#floorGUI ul,
#rightGUI ul{
	text-align: left;
}
#floorGUI li:nth-of-type(n+4),
#rightGUI li:nth-of-type(n+2){
	width: 100%;
}
#floorGUI li:last-of-type,
#rightGUI li:last-of-type{
	margin-right: 80px !important;
}

#floorGUI li:nth-of-type(n+4){
	margin-bottom: 25px !important;
}
#rightGUI li:nth-of-type(2){
	margin-bottom: 25px !important;
}
#formContainer form input[type="radio"] + label {
	display: block;
	padding: 3px 0 3px 25px;
	position: relative;
	font-size: 13px;
	line-height: 1.2;
	font-family: "Noto Sans CJK JP Bold","MS Pゴシック", "MS PGothic", "ヒラギノ角ゴ Pro W6", "Hiragino Kaku Gothic Pro", sans-serif;
	cursor: pointer;
	text-shadow: none;
	margin-top: 15px;
}
#formContainer form input[type="radio"] + label::before {
	content: "";
	display: block;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: #3a4351;
	position: absolute;
	top: 50%;
	left: 0;
	transform: translate(0%,-50%);
}
#formContainer form input[type="radio"] + label::after{
	content: "";
	width: 12px;
	height: 12px;
	border-radius: 50%;
	background: #fff;
	position: absolute;
	top: 50%;
	left: 4px;
	transform: translate(0%,-50%);
	display: none;
}
#formContainer form input[type="radio"]:checked + label::after {
	display: block;
}
#formContainer form input[type="radio"] ,
#formContainer form input[type="checkbox"] {
	display: none;
}

#formContainer form .property-name{
	font-size: 14px;
	line-height: 1.2;
	font-family: "Noto Sans CJK JP Bold","MS Pゴシック", "MS PGothic", "ヒラギノ角ゴ Pro W6", "Hiragino Kaku Gothic Pro", sans-serif;
	text-shadow: none;
	text-align: left;
}
.saturation-field{
	margin: 0 !important;
}
.hue-field{
	position: relative !important;
  display: inline-block;
	top: 0px !important;
	right: 0 !important;
	left: 0 !important;
	border-left: none !important; 
}
#colorGUI li:nth-of-type(n+2),
#textColGUI li:nth-of-type(n+2){
	float: left;
}
#colorGUI li:nth-of-type(2),
#textColGUI li:nth-of-type(n+2){
	margin-bottom: 30px;
}
#colorGUI li:nth-of-type(3),
#textColGUI li:nth-of-type(n+2){
	clear: none;
}
#colorGUI li:nth-of-type(5){
	clear: none;
}
#colorGUI li:nth-of-type(2n),
#textColGUI li:nth-of-type(n+2){
	margin-right: 15px;
	padding: 0;
}
#colorGUI ul::after,
#textColGUI ul::after{
	content: "";
	display: block;
	clear: both;
}
#floorGUI li:nth-of-type(2){
	float: left;
	margin-bottom: 30px;
}
#floorGUI #brightdark{
	float: left;
	text-align: left;
}
#formContainer form #camerapos .property-name {
	margin-right: 10px;
}
#formContainer form #camerapos input[type="radio"] + label {
	display: inline-block;
	margin-left: 15px;
	padding: 3px 0 3px 25px;
	position: relative;
	font-size: 13px;
	line-height: 1.2;
	font-family: "Noto Sans CJK JP Bold","MS Pゴシック", "MS PGothic", "ヒラギノ角ゴ Pro W6", "Hiragino Kaku Gothic Pro", sans-serif;
	cursor: pointer;
	text-shadow: none;
	margin: 0 10px 0 0;
}
#formContainer form input[type="checkbox"] + label {
	display: inline-block;
	margin-left: 15px;
	padding: 3px 0 3px 25px;
	position: relative;
	font-size: 13px;
	line-height: 1.2;
	font-family: "Noto Sans CJK JP Bold","MS Pゴシック", "MS PGothic", "ヒラギノ角ゴ Pro W6", "Hiragino Kaku Gothic Pro", sans-serif;
	cursor: pointer;
	text-shadow: none;
	margin: 0 25px 0 0;
}
#formContainer form input[type="checkbox"] + label::before {
	content: "";
	display: block;
	width: 20px;
	height: 20px;
	background: transparent;
	position: absolute;
	top: 50%;
	left: 0;
	transform: translate(0%,-50%);
	border: #3a4351 3px solid;
}
#formContainer form input[type="checkbox"] + label::after {
	content: "";
	display: none;
	width: 3px;
	height: 10px;
	background: transparent;
	position: absolute;
	top: 50%;
	left: 8%;
	border: #3a4351 3px solid;
	transform: rotate(45deg) translate(-50%, -50%);
	border-top: none;
	border-left: none;
}
#formContainer form input[type="checkbox"]:checked + label::after {
	display: block;
}
#camerapos ul,
#option ul,
#other ul{
	text-align: left;
}
#floorGUI .color{
	margin-right: 15px;
}
#camerapos ul li:last-of-type{
	margin-top: 25px;
}
.arrow{
	position: absolute;
	right: 0px;
	top: 50%;
	transform: translateY(-50%);
}
.arrow img{
	width: 100%;
}
.hide{
	display: none;
}
/*----------------------------------------------------------------
exhibitionsetting_setting.html
----------------------------------------------------------------*/
#setting_list .listWrap .list li{
	display: inline-block;
	width: 160px;
	margin: 25px;
	vertical-align: top;
	font-size: 13px;
	line-height: 1.2;
}
/*----------------------------------------------------------------
exhibitionsetting_setting.php
exhibitionsetting_preview.php
----------------------------------------------------------------*/
#exhibitionsetting_setting {
	color: #fff;
	background: #333333;
}
#exhibitionsetting_setting #contents{
	padding: 144px 1.74%;
}
#exhibitionsetting_setting #dashboardTtl{
	display: flex;
	justify-content: space-between;

}
#exhibitionsetting_setting #dashboardTtl .col2{
	display: flex;
	
}
#exhibitionsetting_setting #dashboardTtl > a{
	background: transparent;
	border: 1px #fff solid;
	width: 105px;
	height: 41px;
	font-size: 14px;
	font-family: "Noto Sans CJK JP Bold","MS Pゴシック", "MS PGothic", "ヒラギノ角ゴ Pro W6", "Hiragino Kaku Gothic Pro", sans-serif;
	line-height: 1.75;
	color: #fff;
	border-radius: 20px;
	display: flex;
	justify-content: center;
	align-items: center;
}
#exhibitionsetting_setting #contents form #mainvisual{
	margin: 6.67% 0 0 0;
}
#exhibitionsetting_setting #contents form #mainvisual .imgBox{
	max-width: 730px;
	margin: 6.04% auto 0 auto;
}
#exhibitionsetting_setting #contents form #mainvisual .formBox{
	max-width: 610px;
	margin: 0 auto;
	position: relative;
}
#exhibitionsetting_setting #contents form #mainvisual .formBox::before{
	content: "";
	display: block;
	width: 25px;
	height: 25px;
	position: absolute;
	top: 50%;
	right: 3%;
	transform: translate(0,-50%);
	background: url(../img/aicon_pen.svg);
}

#exhibitionsetting_setting #contents form #mainvisual .formBox input{
	width: 100%;
	background: transparent;
	border: none;
	border-bottom: #FFFFFF solid 1px;
	padding: 22px 15px;
	font-family: "Noto Sans CJK JP Bold","MS Pゴシック", "MS PGothic", "ヒラギノ角ゴ Pro W6", "Hiragino Kaku Gothic Pro", sans-serif;
	line-height: 1.16;
	color: #fff;
	font-size: 18px;
	position: relative;
}
#exhibitionsetting_setting .saveBtn{
	position: fixed;
	bottom: 50px;
	width: 30%;
	left: 50%;
	transform: translateX(-50%);
}
#exhibitionsetting_setting .saveBtn button{
	width: 100%;
}

#boothType{
	font-size: 25px;
	line-height: 1.2;
	font-family: "Noto Sans CJK JP Regular","MS Pゴシック", "MS PGothic", "ヒラギノ角ゴ Pro W6", "Hiragino Kaku Gothic Pro", sans-serif;
	position: absolute;
	top: 50%;
	left: 130px;
	transform: translate(0%,-50%);
	z-index: 102;
	max-width: 20em;
}
#dashboardTtl h1{
	font-size: 24px;
	line-height: 35px;
	font-family: "Noto Sans CJK JP Bold","MS Pゴシック", "MS PGothic", "ヒラギノ角ゴ Pro W6", "Hiragino Kaku Gothic Pro", sans-serif;
}
#dashboardTtl .text{
	font-size: 14px;
	font-family: "Noto Sans CJK JP Light","MS Pゴシック", "MS PGothic", "ヒラギノ角ゴ Pro W6", "Hiragino Kaku Gothic Pro", sans-serif;
}
#dashboardTtl .back{
	width: 41px;
	height: 41px;
	background: #333333;
	cursor: pointer;
	margin-right: 20px;
	position: relative;
	border-radius: 50%;
	border: 1px solid #fff;
}
#dashboardTtl .back::before {
	content: "";
	display: block;
	width: 15px;
	height: 15px;
	border-top: solid 2px #fff;
	border-left: solid 2px #fff;
	position: absolute;
	top: 50%;
	left: 60%;
	transform: translate(-50%,-50%) rotate(-45deg);
}
.designList li, .list li{
	display: inline-block;
	width: 160px;
	margin: 25px;
	vertical-align: top;
	font-size: 13px;
	line-height: 1.2;
}
.imageDetatil{
	width: 160px;
}
canvas{
	position: absolute;
	width: 100%;
	top: 0;
	left: 0;
	vertical-align: top;
}
.imageBox{
	position: relative;
  width: 100%;
}
.imageBox label {
	display: block;
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	cursor: pointer;
}
.imageBox label input {
	display: none;
}
.imageBox .img.active{
	position: absolute;
	top: 0;
	left: 0;
	width: 0;
	height: 0;
	opacity: 0;
	overflow: hidden;
}
.imageBox .img.active + canvas{
	position: relative;
}
#boothdesign_designlist .thumbnail{
	width: 160px;
	height: 160px;
	background: #E4E4E4;
	position: relative;
}
#boothdesign_designlist .thumbnail .upper{
	content: "";
	display: block;
	position: absolute;
	width: 100%;
	height:50%;
	top: 0;
	left: 0;
	background: transparent
}
#boothdesign_designlist .thumbnail .under{
	content: "";
	display: block;
	position: absolute;
	width: 100%;
	height:50%;
	top: 50%;
	left: 0;
	background: transparent;
}
section{
	margin-top: 140px;
}
section .itemArea{
	max-width: 1100px;
	margin: 0 auto;
	display: flex;
	align-items: center;
}
section .img,
section .select{
	width: 45.455%;
}
section .itemArea > div:first-child{
	margin-right: 9.09%;
}
section .select ul{
	font-size: 0;
}
section .select ul li{
	display: inline-block;
	margin-top: 30px;
}
section .select ul li:last-child{
	margin-right: 0 !important;
}
section .select ul li .itemBox img{
	height: 100%;
}
/* col2 */
section .select.col2 ul li{
	width: 49%;
	margin-right: 2%;
}
section .select.col2 select{
	width: 100%;
	height: 40px;
}
section .select.col2 ul li:nth-child(2n){
	margin-right: 0;
}
/* col3 */
section .select.col3:first-child{
	padding-left: 12.09%;
}
section .select.col3:last-child{
	padding-right: 12.09%;
}
section .select.col3 ul li{
	width: 27.25%;
	margin-right: 9.125%;
}
section .select.col3 select{
	width: 100%;
	height: 40px;
}
section .select.col3 ul li:nth-child(3n){
	margin-right: 0;
}
/* col4 */
section .select.col4 ul li{
	width: 20%;
	margin-right: 6.666%;
}
section .select.col4 select{
	width: 100%;
	height: 40px;
}
section .select.col4 ul li:nth-child(4n){
	margin-right: 0;
}

section .select ul li .itemBox{
	width: 100%;
	height: 140px;
	background: #E4E4E4;
}
/*----------------------------------------------------------------
exhibitionsetting_preview.php
----------------------------------------------------------------*/
#exhibitionsetting_preview #loading span{
	font-size: 30px;
	color: #000;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}
#exhibitionsetting_preview form{
	display: none;
}
#exhibitionsetting_preview form section{
	display: none;
}


/*----------------------------------------------------------------
releasesetting.php
----------------------------------------------------------------*/
#releasesetting {
	color: #fff;
	background: #333333;
}

#releasesetting input[type="text"],
#releasesetting select,
#relasesetting textarea{
	box-sizing: border-box;
	border-radius: 4px;
}
#releasesetting select{
	-webkit-appearance: none;
	appearance: none;
}
#releasesetting #contents{
	padding: 144px 1.74%;
}
#releasesetting #dashboardTtl{
	display: flex;
	justify-content: space-between;

}
#releasesetting #dashboardTtl .col2{
	display: flex;
	
}
#releasesetting #dashboardTtl > a{
	background: transparent;
	border: 1px #fff solid;
	width: 105px;
	height: 41px;
	font-size: 14px;
	font-family: "Noto Sans CJK JP Bold","MS Pゴシック", "MS PGothic", "ヒラギノ角ゴ Pro W6", "Hiragino Kaku Gothic Pro", sans-serif;
	line-height: 1.75;
	color: #fff;
	border-radius: 20px;
	display: flex;
	justify-content: center;
	align-items: center;
}
#releasesetting #formArea {
	max-width: 574px;
	margin: 0 auto;
}
#releasesetting #contents #formArea form table{
	border-spacing: 0px 30px;
	margin: 0 auto;
}
#releasesetting #contents #formArea form table th{
	width: 22.3%;
}
#releasesetting #contents #formArea form table td{
	padding-left: 1.39%;
}
#releasesetting #contents #formArea form table td .formBox{
	position: relative;
}
#releasesetting #contents #formArea form table td .select select{
	background-color: rgba(51,51,51,0.5);
	border: 1px solid #FFFFFF;
	width: 313px;
	height: 50px;
	color: #fff;
	padding: 10px;
}
#releasesetting #contents #formArea form table td .select::after{
	content: "";
	display: block;
	width: 15px;
	height: 15px;
	border-top: solid 2px #4A5564;
	border-right: solid 2px #4A5564;
	position: absolute;
	top: 45%;
	transform: translate(-50%,-50%) rotate(
135deg);
	transition: transform .5s, margin-left .5s;
	left: 50%;
}
#releasesetting #contents #formArea form table td textarea{
	background-color: rgba(51,51,51,0.5);
	border: 1px solid #FFFFFF;
	width: 410px;
	height: 150px;
	color: #fff;
	font-size: 12px;
	line-height: 1.75;
	border-radius: 4px;
	padding: 10px;
}
#releasesetting #contents #formArea form table td input[type="radio"]{
	display: none;
}
#releasesetting #contents #formArea form table td label{
	display: inline-block;
	font-size: 13px;
	position: relative;
	margin-right: 20px;
	padding-left: 25px;
	cursor: pointer;
}
#releasesetting #contents #formArea form table td label::before{
	content: "";
	display: block;
	width: 20px;
	height: 20px;
	background: transparent;
	border-radius: 50%;
	position: absolute;
	top: 50%;
	left: 0px;
	transform: translate(0%,-50%);
	border: 1px solid #fff;
}
#releasesetting #contents #formArea form table td input[type="radio"]:checked + label::after{
	content: "";
	display: block;
	width: 12px;
	height: 12px;
	border-radius: 50%;
	position: absolute;
	top: 50%;
	left: 4px;
	transform: translate(0%,-50%);
	background: #FFFFFF;
}