@charset "utf-8";

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

#smartmenu {
	position:fixed;
	text-align:left;
	z-index: 20000;	
	width:100%;
	margin:-300vh 0 0 0;
	padding:0;
	background-image:url(/newimg/smart_menu_bg.png);
	display:block;
	left:100%
	height:fit-content;
	transition: .3s;
}

@media screen and (max-height:500px){
	#smartmenu{ margin:-1000px 0 0 0; }
}

#smartmenu li{

}

#smartmenu li a, #smartmenu li.category{

	font-size:0.8em;
	border-bottom:1px solid rgba(192, 192, 192, 1);
	margin:0 0 0 0;

	/* 縦1列 */
	/*
	display:block;
	width:calc(100% - 20px);
	line-height:1.8em;
	*/

	/* 縦2列 */
	display:inline-block;
	width:calc(50% - 30px); 
	line-height:3em;
	height:3em;
	float:left;

	/* 左にアイコンある時 */
	padding:0px 0px 0px 30px;
	/* アイコンがない時 */
	/* padding:0 10px 0px; */
}

#smartmenu li.category{
	padding:0 0px 0px 40px;
	width:calc(100% - 20px) !important; 

	/* font-weight:bold; */
	color: hsla(199, 100%, 100%, 1);
	text-shadow: 1px 1px 2px hsla(199, 37%, 51%, 1);

	background: var( --color01 );
	background-position:left 1px center;
	background-repeat:no-repeat;
	background-size:auto 75%;
}

#smartmenu li.category#c1 { background-image:url(newimg/Wdia.png); }
#smartmenu li.category#c2 { background-image:url(newimg/Wdia.png); }
#smartmenu li.category#c3 { background-image:url(newimg/Wdia.png); }
#smartmenu li.category#c4 { background-image:url(newimg/Wdia.png); }

#smartmenu li a::after {

	/* 画像アイコン */
	display: block;
	width:30px; 
	line-height:3em;
	height:3em;
	content: "";
	position: relative;
	top: -3em;
	left: -28px;
	
	background-image:url(newimg/1dia.png);
	background-position:center center;
	background-repeat:no-repeat;
	background-size:80% auto;
	
	transition:0s;

}

#smartmenu li a:hover::after {
	background-size:100% auto;
	transition:.2s;
}

#smartmenu.active {
  margin:100px 0 0 0;
}

.cancelarea.active {
  opacity: .8;
  visibility: visible;
}

@media screen and (max-width: 600px)
{
	.cancelarea {
	  position: fixed;
	  left: 0;
	  top: 100px;
	}
}

.smartbutton {
	background-position:center top;
	background-repeat:repeat-x;
	position:fixed;
	cursor: pointer;	
	transform-style: preserve-3d;
	perspective: 300px;
	z-index: 30000;
	text-align:right;
	overflow: hidden;
	visibility:visible;

	/* 丸型ボタン */
	/* border-radius:48px; */

	/*角丸正方形ボタン*/
	border-radius:8px;
}

.smartbutton#button01{
	width:96px;
	height:96px;
	border:2px solid rgba(128, 128, 128, 1);
	background-color:white;
}
.smartbutton#button02{
	width:100px;
	height:100px;
	background-color:var( --color02 );
}

.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: 48px;
	height: 4px;
	border-radius:2px;
	transform-origin: 50% 50% -25px;
}
.smartbutton span:nth-child(2) {
	margin:0;
	z-index:10;
	width: 48px;
	height: 4px;
	border-radius:2px;
	transform-origin: 50% 50% -25px;
}

.smartbutton span:nth-child(3) {
	margin:0;
	z-index:10;
	width: 48px;
	height: 4px;
	border-radius:2px;
	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%;
	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%;
	width: 96px;
	text-align:center;
	opacity:0;
}

/* ハンバーガーメニュー位置設定 */
.smartbutton#button01 span:nth-child(1) { transform: translateX(22px) translateY(27px); }
.smartbutton#button01 span:nth-child(2) { transform: translateX(22px) translateY(42px); }
.smartbutton#button01 span:nth-child(3) { transform: translateX(22px) translateY(57px); }
.smartbutton#button01 span:nth-child(4) { transform: translateX(-2px) translateY(72px); }
.smartbutton#button01 span:nth-child(5) { transform: translateX(-2px) translateY(72px); }

