@charset "utf-8";
/**
 * 購入者画面用
 */

/* ==========================================================================
   目次
   ========================================================================== */
/*
 * 01 RESET 　　
 * 
 * 02 LAYOUT 
 * 
 *    02-01 HEADER
 *    02-02 SIDE
 *    02-03 CONTENT
 *    02-04 FOOTER
 * 
 * 03 NAVIGATION
 * 
 *    03-01 GLOBAL NAVI
 *    03-02 BREADCRUMBS
 *    03-03 TAB
 *    
 * 04 CONTENTS  
 *    04-01 BOX-STYLE
 *    04-02 TITLE
 *    04-03 TEXT-STYLE
 *    04-04 TABLE
 *    04-05 FORM
 *    04-06 BUTTON
 *    04-07 LIST
 *    04-08 PANEL
 *    04-09 IMAGE
 *    04-10 HR
 *    04-11 INPUT
 *    04-12 ALERT  
 * 
 * 05 POPUP
 * 
 * 06 COMMON
 * 
 *    06-01 FLOAT
 *    06-02 PADDING
 *    06-03 MARGIN
 *    06-04 TEXT
 *    06-05 COLOR
 *    06-06 BG-COLOR
 *    06-07 BORDER
 */
  
  
/* ==========================================================================
   01 RESET
   ========================================================================== */
/* html */
html {
  overflow-y:scroll;
}

body{
	font-family: メイリオ, Meiryo, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "Lucida Grande", Verdana, "ＭＳ Ｐゴシック", sans-serif;
  word-break: break-all;
	}

.container {
  padding-right: 20px;
  padding-left: 20px;
  margin-right: auto;
  margin-left: auto;
}
@media (min-width: 1200px){
.container {
    width: 1000px;
}
}
@media (max-width: 767px) { 
body{
	font-size:18px;
	}
.container {
    padding-right: 10px;
    padding-left: 10px;
    margin-right: auto;
    margin-left: auto;
}
}

textarea {
    resize: vertical;
}



/* bootstrap
   ========================================================================== */
#main-contents{padding:0;}
.container-fluid {
    padding:0;
    margin-right: auto;
    margin-left: auto;
}
.row{
    margin-left:0px;
    margin-right:0px;
}

.col-xs-1, .col-sm-1, .col-md-1, .col-lg-1, .col-xs-2, .col-sm-2, .col-md-2, .col-lg-2, .col-xs-3, .col-sm-3, .col-md-3, .col-lg-3, .col-xs-4, .col-sm-4, .col-md-4, .col-lg-4, .col-xs-5, .col-sm-5, .col-md-5, .col-lg-5, .col-xs-6, .col-sm-6, .col-md-6, .col-lg-6, .col-xs-7, .col-sm-7, .col-md-7, .col-lg-7, .col-xs-8, .col-sm-8, .col-md-8, .col-lg-8, .col-xs-9, .col-sm-9, .col-md-9, .col-lg-9, .col-xs-10, .col-sm-10, .col-md-10, .col-lg-10, .col-xs-11, .col-sm-11, .col-md-11, .col-lg-11, .col-xs-12, .col-sm-12, .col-md-12, .col-lg-12 {
    position: relative;
    min-height: 1px;
    padding: 3px;
}

.btn {
    display: inline-block;
    padding: 25px 20px 20px;
    margin-bottom: 0;
    font-size: 24px;
    line-height: 1.2em;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    -ms-touch-action: manipulation;
    touch-action: manipulation;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    background-image: none;
    border: none;
    border-radius: 0;
    font-weight: bold;
    color: #FFF;
  border-radius: 100px;
}
@media (max-width: 767px) { 
.btn {
    padding: 18px 20px 20px;
}
}
.btn:hover, .btn:focus, .btn.focus {
    color: #FFF;
    text-decoration: none;
}

.btn.disabled, .btn[disabled], fieldset[disabled] .btn {
    opacity: .5;
}

.btn-return {
    white-space: normal;
}

.btn {
  display: inline-block;
  padding: 6px 12px 8px;
  margin-bottom: 0;
  font-size: 14px;
  font-weight: bold;
  line-height: 1.42857143;
  text-align: center;
  white-space: nowrap;
  vertical-align: middle;
  -ms-touch-action: manipulation;
  touch-action: manipulation;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  background-image: none;
  border: none;
  border-radius: 9999px;
  box-shadow: inset 0 -4px 0 rgba(0, 0, 0, .25);
  color: #FFF;
}
.btn:hover,
.btn:focus,
.btn.focus {
  color: #FFF;
  text-decoration: none;
}
.btn:active {
  padding: 5px 12px 5px;
  margin: 4px 0 0 0;
  box-shadow: inset 0 99999px 0 rgba(255, 255, 255, .50), inset 0 0 0 rgba(0, 0, 0, .25);
}
.btn-xs,
.btn-group-xs > .btn {
  padding: 2px 5px 2px;
  font-size: 12px;
  line-height: 1.5;
  border-radius: 3px;
  box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .25);
}
.btn-sm,
.btn-group-sm > .btn {
  padding: 5px 10px 7px;
  font-size: 12px;
  line-height: 1.5;
  border-radius: 3px;
  box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .25);
}.btn.disabled
.btn-lg,
.btn-group-lg > .btn {
  padding: 11px 16px 16px;
  font-size: 18px;
  line-height: 1;
  border-radius: 6px;
  box-shadow: inset 0 -4px 0 rgba(0, 0, 0, .25);
}
.btn-default {
  color: #555;
  background-color: #e2e2e2;
  border: none;
}
.btn-default:hover {
  color: #555;
  background-color: #e2e2e2;
  border-color: #adadad;
}
.btn-default:active,
.btn-default.active,
.open > .dropdown-toggle.btn-default {
  color: #555;
  background-color: #e2e2e2;
  border-color: #adadad;
}
.btn-default:focus,
.btn-default.focus {
  color: #555;
  background-color: #e2e2e2;
  border-color: #8c8c8c;
}
.btn-default.disabled:hover,
.btn-default[disabled]:hover,
fieldset[disabled] .btn-default:hover,
.btn-default.disabled:focus,
.btn-default[disabled]:focus,
fieldset[disabled] .btn-default:focus,
.btn-default.disabled.focus,
.btn-default[disabled].focus,
fieldset[disabled] .btn-default.focus {
  color: #555;
  background-color: #e2e2e2;
  border-color: #8c8c8c;
}

.table {
	font-size:12px;
    margin-bottom: 0;
}


.table-bordered > thead > tr > th, .table-bordered > thead > tr > td {
    border-bottom-width: 1px;
}

.table > thead > tr > th, .table > tbody > tr > th, .table > tfoot > tr > th, .table > thead > tr > td, .table > tbody > tr > td, .table > tfoot > tr > td {
    padding: 20px 10px;
    line-height: 1em;
    vertical-align: middle;
    border-top:none;
}
th {
	background-color: #f6f6f6;
}
td {
	background-color: #f6f6f6;
}

.table-table th {
	background-color: #fcfcfc;
}
.table-table td {
	background-color: #FFF;
}

.modal-body img {
    max-width: 100%;
    height: auto;
}

.form-control {
    /*padding: 22px 0 21px 21px;*/
    height:45px;
    border-radius: 0;
    box-shadow: none;
}

select.form-control{
    height: 45px;
    padding: 0 0 0 21px;
}



.panel-heading {
    padding: 10px;
}


.modal-header {
	color:#FFF;
	background:#444444;
    padding: 15px;
    border-bottom: 1px solid #e5e5e5;
}
.modal-title {
	font-weight:bold;
    margin: 0;
    line-height: 1.42857143;
    font-size:16px;
}
.modal-body{
	line-height:1.8;
}

.modal-content{
	border: 5px solid #d2d2d2;
}
.modal-footer{
	background: #fcfcfc;
	text-align: center;
}
.modal-open .modal {
    overflow-x: hidden;
    overflow-y: hidden;
}
.label{
    padding: .3em .6em .3em;
    font-size: 90%;
}


.popover {
    max-width: 500px;
}


/*additional*/
@media (max-width: 767px) {
	.panel-body {
  padding: 10px;
}
}

@media (max-width: 767px) { }
@media (min-width: 768px) { }
@media (min-width: 992px) { }
@media (min-width: 1200px) { }



/*パンクズ*/
.breadcrumb {
    padding: 0;
    margin-bottom: 0;
    list-style: none;
    background-color: transparent;
    border-radius: 4px;
    font-size: 12px;
}
.breadcrumb > li + li:before {
  padding: 0 1em;
  content: ">";
}
/* ==========================================================================
   02 LAYOUT 
   ========================================================================== */


/*     HEADER
   ========================================================================== */
header{font-size:11px; line-height:100%; color:#5b5b5b;}
header i{margin:0 5px 0 0;}
header ul{
    margin:0;
    padding:0;
    font-size:0;
    list-style:none;
}

header ul li{
    border-right:1px solid #DDD;
    display:inline-block;
    margin:0;
    padding:0;
    font-size:12px;
}
header ul li:first-child{
    border-left:1px solid #ddd;
}
header ul li:hover{
    background:#EEE;
}

header ul li a{
    display: inline-block;
    vertical-align: middle;
    padding: 0 10px;
    text-decoration: none;
    color: #5b5b5b;
    line-height: 50px;
    height:50px;

}
header ul li a:hover{
    text-decoration: none;
}
header ul li a img:hover{
}
.hdr-btn{
    display: inline-block;
    vertical-align: middle;
    padding: 0 7px;
    font-size:11px;
    line-height:20px;
    background: #aaa;
    margin: 0 8px 0 12px;
    border-radius: 3px;
    color: #FFF;
}
.hdr-btn:hover,.hdr-btn:focus{
    opacity: 0.7;
    color: #FFF;
    text-decoration: none;
}

.hdr-spacer{padding:10px 0 6px;}

.hdr-info-area{
    box-shadow: 0 3px 3px -3px rgba(0,0,0,0.1) inset, 0 -3px 3px -3px rgba(0,0,0,0.1) inset; 
    margin:0 0 20px 0; 
    border-top:1px solid #DDD;
    border-bottom:1px solid #DDD;
}


.hdr-info{
    display:inline-block;
    margin: 0 8px 0 12px;
    color: #FFF;
    font-size:11px;
    line-height:21px;
}
.hdr-biz-id{
    display:inline-block;
    vertical-align: middle;
    border-radius:3px 0 0 3px;
    background:#f19149;
    padding:0 7px;
}
.hdr-biz-no{
    display:inline-block;
    vertical-align: middle;
    border-radius:0 3px 3px 0;
    background:#e3680c;
    padding:0 7px;
}
.hdr-ope-id{
    display:inline-block;
    vertical-align: middle;
    border-radius:3px 0 0 3px;
    background:#B3D465;
    padding:0 7px;
}
.hdr-ope-no{
    display:inline-block;
    vertical-align: middle;
    border-radius:0 3px 3px 0;
    background:#91BF41;
    padding:0 7px;
}
.hdr-ope-img{
}
.hdr-ope-img img{
    vertical-align: middle;
    max-width:21px;
    border-radius:3px 0 0 3px;
    height:auto;
}
.hdr-ope-name{
    display:inline-block;
    vertical-align: middle;
    background:#91BF41;
    padding:0 7px;
}
.hdr-ope-btn{
    display: inline-block;
    vertical-align: middle;
    background: #009944;
    padding: 0 7px;
    font-size:11px;
    line-height:21px;
    margin: 0 8px 0 12px;
    border-radius: 0 3px 3px 0;
    color: #FFF;
}
.hdr-ope-btn:hover,.hdr-ope-btn:focus{
    opacity: 0.7;
    color: #FFF;
    text-decoration: none;
}

.hdr-chat-contact-new {
	background: #F00;
    border-radius: 4px;
    color: #ffffff;
    font-size: 12px;
    padding: 0px 5px;
    margin: 0 0 0 3px;
    line-height: 0;
}


/* ==========================================================================
   パンくず
   ========================================================================== */


#breadcrumbs{
  background: #fff;
  border: 1px solid #ededed;
  border-radius: 5px;
  overflow: hidden;
  width: 100%;
  margin:15px 0 15px;
  
  color:#777;
  height:30px;
}
#breadcrumbs i{
    margin:0;
}
#breadcrumbs ul {
  margin:0;
  padding:0;
  list-style:none;
}
#breadcrumbs li{
    float: left;
    border: none;
    font-size:11px;
}


