@charset "UTF-8";
/* ----------------------------------------------------------------------------------
		Header
------------------------------------------------------------------------------------- */
#header {
/*	padding-top: 1em;*/
	border-bottom: 1px solid #f5f5f5;
	background-color: #fff;
}

#header .header-right{
	width: 40%;
	text-align: right;
}

#header h1 {
	line-height: 1rem;
}
#logo p {
	display: block;
	width: 10em;
}
#header a {
	text-decoration: none;
}
#header a:hover {
	color: #FFB700;
}

@media screen and (max-width:767px) {
	#header {
		position: fixed;
		top: 0;
		left: 0;
		height: 4em;
		width: 100%;
		z-index: 1000;
		padding-top: 0.5em;
		padding-bottom: 0.5em;
	}
	#logo p {
		width: 8em;
		margin-top: 0.5em;
	}
}

@media screen and (min-width: 768px) and (max-width: 991px){
	#header {
		padding-top: 0;
	}
	#header .container{
		margin-top: 20px;
	}
		#header .header-right > ul{
		margin-bottom: 11px;
	}
	#header-nav > ul{
/*		margin-top: -17px;*/
		margin-top: -32px;
	}
	#logo > p{
		margin-top: -48px;
  }
}

@media (min-width: 992px){
	#header {
		padding-top: 1rem;
	}
  #header .header-right.col-sm-7{
    width: 58.333333333333336%;
  }
  #header .header-right .list-inline>li{
    vertical-align: top;
    margin: 0 0 1.2em;
  }
	#logo > p{
		padding-top: 1rem;
		margin-bottom: 1em;
		margin-top: -40px;
	}
	#PC-nav {
		margin-top: -10px;
	}
}

/* ----------------------------------------------------------------------------------
		PC Navigation
------------------------------------------------------------------------------------- */

#PC-nav {
	font-size: 0.95rem;
}

#PC-nav .dropdown-menu li {
	padding: 0.5em;
}
#PC-nav .dropdown-menu a {
	padding: 0;
	display: block;
	margin-right: 1.5em;
	
}
#PC-nav .icon{
	width: 1.5em;
	height:1.5em;
	margin-right: 0.25em;
	float: left;
}
/*
#PC-nav .utm{
	margin-left: 2em;
}
*/
#PC-nav a:hover .utm-3bees, #PC-nav a:hover .utm-utm{
	fill: #fdb62b;
}

/* ----------------------------------------------------------------------------------
		Mobile Navigation
------------------------------------------------------------------------------------- */
#mobile-nav {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 900;
	padding: 3em 0.75em;
	background-color: #f5f5f5;
	display: none;
	font-size:1.25rem;
}


#mobile-nav a {
	color: #484848;
	text-decoration: none;
	display: block;
	padding-left: 0.25em;

}
#mobile-nav li{
	position: relative;
	border-bottom: 1px solid #ddd;
	display: block;
	height: 2em;
	line-height: 2em;
}
#mobile-nav li.mn-apps:not(.option), #mobile-nav li.mn-blog{
	border-bottom: none;
}
#mobile-nav .icon{
	width: 1.25em;
	height:2em;
	margin-right: 0.25em;
	float: left;
}
/*
#mobile-nav .utm{
	margin-left: 1.5em;
}
*/
#mobile-nav .utm-3bees, #mobile-nav .utm-utm{
	position: absolute;
	height:	1em;
	top:0.5em;
}


