.canvas-footer-nav@charset 'UTF-8';

/* スタイル */

html, body {
	background-color: transparent;
}
html {
	font-size: 14px;
}
body {
	overflow-x: hidden;
}


/* コンソール側 */

.console-header {
	height: 40px;
	margin: 0;
	background-color: #485173;
	color: white;
}

.console-header-title {
	margin: 0;
	font-size: 1rem;
	font-weight: bold;
	line-height: 1.25;
	letter-spacing: .1em;
}

.console-form {
	min-height: calc(100vh - 40px);
	background-color: #f9f9f9;
	border-right: 1px solid #485173;
	font-size: 11px;
}

.console-form .console-header {
	margin: -1rem -1rem 1rem;
}

.console-form .custom-control-label {
	line-height: 2;
}

.editor-frame-container {
	min-height: 100vh;
	background-color: white;
}

.editor-frame {
	height: 100%;
	border: 0px;
}

.console-form-label {
	padding-right: .75em;
	padding-left: .75em;
	border: 1px solid #ced4da;
	border-radius: 10rem;
	background-color: white;
	color: #485173;
	font-size: .857rem;
}


/* エディター側 */

.editor-container {
	max-width: 470px;
	padding-top: 50px;
	padding-bottom: 15px;
	background-color: #f4f4f4;
	overflow: hidden;
}