#breadcrumbs a{
    float: left;
    padding: 7px 11px 8px 20px;
    text-decoration: none;
    color: #777;
    position: relative;
    background-color: #fff;
    border-radius: -30px 0px 0px -30px !important;
    height:30px;
    line-height: 1.42857143;
    font-size:11px;
 }

 
#breadcrumbs li:first-child a{
  padding-left: 1em;
  border-radius: 5px 0 0 5px;
}

#breadcrumbs a::after,
#breadcrumbs a::before {
   content: "";
    position: absolute;
    top: 50%;
    right: -11px;
    padding-right: 11px;
    height: 30px;
    margin-top: -16px;
    width: 16px;
    border-radius: 0px 25px 25px 0px !important;
}

 
#breadcrumbs a::after{
  z-index: 2;
  border-left-color: #fff;
  border-radius: 0px 27px 27px 0px !important;
    background: #fff;
}
#breadcrumbs a::before{
    border: 1px solid #e0e0e0;
    border-left: none;
    z-index: 1001;
}
#breadcrumbs a:hover::after{
    border-left-color: #fff;
    border-right: none;
}
 
#breadcrumbs .current,
#breadcrumbs .current:hover{
    padding: 7px 10px 8px 20px;
    background: none;
    border:none;
    height:30px;
    line-height: 1.42857143;
}
 
#breadcrumbs .current::after,
#breadcrumbs .current::before{
  content: normal;
}

#breadcrumbs a:hover { 
  background:#e70000 !important;
  z-index:3;
  color:#FFF;
}
#breadcrumbs a:hover::after {
  z-index: 2;
  border: none;
  background:#e70000 !important;
}

#breadcrumbs a:hover::before {
  z-index: 2;
  border: none;
  background:#e70000 !important;
}

#breadcrumbs .active {
  background:#00a9ce;
  color:#FFF;
}

#breadcrumbs .active::after {
  z-index: 2;
  border-left-color: #00a9ce;
  border:none;
}

#breadcrumbs a:nth-child(1)::after {
	z-index:5;	
}
#breadcrumbs a:nth-child(2)::after {
	z-index:4;	
}
#breadcrumbs a:nth-child(3)::after {
	z-index:3;	
}
#breadcrumbs a:nth-child(4)::after {
	z-index:2;	
}
#breadcrumbs a:nth-child(5)::after {
	z-index:1;	
}
#breadcrumbs .fa-home {
	font-size:13px;
	position: relative;
	top:1px;
	left:2px;
}

.breadcrumbs-home .active a{
	background: #bfbfbf !important;	
}
.breadcrumbs-form .active a{
	background: #FE859F !important;	
}
.breadcrumbs-webeditor .active a{
	background: #45D2FF !important;	
}
.breadcrumbs-mail .active a{
	background: #ec6941 !important;	
}
.breadcrumbs-line .active a{
	background: #1dcd00 !important;	
}

.breadcrumbs-seller .active a{
	background: #448aca !important;
}
.breadcrumbs-seminar .active a{
	background: #ffa800 !important;
}
.breadcrumbs-mla .active a{
	background: #398826 !important;	
}
.breadcrumbs-affiliate .active a{
	background: #8fc31f !important;	
}
.breadcrumbs-opt .active a{
	background: #8957a1 !important;
}
.breadcrumbs-chat .active a{
	background: #ffd800 !important;
}
.breadcrumbs-keiyaku .active a{
	background: #7d7d7d !important;
}
.breadcrumbs-home .active a{
	background: #bfbfbf !important;	
}
.breadcrumbs-form .active a::before{
	background: #FE859F !important;
	z-index: 3;
}
.breadcrumbs-webeditor .active a::before{
	background: #45D2FF !important;
	z-index: 3;
}
.breadcrumbs-mail .active a::before{
	background: #ec6941 !important;
	z-index: 3;
}
.breadcrumbs-line .active a::before{
	background: #1dcd00 !important;
	z-index: 3;
}
.breadcrumbs-seller .active a::before{
	background: #448aca !important;
}
.breadcrumbs-seminar .active a::before{
	background: #ffa800 !important;
}
.breadcrumbs-mla .active a::before{
	background: #398826 !important;
}
.breadcrumbs-affiliate .active a::before{
	background: #8fc31f !important;	
}
.breadcrumbs-opt .active a::before{
	background: #8957a1 !important;
}
.breadcrumbs-chat .active a::before{
	background: #ffd800 !important;
}
.breadcrumbs-keiyaku .active a::before{
	background: #7d7d7d !important;
}

.breadcrumbs-form .active a,
.breadcrumbs-webeditor .active a,
.breadcrumbs-mail .active a,
.breadcrumbs-line .active a,
.breadcrumbs-seller .active a,
.breadcrumbs-seminar .active a,
.breadcrumbs-mla .active a,
.breadcrumbs-affiliate .active a,
.breadcrumbs-opt .active a,
.breadcrumbs-chat .active a,
.breadcrumbs-keiyaku .active a{
	color:#fff !important;
}



/*     SIDE
   ========================================================================== */
   
/* LEFT SIDEBAR */
/* header */
#header-inner {
    width: 970px;
}

#header-inner #logo p, #header-inner #logo a {
    display: block;
    width: 261px;
    height: 0;
    padding: 27px 0 0;
    background: url(/c2/img/logo.png) no-repeat;
    text-indent: -9999px;
    white-space: nowrap;
    overflow: hidden;
    margin: 0;
}

#head-bar .customer-id-left {
    color: #fff;
    border-radius: 4px 0 0 4px;
    -webkit-border-radius: 4px 0 0 4px;
    background-color: #f19149;
    font-size: 11px;
    padding: 5px 8px;
    font-weight: bold;
}

#head-bar .customer-id-right {
    border-radius: 0 4px 4px 0;
    -webkit-border-radius: 0 4px 4px 0;
    color: #fff;
    background-color: #ee8449;
    font-size: 11px;
    padding: 5px 8px;
}

#head-bar .login-profile-center {
    font-size: 11px;
    background: #959595;
    color: #fff;
    padding: 5px 8px;
	border-radius: 4px;
}

.customer-id-area, .login-id-area, .login-profile-area, .login-profile-area {
    display: inline-block;
}
#sidebar {
	padding:0 20px 0 0;
}

@media screen and (max-width: 991px) {
#sidebar {
	padding:0;
}
}

@media screen and (min-width: 992px) {
#sidebar {
	display: block!important;
}
}

/* panel-small */
.panel.panel-small{
    border:1px solid #939393;
}

.panel-small .panel-heading{
    color: #FFF;
    background-color: #939393;
    border: none;
    font-size:12px;
    font-weight:bold;
}

.panel-small .panel-heading i{
    font-size:14px;
}
.panel-small .panel-body{
    padding:0;
    border-bottom:1px solid #939393;
}
.panel-small .panel-body:last-child{
    border:none;
}
.panel-small .panel-body .list-group{
    margin:0;
    font-size: 12px;
}
.panel-small .panel-body .list-group-item{
    border:none;
    padding:0px;
}
.panel-small .panel-body .list-group-item:hover{
    background:#f5f5f5;
}
.panel-small .panel-body .list-group-item:first-child a{
    padding: 10px 10px 5px 10px ;
}
.panel-small .panel-body .list-group-item:last-child a{
    padding: 5px 10px 5px 10px;
}
.panel-small .panel-body .list-group-item a{
    display: block;
    padding: 5px 10px;
}
.panel-small .panel-body .list-group-item a.active{
    background:#fff3bf;
}
.panel-small .panel-body .list-group-item i{
    color:#939393;
}



/* sidr */

.sidr ul li {
	line-height: 36px;
}
.sidr ul li:hover, .sidr ul li.active, .sidr ul li.sidr-class-active {
    line-height: 36px;
}

/*     CONTENT
   ========================================================================== */
   
/*     FOOTER
   ========================================================================== */
/* footer */

footer{
    background: #535353;
    text-align:center;
    
    
}

.footer-credit{
    padding:2px 0 0 0;
    font-size:14px;
    font-weight:bold;
    color:#FFF;
    line-height:38px;
}



/* footer-customer */
footer.footer-customer div{background:transparent;}

footer.footer-customer .footer-border {
  margin-top: 30px;
  border-top: 1px dashed #ddd;
}
footer.footer-customer .copyright {
  width: 100%;
  text-align: center;
  padding: 7px 5px;
}
footer.footer-customer .copyright p {
  margin: 0;
}
@media screen and (max-width : 320px ){
  footer.footer-customer .copyright {
    font-size: 10px;
  }
}



footer.footer-customer {
    background-color: #FFF;
    color: #000;
}

.footer-customer .footer-nav{
	padding:20px 0;
	border-top:1px solid #d2d2d2;
	}
	
.footer-customer .footer-nav ul{
	font-size:0;
	line-height:0;
	list-style:none;
	}
	
.footer-customer .footer-nav li{
	display:inline-block;
	font-size:12px;
	line-height:12px;
	border-right:1px solid #d2d2d2;
	}
	
.footer-customer .footer-nav li:first-child{
	border-left:1px solid #d2d2d2;
	}
	
.footer-customer .footer-nav li a{
	display:block;
	padding: 0 18px;
	text-decoration:none;
	color:#000;
	}
.footer-customer .footer-nav li a:hover{
	background:#f5f5f5;
	}



@media (max-width: 767px) { 
.footer-customer .footer-nav ul{
	font-size:0;
	line-height:0;
	list-style:none;
	}
	
.footer-customer .footer-nav li{
	display:block;
	font-size:auto;
	line-height:auto;
	border-right:none;
	}
	
.footer-customer .footer-nav li:first-child{
	border-left:none;
	}
	
.footer-customer .footer-nav li a{
	display:block;
	padding: 0 18px;
	text-decoration:none;
	color:#000;
	background:#f5f5f5;
	border-bottom:1px solid #e5e5e5;
	
	}
.footer-customer .footer-nav li a:hover{
	background:#eeeeee;
	}
}
   
   
/* ==========================================================================
   03 NAVIGATION
   ========================================================================== */
