/*
avamaker.css
*/

html, body {
	/*overflow:hidden;*/
	font-family: 'hiragino kaku gothic pro', meiryo, helvetica, arial, sans-serif;
}
.spwnd {
	background-color: #DCDCDC;
}
.spwnd .container {
	background-color: #3B1D00;
	top:0;
	background-image: url(/nyanko/img/images/bg_magiccircle.png);
    background-size: 35px;
    background-position-x: 50%;
    background-position-y: 25%;
}
.spwnd .container .munit {
	left: inherit;
    display: flex;
    align-items: center;
    justify-content: center;
}
.spwnd .container .maketable .left {
	top: 17%;
	left: 0;
    right: 0;
    margin: auto;
	position: absolute;
	z-index: 900;
}
.spwnd .container .maketable .right {
	position: absolute;
	z-index: 1000;
}


.ad {
	display:none;
}

.pcwnd .munit img {
    left: 0;
    right: 0;
    margin: auto;
}

.pcwnd #share-btn-set {
	width:85%;
}
.pcwnd #makecomp {
	border-radius: 10px;
}
.pcwnd #makecomp .btn {
	width:85%;
}
.pcwnd #download {
	width:84%;	
}
#makecomp .btn {
	width:90%;
}
#share-btn-set {
	width:78%;
}
#share-btn-set .s-tw {
    width: 28%;
    margin-right: 2%;
    float: left;
}
#share-btn-set .btn-retry {
	width: 36%;
    float: left;
    margin-left: 1%;
    margin-right: 1%;
}
#share-btn-set .s-fa {
    width: 30%;
    margin-left: 2%;
    float: left;
}
#make-comp-entry {
	width:84%;
	margin-left:auto;
	margin-right:auto;
	text-align:center;
}
#make-comp-entry div {
	float:left;
	color:#7E9FC8;
	font-size: 16px;
	width:100%;
}
#make-comp-entry div a {
	text-decoration:none;
	color:#7E9FC8;
	font-size: small;
}
.left-menu {
	width: 32%;
/*	max-width: 200px;*/
	max-width: 145px;
	height:100%;
	position:absolute;	
	z-index:10000;
	display:none;
	top:0;
	overflow:hidden;
}
.left-menu .leftmenu-close-wrap {
    background-color: #654f3a;
    text-align: right;
    border-top-right-radius: 6px;
    border-bottom-right-radius: 6px;
}
.left-menu .main {
    width: 74%;
    overflow: auto;
    overflow-x: hidden;
    height: 94%;
    position:relative;
	float: left;
	direction: rtl;
	background-color: #654f3a;
}
.pcwnd .left-menu .main {
    direction:inherit;
	overflow: auto;
    overflow-x: hidden;
    padding-left: 0;
    max-width: 107px;
    /*margin-left: 53px;*/
}
.pcwnd .left-menu .main .unit {
    margin-left: auto;
    margin-right: auto;
}

.left-menu #leftmenu-close {
	width: 20%;
    height: auto;
    color: #fafafa;
    position: relative;
    top: 0;
    border-top-right-radius: 6px;
    border-bottom-right-radius: 6px;
    padding-top: 6px;
    padding-left: 3px;
    padding-right: 4px;
    margin-left: auto;
    cursor: pointer;
}
.pcwnd .left-menu #leftmenu-close {
    right: 0;
}
.pcwnd .left-menu .main::-webkit-scrollbar{width:5px;}
.pcwnd .left-menu .main::-webkit-scrollbar-track{background:#666;}
.pcwnd .left-menu .main::-webkit-scrollbar-thumb{background:#444;}

.left-menu .main .slider {
	width: 100%;
    position: relative;
    float: left;
	-webkit-overflow-scrolling: touch;
}
.spwnd .left-menu .main .slider {
    padding-left: 0;
    padding-right: 8%;
	left: -10%;
}
.pcwnd .left-menu .main .slider {
	padding-left: 8%;
    padding-right: 4%;
}
#switch-slider-ng-t .unit {
	float:none;	
    position: relative;
}
.right-bottom-menu {
	position: absolute;
    width: 30%;
    background-color: #FF9B95;
    border-top-left-radius: 100%;
    text-align: right;
    height: 25%;
    bottom: 0px;
    right: 0;
	z-index:10000;
	display:none;
}
.right-bottom-menu #switch-random {
	width: 65%;
    right: 0;
    bottom: 0;
    position: absolute;
}
.switch-base {
	background-color:#3B1D00;	
	padding:10px;
	position:relative;
	z-index:10000;
	padding-top:4%;
}
.pcwnd .switch-base {
	margin-left:0;
	padding-top: 10px;
    padding-left: 0;
	bottom: 0;
    position: relative;
}

