@charset "utf-8";

@-ms-viewport {width: device-width;}

html,body {
	height: 100%;
	position: relative;
	/*-webkit-transform-style: preserve-3d;*/
}
body,textarea {
	color: #333;
	font-size: 14px;
	line-height: 1.4;
	font-family: 'Hiragino Kaku Gothic ProN','ヒラギノ角ゴ ProN W3',Meiryo,メイリオ,sans-serif;
	font-weight: 200;
	*font-size: small;
	*font: x-small;
	/*-webkit-font-smoothing: antialiased;*/
}
hr {margin: 7px 0;}

/* placeholder */
input.form-control::-webkit-input-placeholder,
textarea.form-control::-webkit-input-placeholder {color: #ccc; font-size: 14px;} /* chrome */
input.form-control:-ms-input-placeholder,
textarea.form-control:-ms-input-placeholder {color: #ccc; font-size: 14px;} /* ie */
input.form-control::-moz-placeholder,
textarea.form-control::-moz-placeholder {color: #ccc; font-size: 14px;} /* firefox */
select:required:invalid {color: #ccc;}
option[value=""][disabled] {display: none;}
option {color: black;}

/* outline */
button:focus,button:hover,a:hover,a:active,a:focus,a {outline: 0 !important;}
a {color: #111;-webkit-tap-highlight-color:rgba(0, 0, 0, 0);word-wrap: break-word;}
a:visited,a:hover,a:link {color: #111;text-decoration: none;}
.btn:hover,a:hover,a:active,a:focus,a {
	-webkit-transition: all 0.2s ease-in-out;
	   -moz-transition: all 0.2s ease-in-out;
	    -ms-transition: all 0.2s ease-in-out;
	     -o-transition: all 0.2s ease-in-out;
}
* {-webkit-touch-callout: none;}

/* form */
.label-success {
	background-color: #fcf8e3;
	color: #8a6d3b;
	border: 1px solid #faebcc;
	        border-radius: 0;
	-webkit-border-radius: 0;
	   -moz-border-radius: 0;
	font-weight: bold;
	padding: .2em .6em;
	margin-left: 1em;
	font-size: 10px;
	position: relative;
	bottom: 2px;
}
.form-group label {
	font-weight: bold;
	font-size: 14px;
	color: #333;
	margin: 0;
	line-height: 3.3;
}
.form-control {
	display: inline;
	background: #f6f6f6;
	border-radius: 0;
	-webkit-border-radius: 0;
	-moz-border-radius: 0;
	border-color: #d6d6d6;
	color: #333;
	outline: none;
	height: 46px;
	font-weight: 300;
	box-shadow: none;
	-webkit-appearance: none;
}
.form-control:focus {
	outline:none;
	box-shadow:none;
	border-color: #00a13a;
}
.form-group {
	padding: 10px 0;
	margin-bottom: 0;
}
.form-group.top,
.container.top {padding-top: 30px;}
.container.navi {padding-top: 60px;}
.form-group.bottom {padding-bottom: 30px;}
.form-group label.checkbox-labal {
	line-height: inherit;
	font-weight: normal;
	color: #333;
}
.form-group label.control-label {font-size: 16px;}
.form-group label.control-label span {
	position: relative;
	top: -2px;
}
.form-group .controls span.x-small.text-normal.hidden-xs {
	position: absolute;
    bottom: -1.8em;
}
.help-block {color: #a94442;}
.radio label::before {
	top: 0;
	bottom: 0;
	margin: auto -19px;
}
.radio label::after {
	top: 0;
	bottom: 0;
	margin: auto -19px;
}
input[type="radio"]:focus + label::before,
input[type="checkbox"]:focus + label::before {
	outline: 0px !important;
	-webkit-appearance: none !important;
	-webkit-box-shadow: none !important;
	   -moz-box-shadow: none !important;
	        box-shadow: none !important;
}
input[type=file] {
	position: absolute;
	top: -1px;
	bottom: 0;
	width: 1px;
	height: 1px;
}
@media (max-width: 767px) {
	.visible-xs.inline {
		display: inline!important;
	}
}

/* bootstrap */
@media (min-width: 768px) {
	.container {width: auto;}
	.col-md-offset-2 {margin-left: 5%;}
	.col-md-8 {width: 90%;}
	.modal-dialog. {width: 650px;}
}
@media (min-width: 992px) {
	.container {width: auto;}
	.col-md-offset-2 {margin-left: 16.66666667%;}
	.col-md-8 {width: 66.66666667%;}
}
@media (min-width: 1200px) {
	.container {width: auto;}
}
@media (min-width: 1280px) {
	.container {width: 1250px;}
}
@media (max-width: 767px) {
	.form-group {padding: 5px 0;}
	.form-group.top {padding-top: 10px;}
	.form-group.bottom {padding-bottom: 20px;}
}
@media (max-width: 480px) {
	.col-sp-12 {width: 100%;}
	.form-group label {line-height: 2.5;}
	.form-group label.control-label {font-size: 14px;}
	.no-padding.col-sm-4,
	.no-padding.col-sm-8,
	.no-padding.col-sm-12 {padding: 0;}
	.section-description {
		font-size: 12px;
		margin: 0 0 10px 0;
	}
}

.no-padding.col-sm-3,
.no-padding.col-sm-6,
.no-padding.col-sm-5,
.no-padding.col-sm-7,
.no-padding.col-xs-12 {padding: 0;}
.modal-header {
	padding: 20px;
	border-bottom: none;
}
.modal-header .close {
	margin-top: -1px;
	margin-right: 0;
	font-size: 24px;
}
.modal-body {
	max-height: 420px;
	overflow-y: auto;
	padding: 0 20px 20px;
}
.text-small {font-size: 14px;}
.text-normal {font-weight: normal;}
.text-bold {font-weight: bold;}
.text-muted {
	margin-bottom: 0;
	color: #555;
}
.text-wordwrap {
	word-wrap : break-word;
	overflow-wrap : break-word;
}
i.dummy {
	position: absolute;
	left: -1000px;
	top: 0;
}
.well {
	padding: 1em;
	margin-bottom: 20px;
	        border-radius: 4px;
	-webkit-border-radius: 4px;
	   -moz-border-radius: 4px;
	-webkit-box-shadow: none;
	        box-shadow: none;
}
.contact .well {
	font-size: 12px;
}
div.dummy,
.accordion-inner {
	font-size: 12px;
	word-break: break-all;
}
nav {
	position: fixed;
	z-index: 999;
	width: 100%
}
nav .nav-justified > li {
	width: 1%;
	display: table-cell;
}
.android .nav-justified.col3 > li {
	width: 33%;
	display: inline-block;
	float: left;
}
.android .nav-justified.col2 > li {
	width: 50%;
	display: inline-block;
	float: left;
}
.nav {
	background: rgba(245, 245, 245, 0.98);
	width: 100%
}
.nav > li > a {
	margin-bottom: 0;
}
.fa.block {display: block;}
.x-small {font-size: 9px;}
.fa.fa-1x {font-size: 1.5em;}

#article {
	margin-right: -5px;
	margin-left: -8px;
	margin-top: 5px;
	margin-bottom: 10px;
}
#article.normal {margin-bottom: 15px;}
/* when display loader */
.container.wrapper #article {margin: 0;}
#article .col-lg-1,
#article .col-md-1,
#article .col-sm-2,
#article .col-xs-2 {
	padding-right: 0;
	padding-left: 2px;
	padding-top: 5px;
}
/* add 2016.08.31 */
#article .col-lg-2,
#article .col-md-2,
#article .col-sm-3,
#article .col-xs-3 {
	padding-right: 0;
	padding-left: 2px;
	padding-top: 5px;
}
div.circle-avatar {
	max-width: 100%;
	width: 100%;
	height: auto;
	display: block;
	padding-top: 100%;
	border-radius: 50%;
	background-position-y: center;
	background-position-x: center;
	background-repeat: no-repeat;
	background-size: cover;
	margin: 0 auto;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
}
#article .img-thumbnail {
	width: 100%;
	padding: 0;
	        border-radius: 0;
	-webkit-border-radius: 0;
	   -moz-border-radius: 0;
	border: 1px solid #eee;
}
#article .nickname {
	font-size: 12px;
	margin: 0;
}
#article .media-body .media-heading {
	margin: 1px 0 4px;
	font-weight: bold;
	line-height: 1.4;
}
#article .media.list-text .media-body .media-heading {margin-top: 5px;}
#article .media-body p,
#article .media-body div {
	font-size: 12px;
	margin: 0;
}
#article .media-body > span i {
	color: #777;
	margin-top: 5px;
}
#article .media .img-thumbnail {
	width: 47px;
	height: 62px;
}
#article .media,
#article .comment {
	margin-top: 5px;
	margin-left: 3px;
}
#article .comment {
	padding: 10px 0 0;
	margin-left: 8px;
	margin-right: 5px;
}
#article .media {padding-right: 5px;}
#article .media.list-text {
	padding-left: 5px;
	padding-top: 5px;
	padding-bottom: 10px;
	margin-top: 0;
	border-bottom: 1px solid #eee;
}
#article .media hr,
#article .comment hr {margin: 10px 0 0;}
#article .comment .accordion-inner hr {margin: 10px 0;}
#article .media:first-child {margin-top: 10px;}
#article .media-body,
#article .media-left,
#article .media-right {
	display: block;
	vertical-align: top;
}
#article .media-body {width: auto;}
#article .media-left,
#article .media>.pull-left {padding-right: 5px;}
#article .media.active {
	-webkit-transition: background-color 0.2s ease-in-out;
	   -moz-transition: background-color 0.2s ease-in-out;
	    -ms-transition: background-color 0.2s ease-in-out;
	     -o-transition: background-color 0.2s ease-in-out;
	background: #eee;
}
#article .media-body .badge {
	background: #afafaf;
	margin-top: -1px;
	padding: 3px 5px 3px 5px;
	font-size: 11px;
}
#article .media.list-text .badge {margin-top: 6px;}
.contact .date,
#article .media.list-text .date {margin-top: 5px;}
#article .badge.new {
	background-color: red;
	margin-top: -2px;
}
@supports (overflow:-webkit-marquee) and (justify-content:inherit) {
	#article .media-body .badge {padding: 4px 5px 3px 5px;}
}
.date {font-size: 9px;}
#profile {
	margin-right: -5px;
	margin-left: -5px;
	padding: 10px 0 20px;
}
#profile .col-sm-2 {padding: 20px 0 0;}
#profile .col-xs-5 {padding: 10px 0 0;}
#profile .col-xs-7 {padding: 10px 0 0 10px;}
#profile .col-xs-12 {padding: 10px 0 0;}
#profile .img-thumbnail {
	width: 100%;
	        border-radius: 0;
	-webkit-border-radius: 0;
	   -moz-border-radius: 0;
}
#profile .cell {
	margin-bottom: 6px;
	font-size: 12px;
}
#profile .cell.bottom {margin-bottom: 0;}
#profile .badge {
	font-size: 9px;
	padding: 3px 5px 2px;
	line-height: 1;
	font-weight: bold;
	position: relative;
	top: -1px;
	background: #afafaf;
}
#profile .badge.f {background: #f6c;}
#profile .badge.m {background: #6cf;}