#nav-toggle {
	position: absolute;
	right: 5px;
	top: -5px;
}
#nav-toggle a {
	display: inline-block;
	height: 40px;
	width: 40px;
}
#nav-toggle a:hover {
	color: #484848;
}
.toggle-icon {
	display: block;
	position: absolute;
	top: 50%;
	right: 10px;
	width: 14px;
	height: 2px;
	margin: -1px 0 0 -7px;
	background: #484848;
	transition: .2s;
}
.toggle-icon:before, .toggle-icon:after {
	display: block;
	content: "";
	position: absolute;
	top: 50%;
	left: 0;
	width: 14px;
	height: 2px;
	background: #484848;
	transition: .3s;
}
.toggle-icon:before {
	margin-top: -6px;
}
.toggle-icon:after {
	margin-top: 4px;
}
#nav-toggle a .cross {
	background: transparent;
}
#nav-toggle a .cross:before, #nav-toggle a .cross:after {
	margin-top: 0;
}
#nav-toggle a .cross:before {
	transform: rotate(-45deg);
	-webkit-transform: rotate(-45deg);
}
#nav-toggle a .cross:after {
	transform: rotate(-135deg);
	-webkit-transform: rotate(-135deg);
}
#freetrialbutton_header_mobile {
	margin: 0 30px 0 0;
}
/* ----------------------------------------------------------------------------------
		Contents
------------------------------------------------------------------------------------- */
#contents {
	padding: 2em 0 3em 0;
}
#contents ul:not(.nav) li {
	margin-bottom: 0.5em;
}
#contents a {
	text-decoration: underline;
}
@media screen and (max-width:767px) {
.apps #contents {
	padding-top:4em;
}
}
/* ----------------------------------------------------------------------------------
		Conversion Block
------------------------------------------------------------------------------------- */
.conversionblock {
	padding: 2rem 0;
	width: 100%;
	color: #484848;
	font-weight: 500;
}
.contactblock {
	border: 1px solid #e9963d;
	border-radius: 5px;
	padding: 2rem 0;
	margin-bottom: 2rem;
}
.contactblock a {
	text-decoration: none !important;
}
/* ----------------------------------------------------------------------------------
		Footer
------------------------------------------------------------------------------------- */
#footer {
	width: 100%;
	background-color: #f5f5f5;
	padding: 1.5em 0;
}
#footer .logo-mediweb {
	width: 4em;
	margin: 1em auto 0 auto;
}
#footer a {
	text-decoration: none;
}
#footer a:hover {
	color: #FFB700;
}

@media screen and (min-width:992px) {
#footer-copy {
	text-align: right;
}
}
#mixpanel {
	margin-top: -2em;
	text-align: right;
}
#ISMS {
	margin-top: -2em;
	text-align: left;
}

@media screen and (max-width:767px) {
#mixpanel, #ISMS {
	margin-top: 1em;
	text-align: center;
}
}
/* ----------------------------------------------------------------------------------
		Social Link
------------------------------------------------------------------------------------- */
#sociallink {
	border-bottom: 1px solid #d1d1d1;
}
#sociallink img {
	width: 2em;
}
#sociallink .linebnr img {
	width: 200px;
}
/* ----------------------------------------------------------------------------------
		Sitemap
------------------------------------------------------------------------------------- */
#sitemap {
	padding-top: 1.5em;
	padding-bottom: 1.5em;
	border-bottom: 1px solid #d1d1d1;
}
#bannerArea,/* #features,*/ #function, #usage {
	padding-top: 1em;
}
#sitemap .h5 {
	border-left: 3px solid #484848;
	padding-left: .5em;
}
#sitemap ul {
	padding-left: 0;
	margin-bottom: 0;
}
#sitemap ul li{
	margin-left: 1em;
	list-style-image: url(../images/list-icon.png);
}
#sitemap ul li.sub-list{
	margin-left: 2em;
	list-style-image: url(../images/list-icon_sub.png);
}

@media screen and (max-width:767px) {
#sitemap ul {
	margin-bottom: 1em;
	line-height: 2.5em
}
}
/* ----------------------------------------------------------------------------------
		Banner Area
------------------------------------------------------------------------------------- */
#bannerArea {
	border-top: 1px solid #d1d1d1;
	border-bottom: 1px solid #d1d1d1;
	padding-top: 1em;
}
/* ----------------------------------------------------------------------------------
		Page Top
------------------------------------------------------------------------------------- */
#page-top {
	display: none;
}
#page-top a {
	width: 2em;
	height: 2em;
	background-color: #484848;
	border-radius: 5px;
	position: fixed;
	right: 1.5em;
	bottom: 2.5em;
	text-align: center;
	color: #fff;
	line-height: 2em;
	display: block;
	cursor: pointer;
}
/* ----------------------------------------------------------------------------------
		Partners
------------------------------------------------------------------------------------- */
#partners img {
	height: 17px;
	width: auto;
	margin-bottom: 0.5em;
}
/* ----------------------------------------------------------------------------------
		Products Lineup
------------------------------------------------------------------------------------- */
#products-lineup {
	width: 100%;
	text-align: center;
	margin-bottom: 0;
}
#products-lineup li {
	width: 11%;
}
/* ----------------------------------------------------------------------------------
		Sidenav
------------------------------------------------------------------------------------- */