.contents {
    width: 1000px;
    padding-right: 10px;
    padding-left: 10px;
    margin-right: auto;
    margin-left: auto;
    font-size: 13px;
}
#gnav {
	width: 100%;
	background: #f8f8f8;
}
#gnav i{
	margin:0;
}
#gnav ul {
	display: block;
	list-style: none;
	margin: 0;
	background: #f8f8f8;
}
#gnav ul > li {
	height: 39px;
	width: 103px;
	float: left;
	font-size: 14px;
	text-align: center;
	position: relative;
    border:none;
}

#gnav ul > li:first-child {
	height: 39px;
	width: 49px;
	float: left;
	font-size: 14px;
	text-align: center;
	position: relative;
}
#gnav ul > li:nth-child(2) {
	height: 39px;
	width: 107px;
	float: left;
	font-size: 14px;
	text-align: center;
	position: relative;
}
#gnav ul > li a {
	color: #616161;
	font-size: 14px;
	display: block;
	text-decoration: none;
	-webkit-box-shadow: inset 0 0 1px 1px #fff;
	-moz-box-shadow: inset 0 0 1px 1px #fff;
	box-shadow: none;
	-webkit-transition: background .3s ease;
	-moz-transition: background .3s ease;
	-o-transition: background .3s ease;
	transition: background .3s ease;
	line-height: 39px;
    height:39px;
    padding:0 8px;
}
.gnav-border-home .active {
	background: #bfbfbf;	
}
.gnav-border-form .active {
	background: #FE859F;	
}
.gnav-border-webeditor .active {
	background: #45D2FF;	
}
.gnav-border-mail .active {
	background: #ec6941;
}
.gnav-border-line .active {
	background: #1dcd00;
}
.gnav-border-seller .active {
	background: #448aca;
}
.gnav-border-mla .active {
	background: #398826;
}
.gnav-border-seminar .active {
	background: #ffa800;	
}
.gnav-border-affiliate .active {
	background: #8fc31f;	
}
.gnav-border-opt .active {
	background: #8957a1;
}
.gnav-border-chat .active {
	background: #ffa800;
}
.gnav-border-keiyaku .active {
	background: #7d7d7d;
}
.gnav-border-home .active a,
.gnav-border-form .active a,
.gnav-border-webeditor .active a,
.gnav-border-mail .active a,
.gnav-border-line .active a,
.gnav-border-seller .active a,
.gnav-border-mla .active a,
.gnav-border-seminar .active a,
.gnav-border-affiliate .active a,
.gnav-border-opt .active a,
.gnav-border-chat .active a,
.gnav-border-keiyaku .active a{
	color:#fff !important;
}
.gnav-li-home a,
.gnav-li-form a,
.gnav-li-webeditor a,
.gnav-li-mail a,
.gnav-li-line a,
.gnav-li-seller a,
.gnav-li-mla a,
.gnav-li-seminar a,
.gnav-li-affiliate a,
.gnav-li-opt a,
.gnav-li-chat a,
.gnav-li-keiyaku a {
	color:#555;
}

.gnav-border-home {
	border-bottom: 4px solid #bfbfbf;	
}
.gnav-border-form {
	border-bottom: 4px solid #FE859F;	
}
.gnav-border-webeditor {
	border-bottom: 4px solid #45D2FF;	
}
.gnav-border-mail {
	border-bottom: 4px solid #ec6941;	
}
.gnav-border-line {
	border-bottom: 4px solid #1dcd00;	
}
.gnav-border-seller {
	border-bottom: 4px solid #448aca;
}
.gnav-border-mla {
	border-bottom: 4px solid #398826;
}
.gnav-border-seminar {
	border-bottom: 4px solid #ffa800;
}
.gnav-border-affiliate {
	border-bottom: 4px solid #8fc31f;	
}
.gnav-border-opt {
	border-bottom: 4px solid #8957a1;
}
.gnav-border-chat {
	border-bottom: 4px solid #ffa800;
}
.gnav-border-keiyaku {
	border-bottom: 4px solid #7d7d7d;
}

.gnav-li-home a:hover {
	background: #bfbfbf;
	color:#fff !important;
}

.gnav-li-form a:hover {
	background: #FE859F;
	color:#fff !important;
}

.gnav-li-webeditor a:hover {
	background: #45D2FF;
	color:#fff !important;
}

.gnav-li-mail a:hover {
	background: #ec6941;
	color:#fff !important;
}
.gnav-li-line a:hover {
	background: #1dcd00;
	color:#fff !important;
}
.gnav-li-seller a:hover {
	background: #448aca;
	color:#fff !important;
}
.gnav-li-mla a:hover {
	background: #398826;
	color:#fff !important;
}
.gnav-li-seminar a:hover {
	background: #ffa800;
	color:#fff !important;
}
.gnav-li-affiliate a:hover {
	background: #8fc31f;
	color:#fff !important;
}
.gnav-li-opt a:hover{
	background: #8957a1;
	color:#fff !important;
}
.gnav-li-chat a:hover{
	background: #ffd800;
	color:#fff !important;
}
.gnav-li-keiyaku a:hover{
	background: #7d7d7d;
	color:#fff !important;
}
.nav-btn.condensed > li {
	font-size: 12px;
}
.nav-btn.condensed > li > a {
	padding: 5px 10px;
}
	


/* line-stepbar
   ==========================================================================  */
.line-stepbar {
  position: relative;
  list-style: none;
  margin: 0 0 1em;
  padding: 0;
  text-align: left;
  width: 100%;
  overflow: hidden;
  *zoom: 1;
  border:1px solid #1dcd00;
  border-radius:6px;
}
.line-stepbar .step {
  position: relative;
  float: left;
  display: inline-block;
  line-height: 36px;
  padding: 0 16px 0 10px;
  background-color: #FFF;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  color: #1dcd00;
}
.line-stepbar .step:before, .line-stepbar .step:after {
    position: absolute;
    left: -5px;
    display: block;
    content: '';
    background-color: #FFF;
    border-left: 1px solid #1dcd00;
    width: 10px;
    height: 18px;
}
.line-stepbar .step:after {
  top: 0;
  -moz-transform: skew(30deg);
  -ms-transform: skew(30deg);
  -webkit-transform: skew(30deg);
  transform: skew(30deg);
}
.line-stepbar .step:before {
    bottom: 0;
    -moz-transform: skew(-30deg);
    -ms-transform: skew(-30deg);
    -webkit-transform: skew(-30deg);
    transform: skew(-30deg);
}
.line-stepbar .step:first-child {
  -moz-border-radius-topleft: 4px;
  -webkit-border-top-left-radius: 4px;
  border-top-left-radius: 4px;
  -moz-border-radius-bottomleft: 4px;
  -webkit-border-bottom-left-radius: 4px;
  border-bottom-left-radius: 4px;
}
.line-stepbar .step:first-child:before, .line-stepbar .step:first-child:after {
  content: none;
}
.line-stepbar .step:last-child {
  -moz-border-radius-topright: 4px;
  -webkit-border-top-right-radius: 4px;
  border-top-right-radius: 4px;
  -moz-border-radius-bottomright: 4px;
  -webkit-border-bottom-right-radius: 4px;
  border-bottom-right-radius: 4px;
}
.line-stepbar .step.current {
  color: #FFF;
  background-color: #1dcd00;
}
.line-stepbar .step.current:before, .line-stepbar .step.current:after {
  background-color: #1dcd00;
}
.line-stepbar.step2 .step {
  width: 50%;
}
.line-stepbar.step3 .step {
  width: 33.333%;
}
.line-stepbar.step4 .step {
  width: 25%;
}
.line-stepbar.step5 .step {
  width: 20%;
}
/* ==========================================================================
   04 CONTENTS  
   ========================================================================== */


/*===================line@======================*/

/*＝＝＝＝＝＝＝＝＝＝＝＝＝＝*/
/*トークコンテンツ(右カラム)*/
/*＝＝＝＝＝＝＝＝＝＝＝＝＝＝*/
.line-col-right{
    padding:0;
    border-left:1px solid #CCC;
}
@media (max-width: 767px){
    .line-col-right{
        border-left:none;
    }
}
/*トークタイトル*/
.line-talk-title{
    padding:10px 10px 10px 20px; 
    font-weight:bold; 
    border-bottom:1px solid #CCC;
}

/*トークエリア*/
.line-talk-area-wrapper{
	display: flex;
	flex-direction:column;
    height: 60vh;
    min-height: 300px;
}

.line-talk-area{
    width: 100%;
    margin: 0;
    overflow-y: scroll;
}

.line-content-goback{
    margin:0 0 20px 0;
    border-bottom:1px dashed #CCC;
    background:#F6F6F6;
}
.line-content-goback:hover,
.line-content-goback:focus,
.line-content-goback:active,
.line-content-goback.active{
    background:#FFF;
    cursor: pointer;
    border-bottom:1px dashed #CCC;
}

.line-content-datebar {
    padding: 20px 20px 0 20px;
    margin: 0 0 20px 0;
}

.line-content-right {
    padding:0 0 0 20px; 
    margin:0 0 20px 0;
    text-align:right;
}
.line-content-left{
    padding:0 0 0 20px; 
    margin:0 0 20px 0;
}
.line-content-inner{
    display:inline-block; 
    max-width:85%;
}
.line-content-timestamp{
    font-size:10px; 
    color:#959595; 
    display: inline-block; 
    vertical-align: bottom; 
}

.line-content-img-flex{
	height: auto;
    width: 100%;
	max-width: 200px;
}

/*入力欄*/
.line-input-area{
    border-top: 1px solid #CCC;
    padding: 10px;
    background: #FFF;
    width: 100%;
    height: 116px;
}


@media (max-width: 767px){
    .line-input-area{
        border-bottom:1px solid #CCC;
    }
}
.line-input-area textarea{
    margin:0 0 10px 0; 
    border:none; 
    resize: none; 
    box-shadow: none!important;
}

.line-input-area a i{
    font-size:24px;
    vertical-align: middle;
    color:#959595;
}

.line-input-area a:hover i{
    color:#33b3ed;
}
.line-input-area .uploadifive-button input{
	cursor: pointer!important;}
.line-input-area .uploadifive-button:hover i{
	color:#33b3ed!important;
}

.line-short-link {
    background: #f0f0f0;
    border: 1px solid #cecece;
    border-radius: 6px;
    padding: 10px;
    word-break: break-all;
    display: inline-block;
    min-width: 50%;
}
.line-short-link-active {
    background: #cce198;
    border: 1px solid #1dcd00;
    border-radius: 6px;
    padding: 10px;
    word-break: break-all;
    display: inline-block;
    min-width: 50%;
}




/*＝＝＝＝＝＝＝＝＝＝＝＝＝*/
/*コンタクト管理（左カラム）*/
/*＝＝＝＝＝＝＝＝＝＝＝＝＝*/

.line-col-left{
    padding:0;
}

/*コンタクト検索*/
.line-contact-search{
    padding:10px; 
    border-bottom:1px solid #CCC;
}
.line-contact-search i{
    color:#959595;
}

