/* Default styles for the demo buttons */
.button {
  padding: 1em;
  cursor: pointer;
  text-decoration: none;
  color: #666;
}

/* Shadow Radial */
.shadow-radial {
  display: inline-block;
  position: relative;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  transform: translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}
.shadow-radial:before, .shadow-radial:after {
  pointer-events: none;
  position: absolute;
  content: "";
  left: 0;
  width: 100%;
  box-sizing: border-box;
  background-repeat: no-repeat;
  height: 5px;
  opacity: 0;
  transition-duration: 0.3s;
  transition-property: opacity;
}
.shadow-radial:before {
  bottom: 100%;
  background: radial-gradient(ellipse at 50% 150%, rgba(0,149,218,0.6) 0%, rgba(0, 0, 0, 0) 80%);
}
.shadow-radial:after {
  top: 100%;
  background: radial-gradient(ellipse at 50% -50%, rgba(0,149,218,0.6) 0%, rgba(0, 0, 0, 0) 80%);
}
li.current .shadow-radial:before, li.current .shadow-radial:after,
.shadow-radial:hover:before, .shadow-radial:hover:after {
  opacity: 1;
}
.btnshine{
    /*キラッと光る基点とするためrelativeを指定*/
  position: relative;
    /*ボタンの形状*/  
  display:inline-block;
    background: #333;
    color: #fff;
    padding: 10px 20px;
    text-decoration: none;
    outline: none;
    overflow: hidden;
}

/*キラッと光る*/
/*------------------------------------------*/
.btnshine::after {
  content: '';
    /*絶対配置でキラッと光るの位置を決める*/
  position: absolute;
  top: 0;
  left: -75%;
    /*キラッと光る形状*/
    width: 50%;
  height: 100%;
  background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,.3) 100%);
  transform: skewX(-25deg);
}

/*hoverした際の移動のアニメーション*/
.btnshine:hover::after {
  animation: shine 0.7s;
}

@keyframes shine {
  100% {
    left: 125%;
  }
}
/*icon_humberger_menu*/
/*------------------------------------------*/
svg {
	height: 40px;
	position: absolute;
	width: 40px;
	cursor: pointer;
	border-radius: 5px;
	z-index: 1000;	/*background-color: #fff;*/
}

.btn_hum_menu {
	display: none;
	position:fixed;
	top: 1vw;
	right: 10px;
	height: 40px;
	width: 40px;
}
.btn_hum_menu.fadeDown{
	background: #FFF;
	border-radius: 50%;
	box-shadow: 3px 3px 4px rgb(0 0 0 / 15%);
}
.btn_hum_menu.active{
	background: none;
	box-shadow: none;
}
.btn_hum_menu.viewMenu,
.btn_hum_menu.fadeDown{
	display: block;
	z-index: 999;
}
.burger {
	transition: transform 400ms;
	/*filter: url(#gooeyness); safari*/
}
.x {
	transform: scale(0);
	transition: transform 400ms;
}
.line {
	fill: none;
	stroke: #0095da;
	stroke-width: 4px;
	stroke-linecap: round;
	stroke-linejoin: round;
	transform-origin: 50%;
	transition: stroke-dasharray 500ms 200ms, stroke-dashoffset 500ms 200ms,
	transform 500ms 200ms;
}
.btn_hum_menu.active .line{
	stroke: #FFFFFF;
}
.x .line {
  stroke-width: 5.5px;
}
.btn_hum_menu .x {
  transition: transform 400ms;
}
.btn_hum_menu .line {
  transform-origin: 50%;
  transition: transform 400ms 100ms;
}
.active.btn_hum_menu .line {
  transition: transform 400ms;
}
.active.btn_hum_menu .line1 {
  transform: translateX(18px) translateY(-3px) rotate(-45deg) scale(0);
}
.active.btn_hum_menu .line2 {
  transform: translateX(-18px) translateY(-3px) rotate(45deg) scale(0);
}
.active.btn_hum_menu .line3 {
  transform: translateY(0px) rotate(45deg) scale(0);
}
.active.btn_hum_menu .line4 {
  transform: translateY(0px) rotate(-45deg) scale(0);
}
.active.btn_hum_menu .line5 {
  transform: translateX(18px) translateY(3px) rotate(45deg) scale(0);
}
.active.btn_hum_menu .line6 {
  transform: translateX(-18px) translateY(3px) rotate(-45deg) scale(0);
}
.active.btn_hum_menu .x {
  transition: transform 400ms 100ms;
  transform: scale(1);
}
/*icon_humberger_menu end*/
/*------------------------------------------*/


/*chat_info*/
/*------------------------------------------*/
/*.chat_cmt {
	display: inline-block;
	position: relative; 
	margin: 5px 0 0 0;
	padding: 1rem 1.5rem;
	border-radius: 10px;
	background: #9ddaf0;
	background: rgba(211,235,244,0.6) ;
	color: #0095da;
	font-weight: bold;
	box-shadow: 3px 3px 4px rgb(0 0 0 / 15%);
	z-index: 5;
}

.chat_cmt::before {
	content: "";
	display: inline-block;
	position: absolute;
	top: 25%; 
	right: -26px;
	border: 12px solid transparent;
	border-left: 12px solid #9ddaf0;
	border-left: 12px solid rgba(211,235,244,0.6) ;
	border-left: 12px solid #e8e8e8;
	z-index: 10;
}
.chat_cmt::after {
	content: "";
	display: inline-block;
	position: absolute;
	top: 23%; 
	right: -24px;
	border: 12px solid transparent;
	border-left: 12px solid #e5f3f8;
	z-index: 10;
}
.chat_cmt p {
	line-height: 1.8rem;
	font-weight: bold;
	margin: 0;
	padding: 0;
	color: #0095da;
	text-align: center;
}
.chat_cmt p > span{
	display: inline-block;
	text-align: left;
	color: #444;
	font-size: 85%;
}*/
/*chat_info end*/
/*------------------------------------------*/
@media screen and (max-width: 1024px) {
	.btn_hum_menu {
		top: 1.5vw;
	}
	.btn_hum_menu.fadeDown.viewMenu{
		background: #FFF;
		border-radius: 50%;
	}
	.btn_hum_menu.viewMenu.btn_shadow{
		background: #FFF;
		border-radius: 50%;
		box-shadow: 3px 3px 4px rgb(0 0 0 / 15%);	
	}
	.btn_hum_menu.active,
	.btn_hum_menu.viewMenu.btn_shadow.active{
		border:none;
		background: none;
		box-shadow: none;
	}
	.btn_hum_menu.viewMenu.btn_shadow.active{
		background: #0095da;
	}
}
@media screen and (max-width: 599px) {
	.btn_hum_menu{
		top: 1.25vw;
		right: 10px;
	}
}