@media screen and (max-width:991px) {
	#sidenav-pc {
		display: none !important;
	}
}
@media screen and (min-width:992px) {
	#sidenav-sp {
		display: none;
	}
}
#sidenav-pc {
	display: inline-block;
}
#sidenav-sp {
	margin-bottom: 2em;
}
#sidenav-sp li {
	width: 50%;
	float: left;
	margin-bottom: 0.5rem;
}
#sidenav-pc ul, #sidenav-sp ul{
	list-style: none;
	margin: 0;
	padding: 0;
}
#sidenav-pc a, #sidenav-sp a {
	display: inline-block;
	text-decoration: none;
	margin-bottom: 0.25rem;
}
#sidenav-pc li:not(.active) a:hover {
	color:#fdb62b;
}
#sidenav-pc .active a, #sidenav-sp .active a {
	cursor: default;
}
#sidenav-pc .icon, #sidenav-sp .icon{
	width: 1.5rem;
	height:1.5rem;
	margin-right: 0.25rem;
	float: left;
}
.reza:not(.active) .icon{
	fill: #d3a912;
}
.waitline:not(.active) .icon{
	fill: #a52e49;
}
.recall:not(.active) .icon{
	fill: #16813d;
}
.compass:not(.active) .icon{
	fill: #6d517b;
}
.pssurvey:not(.active) .icon{
	fill: #416583;
}
.self_checkin:not(.active) .icon{
	fill: #cd7018;
}
.option:not(.active) .icon, .utm:not(.active) .icon{
	fill: #ccc;
}
#sidenav-pc li.active a, #sidenav-sp li.active a{
	color: #ccc;
}
.active .icon{
	fill: #ccc;
}
/*
#sidenav-pc .utm, #sidenav-sp .utm{
	padding-left: 1.8rem;
}
*/
#sidenav-pc .option{
	border-top:1px solid #ccc;
	padding-top: 0.75rem;
}
.utm-3bees{
	fill: #231815;
}
.utm-utm{
	fill: #006093;
}
#sidenav-pc a:hover .utm-3bees, #sidenav-pc a:hover .utm-utm, #sidenav-pc a:hover .utm{
	fill: #fdb62b;
}
li.active .utm-3bees, li.active .utm-utm, li.active .utm{
	fill: #ccc;
}