/*コンタクトリスト*/
.line-contact-list{
    min-height:300px; 
    height:60vh;
	overflow-y: scroll;
}
.line-contact-list i{
    color:#959595;
}
@media (max-width: 767px){
    .line-contact-list{
        max-height:335px;
    }
}
.line-contact-list ul,.line-contact-list li {}
.line-contact-list ul{
    margin:0;
    padding:0;
    line-height:0;
    font-size:0;
    list-style: none;
}
.line-contact-list li{
    font-size: 10px;
    line-height:normal;
    border-bottom:1px solid #EEE;
}

.line-contact-list li:hover,
.line-contact-list li:focus,
.line-contact-list li:active,
.line-contact-list li.active{
    background:#e8ebf2;
    cursor: pointer;
}

.line-contact-icon{
    margin:10px 7px 10px 10px;
    display:inline-block;
    width:46px;
    height:46px;
}

.line-contact-icon img{
    width:46px;
    height:46px;
}
.line-contact-info-wrapper{
    display: inline-block;
    vertical-align: middle;
    max-width: 51%;
    padding: 10px 0;
}
.line-contact-info-title{
    font-size: 12px;
    font-weight: bold;
    width: 100px;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}
.line-contact-info-comment{
    color:#959595;
}
.line-contact-info-recent{
    color:#959595;
	position: absolute;
    top:10px;
    right:10px;
}
.line-contact-info-badge{
	position: absolute;
    top: 26px;
    right: 0;
    display: inline-block;
    width: 34px;
    padding: 3px 0px;
    font-size: 11px;
    font-weight: bold;
    line-height: 1;
    color: #fff;
    text-align: center;
    white-space: nowrap;
    vertical-align: baseline;
    background-color: #0bc060;
    border-radius: 10px;
}

.line-contact-more{
    background:#F6F6F6;
    line-height:66px;
    padding:0 0 0 20px;
}
.line-contact-more:hover,
.line-contact-more:focus,
.line-contact-more:active,
.line-contact-more.active{
    background:#fff;
    cursor: pointer;
}

/*     04-01 BOX-STYLE
   ========================================================================== */
input + label .select:active .select-area{
  box-shadow: 0px 0px 0px 0px rgba(193,214,20,1)inset, -3px 0px 0px 0px rgba(193,214,20,1)inset, 3px 0px 0px 0px rgba(193,214,20,1)inset, 0px -3px 0px 0px rgba(193,214,20,1)inset;
}
input + label .select:active > .select-area:first-child{
  box-shadow: 0px 3px 0px 0px rgba(193,214,20,1)inset, -3px 0px 0px 0px rgba(193,214,20,1)inset, 3px 0px 0px 0px rgba(193,214,20,1)inset, 0px -3px 0px 0px rgba(193,214,20,1)inset;
}
.select-area{}
input + label .select-area {
    background: #ababab!important;
    color: #FFF!important;
    border-radius: 0 0 10px 10px;
}
input + label .select-area:active {
    background: #ddd!important;
    color: #FFF!important;
    border-radius: 0 0 10px 10px;
}


input:checked + label .select-area {
    background:#c3d613!important;
    color: #FFF!important;
    border-radius: 0 0 10px 10px;
    /*border-top: none!important;*/
}



/*     04-02 TITLE
   ========================================================================== */
.bdr-btm-1s-g{ border-bottom: 1px solid #dddddd;}

.heading_lg,
.heading_md,
.heading_sm {
	position:relative;
}


.heading_lg h1{
    margin:0;
	font-weight: bold;
	font-size: 25px;
    line-height: 70px;
}
.heading_md h1{
    margin:0;
	font-weight: bold;
	font-size: 24px;
    line-height: 24px;
}
.heading_md h2{
    margin:0;
	font-weight: bold;
	font-size: 20px;
    line-height: 30px;
    padding: 10px 0;
}
@media screen and (max-width: 767px) {
  .heading_md h2{
  font-size: 16px!important;
  }
}
.heading_md h3{
    margin: 0;
	font-weight:normal;
	font-size: 24px;
	line-height: 52px;
}
.heading_sm h3 {
    font-size: 14px;
    padding: 5px 7px;
    margin: 0 0 10px 0;
    border-left: 5px solid #CCC;
    border-bottom: 1px dotted #ccc;
}


.heading_lg-link {
	position:absolute;
	top:10px;
	bottom:0;
	right:10px;
}
.heading_md-link {
	position:absolute;
	top:0;
	bottom:0;
	right:5px;
}
.heading_sm-link {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 5px;
}

/*     04-03 TEXT STYLE
   ========================================================================== */
.text-danger {
    color: #f00 !important;
}
.text-indent {
	padding-left: 1em;
	text-indent: -1em;
}
   
   
/*     04-04 TABLE
   ========================================================================== */

/* 汎用クラス */
.th-fw-b th { font-weight:bold; }
.th-fw-n th { font-weight:normal; }

.td-fw-b td { font-weight:bold; }
.td-fw-n td { font-weight:normal; }


/* -- table-var -- */
 .table.table-var th,
 .table.table-var td{
    border-bottom: 1px solid #fff;
  }
 .table.table-var tr:last-child th,
 .table.table-var tr:last-child td{
    border-bottom: none;
  }
 .table.table-var td{
    padding: 15px;
  }
table.table.table-var tbody tr th{
	width:25%;
	position:relative;
  }

table.table.table-var tbody tr th .label{
	position: absolute; 
	top: 50%; 
	right: 8px; 
	margin: -9px 0 0 0;
}


@media screen and (max-width: 767px) {
  .table.table-var th,
  .table.table-var td{
    display:block;
    width:100% !important;
  }
	.table.table-var th{
		border:none;
		font-weight: bold;
		padding:10px;
		
  }
	.table.table-var td{
		padding:0px 10px 10px 10px ;
        border-bottom: 1px solid #fff;
  }
  .table.table-var tr:last-child td:last-child{
    border-bottom:none;
  }
}

/* -- table-block -- */
.table.table-block{
    margin:0;
}

.table.table-block tr{
    border-top:1px solid #ddd ;
    border-right:1px solid #ddd ;
    border-bottom:none ;
    border-left:1px solid #ddd ;

}
.table.table-block tr:last-child{
    border-bottom:1px solid #ddd ;
}

  .table.table-block th,
  .table.table-block td{
    display:block;
    width:100% !important;
  }
	.table.table-block th{
		border:none;
		padding:4px 6px;
        border-bottom:1px solid #ddd ;
		
  }
	.table.table-block td{
        padding:0;
		border:none;
        background:#FFF;
  }


.modal-body .table > thead > tr > th,.modal-body .table > tbody > tr > th,
.modal-body .table > tfoot > tr > th,.modal-body .table > thead > tr > td,
.modal-body .table > tbody > tr > td,.modal-body .table > tfoot > tr > td {
    padding: 10px;
    line-height: normal;
    vertical-align: middle;
    border-top:none;
}
@media (max-width: 767px) {
.modal-body .table > thead > tr > th,.modal-body .table > tbody > tr > th,
.modal-body .table > tfoot > tr > th,.modal-body .table > thead > tr > td,
.modal-body .table > tbody > tr > td,.modal-body .table > tfoot > tr > td {
    padding: 5px;
    line-height: normal;
    vertical-align: middle;
    border-top:none;
}
}



/* -- table-rec -- */
 .table.table-rec th,
 .table.table-rec td{
    text-align: center;
    border-bottom: 1px solid #fff;
   font-size:16px;
  }
 .table.table-rec tr:last-child th,
 .table.table-rec tr:last-child td{
    border-bottom: none;
  }
 .table.table-rec td{
    padding: 15px;
    background: transparent;
    border: 1px solid #ddd;
  }
table.table.table-rec tbody tr th{
	width:25%;
	position:relative;
  }

table.table.table-rec tbody tr th .label{
	position: absolute; 
	top: 50%; 
	right: 8px; 
	margin: -9px 0 0 0;
}
 .table.table-rec td a{
    text-decoration: underline;
  }



/*     04-05 FORM
   ========================================================================== */
  form .form-control-inline-block{
	  display: inline-block;
	  width: auto;
	  }
  @media screen and (max-width: 767px) { 
  form .form-control-inline-block{
	  display: inline-block;
	  width: 85%;
	  margin-bottom: 10px;
	  }
}
   


/*     04-06 BUTTON
   ========================================================================== */
.cursor-pointer {
  cursor: pointer;
}
.cursor-pointer:hover,
.cursor-pointer:hover:active,
.cursor-pointer.active {
  cursor: pointer;
  box-shadow: inset 0 99999px 0 rgba(255, 255, 255, .50);
}
.btn-xl{
  line-height:50px;
  font-size:24px;
}


.btn:hover {
  box-shadow: inset 0 -4px 0 rgba(0, 0, 0, .25), inset 0 99999px 0 rgba(255, 255, 255, .50);
}
.btn:focus {
  box-shadow: inset 0 -4px 0 rgba(0, 0, 0, .25)
}
.btn:hover:active {
  box-shadow: inset 0 0 0 rgba(0, 0, 0, .25), inset 0 99999px 0 rgba(255, 255, 255, .50);
}
.btn-xs:active,
.btn-group-xs:active > .btn {
  padding: 1px 5px 2px;
  margin: 1px 0 0 0;
  font-size: 12px;
  line-height: 1.5;
  border-radius: 3px;
}
.btn-sm:active,
.btn-group-sm:active > .btn {
  padding: 4px 10px 5px;
  margin: 3px 0 0 0;
  font-size: 12px;
  line-height: 1.5;
  border-radius: 3px;
}
.btn-lg:active,
.btn-group-lg:active > .btn {
  padding: 11px 16px 12px;
  margin: 4px 0 0 0;
  font-size: 18px;
  line-height: 1;
  border-radius: 6px;
}
.btn-xs:hover,
.btn-group-xs:hover > .btn {
  box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .25), inset 0 99999px 0 rgba(255, 255, 255, .50);
}
.btn-xs:focus,
.btn-group-xs:focus > .btn {
  box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .25);
}
.btn-sm:hover,
.btn-group-sm:hover > .btn {
  box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .25), inset 0 99999px 0 rgba(255, 255, 255, .50);
}
.btn-sm:focus,
.btn-group-sm:focus > .btn {
  box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .25);
}
.btn-lg:hover,
.btn-group-lg:hover > .btn {
  box-shadow: inset 0 -4px 0 rgba(0, 0, 0, .25), inset 0 99999px 0 rgba(255, 255, 255, .50);
}
.btn-lg:focus,
.btn-group-lg:focus > .btn {
  box-shadow: inset 0 -4px 0 rgba(0, 0, 0, .25);
}
.btn-cancel {
  color: #fff;
  background-color: #a9a9a9;
}
.btn-cancel:hover {
  color: #fff;
  background-color: #a9a9a9;
}
.btn-cancel:focus,
.btn-cancel.focus {
  color: #fff;
  background-color: #a9a9a9;
}
.btn-cancel:active,
.btn-cancel.active,
.open > .dropdown-toggle.btn-cancel {
  color: #fff;
  background-color: #a9a9a9;
}
.btn-return {
  white-space: normal;
}
@media screen and (max-width: 991px) {
  #btn-menu-collapse {
    display: inline-block;
  }
}

/* entrance-btn */