.pcwnd .switch-base .unit#switch-load {
    width: 52px;
}
.spwnd .switch-base .unit#switch-load {
    width: 16%;
}
.pcwnd .switch-base .unit#switch-finish {
	width: 62px;
}
.spwnd .switch-base .unit#switch-finish {
	width: 19%;
}
.spwnd .switch-base .unit#switch-name {
	margin-top: 1%;
}
.switch-base .unit {
    width: 16%;
    margin-left: 2%;
    margin-right: 2%;
    margin-top: 0;
    margin-bottom: 0;
    padding: 0;
    height: auto;
    line-height: 0;
	cursor:pointer;
	position:relative;
}
.switch-base .unit .chkmark {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
}
#makecomp .ava {
	height: 65%;	
}

/* #help-message styles removed — replaced by inline #ava-help */




.retry-view {
    padding: 6px;
}
.retry-view input[type=radio],
.retry-view input[type=checkbox] {
    display: inline-block;
    margin-right: 6px;
}
.retry-view input[type=radio] + label,
.retry-view input[type=checkbox] + label {
    position: relative;
     
    display: inline-block;
    margin-right: 12px;
     
    font-size: 14px;
    line-height: 30px;
     
    cursor: pointer;
}
 
@media (min-width: 1px) {
    .retry-view input[type=radio],
    .retry-view input[type=checkbox] {
        display: none;
        margin: 0;
    }
    .retry-view input[type=radio] + label,
    .retry-view input[type=checkbox] + label {
        padding: 0 0 0 24px;
    }
    .retry-view input[type=radio] + label::before,
    .retry-view input[type=checkbox] + label::before {
        content: "";
        position: absolute;
        top: 50%;
        left: 0;
         
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        display: block;
        width: 18px;
        height: 18px;
        margin-top: -9px;
         
        background: #FFF;
    }
    .retry-view input[type=radio] + label::before {
        border: 2px solid #ccc;
        border-radius: 30px;
    }
    .retry-view input[type=checkbox] + label::before {
        border: 2px solid #ccc;
    }
    .retry-view input[type=radio]:checked + label::after,
    .retry-view input[type=checkbox]:checked + label::after {
        content: "";
        position: absolute;
        top: 50%;
         
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        display: block;
    }
    .retry-view input[type=radio]:checked + label::after {
        left: 5px;
         
        width: 8px;
        height: 8px;
        margin-top: -4px;
         
        background: #F69;
        border-radius: 8px;
    }
    .retry-view input[type=checkbox]:checked + label::after {
        left: 3px;
         
        width: 16px;
        height: 8px;
        margin-top: -8px;
         
        border-left: 3px solid #F69;
        border-bottom: 3px solid #F69;
         
        -webkit-transform: rotate(-45deg);
        -ms-transform: rotate(-45deg);
        transform: rotate(-45deg);
    }
}


.pcwnd #download {
  display: block;
  text-align: center;
  margin: auto;
  width: 280px;
  height: 50px;
  
}
#download div {
  display: block;
  font-size: 13px;
}
#download span {
	display: block;
	color:#fff;	
	font-size: 16px;
}
#download span.small {
	font-size: 12px;
}
#download .tbtn {
	color:#fff;	
}
#download .first {
	background-color:#333;
}
#download .second {
	background-color:#F69;
}
#download .tbtn div {
	float:left;
}
#download .tbtn div a {
	text-decoration:none;
}
#makecomp #download .first .down {
	padding-top: 5px;
	/*padding-bottom: 10px;*/
    margin-top: 0;
	background-color:#333;
	width:96%;
    text-align: center;
}
#makecomp #download .second .dall {
	display:block;
	padding-top: 5px;
    margin-top: 0;
	background-color:#F69;
	height: 96%;
	text-align: center;
}
#makecomp #download .second .dface {
	display:block;
	padding-top: 5px;
    margin-top: 0;
	background-color:#32b2d1;
	height: 96%;
	text-align: center;
}