/* ----------------------------------------------------------------------------------
		Spec
------------------------------------------------------------------------------------- */
#spec th {
	width: 25%;
}
#spec td ul {
	padding-left: 2em;
}
/* ----------------------------------------------------------------------------------
		Features
------------------------------------------------------------------------------------- */
/*#features,*/ #function, #usage, #spec {
	padding-top: 1em;
}
/* ----------------------------------------------------------------------------------
		Price
------------------------------------------------------------------------------------- */
#price-table td {
	border: none;
}
#price-table-PC td, #price-table-PC th {
	vertical-align: middle;
	border-right: 1px dotted #000;
}
#price-table td:last-child, #price-table th:last-child {
	border-right: none;
}
#price-table-PC tr td:last-child, #price-table-PC tr td:nth-last-child(2) {
	white-space: nowrap;
	font-size: 1.25em;
	text-align: right;
}
#price-table td ul {
	padding-left: 2em;
	font-size: 0.9em;
}
#price-table td li {
	margin: 0 !important;
	padding: 0 !important;
}
.price-color1 {
	background-color: #447baf;
	color: #fff;
}
.price-color2 {
	background-color: #77b7d7;
}
.price-color3 {
	background-color: #f3f0ed;
}
.price-color4 {
	background-color: #e0dad4;
}
.price-icon {
	width: 3em;
	margin-right: 5px;
	vertical-align: middle;
	line-height: 3em;
	float: left;
}
#price-table h4 {
	line-height: 2.5em;
	vertical-align: top;
	font-weight: 600;
}
#price-table a {
	text-decoration: none;
}
#price-table-mobile td, #price-table-mobile th {
	vertical-align: middle;
	border-bottom: 1px solid #fff;
}
#price-table-mobile .money {
	white-space: nowrap;
	font-size: 1.25em;
	padding-left: 1em;
}
#price-table-mobile h4, #price-table-mobile .price-icon {
	margin-bottom: 0;
}
#price-table-mobile {
	width: 100%;
}
/* ----------------------------------------------------------------------------------
		Mechanism
------------------------------------------------------------------------------------- */
#mechanism {
	background-color: #eedca9;
	padding: 2em 0;
	margin-top: -3em;
	margin-bottom: 3em;
}
/* ----------------------------------------------------------------------------------
		Voice
------------------------------------------------------------------------------------- */
#voice-dev {
	background-color: #68a2d7;
	padding: 2em 0;
	margin-top: -3em;
	margin-bottom: 3em;
	color: #fff;
}
#profile {
	background-color: rgba(255,255,255,0.50);
	border-radius: 10px;
	padding: 1em 1em 0 1em;
	color: #484848;
}
#voice-customer {
	background-image: url(../images/bg_voice_customer.png);
	padding: 2em 0 1em 0;
	margin-top: -3em;
	margin-bottom: 3em;
}
.customers .panel-body .app-icon img {
	width: 1.25rem;
	margin-right: 0.25rem;
}
.customers .panel-body a.app-icon:hover img {
	opacity: 1;
}
/* ----------------------------------------------------------------------------------
		Support Info
------------------------------------------------------------------------------------- */
#support-info {
	margin-bottom: 3em;
}
#support-info .row >div {
	padding: 0;
}
#support-info .row >div .support-box {
	box-sizing: content-box;
	padding: 1.5em;
}
#support-info .row >div:nth-child(even) .support-box {
	background-color: #eedca9;
}
#support-info .row >div:nth-child(odd) .support-box {
	background-color: #68a2d7;
}
/* ----------------------------------------------------------------------------------
		News Ticker
------------------------------------------------------------------------------------- */
#news-ticker {
	background-color: #484848;
	padding: 1em 0;
	margin-top: -2em;
	margin-bottom: 1em;
	color: #fff;
	overflow: hidden;
}
#news-ticker a {
	color: #fff;
	text-decoration: none;
}
#news-ticker a:hover {
	color: #999 !important;
}
#news-ticker .item p {
	width: 90%;
	margin: 0 0 auto 0;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.carousel-inner {
	-webkit-transform: translate3d(0, 0, 0);
}
#wrapper-social {
	margin-bottom: 2em;
}
#bnr-movie {
	text-align: center;
}
#bnr-movie a:hover img {
	opacity: 1;
}
#socialPlugIn .shareButton {
	margin: 0 auto;
	padding: 0;
	float: left;
	width: 86px;
}
#socialPlugIn .google {
	width: 72px;
}

@media screen and (max-width:991px) {
#socialPlugIn {
	width: 245px;
	margin-left: auto;
	text-align: center;
	margin-right: auto;
	margin-bottom: 2em;
}
#socialPlugIn .google {
	width: 62px;
}
}

@media screen and (min-width:992px) {
#bnr-movie {
	margin-top: -3em;
	text-align: right;
}
}
/* ----------------------------------------------------------------------------------
		Features 3Bees
------------------------------------------------------------------------------------- */
#features-3bees ul {
	font-size: 1.25em;
}
#features-3bees li img {
	width: 1.5em;
	margin-right: 0.5em;
	vertical-align: -25%;
}