a.entrance-btn-biz:hover,
a.entrance-btn-biz:focus,
a.entrance-btn-customer:hover,
a.entrance-btn-customer:focus {
  text-decoration: none;
}
.entrance-btn-biz:hover tr,
.entrance-btn-biz:hover td,
.entrance-btn-customer:hover th,
.entrance-btn-customer:hover td {
  opacity: 0.7;
}
.entrance-btn-biz:active table,
.entrance-btn-customer:active table {
  margin: 5px 0 -5px 0;
}
.entrance-btn-biz:active th,
.entrance-btn-biz:active td,
.entrance-btn-customer:active th,
.entrance-btn-customer:active td {
  box-shadow: none;
}
.entrance-btn-biz th {
  border-radius: 6px 0 0 6px;
  color: #fff;
  background: #067500;
  box-shadow: 0px 5px 0px #056800;
}
.entrance-btn-biz td {
  border-radius: 0 6px 6px 0;
  color: #fff;
  width: 100%;
  background: #079a00;
  box-shadow: 0px 5px 0px #068300;
}
.entrance-btn-customer th {
  border-radius: 6px 0 0 6px;
  color: #fff;
  background: #ff9000;
  box-shadow: 0px 5px 0px #ff7000;
}
.entrance-btn-customer td {
  border-radius: 0 6px 6px 0;
  color: #fff;
  width: 100%;
  background: #ffb400;
  box-shadow: 0px 5px 0px #ff9600;
}

/* btn active style */

.btn.active:hover {
  box-shadow: inset 0 4px 0 rgba(0, 0, 0, .0625), inset 0 99999px 0 rgba(255, 255, 255, .50);
}
.active.btn-xs:hover,
.btn-group-xs:hover > .btn.active {
  box-shadow: inset 0 1px 0 rgba(0, 0, 0, .0625), inset 0 99999px 0 rgba(255, 255, 255, .50);
}
.active.btn-xs:focus,
.btn-group-xs:focus > .btn.active {
  box-shadow: inset 0 1px 0 rgba(0, 0, 0, .0625);
}
.active.btn-sm:hover,
.btn-group-sm:hover > .btn.active {
  box-shadow: inset 0 3px 0 rgba(0, 0, 0, .0625), inset 0 99999px 0 rgba(255, 255, 255, .50);
}
.active.btn-sm:focus,
.btn-group-sm:focus > .btn.active {
  box-shadow: inset 0 3px 0 rgba(0, 0, 0, .0625);
}
.active.btn-lg:hover,
.btn-group-lg:hover > .btn.active {
  box-shadow: inset 0 4px 0 rgba(0, 0, 0, .0625), inset 0 99999px 0 rgba(255, 255, 255, .50);
}
.active.btn-lg:focus,
.btn-group-lg:focus > .btn.active {
  box-shadow: inset 0 4px 0 rgba(0, 0, 0, .0625);
}
.btn.disabled {
  background: #dedede !important;
  color: #FFF;
}
.btn.disabled:hover,
.btn.disabled:focus {
  box-shadow: none;
}




/*     04-07 LIST
   ========================================================================== */
.popup-bank-list{
	list-style: none;
	margin:0;
	padding:0;
	line-height:0;
}
.popup-bank-list li{
	margin:20px;
	font-size:13px;
	line-height:13px;
	position: relative;
	padding:0 0 0 17px;
}
.popup-bank-list li i{
	margin:0 5px 0 0;
	font-size:13px;
	line-height:20px;
	vertical-align: middle;
	color:#F6B37F;
	position:absolute;
	top:0;
	left:0;
}
.popup-bank-list li .popup-bank-list-title{
	font-size:17px;
	line-height:20px;
	text-decoration: underline;
	font-weight: bold;
	padding:0 0 5px 0;
}
.popup-bank-list li .popup-bank-list-title:hover{
	color:#C00;
}
.popup-bank-list li .popup-bank-list-title span{
	font-size: 13px;
	line-height:13px;
	font-weight: normal;
}


/* ---custom list-style--- */
ul.dottedlist{
    list-style: none;
    padding: 0;
}

.dottedlist li{
    box-sizing: border-box;
    background: url(../img/xmobile/bg_line.png) repeat-x center 50%;
    line-height: 1em;
    margin: 5px 0;
    height: 1em;
}

/*     04-08 PANEL
   ========================================================================== */
.panel-userid-info{
	display: inline-block;
    letter-spacing: normal;
    font-size: 11px;
	line-height: 11px;
    padding: 7px 8px;
	color:#FFF;
	}
@media (max-width: 767px) { 
	.xs-panel-userid-info{
	display: inline-block;
    letter-spacing: normal;
    font-size: 10px;
	line-height: 10px;
    padding: 6px 5px 4px;
	color:#FFF;
	}
}
   
/*     04-09 IMAGE
   ========================================================================== */
.img-flex{
    height:auto; 
    width:100%;
}

.circle{
    border-radius:50%;
}
   
/*     04-10 HR
   ========================================================================== */

/*     04-11 INPUT
   ========================================================================== */
.label.label-essential {
    background: #ff8400;
    color: #ffffff;
    margin: 0 5px;
    float: right;
}
.label.label-optional {
    background: #ccc;
    color: #FFF;
    margin: 0 5px;
    float: right;
}
.radio-inline, .checkbox-inline{
	padding-left: 22px;
}
input[type="radio"], input[type="checkbox"] {
    line-height: normal;
    width: 22px;
    height: 22px;
    top: 50%;
    margin: -11px 0 0 0;
	
}
.radio label, .checkbox label {
    min-height: 22px;
    padding-left: 22px;
    line-height: 22px;
    margin-bottom: 0;
    font-weight: normal;
    cursor: pointer;
}
.radio input[type="radio"], .radio-inline input[type="radio"], .checkbox input[type="checkbox"], .checkbox-inline input[type="checkbox"] {
    position: absolute;
    margin-top: 4px \9;
    margin-left: -22px;
}

@media (max-width: 767px) { 
input[type="radio"], input[type="checkbox"] {
    margin: 0 5px 3px 0;
    margin-top: 1px \9;
    line-height: normal;
}
.radio input[type="radio"],
.radio-inline input[type="radio"],
.checkbox input[type="checkbox"],
.checkbox-inline input[type="checkbox"] {
    position: relative; 
    margin-top: 4px \9;
    margin-left: -20px;
	vertical-align: middle;
}
}


/*checkboxやradioの代替部品*/
.checkcircle{
    display: inline-block;
    width: 24px;
    height:24px;
    line-height: 24px;
    border-radius: 50%;
    background:#FFF;
    color:#bfbfbf;
    text-align: center;    
    border: 1px solid #ddd;
}

input:checked + label .checkcircle,
.active .checkcircle,
.checkcircle_active,
.checkcircle.active,
.checkcircle:active{
    display: inline-block;
    width: 24px;
    height:24px;
    line-height: 24px;
    border-radius: 50%;
    background:#ee7622;
    color:#FFFFFF;
    text-align: center;
    border: 1px solid #ee7622;
}


.checkbox-style{
    display: inline-block;
    width: 24px;
    height:24px;
    line-height: 24px;
    background:#FFF;
    color:#ebebeb;
    text-align: center;    
    border: 1px solid #ddd;
    cursor: pointer;
    margin:0 5px 0 0;
}

input:checked + label .checkbox-style,
.checkbox-style.active,
.checkbox-style:active{
    display: inline-block;
    width: 24px;
    height:24px;
    line-height: 24px;
    background:#ee7622;
    color:#FFFFFF;
    text-align: center;
    border: 1px solid #ee7622;
}

.radio-style-label,.checkbox-style-label{
    display: inline-block;
    border-radius: 4px;
    line-height: 24px;
    font-weight:normal;
    vertical-align: middle;
    padding-top:1px;
}



.checkbox-style-red{
    display: inline-block;
    width: 24px;
    height:24px;
    line-height: 24px;
    background:#FFF;
    color:#ebebeb;
    text-align: center;    
    border: 1px solid #ddd;
    cursor: pointer;
    margin:0 5px 0 0;
}

input:checked + label .checkbox-style-red,
.checkbox-style-red.active,
.checkbox-style-red:active{
    display: inline-block;
    width: 24px;
    height:24px;
    line-height: 24px;
    background:#FFF;
    color:#F00;
    text-align: center;
    border: 1px solid #626262;
}

.radio-style-label,.checkbox-style-red-label{
    display: inline-block;
    border-radius: 4px;
    line-height: 24px;
    font-weight:normal;
    vertical-align: middle;
    padding-top:1px;
}

/*     04-12 ALERT
   ========================================================================== */

#flashMessage {
  padding: 10px 15px;
  color: #e64c80;
  font-size: 1.5em;
  border: solid 1px #e64c80;
  border-radius: 4px;
  margin-bottom: 25px;
}




.alert i{
	position: absolute;
    top: 10px;
    left: 10px;
}


.alert-success {
	border: none;
	border-radius: 6px;
	font-weight: bold;
	padding: 10px 10px 10px 25px;
	background: #cce198;
	color: #3c763d;
	line-height:160%;
	position: relative;
}
.alert-info {
	border: none;
	border-radius: 6px;
	font-weight: bold;
	padding: 10px 10px 10px 25px;
	background: #a0e3f7;
	color: #286090;
	line-height:160%;
	position: relative;
}
.alert-warning {
	border: none;
	border-radius: 6px;
	font-weight: bold;
	padding: 10px 10px 10px 25px;
	background: #fff799;
	color: #ee7622;
	line-height:160%;
	position: relative;
}
.alert-danger {
	border: none;
	border-radius: 6px;
	font-weight: bold;
	padding: 10px 10px 10px 25px;
	background: #ffd3d6 ;
	color: #e92232;
	line-height:160%;
	position: relative;
}



   
/* ==========================================================================
   05 POPUP
   ========================================================================== */
.line-sticker-select{
    height:280px; overflow-y: auto;
}

.line-sticker-select ul{
    margin:0;
    padding:0;
    line-height:0;
    font-size:0;
    list-style: none;
}

.line-sticker-select li{
    display: inline-block;
}



.line-sticker-select li:hover,
.line-sticker-select li:focus,
.line-sticker-select li:active,
.line-sticker-select li.active{
    background:#e8ebf2;
    cursor: pointer;
}


.line-sticker-nav ul li:hover a,
.line-sticker-nav ul li:focus a,
.line-sticker-nav ul li:active a,
.line-sticker-nav ul li.active a{
    background:#e8ebf2!important;
    cursor: pointer;
    border:1px solid #ddd!important;
}
.line-sticker-nav ul li a{
    line-height:50px;
    width:50px;
    padding:0;
}

/* ==========================================================================
   06 COMMON 汎用クラス
   ========================================================================== */

/* 06-01 FLOAT
   ========================================================================== */
.right { float: right; }
.left { float: left; }
.center{ clear:both; margin:0 auto;}

@media (max-width: 767px) {
.xs-right { float: right; }
.xs-left { float: left; }
.xs-center{ float: none; clear:both; margin:0 auto;}
}

/* 06-02 PADDING
   ========================================================================== */
.pt0 { padding-top:0px!important; }
.pt2 { padding-top:2px!important; }
.pt5 { padding-top:5px!important; }
.pt6 { padding-top:6px!important; }
.pt10 { padding-top:10px!important; }
.pt14 { padding-top:14px!important; }
.pt15 { padding-top:15px!important; }
.pt20 { padding-top:20px!important; }
.pt30 { padding-top:30px!important; }
.pt40 { padding-top:40px!important; }
.pt50 { padding-top:50px!important; }
.pt80 { padding-top:80px!important; }
.pt90 { padding-top:90px!important; }
.pt195 { padding-top:195px!important; }

