@charset "utf-8";

.cancelarea {
  position: fixed;
  left: 0;
  top: 0px;
  width: 100%;
  height: 100%;
  z-index:1000 !important;
  background-color: hsla(0,0%,0%,0.8);
  opacity: 0;
  visibility: hidden;
  transition: all .6s;
  cursor: pointer;
}

#smartmenu {
	position:fixed;
	text-align:left;
	z-index: 20000;	
	margin:0px 0 0 120vw;
	padding:0 10px 10px 10px;
	background-color: var(--w031);
	display:block;
	right:100%
	height:fit-content;
	transition: .3s;
	opacity: 0;
}

@media screen and (min-width:801px){
	#smartmenu { width:calc(400px - 20px); }
}

@media screen and (max-width:800px){
	#smartmenu { width:calc(100% - 20px); }
}

#smartmenu.main { margin: 80px 0 0 120vw; }
#smartmenu.sub {	margin: 0px 0 0 120vw; }

		
/* smartmenu active */
#smartmenu.active{ opacity: 1; }

@media screen and (min-width:801px){
	#smartmenu.main.active {	margin:80px 0 0 calc(100% - 400px); }
	#smartmenu.sub.active { margin:0px 0 0 calc(100% - 400px); }
}

@media screen and (max-width:800px){
	#smartmenu.main.active {	margin:80px 0 0 0; }
	#smartmenu.sub.active { margin:0px 0 0 0; }	
}

#smartmenu li{
	border-bottom:1px solid var( --w000 );
	font-size:1.4em !important;
}

#smartmenu li a{
	color:var( --w459 );
	display:block;
	width:100%;
	font-size:0.8em;
	line-height:2.8em;
	width:calc(100% - 20px);
	padding:0 10px 0px;
}

#smartmenu li a:hover{
	color:var( --w035 );
}

#smartbutton {
	width:76px;
	height:76px;
	background-color: var( --w000 );
	background-position:center top;
	background-repeat: repeat-x;
	border:2px solid  var( --w000 );
	border-radius:0px;
	position:fixed;
	cursor: pointer;	
	transform-style: preserve-3d;
	perspective: 300px;
	z-index: 30000;
	text-align:right;
	visibility:visible;
	top:2px;
	right:2px;
	background-position: calc(0% - 2px) calc(0% - 2px);
}

@media screen and (min-width:601px) { #smartbutton {	} }
@media screen and (max-width:600px) { #smartbutton { transform: scale3d(0.80, 0.80, 0.80); } }

#smartbutton::before,
#smartbutton::after {
	position: absolute;
	z-index: -1;
	display: block;
	content: '';
}
#smartbutton,
#smartbutton::before,
#smartbutton::after {
	box-sizing: border-box;
	transition: all .3s;
}

#smartbutton a{
	display:block;
	width:100px;
	height:100px;
	z-index:310;
}
#smartbutton span {
	display: block;
	position: absolute;
	text-align: center;
	box-sizing: border-box;
	transition: all .3s;
	pointer-events: none;
	line-height: 10px;
}
#smartbutton span:nth-child(1) {
	margin:0;
	z-index:9;
	width: 46px;
	height: 5px;
	border-radius:3px;
	transform: translateX(13px) translateY(18px);
	transform-origin: 50% 50% -25px;
}
#smartbutton span:nth-child(2) {
	margin:0;
	z-index:10;
	width: 46px;
	height: 5px;
	border-radius:3px;
	transform: translateX(13px) translateY(32px);
	transform-origin: 50% 50% -25px;
}

#smartbutton span:nth-child(3) {
	margin:0;
	z-index:10;
	width: 46px;
	height: 5px;
	border-radius:3px;
	transform: translateX(13px) translateY(46px);
	transform-origin: 50% 50% -25px;
}

#smartbutton span:nth-child(4) {
	z-index:8;	
	//font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS P Gothic", sans-serif;
	font-size:10px;
	font-weight:bold;
	transform-origin: 50% 50%;
	transform: translateX(-12px) translateY(57px);
	width: 96px;
	text-align:center;
	opacity:1;
}

#smartbutton span:nth-child(5) {
	z-index:8;	
	//font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS P Gothic", sans-serif;
	font-size:10px;
	font-weight:bold;
	transform-origin: 50% 50%;
	transform: translateX(-12px) translateY(57px);
	width: 96px;
	text-align:center;
	opacity:0;
}