@media screen and (min-width:992px) {
#features-3bees ul {
	padding-left: 4em;
}
}
/* ----------------------------------------------------------------------------------
		Interview
------------------------------------------------------------------------------------- */
#yanginterview {
	background-color: #000;
	overflow: hidden;
	padding-top: 0;
}
#yanginterview img:hover {
	opacity: .8;
}
/* ----------------------------------------------------------------------------------
		Voice
------------------------------------------------------------------------------------- */
#voice {
	padding-top: 3em;
}
/* ----------------------------------------------------------------------------------
		Venue
------------------------------------------------------------------------------------- */
#venue{
	padding:5em 0 4em 0;
	margin-top:2em;
	margin-bottom: -1rem;
	background-image:url(../images/arrow_scroll_white.png), url(../images/halftone.png), url(../images/bg_venue.jpg) ;
	background-repeat:no-repeat, repeat, no-repeat;
	background-size:auto, auto, cover;
	background-position:top center, center center, center center;
	background-attachment:scroll fixed, scroll;
	color:#fff;
}
#venue a{
	color:#fff;
}
#venue h5{
	text-indent: -0.5em;
}
#venue h5 small{
	color:#fff;
}
.copy-venue {
	display: inline-block;
	text-align: left;
}
/* ----------------------------------------------------------------------------------
		Cover
------------------------------------------------------------------------------------- */
#cover {
	padding: 4em 0 6em 0;
	margin-top: -2em;
	margin-bottom: -3em;
	background-image: url(../images/halftone.png), url(../images/bg_cover.jpg);
	background-repeat: repeat, no-repea;
	background-size: auto, cover;
	background-position: center center;
	background-attachment: fixed, scroll;
	color: #fff;
	text-align: center;
}
#cover h4 {
	line-height: 1.7;
	margin-bottom: 1.5em;
}
#cover a {
	text-decoration: none;
}
#cover .btn {
	border: 1px solid hsla(0,0%,100%,0.50);
	box-shadow: 0px 0px 10px hsla(0,0%,100%,0.25);
	-webkit-box-shadow: 0px 0px 10px hsla(0,0%,100%,0.25);
}
#copy-cover {
	height: 35px;
	overflow: hidden;
	position: relative;
}

@media screen and (max-width:320px) {
#copy-cover {
	height: 23px;
}
}
#copy-cover li {
	position: absolute;
	width: 100%;
	text-align: center;
}
#copy-cover img {
	width: 478px;
}
/* ----------------------------------------------------------------------------------
		Map
------------------------------------------------------------------------------------- */
#map {
	padding: 3em 0 2em 0;
	width: 100%;
	background-color: #00568f;
	color: #fff;
	margin-bottom: -1rem;
}
#map strong {
	color: #FFB700;
}

@media screen and (min-width:1200px) {
#map h2 {
	margin-top: 1em;
}
}
/* ----------------------------------------------------------------------------------
		Counter
------------------------------------------------------------------------------------- */
#counter {
	margin-top: 3em;
	margin-bottom: 1em;
}
#counter h3 {
	margin-bottom: 0;
}
#counter span:not(.comma) {
	background-color: #222;
	padding: 0.1em 0.25em;
	border-radius: 3px;
	margin: 0 -0.1em;
}
#counter span.comma {
	color: #222;
	margin: 0 -0.2em;
	vertical-align: sub;
}
/* ----------------------------------------------------------------------------------
		Media
------------------------------------------------------------------------------------- */
#media a {
	display: block;
	border: 1px solid #ddd;
	padding: 5px;
	border-radius: 3px;
}
/* ----------------------------------------------------------------------------------
		Page Menu
------------------------------------------------------------------------------------- */
#page-menu a {
	text-decoration: none;
	display: block;
	-webkit-transition: all .15s;
	-moz-transition: all .15s;
	transition: all .15s;
}
#page-menu a:hover {
	opacity: .25;
	-webkit-transition: all .3s;
	-moz-transition: all .3s;
	transition: all .3s;
}

/* ----------------------------------------------------------------------------------
		Lineup
------------------------------------------------------------------------------------- */
.panel-lineup {
	border-color: #d1d1d1;
	background-color: #fafafa;
	border-radius: 0;
	border-top: 10px solid #ffb700;
	padding-top: 1em;
}
.panel-lineup a {
	text-decoration: none !important;
}
.panel-lineup a:hover {
	text-decoration: underline !important;
}
.lineup-icon {
	margin-bottom: 2em;
}