.pr0 { padding-right:0px!important; }
.pr3 { padding-right:3px!important; }
.pr5 { padding-right:5px!important; }
.pr10 { padding-right:10px!important; }
.pr15 { padding-right:15px!important; }
.pr20 { padding-right:20px!important; }
.pr30 { padding-right:30px!important; }
.pr40 { padding-right:40px!important; }

.pl0 { padding-left:0px!important; }
.pl3 { padding-left:3px!important; }
.pl5 { padding-left:5px!important; }
.pl8 { padding-left:8px!important; }
.pl10 { padding-left:10px!important; }
.pl15 { padding-left:15px!important; }
.pl20 { padding-left:20px!important; }
.pl30 { padding-left:30px!important; }
.pl35 { padding-left:35px!important; }
.pl40 { padding-left:40px!important; }

.pb0 { padding-bottom:0px!important; }
.pb4 { padding-bottom:4px!important; }
.pb5 { padding-bottom:5px!important; }
.pb6 { padding-bottom:6px!important; }
.pb10 { padding-bottom:10px!important; }
.pb14 { padding-bottom:14px!important; }
.pb15 { padding-bottom:15px!important; }
.pb20 { padding-bottom:20px!important; }
.pb30 { padding-bottom:30px!important; }
.pb40 { padding-bottom:40px!important; }
.pb50 { padding-bottom:50px!important; }

.mp0 { margin:0!important; padding:0!important; }

.pd0{padding:0!important;}
.pd3{padding:3px!important;}
.pd5{padding:5px!important;}
.pd6{padding:6px!important;}
.pd8{padding:8px!important;}
.pd10{padding:10px!important;}
.pd15{padding:15px!important;}
.pd20{padding:20px!important;}
.pd25{padding:25px!important;}
.pd30{padding:30px!important;}

@media (min-width: 768px) { 
.sm-pt0 { padding-top:0px!important; }
.sm-pt5 { padding-top:5px!important; }
.sm-pt6 { padding-top:6px!important; }
.sm-pt10 { padding-top:10px!important; }
.sm-pt14 { padding-top:14px!important; }
.sm-pt15 { padding-top:15px!important; }
.sm-pt20 { padding-top:20px!important; }
.sm-pt30 { padding-top:30px!important; }
.sm-pt40 { padding-top:40px!important; }
.sm-pt50 { padding-top:50px!important; }
.sm-pt80 { padding-top:80px!important; }
.sm-pt90 { padding-top:90px!important; }
.sm-pt195 { padding-top:195px!important; }

.sm-pr0 { padding-right:0px!important; }
.sm-pr3 { padding-right:3px!important; }
.sm-pr5 { padding-right:5px!important; }
.sm-pr10 { padding-right:10px!important; }
.sm-pr15 { padding-right:15px!important; }
.sm-pr20 { padding-right:20px!important; }
.sm-pr30 { padding-right:30px!important; }

.sm-pl0 { padding-left:0px!important; }
.sm-pl3 { padding-left:3px!important; }
.sm-pl5 { padding-left:5px!important; }
.sm-pl10 { padding-left:10px!important; }
.sm-pl15 { padding-left:15px!important; }
.sm-pl20 { padding-left:20px!important; }
.sm-pl30 { padding-left:30px!important; }
.sm-pl35 { padding-left:35px!important; }
.sm-pl40 { padding-left:40px!important; }

.sm-pb0 { padding-bottom:0px!important; }
.sm-pb4 { padding-bottom:4px!important; }
.sm-pb5 { padding-bottom:5px!important; }
.sm-pb6 { padding-bottom:6px!important; }
.sm-pb10 { padding-bottom:10px!important; }
.sm-pb14 { padding-bottom:14px!important; }
.sm-pb20 { padding-bottom:20px!important; }
.sm-pb30 { padding-bottom:30px!important; }
.sm-pb40 { padding-bottom:40px!important; }
.sm-pb50 { padding-bottom:50px!important; }

.sm-mp0 { margin:0!important; padding:0!important; }

.sm-pd0{padding:0!important;}
.sm-pd3{padding:3px!important;}
.sm-pd5{padding:5px!important;}
.sm-pd6{padding:6px!important;}
.sm-pd8{padding:8px!important;}
.sm-pd10{padding:10px!important;}
.sm-pd15{padding:15px!important;}
.sm-pd20{padding:20px!important;}
.sm-pd25{padding:25px!important;}
.sm-pd30{padding:30px!important;}
}

@media (max-width: 767px) { 
.xs-pt0 { padding-top:0px!important; }
.xs-pt5 { padding-top:5px!important; }
.xs-pt6 { padding-top:6px!important; }
.xs-pt10 { padding-top:10px!important; }
.xs-pt14 { padding-top:14px!important; }
.xs-pt15 { padding-top:15px!important; }
.xs-pt20 { padding-top:20px!important; }
.xs-pt30 { padding-top:30px!important; }
.xs-pt40 { padding-top:40px!important; }
.xs-pt50 { padding-top:50px!important; }
.xs-pt80 { padding-top:80px!important; }
.xs-pt90 { padding-top:90px!important; }
.xs-pt195 { padding-top:195px!important; }

.xs-pr0 { padding-right:0px!important; }
.xs-pr3 { padding-right:3px!important; }
.xs-pr5 { padding-right:5px!important; }
.xs-pr10 { padding-right:10px!important; }
.xs-pr15 { padding-right:15px!important; }
.xs-pr20 { padding-right:20px!important; }
.xs-pr30 { padding-right:30px!important; }

.xs-pl0 { padding-left:0px!important; }
.xs-pl3 { padding-left:3px!important; }
.xs-pl5 { padding-left:5px!important; }
.xs-pl10 { padding-left:10px!important; }
.xs-pl15 { padding-left:15px!important; }
.xs-pl20 { padding-left:20px!important; }
.xs-pl30 { padding-left:30px!important; }
.xs-pl35 { padding-left:35px!important; }
.xs-pl40 { padding-left:40px!important; }

.xs-pb0 { padding-bottom:0px!important; }
.xs-pb4 { padding-bottom:4px!important; }
.xs-pb5 { padding-bottom:5px!important; }
.xs-pb6 { padding-bottom:6px!important; }
.xs-pb10 { padding-bottom:10px!important; }
.xs-pb14 { padding-bottom:14px!important; }
.xs-pb20 { padding-bottom:20px!important; }
.xs-pb30 { padding-bottom:30px!important; }
.xs-pb40 { padding-bottom:40px!important; }
.xs-pb50 { padding-bottom:50px!important; }

.xs-mp0 { margin:0!important; padding:0!important; }

.xs-pd0{padding:0!important;}
.xs-pd3{padding:3px!important;}
.xs-pd5{padding:5px!important;}
.xs-pd6{padding:6px!important;}
.xs-pd8{padding:8px!important;}
.xs-pd10{padding:10px!important;}
.xs-pd15{padding:15px!important;}
.xs-pd20{padding:20px!important;}
.xs-pd25{padding:25px!important;}
.xs-pd30{padding:30px!important;}
}

/* 06-03 MARGIN
   ========================================================================== */
.ma0 { margin: 0px!important; }

.mt0 { margin-top: 0px!important; }
.mt5 { margin-top: 5px!important; }
.mt10 { margin-top: 10px!important; }
.mt20 { margin-top: 20px!important; }
.mt25 { margin-top: 25px!important; }
.mt30 { margin-top: 30px!important; }
.mt35 { margin-top: 35px!important; }
.mt40 { margin-top: 40px!important; }
.mt50 { margin-top: 50px!important; }
.mt60 { margin-top: 60px!important; }
.mt70 { margin-top: 70px!important; }
.mt80 { margin-top: 80px!important; }
.mt100 { margin-top: 100px!important; }
.mt_10 { margin-top: -10px!important; }
.mt_20 { margin-top: -20px!important; }
.mt_30 { margin-top: -30px!important; }
.mt_40 { margin-top: -40px!important; }
.mt_50 { margin-top: -50px!important; }

.mr0 { margin-right: 0px!important; }
.mr5 { margin-right:5px!important; }
.mr8 { margin-right:8px!important; }
.mr10 { margin-right:10px!important; }
.mr15 { margin-right:15px!important; }
.mr20 { margin-right:20px!important; }
.mr25 { margin-right:25px!important; }
.mr30 { margin-right:30px!important; }
.mr40 { margin-right:40px!important; }
.mr50 { margin-right:50px!important; }

.mr1em{ margin-right: 1em!important; }

.mb0 { margin-bottom:0!important; }
.mb5 { margin-bottom:5px!important; }
.mb7 { margin-bottom:7px!important; }
.mb10 { margin-bottom:10px!important; }
.mb15 { margin-bottom:15px!important; }
.mb20 { margin-bottom:20px!important; }
.mb30 { margin-bottom:30px!important; }
.mb40 { margin-bottom:40px!important; }
.mb50 { margin-bottom:50px!important; }
.mb100 { margin-bottom:100px!important; }

.mb1em{ margin-bottom: 1em!important; }

.ml0 { margin-left: 0px!important; }
.ml5 { margin-left:5px!important; }
.ml10 { margin-left:10px!important; }
.ml15 { margin-left:15px!important; }
.ml20 { margin-left:20px!important; }
.ml25 { margin-left:25px!important; }
.ml30 { margin-left:30px!important; }
.ml35 { margin-left:35px!important; }
.ml40 { margin-left:40px!important; }
.ml50 { margin-left:50px!important; }

.ml_10 { margin-left:-10px!important; }
.ml_15 { margin-left:-15px!important; }
.ml_20 { margin-left:-20px!important; }
.ml_30 { margin-left:-30px!important; }
.ml_35 { margin-left:-35px!important; }
.ml_40 { margin-left:-40px!important; }
.ml_50 { margin-left:-50px!important; }


