/* CSS Document */

/* fix table header link color change */
table > thead > tr > th >  a:link {
	color:white;
}
table > thead > tr > th >  a:visited {
	color:white;
}
table > thead > tr > th >  a:hover {
	color:white;
}
table > thead > tr > th >  a:active {
	color:white;
}
/****************************************/


.products_mv_auto table {
	width: auto;
}

.products_mv_auto td.package {
	width: 33%;
	padding: 0;
}

/* *****   fix pakage in top banner for smartphone ****/
@media only screen and (max-width: 768px) {
	.products_mv_auto td.package {
		width: 30%;
		padding: 8px;
	}
  }
/* ***************************************************** */




.products_mv_auto td.package img {
	max-width: 180px;
}

.products_mv_auto td.logo {
	width: 67%;
	text-align: left;
	padding: 0;
	filter: brightness(0) invert(1);
}

.products_mv_auto td.logo img {
	max-width: 400px;
}

.products_mv_auto td.logo .text {
	font-size: calc(18px + 1vw);
}


/* -------------------------------------------------------*/
/*   追加     Lightbox for smatphone     */
@media only screen and (max-width: 576px) {
	#lightcase-case {
	  display: none;
	  position: fixed;
	  z-index: 2002;
	  top: 50%;
	  left: 50%;
	  font-family: arial, sans-serif;
	  font-size: 13px;
	  line-height: 1.5;
	  text-align: left;
	  /* text-shadow: 0 0 10px rgba(0, 0, 0, 0.5); */ 
	  text-shadow: none !important; 
	  background-color:white;
	} 
  }
  /* -------------------------------------------------------*/


/* -------------------------------------------------------*/
/*   追加     Lightbox for smatphone     */
@media only screen and (max-width: 576px) {
	a[class*='lightcase-icon-'], a[class*='lightcase-icon-']:focus {
	  text-decoration: none;
	  /* color: rgba(255, 255, 255, 0.6); */
	  color:#aaa !important; 
	  -webkit-tap-highlight-color: transparent;
	  -webkit-transition: color, opacity, ease-in-out 0.25s;
	  -moz-transition: color, opacity, ease-in-out 0.25s;
	  -o-transition: color, opacity, ease-in-out 0.25s;
	  transition: color, opacity, ease-in-out 0.25s;
	}
  }
  /* -------------------------------------------------------*/

#wpadminbar {
	background-color: blue;
    animation-name: wpadminbar_cycle;
	animation-duration: 4s;
	animation-iteration-count: infinite;	
}

@keyframes wpadminbar_cycle {
  0% {
    background-color: blue;
  }
  50% {
    background-color: #23282d;
  }
  100% {
    background-color: blue;
  }
}

.trait-container {
	margin-top: 20px;
}


.trait-button {
	padding: 5px;
	background-color: white;
	border: 2px solid black;
	cursor: pointer;
	font-size: 100%;
	transition-duration: 300ms;
	transition-property: background-color font-size;
	line-height: 2em;
}

.trait-button:hover {
	opacity: 0.8;
	font-size: 150%;
}

.trait-button.active {
	font-size: 150%;
}

.trait-button i {
	display: inline-block;
	transition-duration: 300ms;
	transition-property: transform;
	
}

.trait-button i:before {
  content: '+';
  font-style: normal;	
}

.trait-button.active i {
    filter: progid: DXImageTransform.Microsoft.BasicImage(rotation=0.5);
    -webkit-transform: rotate(135deg);
    -moz-transform: rotate(135deg);
    -ms-transform: rotate(135deg);
    -o-transform: rotate(135deg);
    transform: rotate(135deg);		
	
}

.trait_targets {
	margin-top: 20px;
}

.trait_item.hidden {
	display: none;
}

.trait_target {
	/*border: 2px solid lightblue;*/
	padding: 5px;
	margin: 5px 10px;
	width: 250px;
}

.trait_target img {
	width: auto;
}

.trait_target ul li {
	list-style-type: disc;
	margin-left: 1.5em;	
}

.trait_target.hidden {
	display: none;
}

.trait_item.bold {
	font-weight: bold;
}

.trait_targets .trait_invisible_box {
	display: none;
}

#tidio-chat {	
	/* pagetop is z-index 99 */
	z-index: 100;
}

#tidio-chat.bottom {
	opacity: 0.2;
	transition: opacity 1s;
	z-index: 90;
}

#tidio-chat.bottom:hover {
	opacity: 1;
	transition: none !important;
	z-index: 100;
}