@media screen and (min-width:992px) {
#lineup2, #lineup3 {
	padding-top: 4em;
}
}
#lineup [class*="col-"] {
	padding-bottom: 1em;
}
/* ----------------------------------------------------------------------------------
		Video
------------------------------------------------------------------------------------- */
#btnClose {
	position: absolute;
	top: 20px;
	right: 20px;
	z-index: 10000;
}
/* ----------------------------------------------------------------------------------
		Plan
------------------------------------------------------------------------------------- */
#plan {
	font-size: 1.75em;
	margin-bottom: 1rem;
}
#appli6 [class*="col-"] {
	padding-bottom: 2em;
	text-align: center;
}
#appli6 .icon{
	width: 110px;
	height: 110px;
	margin-bottom: 0;
}
#appli6 a:hover .icon{
	opacity: .5;
}
#appli6 .icon-reza{
	fill: #d3a912;
}
#appli6 .icon-waitline{
	fill: #a52e49;
}
#appli6 .icon-recall{
	fill: #16813d;
}
#appli6 .icon-compass{
	fill: #6d517b;
}
#appli6 .icon-pssurvey{
	fill: #416583;
}
#appli6 .icon-self_checkin{
	fill: #cd7018;
}
#plan1 {
	padding: 3em 0;
	background-color: #f5f5f5;
}
#plan2 {
	padding: 3em 0 4em 0;
}
#plan1 h5, #plan2 h5 {
	font-size: 1.5em;
	margin-bottom: 1em;
	font-weight: 600;
}

@media screen and (min-width:992px) {
#plan1 h5, #plan2 h5 {
	margin-top: 1.5em;
}
}
/* ----------------------------------------------------------------------------------
		Customer
------------------------------------------------------------------------------------- */
.name-customer {
	font-size: 0;
}
.name-customer > [class*="col-"] {
	float: none;
	display: inline-block;
	vertical-align: middle;
	font-size: 14px;
}
/* ----------------------------------------------------------------------------------
		Contact Form
------------------------------------------------------------------------------------- */

#contact-form  .tab-pane{
	padding-top: 2rem;
}
#contact-form > .tab-content {
	margin: 0 0 3rem 0;
	background-color: #f5f5f5;
	padding: 2rem;
	border-bottom-left-radius: 5px;
	border-bottom-right-radius: 5px;
}
#contact-form > .nav-tabs{
	border-bottom-color:#f5f5f5;
}
#contact-form > .nav-tabs li{
	width:50%;
	text-align: center;
	border-top-left-radius: 5px;
	border-top-right-radius: 5px;
	font-size: 1.125rem;
}
#contact-form > .nav-tabs li a{
	padding: 1.5rem 0;
	border-color:#f5f5f5; 
	border-bottom:5px solid #fff;
	background-color: #eee;
	margin-right: 5px;
}
#contact-form > .nav-tabs li:last-child a{
	margin-right: 0;
}
#contact-form > .nav-tabs li:not(.active) a:hover{
	color:inherit!important;
	background-color:#e6e6e6;
}
#contact-form > .nav-tabs li strong{
	font-weight: 500;
	font-size: 1.25rem;
}
#contact-form > .nav-tabs li.active a{
	background-color: #f5f5f5;
	border: none;
	color: #e8953d;
	border-bottom:5px solid #f5f5f5;
}
#contact-form > .nav-tabs li.active strong{
	font-weight: 800;
}


@media screen and (max-width:767px) {
#contact-form .tab-content {
	margin: 0;
}
}
#contact-form .caption {
	color: #e8953d;
	border: 1px solid #e8953d;
	border-radius: 5px;
	background-color: #fff;
	padding: 0 2rem;
	width: 100%;
	margin-bottom: 3rem;
}
#contact-form .caption .h2 {
	margin-top: 0;
}
#contact-form .customersupport {
	border: 1px solid #999;
	padding: 1rem 2rem 0.5rem 2rem;
	border-radius: 5px;
	margin: 3rem 0;
	background-color: #FFF;
}
.thanks #contact-form {
	margin: 0 0 3rem 0;
	background-color: #f5f5f5;
	border-radius: 5px;
	padding: 2rem;
}
#inuse .nav-tabs{
	border-bottom:none;
}