@media (min-width: 768px) {
.sm-ma0 { margin: 0px!important; }

.sm-mt0 { margin-top: 0px!important; }
.sm-mt5 { margin-top: 5px!important; }
.sm-mt10 { margin-top: 10px!important; }
.sm-mt20 { margin-top: 20px!important; }
.sm-mt25 { margin-top: 25px!important; }
.sm-mt30 { margin-top: 30px!important; }
.sm-mt35 { margin-top: 35px!important; }
.sm-mt40 { margin-top: 40px!important; }
.sm-mt50 { margin-top: 50px!important; }
.sm-mt60 { margin-top: 60px!important; }
.sm-mt70 { margin-top: 70px!important; }
.sm-mt80 { margin-top: 80px!important; }
.sm-mt100 { margin-top: 100px!important; }
.sm-mt_10 { margin-top: -10px!important; }
.sm-mt_20 { margin-top: -20px!important; }
.sm-mt_30 { margin-top: -30px!important; }
.sm-mt_40 { margin-top: -40px!important; }
.sm-mt_50 { margin-top: -50px!important; }

.sm-mr0 { margin-right: 0px!important; }
.sm-mr5 { margin-right:5px!important; }
.sm-mr8 { margin-right:8px!important; }
.sm-mr10 { margin-right:10px!important; }
.sm-mr15 { margin-right:15px!important; }
.sm-mr20 { margin-right:20px!important; }
.sm-mr25 { margin-right:25px!important; }
.sm-mr30 { margin-right:30px!important; }
.sm-mr40 { margin-right:40px!important; }
.sm-mr50 { margin-right:50px!important; }

.sm-mb0 { margin-bottom:0!important; }
.sm-mb5 { margin-bottom:5px!important; }
.sm-mb7 { margin-bottom:7px!important; }
.sm-mb10 { margin-bottom:10px!important; }
.sm-mb15 { margin-bottom:15px!important; }
.sm-mb20 { margin-bottom:20px!important; }
.sm-mb30 { margin-bottom:30px!important; }
.sm-mb40 { margin-bottom:40px!important; }
.sm-mb50 { margin-bottom:50px!important; }
.sm-mb100 { margin-bottom:100px!important; }

.sm-ml0 { margin-left: 0px!important; }
.sm-ml5 { margin-left:5px!important; }
.sm-ml10 { margin-left:10px!important; }
.sm-ml15 { margin-left:15px!important; }
.sm-ml20 { margin-left:20px!important; }
.sm-ml25 { margin-left:25px!important; }
.sm-ml30 { margin-left:30px!important; }
.sm-ml35 { margin-left:35px!important; }
.sm-ml40 { margin-left:40px!important; }
.sm-ml50 { margin-left:50px!important; }

.sm-ml_10 { margin-left:-10px!important; }
.sm-ml_15 { margin-left:-15px!important; }
.sm-ml_20 { margin-left:-20px!important; }
.sm-ml_30 { margin-left:-30px!important; }
.sm-ml_35 { margin-left:-35px!important; }
.sm-ml_40 { margin-left:-40px!important; }
.sm-ml_50 { margin-left:-50px!important; }
	
}

@media (max-width: 767px) {
.xs-ma0 { margin: 0px!important; }

.xs-mt0 { margin-top: 0px!important; }
.xs-mt5 { margin-top: 5px!important; }
.xs-mt10 { margin-top: 10px!important; }
.xs-mt20 { margin-top: 20px!important; }
.xs-mt25 { margin-top: 25px!important; }
.xs-mt30 { margin-top: 30px!important; }
.xs-mt35 { margin-top: 35px!important; }
.xs-mt40 { margin-top: 40px!important; }
.xs-mt50 { margin-top: 50px!important; }
.xs-mt60 { margin-top: 60px!important; }
.xs-mt70 { margin-top: 70px!important; }
.xs-mt80 { margin-top: 80px!important; }
.xs-mt100 { margin-top: 100px!important; }
.xs-mt_10 { margin-top: -10px!important; }
.xs-mt_20 { margin-top: -20px!important; }
.xs-mt_30 { margin-top: -30px!important; }
.xs-mt_40 { margin-top: -40px!important; }
.xs-mt_50 { margin-top: -50px!important; }

.xs-mr0 { margin-right: 0px!important; }
.xs-mr5 { margin-right:5px!important; }
.xs-mr8 { margin-right:8px!important; }
.xs-mr10 { margin-right:10px!important; }
.xs-mr15 { margin-right:15px!important; }
.xs-mr20 { margin-right:20px!important; }
.xs-mr25 { margin-right:25px!important; }
.xs-mr30 { margin-right:30px!important; }
.xs-mr40 { margin-right:40px!important; }
.xs-mr50 { margin-right:50px!important; }

.xs-mb0 { margin-bottom:0!important; }
.xs-mb5 { margin-bottom:5px!important; }
.xs-mb7 { margin-bottom:7px!important; }
.xs-mb10 { margin-bottom:10px!important; }
.xs-mb15 { margin-bottom:15px!important; }
.xs-mb20 { margin-bottom:20px!important; }
.xs-mb30 { margin-bottom:30px!important; }
.xs-mb40 { margin-bottom:40px!important; }
.xs-mb50 { margin-bottom:50px!important; }
.xs-mb100 { margin-bottom:100px!important; }

.xs-ml0 { margin-left: 0px!important; }
.xs-ml5 { margin-left:5px!important; }
.xs-ml10 { margin-left:10px!important; }
.xs-ml15 { margin-left:15px!important; }
.xs-ml20 { margin-left:20px!important; }
.xs-ml25 { margin-left:25px!important; }
.xs-ml30 { margin-left:30px!important; }
.xs-ml35 { margin-left:35px!important; }
.xs-ml40 { margin-left:40px!important; }
.xs-ml50 { margin-left:50px!important; }

.xs-ml_10 { margin-left:-10px!important; }
.xs-ml_15 { margin-left:-15px!important; }
.xs-ml_20 { margin-left:-20px!important; }
.xs-ml_30 { margin-left:-30px!important; }
.xs-ml_35 { margin-left:-35px!important; }
.xs-ml_40 { margin-left:-40px!important; }
.xs-ml_50 { margin-left:-50px!important; }
	
}



/* width */
.w-auto  { width: auto !important; }
.w24  { width: 24px !important; }
.w25  { width: 25px !important; }
.w30  { width: 30px !important; }
.w45  { width: 45px !important; }
.w50  { width: 50px !important; }
.w60  { width: 60px !important; }
.w100 { width: 100px !important; }
.w108 { width: 108px !important; }
.w120 { width: 120px !important; }
.w150 { width: 150px !important; }
.w200 { width: 200px !important; }
.w350 { width: 350px !important; }
.w400 { width: 400px !important; }
.w500 { width: 500px !important; }
.w600 { width: 600px !important; }

.w25per{ width:25% !important;}
.w30per{ width:30% !important;}
.w33per{ width:33% !important;}
.w50per{ width:50% !important;}
.w66per{ width:66% !important;}
.w75per{ width:75% !important;}
.w100per{ width:100% !important;}

@media (max-width: 767px) {
	.xs-w100per{ width:100% !important;}
}

/*height*/
.h24 { height: 24px !important; }
.h30 { height: 30px !important; }
.h34 { height: 34px !important; }
.h36 { height: 36px !important; }
.h40 { height: 40px !important; }
.h45 { height: 45px !important; }
.h52 { height: 52px !important; }
.h58 { height: 58px !important; }
.h76 { height: 76px !important; }
.h100 { height: 100px !important; }
.h120 { height: 120px !important; }
.h135 { height: 135px !important; }
.h150 { height: 150px !important; }
.h200 { height: 200px !important; }
.h235 { height: 235px !important; }
.h250 { height: 250px !important; }
.h350 { height: 350px !important; }

@media (max-width: 767px) {
.xs-h24 { height: 24px !important; }
.xs-h30 { height: 30px !important; }
.xs-h34 { height: 34px !important; }
.xs-h40 { height: 40px !important; }
.xs-h45 { height: 45px !important; }
.xs-h52 { height: 52px !important; }
.xs-h58 { height: 58px !important; }
.xs-h76 { height: 76px !important; }
.xs-h90 { height: 76px !important; }
.xs-h100 { height: 100px !important; }
.xs-h135 { height: 135px !important; }
.xs-h150 { height: 150px !important; }
.xs-h200 { height: 200px !important; }
.xs-h250 { height: 250px !important; }
}

/* etc */
.img-size-27 { width: 27px!important; height: 27px!important; }




/* 06-04 TEXT
   ========================================================================== */

/* font-size */
.f8 { font-size: 8px !important; }
.f9 { font-size: 9px !important; }
.f10 { font-size: 10px !important; }
.f11 { font-size: 11px !important; }
.f12 { font-size: 12px !important; }
.f13 { font-size: 13px !important; }
.f14 { font-size: 14px !important; }
.f15 { font-size: 15px !important; }
.f16 { font-size: 16px !important; }
.f17 { font-size: 17px !important; }
.f18 { font-size: 18px !important; }
.f19 { font-size: 19px !important; }
.f20 { font-size: 20px !important; }
.f22 { font-size: 22px !important; }
.f24 { font-size: 24px !important; }
.f25 { font-size: 25px !important; }
.f26 { font-size: 26px !important; }
.f28 { font-size: 28px !important; }
.f30 { font-size: 30px !important; }
.f32 { font-size: 32px !important; }
.f34 { font-size: 34px !important; }
.f36 { font-size: 36px !important; }
.f40 { font-size: 40px !important; }
.f50 { font-size: 50px !important; }
@media (max-width: 767px) { 
/* font-size */
.xs-f8 { font-size: 8px !important; }
.xs-f9 { font-size: 9px !important; }
.xs-f10 { font-size: 10px !important; }
.xs-f11 { font-size: 11px !important; }
.xs-f12 { font-size: 12px !important; }
.xs-f13 { font-size: 13px !important; }
.xs-f14 { font-size: 14px !important; }
.xs-f15 { font-size: 15px !important; }
.xs-f16 { font-size: 16px !important; }
.xs-f17 { font-size: 17px !important; }
.xs-f18 { font-size: 18px !important; }
.xs-f19 { font-size: 19px !important; }
.xs-f20 { font-size: 20px !important; }
.xs-f22 { font-size: 22px !important; }
.xs-f24 { font-size: 24px !important; }
.xs-f40 { font-size: 40px !important; }
.xs-f50 { font-size: 50px !important; }
}
/* text-align */
.text-left {text-align:left!important;}
.text-center {text-align:center!important;}
.text-right {text-align:right!important;}

@media (max-width: 767px) { 
/* text-align */
.xs-text-left {text-align:left!important;}
.xs-text-center {text-align:center!important;}
.xs-text-right {text-align:right!important;}
}
@media (max-width: 991px) {
.sm-text-left {text-align:left!important;}
.sm-text-center {text-align:center!important;}
.sm-text-right {text-align:right!important;}
}
@media (min-width: 992px) { 
.md-text-left {text-align:left!important;}
.md-text-center {text-align:center!important;}
.md-text-right {text-align:right!important;}
}
@media (min-width: 1200px) { 
.lg-text-left {text-align:left!important;}
.lg-text-center {text-align:center!important;}
.lg-text-right {text-align:right!important;}
}
/* vertical-align */
.va-t { vertical-align:top !important; }
.va-m { vertical-align:middle !important; }
.va-b { vertical-align:bottom !important; }
.va-tt { vertical-align:text-top!important; }

/* font-weight */
.fw-b{font-weight:bold;}
.fw-n{font-weight: normal;}

/* line-height */
.lh-normal{line-height:1.42857143;}

.lh-1{line-height:1em;}
.lh-0{line-height:0;}


.lh8{line-height:8px !important; }
.lh9{line-height:9px !important; }
.lh10{line-height:10px !important; }
.lh11{line-height:11px !important; }
.lh12{line-height:12px !important; }
.lh13{line-height:13px !important; }
.lh14{line-height:14px !important; }
.lh15{line-height:15px !important; }
.lh16{line-height:16px !important; }
.lh17{line-height:17px !important; }
.lh18{line-height:18px !important; }
.lh19{line-height:19px !important; }
.lh20{line-height:20px !important; }
.lh22{line-height:22px !important; }
.lh24{line-height:24px !important; }
.lh30{line-height:30px !important;}
.lh34{line-height:34px !important;}
.lh40{line-height:40px !important;}
.lh45{line-height:45px !important;}
.lh50{line-height:50px !important;}
.lh52{line-height:52px !important;}
.lh70{line-height:70px !important;}
/* text-decoration */
.td-underline { text-decoration:underline; }
.td-none { text-decoration:none!important; }
.hov-opa7:hover{opacity: 0.7;}