.svg-canvas,
.threejs-canvas {
	position: relative;
	padding-top: 33.33%;
}
.svg-canvas svg,
.threejs-canvas canvas {
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
.threejs-canvas {
	margin-top: 35px;
}
.threejs-canvas canvas {
	max-width: 100%;
	min-width: 100%;
	max-height: 100%;
	min-height: 100%;
}

.canvas-wrapper {
    position: relative;
    margin-bottom: 25px;    
}
.svg-canvas-wrapper {
	margin-bottom: 60px;
}
.svg-canvas-wrapper:after {
	display: none;
}
.canvas-header-nav,
.canvas-footer-nav {
	position: absolute;	
	right: 15px;
}
.col-2 {
	padding: 0;
	max-width: 120px;
}
.canvas-header-nav {
    top: -81px;
    left: 25px;
}
.canvas-footer-nav {
	bottom: -120px;
	left: 15px;
	justify-content: space-evenly!important;
}
.threejs-canvas-wrapper .canvas-header-nav {
	margin-top: -35px;
}


.add-text-textarea {
    height: 89px;
    resize: none;
}

.add-image-btn {
    position: relative;
    width: 36%;
    height: 35px;
    padding-top: 4px;
    text-align: center;
    margin-top: 15px;
    margin-bottom: 15px;
    margin-left: 32%;
    font-size: 1.1rem;
}
.add-image-btn input {
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	opacity: 0;
}

.stamps .tab-content {
	height: 170px;
	margin-bottom: 10px;
}
.stamps .tab-pane {
	height: 100%;
	overflow-y: scroll;
}
.stamp {
	position: relative;
	width: 20%;
	padding-top: 20%;
}
.stamp-md {
	width: 25%;
	padding-top: 25%;
}
.stamp-lg {
	width: 50%;
	padding-top: 27.5%;
}
.stamp:before,
.stamp:after {
	content: ' ';
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	border: 1px solid #ccc;
	margin: -1px 0 0 -1px;
	-webkit-transition: border-width .2s linear 0s;
	transition: border-width .2s linear 0s;
}
.stamp:after {
	border-width: 0;
}
.stamp.active {
	z-index: 1;
}
.stamp.active:after {
	border-width: 3px;
	border-color: #fff000;
}
.stamp img {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	margin: auto;
	max-width: 80%;
	max-height: 80%;
}

.modal-title{
    width: 100%;
    text-align: center;
}

.template {
    width: 49%;
    margin: 3px 0px 0px 3px;
    text-align: center;
    border: 1px solid #ccc;
}

.template:after {
    border-width: 0;
}

.template.active {
    z-index: 1;
    border-width: 3px;
    border-color: #fff000;
}

.template img {
    padding: 7px; 
    margin: auto;
    width: 100%;
}

.templates .tab-content {
    height: 350px;
}

.templates .tab-pane {
    height: 100%;
    overflow-y: scroll;
}

.templates .nav-item {
    height: 25px;
    text-align: center;
    font-size: 14px;
		padding: 0;
}

.colors-toggle span {
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 1px solid;
    background-color: #eee;
    vertical-align: middle;
}
.colors .dropdown-menu button {
	width: 36px;
	height: 36px;
	border: 1px solid;
	padding: 0;
	cursor: pointer;
}
/*
.editor-pane {
	background-color: white;
	padding: 5px;
	border-radius: 5px;
	box-shadow: 0 2px 1px rgba(0,0,0,.05);
}
*/

.popup {
    position: absolute;
    width: 220px;
    height: 160px;
    top: 200px;
    left: 500px;
    right: 0;
    bottom: 0;
    z-index: 20;
    border: 1px solid #c0c0c0;
    background-color: #eee;
    visibility: hidden;
}

.template-color-picker-parent {
    display: none;
}

.template-picker-replacer {
    position: absolute;
    width: 50px;
    height: 36px;
    border-radius: 6px;
    background: #fff;
    margin-left: -57px;
    margin-top: -18px;
}

.template-picker-replacer .sp-preview {
    width: 25px;
    height: 25px;
}

.popup-picker-replacer {
    position: absolute;
    width: 55px;
    height: 41px;
    border-radius: 6px;
    background: #fff;
    margin-top: -21px;
    margin-left: 10px;
}

.popup-picker-replacer .sp-preview {
    width: 30px;
    height: 30px;
}

.picker-replacer {
    position: absolute;
    width: 50px;
    height: 36px;
    border-radius: 6px;
    background: #fff;
    margin-left: -57px;
}

.picker-replacer .sp-preview{
    width: 25px;
    height: 25px;
}

.popup-text-area{
    width: 100%;
    margin-top: 25px;
}

.popup-text-area .font{
    display:inline-block;
    width: 100%;
    margin: 6px;
}

.popup-text-area .btn{    
    margin-top: -40px;
    text-align:center;    
}

.popup-text {
    margin-top: -13px;
    margin-left: 3px;
    display: inline-block;
    width: 72%;
    resize: none;
}

.btn {
    background-color: #8ed432;
    border-radius: 4px;
    color: #ffffff;
}

.btn:hover {
    background-color: #b4e96d;
}

.btn-close {
    background-color: rgb(141,141,141);
}

.btn-close:hover {
    background-color: rgb(171,171,171);
}

.dropdown-toggle {
    background-color: rgb(255,255,255);
    color: rgb(0,0,0);
}

.dropdown-toggle:hover {
    background-color: rgb(210,210,210);
}

.boxOpenButton {
    margin-top: 9px;
    margin-right: 10px;
    width: 90px;
}

.threeCanvas {
    width: 100%;
}

.threeCanvasBackGround {
    display: block;
    position: absolute;
    width: 770px;
    height: 500px;
    background-color: #d4f5fa;
}

.view-3d .svg-canvas-wrapper, .threejs-canvas-wrapper {
    display: none;
}
.view-3d .threejs-canvas-wrapper {
	display: block;
}

.editor-container .small, .editor-container small {
	font-size: 72.5%;
	color: #666;
}

.main-editor-pane {
    margin-top: 45px;
    margin-bottom: 120px;
    background-color: #ffffff;
    font-size: 1rem;
}

.editor-pane {
    padding: 10px;    
    margin: 0 0 15px 0;
    background-color: #ffffff;
    font-size: 1rem;
}
.editor-pane-title {
		font-size: 1.25rem;
    text-align: center;
		color: #666666;
}
.editor-pane-title .small, .editor-pane-title small {
		margin-left: .5em;
		font-size: 66.7%;
}
.editor-pane-title-icon {
    position: absolute;
    top: 1px;
    left: 37%;
    max-width: 32px;
    max-height: 32px;
    vertical-align: bottom;
}

.btn-has-icon {
	position: relative;
}
.btn-icon {
    z-index: 2;
    position: absolute;
    top: 0;
    left: 10px;
    bottom: 0;
    max-width: 32px;
    max-height: 32px;
    margin: auto;
}

.btn-icon-hover {
    z-index: 1;
    position: absolute;
    top: 0;
    left: 10px;
    bottom: 0;
    max-width: 32px;
    max-height: 32px;
    margin: auto;
}

.btn-col-md {
    max-width: 250px;
}
.btn-col-sm {
	max-width: 200px;
}
.btn-col-ssm {
    width: 50px;
    height: 50px;
    margin-top: 5px;
    margin-left: 9px;
    margin-right:0px;
    font-size: .786rem;
    display: inline-block;
}
.btn-col-ssm .btn-icon{
    position: absolute;
    height: 35px;
    left: 6px;
    top: -15px;
}
.btn-col-ssm .btn-text {
    position: absolute;
    width: 50px;
    text-align:center;
    top: 30px;
    left: -2px;
    color: #ffffff;
}


.text-sm {
    font-size: .786rem;
}

.btn-complete {
	color: #fff;
	background-color: #f88846;
	border-color: #dc3545;
}
.btn-complete:hover {
	color: #fff;
	background-color: #c82333;
	border-color: #bd2130;
}

.canvas-footer-nav .btn {
 width: 120px;
 height: 40px;
 padding: 0;
 position: relative;
 background-color: #ffffff;
 border-radius: 50px;
 color: #666666;
 font-size: 1.2rem;
 line-height: 32px;
 -webkit-transition: none;
	margin: 0 auto 5px;
}
.canvas-footer-nav .btn > div {
	padding: 0!important;
}

.canvas-footer-nav .btn:hover {
    background-color: #8ed432;
    color: #ffffff;
}

.canvas-footer-nav .btn:hover  > .btn-icon {
    display: none;
}

.canvas-footer-nav .btn:active {
    top: 3px;
}
.canvas-footer-nav .btn > div {
	padding: 0!important;
}

.canvas-header-nav .btn {
    width: 115px;
    margin: 7px;        
    position: relative;
    background-color: #ffffff;
    border-radius: 8px;    
    font-size: 0.9rem;
    line-height: 52px;
    -webkit-transition: none;
    transition: none;
}

.canvas-header-nav .btn-icon {
    position: absolute;
    max-width: 40px;
    max-height: 40px;
    left: 36px;
    top: -15px;    
}

.canvas-header-nav .h6 {
    margin-top: 35px;
    margin-bottom: 0px;
    text-align: center;    
}

.template-text {
    font-size: 0.83rem;
}

.canvas-header-nav .btn:hover {
    background-color: #f5f5f5;
}

.canvas-header-nav .btn:active {
    top: 3px;
}

.template-btn {
    box-shadow: 0 0 0 2px rgb(226,54,25);
    color: rgb(226,54,25);    
}

.guide-btn {
    box-shadow: 0 0 0 2px rgb(40,120,214);
    color: rgb(40,120,214);
}

.three-btn {
    box-shadow: 0 0 0 2px rgb(246,172,43);
    color: rgb(246,172,43);
}

.nav-fin {
    height: 130px;
}

.pdf-btn {
    height: 45px;
    background-color: rgb(141,141,141);
    box-shadow: 4px 4px 0 rgb(112,112,112);
    border-radius: 4px;
    font-weight: bold;
    font-size: 1.3rem;
}

.pdf-btn2 {
    height: 45px;
    background-color: #2878D6;
    box-shadow: 1px 1px 2px rgb(0, 0, 0, 0.2);
    border-radius: 5px;
    font-weight: bold;
    font-size: 1.3rem;
    margin: 0 0 15px 0;
}

.pdf-btn:hover{
    background-color: rgb(171,171,171);
}

.pdf-btn2:hover{
    background-color: rgb(50,138,226);
}

.fin-btn {
    height: 45px;
    background-color: #E23619;
    border-radius: 4px;
    font-weight: bold;
    font-size: 1.3rem;
}


.threejs-canvas-comment {
    position: absolute;
    bottom: 5px;
    right: 5px;
    z-index: 10;
    font-size: .73rem;
    color: #e72621;
}

.save-modal {
	display: flex;
	justify-content: center;
	align-items: center;
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 15;
	background-color: rgba(0,0,0,.75);
	color: white;
	visibility: hidden;
	opacity: 0;
	transition: opacity .3s;
}
.save-modal.active {
	visibility: visible;
	opacity: 1;
}
.save-modal-content {
	border: 1px solid rgba(255,255,255,.25);
	padding: .5rem 1rem;
	border-radius: .5rem;
}
.save-modal-content:after {
	display: inline-block;
	content: '.';
	letter-spacing: .1rem;
	margin-left: 2px;
	vertical-align: baseline;
	animation: save-modal-content 3s linear infinite;
}
@keyframes save-modal-content {
	 0% { content: '.'; }
	33% { content: '..'; }
	67% { content: '...'; }
}

.text-center {
    text-align: center;
}

.balloon {
    /*バルーンのスタイルです*/
    /*表示位置を指定します*/
    position: absolute;
    z-index: 10;
    top: 50px;
    left: -15px;
    /*非表示にしておきます*/
    display: none;
    opacity: 0;
    /*表示スタイルを指定します*/
    padding: 5px;
    border-radius: 5px;
    color: white;
    background-color: #666666;
    /*影をつけて見栄えを良くします*/
    box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.8), inset 1px 0 0 rgba(255, 255, 255, 0.3), inset -1px 0 0 rgba(255, 255, 255, 0.3), inset 0 -1px 0 rgba(255, 255, 255, 0.2);
    /*アニメーションを指定します*/
    animation-duration: 1.0s;
    animation-name: show-balloon;

    font-size: .55rem;
    height: 30px;
    padding-top: 0px;
    padding-bottom: 30px;
}