#inuse .nav-tabs li{
	width:100%;
	margin-bottom: 0.5rem;
}	
#inuse .nav-tabs li a{
	border:none;
	border-radius: 5px;
	color:#999;
	line-height: 1rem;
}
#inuse .nav-tabs li a:before{
	content: "";
	float: left;
    width: 0.7rem;
    height: 0.7rem;
	margin-right: 0.5rem;
	background-color: #fff;
	border: 1px solid #eee;
	border-radius:0.35rem;
	margin-top: 0.2rem;
}
#inuse .nav-tabs li.active a:before{
	background-color: #e8953d;
}
#inuse .nav-tabs li.active a{
	color:inherit;
	border:none;
}
#inuse .nav-tabs li:not(.active) a:hover{
	color: #ccc;
	background-color: rgba(255,255,255,0.50);
}
#inuse hr{
	border: none;
	border-top:4px solid #eee;
	margin-top:2.5rem;
	margin-bottom:0;
}
#inuse h4{
	border-left:4px solid #666;
	padding-left: 0.75rem;
}
/* ----------------------------------------------------------------------------------
		Q&A
------------------------------------------------------------------------------------- */
.qa #contents h4 {
	font-weight: 800;
	border-left: 5px solid #484848;
	padding: 0 0 0 0.5rem;
	font-size: 1.5rem;
	margin-top: 4rem;
}
ul#nav-qa {
	margin-top: 4rem;
	padding: 0;
}
ul#nav-qa li {
	width: 19%;
	padding: 0;
	margin: 0;
}
ul#nav-qa li a {
	background-color: #f5f5f5;
	text-decoration: none;
	display: block;
	line-height: 2;
	border: 1px solid #cccccc;
	border-radius: 3px;
}
ul#nav-qa li a:hover {
	opacity: .5;
}
dl.qanda {
	margin-bottom: 2rem;
}
dl.qanda dt {
	background-color: #f5f5f5;
	padding: 0.25rem 0.5rem;
	margin-bottom: 1rem;
	border-bottom: 1px solid #d1d1d1;
}
dl.qanda dd {
	text-indent: -1.75rem;
	margin-left: 2.25rem;
}
dl.qanda dd:first-letter, dl.qanda dt:first-letter {
	font-size: 1.25rem;
	font-weight: bold;
	margin-right: 0.75rem;
}
dl.qanda ul {
	padding-left: 0;
	text-indent: 0;
}
/* ----------------------------------------------------------------------------------
		Apps
------------------------------------------------------------------------------------- */

.apps .panel-body .app-icon img {
	width: 1.25rem;
	margin-right: 0.25rem;
}
.apps .panel-body a.app-icon:hover img {
	opacity: 1;
}

.apps #m-b-25{
	margin-bottom:2.5rem;
}
.apps #contents {
	margin-bottom: -3rem;
}
.apps #features{
	margin-bottom: 2.5rem;
}
.apps #case{
	margin-bottom: 2.5rem;
}

.apps .btn-default {
	-webkit-font-smoothing: antialiased;
}

.apps .btn-default:hover {
	background-color: rgb(255,255,255);
	transition: all .4s ease;
    -moz-transition: all .4s ease;
    -webkit-transition: all .4s ease;
    -o-transition: all .4s ease;
	border-color: #ccc;
}

.apps h3.sections { 
	background-color: #f5f5f5;
    padding: 0.25rem 0.5rem;
    border-bottom: 1px solid #d1d1d1;
}

.apps .topic p {
	margin-bottom: 0;
}

.trim{
	display: block;
	padding-top: 65%;
	width:auto;
	height:100%;
	overflow: hidden;
	position: relative;
}
.trim img{
	position: absolute;
	top: 50%;
	left: 50%;
	-webkit-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	max-width: none;
	width: auto;
	height: 100%;
}


@media screen and (max-width:776px){
.apps #features{
	margin-top:-5em;
	padding-top:5em;
}
.apps #case{
	/*margin-top:-5em;*/
	padding-top:5em;
}
.apps #convenient{
	margin-top:-5em;
	padding-top:5em;
}
.apps .p-nav div{
	padding-right: 0;
}
.apps .p-nav div:nth-of-type(3n){
	padding-right: 15px;
}
}

 @media screen and (max-width:569px){
.apps .p-nav div{
	width:auto;
}
.apps .btn-default {
	font-size: 14px;
}
 }


/* ----------------------------------------------------------------------------------
		UTM
------------------------------------------------------------------------------------- */
.title-utm{
	position: relative;
	display: block;
	margin-bottom: 5rem;
}
.title-utm .utm-3bees, .title-utm .utm-utm{
	position: absolute;
	height:2.5rem;
	top:2.5rem;
}
.title-utm .patent{
	margin-left: 17.5rem;
	border: 1px solid #ddd;
}
a.btn-compass{
	background-color: #6d517b;
	display: inline-block;
	text-decoration: none!important;
	color: #fff;
	padding: 0.5rem 1rem;
	border-radius: 5px;
	-webkit-transition: all .15s;
	-moz-transition: all .15s;
	transition: all .15s;
}