.icon-facebook:before {
	content: "\e60d";
}
.icon-instagram:before {
	content: "\e610";
}
.icon-twitter:before {
	content: "\e611";
}
#share-btn-set ul{
	height:auto;
}
#share-btn-set li{
	font-size: 11px;
    padding-left: 10%;
    padding-right: 10%;
    padding-top: 2%;
    padding-bottom: 2%;
    float: left;
    text-align: center;
    margin-right: 1%;
    border-radius: 3px;
    list-style: none;
	width:80%;
}
#share-btn-set li a{
	color:#fff;
	text-decoration:none;
}
#share-btn-set li.share-twitter{
	background:#55acee;
	box-shadow:0 2px #2795e9;
}
#share-btn-set li.share-twitter:hover{
	background:#83c3f3;
}
#share-btn-set li.share-facebook{
	background:#3b5998;
	box-shadow:0 2px #2d4373;
}
#share-btn-set li.share-facebook:hover{
	background:#4c70ba;
}
#share-btn-set li.retry-back{
	background: #F69;
    box-shadow: 0 2px #F69;
    border-radius: 15px;
}
#share-btn-set li.retry-back:hover{
	background:#FFA8C5;
}


.pcwnd .container {
    top: 0;
    height: auto;
    overflow: inherit;
}
.pcwnd .container .content {
	width: 100%;
    height: 100%;
    margin-left: auto;
    margin-right: auto;
    background-color: #999;
    padding-top: 0;
}
.pcwnd .container .maketable {
    height: 360px;
    padding-top: 40px;
    padding-bottom: 40px;
	min-width:960px;
	background-image:url(/nyanko/img/images/bg_magiccircle.png);
	background-repeat: repeat;
    background-size: 35px;
    background-color:#8B8B8B;
}
.pcwnd .container .switch-container {
	position: relative;
}
.pcwnd .container .switch-base .unit {
	width: 52px;
    margin-left: 20px;
    margin-right: 20px;
}
.pcwnd .pcarea {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
}
.pcwnd .sparea {
    position: relative;
    margin: 0 auto;
    height: 536px;
    width: 319px;
    padding-left: 30px;
    padding-right: 34px;
    padding-top: 16px;
    padding-bottom: 202px;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    background: url(/nyanko/img/images/03_gawa.png);
    background-size: cover;
}
.pcwnd .footer-member {
	bottom: 60px;
	z-index:100;
}
.pcwnd .container .maketable .left {
	margin-top:auto;
	height:100%;
	width: 360px;
	min-width:280px;
}

.pcwnd .container .maketable .lleft {
	width: 20%;
	min-width:200px;	
}
.pcwnd .container .maketable .rleft {
	width:336px;
    margin-top: 75px;
    height: 185px;
    float: left;
    overflow: hidden;
    position: relative;
    background-size: contain;
    background-repeat: no-repeat;
    background-position-y: 50%;
}
.pcwnd .container .maketable .right {
	float:right;
	width: 10%;
}
.pcwnd .container .maketable .right .rbottom {
	width: initial;	
}
.pcwnd .container .maketable .lleft .rbottom #random {
    width: 83%;
    bottom: 0;
    left: 21px;
}
.pcwnd .container .maketable .right .rbottom .item {
	left: 0;
    right: 0;
    margin-left: 0;
    margin-top: 0;
    padding: 0;
    z-index: 10001;
    position: relative;
    width: 100%;
	max-width:64px;
}
.pcwnd .container .maketable .right .rbottom #back {
	top: 18px;
    width: 80%;
    margin-left: 7px;
}
.pcwnd .container .maketable .right .rbottom #save {
    top: inherit;
	width: 70%;}