#smartbutton span:nth-child(1) { background:var( --w459 ); }
#smartbutton span:nth-child(2) { background:var( --w459 ); }
#smartbutton span:nth-child(3) { background:var( --w459 ); }
#smartbutton span:nth-child(4) { color:var( --w459 ); }
#smartbutton span:nth-child(5) { color:var( --w459 ); }

/* active その他 */
.cancelarea.active {
  opacity: .8;
  visibility: visible;
}

#smartbutton.active {
	background-size: calc(76px) calc(76px);
	background-position: calc(50%) calc(50%);
	background-repeat: no-repeat;
}
#smartbutton.active span:nth-child(1) { transform: translateX(13px) translateY(32px) rotateZ(45deg); }
#smartbutton.active span:nth-child(2) { transform: translateX(13px) translateY(32px); opacity:0; }
#smartbutton.active span:nth-child(3) { transform: translateX(13px) translateY(32px) rotateZ(-45deg); }
#smartbutton.active span:nth-child(4) { opacity:0; }
#smartbutton.active span:nth-child(5) { opacity:1; }

/* ------------------------------
   スクロール後にボタン色変更
------------------------------ */
#smartbutton.main span:nth-child(1) { background:var( --w431 ); }
#smartbutton.main span:nth-child(2) { background:var( --w431 ); }
#smartbutton.main span:nth-child(3) { background:var( --w431 ); }
#smartbutton.main span:nth-child(4) { color:var( --w431 ); }
#smartbutton.main span:nth-child(5) { color:var( --w431 ); }

#smartbutton.sub span:nth-child(1) { background:var( --w459 ); }
#smartbutton.sub span:nth-child(2) { background:var( --w459 ); }
#smartbutton.sub span:nth-child(3) { background:var( --w459 ); }
#smartbutton.sub span:nth-child(4) { color:var( --w459 ); }
#smartbutton.sub span:nth-child(5) { color:var( --w459 ); }

#smartbutton.main.reset span:nth-child(1) { background:var( --w431 );  animation: none; }
#smartbutton.main.reset span:nth-child(2) { background:var( --w431 );  animation: none; }
#smartbutton.main.reset span:nth-child(3) { background:var( --w431 );  animation: none; }
#smartbutton.main.reset span:nth-child(4) { color:var( --w431 );  animation: none; }
#smartbutton.main.reset span:nth-child(5) { color:var( --w431 );  animation: none; }

#smartbutton.sub.reset span:nth-child(1) { background:var( --w459 ); animation: none; }
#smartbutton.sub.reset span:nth-child(2) { background:var( --w459 ); animation: none; }
#smartbutton.sub.reset span:nth-child(3) { background:var( --w459 ); animation: none; }
#smartbutton.sub.reset span:nth-child(4) { color:var( --w459 ); animation: none; }
#smartbutton.sub.reset span:nth-child(5) { color:var( --w459 ); animation: none; }

#smartbutton.change span:nth-child(1) { background:var( --w459 ); }
#smartbutton.change span:nth-child(2) { background:var( --w459 ); }
#smartbutton.change span:nth-child(3) { background:var( --w459 ); }
#smartbutton.change span:nth-child(4) { color:var( --w459 ); }
#smartbutton.change span:nth-child(5) { color:var( --w459 ); }

#smartbutton.active span:nth-child(1) { background:var( --w459 ) !important; }
#smartbutton.active span:nth-child(2) { background:var( --w459 ) !important; }
#smartbutton.active span:nth-child(3) { background:var( --w459 ) !important; }
#smartbutton.active span:nth-child(4) { color:var( --w459 ) !important; }
#smartbutton.active span:nth-child(5) { color:var( --w459 ) !important; }

#smartbutton.main.active span:nth-child(1) { background:var( --w459 ) !important; }
#smartbutton.main.active span:nth-child(2) { background:var( --w459 ) !important; }
#smartbutton.main.active span:nth-child(3) { background:var( --w459 ) !important; }
#smartbutton.main.active span:nth-child(4) { color:var( --w459 ) !important; }
#smartbutton.main.active span:nth-child(5) { color:var( --w459 ) !important; }