a.btn-compass:hover{
	color: #fff!important;
	opacity: .5;
}
a.btn-compass small{
	font-size: 0.75rem;
}

/* ----------------------------------------------------------------------------------
		Feature
------------------------------------------------------------------------------------- */
#feature-top{
	padding-bottom: 3rem;
}
#feature-top .h4{
	font-weight: 700;
}
#feature-top .small{
	font-size: 0.75rem;
}

/* ----------------------------------------------------------------------------------
		Compass
------------------------------------------------------------------------------------- */
#cover-compass{
	border-bottom:1px solid #eee;
}
.apps-compass #feature, .apps-compass #function, .apps-compass #message, .apps-compass #case, .apps-compass #convenient{
	padding: 3rem 0 1.5rem 0;
}
.apps-compass #function, .apps-compass #case{
	background-color:#f6f3eb;
}
.apps-compass #message{
	background-color:#6d517b;
	color: #fff;
}
.apps-compass #case{
	margin-bottom: 0rem;
}
.apps-compass .copy-function{
	margin-bottom: 0;
}
.apps-compass #contents{
	padding-top: 0;
}
.apps-compass .breadcrumb >li:before, .apps-compass .breadcrumb > .active{
	color:#484848;
}
#cover-compass{
	padding: 2rem 0 1rem 0;
	background-image:url(../compass/images/cover-compass.jpg);
	background-repeat: no-repeat;
	background-size: cover;
}
.patent{
	background-color: rgba(255,255,255,0.5);
	border: 1px solid #bbb;
	font-size: 0.75rem;
	padding: 0.25rem 1rem;
	vertical-align: middle;
	margin-left: 0.5rem;
}

@media screen and (max-width:991px) {
	#cover-compass .list-inline{
		text-align: center;
	}
}

@media screen and (max-width:767px){
	.apps #case{
	margin-bottom: 4.5rem;
	}
}


/* ----------------------------------------------------------------------------------
		IT-hojo
------------------------------------------------------------------------------------- */
#cover-it {
	border-bottom:1px solid #eee;
}
.apps-it #feature, .apps-it #function, .apps-it #message, .apps-it #case {
	padding: 3rem 0 0rem 0;
}
.apps-it #case{
	background-color:#F5F5F5;
}
#cover-it .apps-it #message{
	background-color:#FFF !important;
	color: #333;
}
.apps-it #contents{
	padding-top: 0 !important;
}
.apps-it .copy-function{
	margin-bottom: 0;
}
.apps-it .breadcrumb >li:before, .apps-it .breadcrumb > .active{
	color:#484848;
}
#cover-it{
	padding: 2rem 0 1rem 0;
	background-image:url(../../it-hojo/images/cover-compass.jpg);
	background-repeat: no-repeat;
	background-size: cover;
}
.patent{
	background-color: rgba(255,255,255,0.5);
	border: 1px solid #bbb;
	font-size: 0.75rem;
	padding: 0.25rem 1rem;
	vertical-align: middle;
	margin-left: 0.5rem;
}

@media screen and (max-width:991px) {
	#cover-compass .list-inline{
		text-align: center;
	}
}


/* ----------------------------------------------------------------------------------
		Subnav
------------------------------------------------------------------------------------- */
#subnav{
	background-color: #f5f5f5;
	padding: 0.25rem 0 0 0;
}
#subnav .list-inline{
	margin-bottom: 0;
}
#subnav li{
	padding:0 1rem 0 0.5rem;
}
#subnav li:not(:last-child){
	border-right:1px solid #ddd;
}
#subnav li a{
	text-decoration: none;
	color: #6d517b;
}
#subnav li a:hover{
	color: #6d517b;
	opacity:.5;
}



.linkbbutton a {
	margin-top: 20px;
	align-content: center;
    cursor: pointer;
    display: inline-block;
    text-align: center;
    color: #4c4948;
    line-height: 1.5em;
    padding: 5px 50px;
    color: #333;
    background-color: #f5f5f5;
    border: 1px solid #ccc;
    font-size: 1.2em;
    position: relative;
}