.container.wrapper {
	position: absolute;
	top: 0;
	width: 100%;
	height: 100%;
}
.container.wrapper .row {
	position: relative;
	top: 50%;
	-webkit-transform: translateY(-50%);
	transform: translateY(-50%);
}
.container.wrapper .row .text-warning {
	color: #999;
	font-size: 16px;
	margin: 0;
}
.panel {
	-webkit-box-shadow: none;
			box-shadow: none;
}
.panel-default > .panel-heading {
	background-color: #f7f7f7;
	border-color: #eee;
}
.panel-default > .panel-heading+.panel-collapse > .panel-body,
.panel-default {border-color: #eee;}

/* button */
.btn-custom,
.btn-custom.focus,
.btn-custom:focus {
	border: none;
	font-size: 18px;
	font-weight: bold;
	cursor: pointer;
	display: inline-block;
	margin: 0;
	text-decoration: none;
	outline: none;
	position: relative;
	        border-radius: 40px;
	-webkit-border-radius: 40px;
	   -moz-border-radius: 40px;
	-webkit-transition: all .2s ease-out;
	        transition: all .2s ease-out;
	width: 100%;
	padding: 0.8em;
}
.btn-custom.active,
.btn-custom:active,
.btn-custom:hover {
	text-decoration: none;
	-webkit-transition: all .2s ease-out;
	        transition: all .2s ease-out;
}
.btn i {
	position: absolute;
	top: 0;
	bottom: 0;
	right: 5px;
	margin: auto;
	        border-radius: 50%;
	-webkit-border-radius: 50%;
	   -moz-border-radius: 50%;
	width: 24px;
	height: 24px;
	line-height: 24px;
	margin-left: 10px;
}
.btn > i {right: 19px;}
.ladda-button .ladda-label {display: block;}
.btn-custom.btn-x-small,
.btn-custom.btn-x-small:focus {
	width: auto;
	font-size: 18px;
	padding: 5px 20px;
}
.btn-custom.cancel,
.btn-custom.cancel.active,
.btn-custom.cancel.focus,
.btn-custom.cancel:active,
.btn-custom.cancel:focus,
.btn-custom.cancel:hover {background: #ccc;}
.btn-custom.cancel i {color: #ccc;}
.btn-more {margin-top: 10px;}
.btn-more .ladda-button.auto-load,
.btn-more .ladda-button.auto-load.active,
.btn-more .ladda-button.auto-load.focus,
.btn-more .ladda-button.auto-load:active,
.btn-more .ladda-button.auto-load:focus,
.btn-more .ladda-button.auto-load:hover {
	/*background: transparent;*/
	border-color: transparent;
}
.btn-custom.btn-small {
	padding: 5px 10px;
	font-size: 12px;
	line-height: 1.5;
}
.mb0 {margin-top: 0;}
.mt5 {margin-top: 5px;}
.mt10 {margin-top: 10px;}
.mt20 {margin-top: 20px;}
.mb0 {margin-bottom: 0;}
.mb5 {margin-bottom: 5px;}
.mb10 {margin-bottom: 10px;}
.mb20 {margin-bottom: 20px;}
.pt10 {padding-top: 10px;}
.pb5 {padding-bottom: 5px;}
.pb10 {padding-bottom: 10px;}
.prb10 {padding: 0 10px;}

/* box width */
.box {
	position: relative;
	top: 0;
	left: 0;
	height: auto;
}
#profile a.active,
.box.active {
	       opacity: .7;
	        filter: alpha(opacity=70);
	    -ms-filter: "alpha(opacity=70)";
	-khtml-opacity: .7;
	-webkit-transition: opacity 0.2s ease-in-out;
	   -moz-transition: opacity 0.2s ease-in-out;
	    -ms-transition: opacity 0.2s ease-in-out;
	     -o-transition: opacity 0.2s ease-in-out;
}

/* box ratio */
.box-ratio:before {
	content: "";
	display: block;
	padding-top: 133.33333333333333333333333333333%; /* 4:3 */
}
.box-ratio.square:before {
	padding-top: 100%; /* 1:1 */
}

/* add your content */
.inner {
	position: absolute;
	top: 0; left: 0;
	width: 100%;
	height: 100%;
}
.inner p {
	color: #fff;
	font-size: 15px;
	background: #eee;
}
/*.inner p.loaded {
	background: transparent;
}*/
/* content centering */
.inner-table {
	display: table;
	width: 100%;
	height: 100%;
	text-align: center;
}
.inner-table > * {
	display: table-cell;
	vertical-align: middle;
}
.ellipsis {
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}
.multi-ellipsis {
	overflow : hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	word-wrap: break-word;
}


/* chat */
.btn-custom.send {
	width: auto;
	        border-radius: 0;
	-webkit-border-radius: 0;
	   -moz-border-radius: 0;
	padding: 5px 10px;
}
.btn-custom.send i {
	position: static;
	        border-radius: 0;
	-webkit-border-radius: 0;
	   -moz-border-radius: 0;
	color: #fff;
	background: transparent;
	margin-left: 0;
}
#send-photo.btn-custom,
#send-photo.btn-custom.active,
#send-photo.btn-custom.focus,
#send-photo.btn-custom:active,
#send-photo.btn-custom:focus,
#send-photo.btn-custom:hover {
	background: transparent;
	padding: 5px;
}
.ladda-button .ladda-spinner.gif > div {display: none;}
.ladda-button .ladda-spinner.gif > img {
	position: absolute;
	top: -14px;
	left: -14px;
	width: 28px;
}
.btn-more.dummy {
	height: 1px;
	margin: 0;
	padding: 0;
}

/* help */
.help_box_tl {font-weight: bold;}

/* debug */
#debug {
	display: none;
	position: fixed;
	bottom: 70px;
}

/* banner */
.banner {
	position: fixed;
	bottom: 0;
	background: #eee;
	z-index: 9999;
}
.banner .ad > img {
	width: 100%;
	height: auto;
}

/**
 * style custom
 */

/* button */
.btn-custom,
.btn-custom.active,
.btn-custom.focus,
.btn-custom:active,
.btn-custom:focus,
.btn-custom:hover {
	color: #fff;
	background: #00a43e;
}
.btn-custom i {
	color: #00a43e;
	background: #fff;
}
/* form */
.form-control:focus {border-color: #00a43e;}
.nav a {color: #888;}
/* chat */
#send-photo.btn-custom.send i {color: #00a43e;}
.from .arrow {
	background: #e5f5eb;
	color: #333;
}
.from .arrow:before{background: #e5f5eb;}
/* chat history badge */
#article .media-body .badge {
	background: #00722b;
	color: #fff;
}
/* announce new badge */
#article .media-body .badge.new {
	background: red;
	color: #fff;
}
/* article icon */
#profile .menu {color: #00a43e;}
#article .media-body > span i {color: #00a43e;}