.btn:hover .balloon {
    /*マウスホバー時のバルーンのスタイルです*/
    /*表示するようにします*/
    display: inline-block;
    opacity: 1;
    top: 50px;
}

.balloon::before {
    /*吹き出し部分の三角形を表示します*/
    content: "";
    position: absolute;
    z-index: 15;
    top: -38%;
    left: 20px;
    border: 6px solid transparent;
    border-bottom: 6px solid #666666;
}

.canvas-header-nav .balloon {
    padding-top: 0px;
    margin-top: 20px;
    font-size: .75rem;
    padding-bottom: 45px;    
}

.canvas-header-nav .balloon::before {
    top: -28%;
    border: 8px solid transparent;
    border-bottom: 8px solid #666666;
}

@keyframes show-balloon {
    /*アニメーションを定義します*/
    0% {
        display: none;
        opacity: 0;
        top: 20px;
    }

    80% {
        display: inline-block;
        opacity: 0;
        top: 20px;
    }

    100% {
        display: inline-block;
        opacity: 1;
        top: 50px;
    }
}
/*スマホ版*/
.h6 img {
    display: none;
}
.ml-auto .btn {
    width: 130px;
}
#template-nav-tab {
	gap: 0;
	justify-content: space-between;
}
#nav-tab {
	gap: 7px 5px;
}
#nav-tab a {
	padding: 3px 15px;
}