.smartbutton#button02 span:nth-child(1) { transform: translateX(25px) translateY(29px); }
.smartbutton#button02 span:nth-child(2) { transform: translateX(25px) translateY(44px); }
.smartbutton#button02 span:nth-child(3) { transform: translateX(25px) translateY(59px); }
.smartbutton#button02 span:nth-child(4) { transform: translateX(2px) translateY(74px); }
.smartbutton#button02 span:nth-child(5) { transform: translateX(2px) translateY(74px); }

/* ハンバーガーメニュー色設定 */
.smartbutton#button01 span:nth-child(1) { background:hsla(360,0%,50%,1); }
.smartbutton#button01 span:nth-child(2) { background:hsla(360,0%,50%,1); }
.smartbutton#button01 span:nth-child(3) { background:hsla(360,0%,50%,1); }
.smartbutton#button01 span:nth-child(4) { color:hsla(360,0%,50%,1); }
.smartbutton#button01 span:nth-child(5) { color:hsla(360,0%,50%,1); }

.smartbutton#button02 span:nth-child(1) { background:hsla(360,100%,100%,1); }
.smartbutton#button02 span:nth-child(2) { background:hsla(360,100%,100%,1); }
.smartbutton#button02 span:nth-child(3) { background:hsla(360,100%,100%,1); }
.smartbutton#button02 span:nth-child(4) { color:hsla(360,100%,100%,1); }
.smartbutton#button02 span:nth-child(5) { color:hsla(360,100%,100%,1); }

.smartbutton#button02::before {
	content: "";
	display: block;
	background: linear-gradient(
	90deg,
	var( --color14 ) 0%,
	hsla(360,100%,100%,0.5) 50%,
	var( --color14 ) 100%
	);
	height: 200px; /* 反射エフェクト縦 */
	width: 50px; /* 反射エフェクト横 */
	transform: translate(0);
	position: absolute;
	animation: reflect-rotate 10s linear forwards infinite;
	z-index: 0;
	top: 50%;
	left: 25%;
	transform-origin: top center;
	opacity:0;
}

.smartbutton#button02::after {
	z-index:7;	
	transform-origin: 50% 50%;
	transform: translateX(4px) translateY(4px);
	width: 92px;
	height: 92px;
	border-radius:4px;
	background-color:var( --color01 );
}

.smartbutton.active {
	/*アニメーション*/
	/* animation: anime01 20s linear infinite; * /

	/*静止画*/
	/* background-image:url(/newimg/smart_menu_bg.png); */ 
}

.smartbutton.active#button02{
	background-color:var( --color14 ) !important;

}

.smartbutton#button02.active::before {
	opacity:1;
}

.smartbutton#button02.active::after{
	background-color:var( --color02 );
	animation: anime01 20s linear infinite;
	opacity:1;
}

.smartbutton.active span:nth-child(1) { }
.smartbutton.active span:nth-child(2) { opacity:0; }
.smartbutton.active span:nth-child(3) { }
.smartbutton.active span:nth-child(4) { opacity:0; }
.smartbutton.active span:nth-child(5) { opacity:1; }

.smartbutton#button01.active span:nth-child(1) { transform: translateX(21px) translateY(42px) rotateZ(45deg) !important; }
.smartbutton#button01.active span:nth-child(2) { transform: translateX(21px) translateY(42px); }
.smartbutton#button01.active span:nth-child(3) { transform: translateX(21px) translateY(42px) rotateZ(-45deg) !important; }

.smartbutton#button02.active span:nth-child(1) { transform: translateX(25px) translateY(44px) rotateZ(45deg) !important; }
.smartbutton#button02.active span:nth-child(2) { transform: translateX(25px) translateY(44px); }
.smartbutton#button02.active span:nth-child(3) { transform: translateX(25px) translateY(44px) rotateZ(-45deg) !important; }


.smartbutton {
	transform: scale3d(0.8, 0.8, 0.8);
	top:0px;
	right:0px;
}

@media screen and (max-width: 600px)
{
	.smartbutton {
		transform: scale3d(0.75, 0.75, 0.75);
	}
}

/*------------------------------------------------------------------------------------------------------------------------*/
/* アニメーション */
@keyframes anime01 {
  0% {
	background-image: url(/sample/starlight200white.png);
	background-repeat: repeat;
	background-position: 0 0;
  }
  100% {
	background-image: url(/sample/starlight200white.png);
	background-repeat: repeat;
	background-position: -1165px 0;
  }
}

@keyframes reflect-rotate {
	from {
		transform: rotate(0);
	}
	to {
		transform: rotate(360deg);
	}
}