.pcwnd .container .maketable .right .rbottom #flip {
    top: inherit;
	width: 110%;
}
.pcwnd .container .maketable .right .rbottom #pallet {
    top: inherit;
	width: 120%;
}
.pcwnd .making {
	position:absolute;	
}
.pcwnd #making .icon {
	margin-top: 10%;
	max-width: 100px;
}
.pcwnd #making .text {
	max-width: 400px;
}
.pcwnd .makecomp {
    bottom: 80px;
    position: absolute;
    left: 0;
    right: 0;
    z-index: 10000;
}
.pcwnd .makecomp .message {
	width: 100%;
	margin-right: auto;
	margin-left: auto;
	text-align:center;
    font-size: 20px;
	font-family:GN-Natsu-iro-Schedule;
	top:-4%;
	color:#fafafa;
	text-shadow: 1px 1px 1px #333;
}
.pcwnd .makecomp .message span {
    font-size: 50px;
}

.pcwnd .container .content .main {
	width:100%;
}
.pcwnd .container .content .pc-ad {
    width: 100%;
}
.pcwnd .container .content .pc-ad .wrapper {
	text-align:center;
    height:inherit;
	background-color: #fafafa;
}
.pcwnd .container .content .pc-ad .wrapper .pain {
    width: 336px;
    height: 280px;
	margin:20px;
	display:inline-block;
}
.pcwnd .right-bottom-menu {
	max-width: 120px;
	max-height: 120px;
}
.left-menu .leftmenu-close-wrap .yaji-up {
	width: 45px;
    position: absolute;
    left: 38px;
    top: 5px;
    z-index: 100;
}
.left-menu .leftmenu-close-wrap .yaji-down {
	width: 45px;
    position: absolute;
    left: 38px;
    bottom: 0px;
    z-index: 11000;
}
.pcwnd .container .switch-container .switch-detail {
	background-color:transparent;
}
.pcwnd .container .switch-container .switch-color {
	background-color:transparent;
}


	.container .maketable {
		height:60%;	
	    background-size: 10%;
	    background-position-x: 50%;
	    background-position-y: 25%;
	}
/*
	.container .maketable .left {
		max-height:300px;	
	}
*/
	.container .maketable .right {
		float: left;
		width: 25%;
		height: 100%;
		position: relative;
		text-align: center;
		right: 0;
	}
	.container .maketable .right .rbottom .item {
		left: 3vw;
		right: 0;
		margin-left: 4vw;
		margin-top: 0.5vh;
	    margin-bottom: 30%;
		padding: 0;
		z-index: 10001;
	}
	.switch-base {
		position:fixed;
		bottom:50px;
		width:100%;
		padding:10px;
	}
	.sp-ad {
		position:fixed;
		height: 50px;
		width:100%;
		bottom: 0;
		background-color:#444;
		z-index:10000;
	}
#makecomp #download {
    border-top-right-radius: 20px;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    line-height: 1.2;
    width: 80%;
    margin-left: auto;
    margin-right: auto;
}
#makecomp #download .first .down {
	padding-top: 9px;
    height: 82%;
}
#makecomp #download .second .dall {
	padding-top: 9px;
    height: 82%;
}
#makecomp #download .second .dface {
	padding-top: 9px;
    height: 82%;
}
#makecomp {
	background-repeat: no-repeat;
    background-size: 95%;
    background-position-x: 50%;
    background-position-y: 25%;
}
.container .maketable .topleft {
	position: absolute;
    top: 0;
    height: 17%;
    width: 100%;
    /*background-color: #fff;*/
	text-align:center;
	padding-top:4%;
}
.container .maketable .left .message {
	font-family: GN-Natsu-iro-Schedule;
    color: #fafafa;
    font-size: x-large;
    bottom: 13%;
    position: absolute;
    width: 100%;
    text-align: center;
    z-index: 2000;
    font-weight: bold;
	text-shadow: 1px 1px 1px #333;
}