/* link-codes */
.link-decoration-sky { color:#09F; font-weight:bold; text-decoration:underline; }
.link-decoration-sky:hover { color:#900; }
.link-img-hover a:hover img { opacity:0.7 }


/* white-space */
.ws-normal {
	white-space:normal;
}


.ellipsis{
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}

/* 06-05 COLOR
   ========================================================================== */
.c-white{color:#fff !important;}
.c-gray{color:#bfbfbf !important;}
.c-orange{color:#ee7622 !important;}
.c-red{color:#e92232 !important;}
.c-sky{color:#32bfbb !important;}
.c-purple{color:#baa1ca !important;}
.c-grass{color:#9ecb3d !important;}
.c-water{color:#33b3ed !important;}
.c-yellow{color:#ffc600 !important;}
.c-lemon{color:#ffff16 !important;}
.c-beige{color:#f4a76d !important;}
.c-d-green{color:#3c763d !important;}
.c-green{color:#4dbb80 !important;}
.c-mosgreen{color:#70ad47 !important;}
.c-d-gray{color: #959595 !important;}
.c-black{color:#000 !important;}
.c-l-gray{color:#f6f6f6 !important;}


.c-xmgreen{color:#8fc31f;}
.c-l-xmgreen{color:#c3d613;}

/* 06-06 BG-COLOR
   ========================================================================== */
.bgc-white{background:#fff !important;}
.bgc-l-orange{ background:#ff9600 !important; }
.bgc-applered{ background:#b22130 !important; }
.bgc-gray{background:#bfbfbf !important;}
.bgc-l-gray{background:#f6f6f6 !important;}
.bgc-l-yellow{background:#fff799 !important;}
.bgc-yellow{background:#ffc600 !important;}
.bgc-orange{background:#ee7622 !important;}
.bgc-red{background:#e92232 !important;}
.bgc-pink{background:#ffd3d6 !important;}
.bgc-sky{background:#32bfbb !important;}
.bgc-purple{background:#baa1ca !important;}
.bgc-grass{background:#9ecb3d !important;}
.bgc-water{background:#33b3ed !important;}
.bgc-lemon{background:#ffff16 !important;}
.bgc-beige{background:#f4a76d !important;}
.bgc-green{background:#4dbb80 !important;}
.bgc-d-green{background:#009966 !important;}
.bgc-v-green{background:#38ba00 !important;}
.bgc-l-green{background:#cce198 !important;}
.bgc-emelaldgreen{background:#1abc9c !important;}
.bgc-d-gray{background: #959595 !important;}
.bgc-black{background: #444444 !important;}

.bgc-p-green{background: #fafffb;}
.bgc-p-orange{background: #fefffa;}
.bgc-p-sky{background: #fafdff;}
.bgc-p-yellow{background: #fefff9;}
.bgc-p-gray{background: #f9f9f9;}
.bgc-p-red{background: #f3dcd6;}


.bgc-linegreen{background:#1dcd00;}

.bgc-xmgreen{background:#8fc31f !important;}
.bgc-l-xmgreen{background:#c3d613 !important;}


.opacity-10{opacity: 1;}
.opacity-07{opacity: 0.7;}
.opacity-05{opacity: 0.5;}
.opacity-02{opacity: 0.2;}
.opacity-00{opacity: 0;}


 .bgp-dott{
    background-image:url(/c2/img/xmobile/bg_line.png);
    background-repeat: repeat-x; 
    background-position: center;
    background-size: 10px;
}


/* 06-07 BORDER
   ========================================================================== */
.radius-0{ border-radius:0 !important;}
.radius-4{ border-radius:4px !important;}
.radius-6{ border-radius:6px !important;}
.radius-10{ border-radius:10px !important;}

.radius-left-4{ border-radius:4px 0 0 4px !important;}
.radius-left-6{ border-radius:6px 0 0 6px !important;}

.radius-right-4{ border-radius:0 4px 4px 0 !important;}
.radius-right-6{ border-radius:0 6px 6px 0 !important;}

.radius-top-4{ border-radius: 4px 4px 0 0 !important;}
.radius-top-6{ border-radius: 6px 6px 0 0 !important;}
.radius-top-10{ border-radius: 10px 10px 0 0 !important;}

.bd-0{border:none !important;}
.bd-r-0{border-right:none !important;}
.bd-l-0{border-left:none !important;}
.bd-b-0{border-bottom:none !important;}


.bd-t-0{border-top-width:none !important;}
.bd-b-1{border-bottom-width:1px !important;}

.bd-s-1-gray{border:1px solid #ddd !important;}
.bt-s-1-gray{border-top:1px solid #ddd !important;}
.br-s-1-gray{border-right:1px solid #ddd !important;}
.bb-s-1-gray{border-bottom:1px solid #ddd !important;}
.bl-s-1-gray{border-left:1px solid #ddd !important;}

.bd-s-1-linegreen{border:1px solid #1dcd00 !important;}

.bd-s-1-brown{border:1px solid #a89b95 !important;}

.bd-s-1-l-gray{border:1px solid #EEE!important;}
.bt-s-1-l-gray{border-top:1px solid #EEE!important;}
.br-s-1-l-gray{border-right:1px solid #EEE!important;}
.bb-s-1-l-gray{border-bottom:1px solid #EEE!important;}
.bl-s-1-l-gray{border-left:1px solid #EEE!important;}




.bd-s-6-gray{border:6px solid #bfbfbf;}


.bt-s-3-g{
  border-top: 3px solid #70ad47;
}
.bt-s-3-o{
  border-top: 3px solid #ee7622;
}

.bt-s-15{
    border-top: 15px solid #eee;
}

.bd-s-1-o{
  border: 1px solid #f39800;
}

.bd-arrow-bottom{
  box-shadow: 0px 5px 0px 0px rgba(173,170,170,1)inset, -5px 0px 0px 0px rgba(173,170,170,1)inset, 5px 0px 0px 0px rgba(173,170,170,1)inset, 0px -5px 0px 0px rgba(173,170,170,1)inset;
  position: relative;
  border-width: 5px;
  margin-bottom: 30px;
  overflow: unset;
}
.bd-arrow-bottom:before{
    content: "";
    border-left: 20px solid transparent;
    border-top: 20px solid #eee;
    border-right: 20px solid transparent;
    position: absolute;
    top: 0px;
    right: 50%;
    margin-right: -20px;
}
.bd-arrow-bottom:after{
    content: "";
    border-left: 20px solid transparent;
    border-top: 20px solid #fff;
    border-right: 20px solid transparent;
    position: absolute;
    top: -7px;
    right: 50%;
    margin-right: -20px;
}



.hukidasi{
    position: relative;
    border-width: 5px;
    margin-bottom: 30px;
}
.hukidasi:before{
    content: "";
    border: 12px solid transparent;
    border-top: 12px solid #fff;
    position: absolute;
    right: 30%;
    bottom: -23px;
    z-index: 2;
}
.hukidasi:after{
    content: "";
    border: 12px solid transparent;
    border-top: 12px solid #aaa;
    position: absolute;
    right: 30%;
    bottom: -24px;
}





/* 06-08 DISPLAY-STYLE
   ========================================================================== */
.disp-block{display:block;}
.disp-i-block{display:inline-block;}
.disp-f{display:flex;}

.flex-n{flex:none}

/* flex-options */

.f-center {
  justify-content: center;
  align-items: center;
}
.f-direc_r {
  flex-direction: row;
}
.f-direc_rr {
  flex-direction: row-reverse;
}
.f-direc_c {
  flex-direction: column;
}
.f-direc_cr {
  flex-direction: column-reverse;
}
.flex-none {
  flex: 0 0 auto;
}
@media (max-width: 767px) {
  .xs-f-direc_r {
    flex-direction: row;
  }
  .xs-f-direc_rr {
    flex-direction: row-reverse;
  }
  .xs-f-direc_c {
    flex-direction: column!important;
  }
  .xs-f-direc_cr {
    flex-direction: column-reverse;
  }
  .xs-flex-none {
    flex: 0 0 auto;
  }
}

/* 06-07 etc
   ========================================================================== */
.relative{position: relative;}
.z1{z-index: 1}
.z-1{z-index: -1}

.select{ 
    box-shadow: 0px 1px 0px 0px rgba(221,221,221,1)inset,
                -1px 0px 0px 0px rgba(221,221,221,1)inset,
                1px 0px 0px 0px rgba(221,221,221,1)inset,
                0px -1px 0px 0px rgba(221,221,221,1)inset;
  cursor: pointer;

        }

input:checked + label .select,
.select_active,
.select.active,
.select:active{
    box-shadow: 0px 3px 0px 0px rgba(193,214,20,1)inset,
                -3px 0px 0px 0px rgba(193,214,20,1)inset,
                3px 0px 0px 0px rgba(193,214,20,1)inset,
                0px -3px 0px 0px rgba(193,214,20,1)inset;
}


.bs-b-3{
    box-shadow: 0px 1px 3px rgba(0,0,0,0.3);
    -webkit-box-shadow: 0px 1px 3px rgba(0,0,0,0.3);
    -moz-box-shadow: 0px 1px 3px rgba(0,0,0,0.3);
}


/* 点滅 */
.blinking {
    -webkit-animation: 0.5s linear 0s alternate none infinite running blink;
    -moz-animation: 0.5s linear 0s alternate none infinite running blink;
    animation: 0.5s linear 0s alternate none infinite running blink;
}
@-webkit-keyframes blink {
    0% { opacity: 0; }
    19.9% { opacity: 0; }
    20% { opacity: 1; }
    100% { opacity: 1; }
}
@-moz-keyframes blink {
    0% { opacity: 0; }
    19.9% { opacity: 0; }
    20% { opacity: 1; }
    100% { opacity: 1; }
}
@keyframes blink {
    0% { opacity: 0; }
    19.9% { opacity: 0; }
    20% { opacity: 1; }
    100% { opacity: 1; }
}



.txt-overlay-warning{
    display: block;
    text-align: center;
    width: 100%;
    color: #F00;
    font-weight: bold;
    position: absolute;
    bottom: 0;
    margin: -1em 0 0 0;
    text-shadow: 
      yellow 2px 0px 0px, yellow -2px 0px 0px,
      yellow 0px -2px 0px, yellow 0px 2px 0px,
      yellow 2px 2px 0px, yellow -2px 2px 0px,
      yellow 2px -2px 0px, yellow -2px -2px 0px,
      yellow 2px 2px 0px, yellow -2px 2px 0px,
      yellow 2px -2px 0px, yellow -2px -2px 0px,
      yellow 2px 2px 0px, yellow -2px 2px 0px,
      yellow 2px -2px 0px, yellow -2px -2px 0px,
      yellow 2px 2px 0px, yellow -2px 2px 0px,
      yellow 2px -2px 0px, yellow -2px -2px 0px;
}
@media (max-width: 767px) {
  .txt-overlay-warning{
    font-size: 12px;
    width: unset;
  }
}

[v-cloak] {
  display:none;
}