@charset "UTF-8";

/*@import url('https://fonts.googleapis.com/css?family=Muli');*/

/* clearfix */
.clearfix:after {  
	visibility: hidden;  
	display: block;  
	font-size: 0;  
	content: " ";  
	clear: both;  
	height: 0;  
}  
* html .clearfix { zoom: 1; } /* IE6 */  
*:first-child+html .clearfix { zoom: 1; } /* IE7 */  

/* header */
.navbar-custom { background:#ff6425; }
.navbar-custom .navbar-brand { opacity:1; }
.navbar-custom .nav li a { color:#fff; }
.navbar-custom .nav li a:focus, .navbar-custom .nav li a:hover { background-color:#e94e0f; }
.navbar-custom .nav li.hub .btn { background:#54372a; border-color:#54372a; }
.navbar-custom #account { position:absolute; top:0; right:0; }
.navbar-custom #account > li.avatar { padding-top:9px; }
.navbar-custom #account > li.avatar a {
  position:relative; display:block; width:32px; height:32px; background:#9a9592; border-radius:4px; opacity:1; }
.navbar-custom #account > li.avatar a:hover { opacity:1; }
.navbar-custom #account > li.avatar i { position:absolute; top:50%; left:50%; margin:-6px 0 0 -6px; color:#fff; }
.navbar-custom #account > li.notify { position:relative; margin:0 5px; }
.navbar-custom #account > li.notify a { padding:16px 20px 14px 10px; }
.navbar-custom #account > li.notify .badge {
  position:absolute; top:5px; left:50%; padding:3px 6px; font-size:10px; border:0; background-color:#54372a; }
.navbar-toggle .icon-bar { width:15px; }

/* subnav */
#subnav.nav-pills > li > a { color:#54372a; }
#subnav.nav-pills > li.active > a,
#subnav.nav-pills > li.active > a:focus,
#subnav.nav-pills > li.active > a:hover { color:#fff; background-color:#54372a; }

/* sidebar */
#sidebar {  }
#sidebar { padding-left:10px; padding-right:10px; }

#sidebar .form-control { border-color:#ccc; font-size:12px; }
#sidebar > ul > li > .list-group-item { font-size:14px; font-weight:bold; }
#sidebar .list-group { margin-bottom:0; }
#sidebar .list-group a.add {  }
#sidebar .list-group i { margin-right:8px; }
#sidebar .list-group .badge { font-weight:normal; color:#999; }

#sidebar .hub-title input[type="text"] { border:none; border-bottom:2px solid #333; border-radius:0; padding:0 0 5px; font-size:15px; font-weight:bold; }
#sidebar .hub-title input[type="text"]:placeholder-shown,
#sidebar .hub-title input[type="text"]::-webkit-input-placeholder,
#sidebar .hub-title input[type="text"]::-moz-placeholder { font-size:13px; font-weight:normal; color:#ccc; }
#sidebar .btn-edit { width:80px; margin-top:10px; font-size:11px; }
#sidebar .hub-list-flow { margin:0; padding:15px; background:#fff; }
#sidebar .hub-list-flow li { position:relative; list-style:none; }
#sidebar .hub-list-flow > li { padding-bottom:30px; background:url("../img/line.png") 13% 0 repeat-y; }
#sidebar .hub-list-flow > li:last-child { padding:0; background:none; }
#sidebar .hub-list-flow .row { display:flex; align-items:flex-start; }
#sidebar .hub-list-flow .icon { width:100%; height:100%; padding:18px; background:#f6f6f6; border:1px solid #eee; text-align:center; }
#sidebar .hub-list-flow .icon img { max-width:100%; height:auto; }
#sidebar .hub-list-flow .type { display:inline-block; font-size:10px; background:#ccc; margin-bottom:5px; padding:3px 5px; }
#sidebar .hub-list-flow .toggle { position:relative; display:block; height:auto; font-size:125%; font-weight:bold; color:#333; }
#sidebar .hub-list-flow .toggle:after { position:absolute; right:0; top:-3px; content:"\f107"; font-size:20px; font-family: FontAwesome; color:#999; }
#sidebar .hub-list-flow .toggle.open:after { content:"\f106"; }
#sidebar .hub-list-flow .panel-body { padding:10px 15px; }
#sidebar .hub-list-flow .panel-body ul { margin:0; padding:0; }
#sidebar .hub-list-flow .panel-body ul li { line-height:2; }
#sidebar .hub-list-flow .panel-body ul a { color:#333; font-size:14px; }
#sidebar .hub-list-flow .panel-body ul a:hover { text-decoration:underline; }
#sidebar .hub-list-flow .panel-body ul i { padding-right:8px; }
#sidebar .hub-list-flow .panel-body ul li.del i { color:#DD4C4E; }
#sidebar .hub-list-flow .add .icon_add {
  display:inline-block; width:50px; height:50px; margin-left:18%; line-height:44px; text-align:center; color:#999;
  background:#f6f6f6; border:3px solid #eee; border-radius:50%; }
#sidebar .hub-list-flow .add .icon_add_small {
  display:inline-block; width:24px; height:24px; margin-left:34%; line-height:22px; text-align:center; color:#999; font-size:8px;
  background:#f6f6f6; border:1px solid #eee; border-radius:50%; }

/* main */
#main .content-row-title { margin-top:10px; font-size:22px; }
#main .content-row-title span { color:#434A54; }

/* リンク一覧 */
.hub-list-button > div { padding:5px; }
.hub-list .hub-list-box { display:flex; align-items:center; }
.hub-list .hub-list-box + .hub-list-box { margin-top:15px; }
.hub-list .hub-list-box .checkbox { margin:0 15px 0 0; }
.hub-list .list-group-item { display:flex; align-items:center; width:100%; padding:15px; border:1px solid #E6E9ED; border-radius:4px; }
.hub-list .list-group-item:hover { background:#fff; }
.hub-list .list-group-item .icons { vertical-align:middle; }
.hub-list .list-group-item .icons ul { margin:0; padding:0; display:inline-flex; align-items:center; }
.hub-list .list-group-item .icons ul li { list-style:none; display:inline-block; }
.hub-list .list-group-item .icons .icon { width:40px; height:40px; padding:7px; background:#f6f6f6; border:1px solid #eee; }
.hub-list .list-group-item .icons .icon img { max-width:100%; height:auto; }
.hub-list .list-group-item .icons .arrow { padding:0 8px; }
.hub-list .list-group-item .title { width:auto; padding:0 2em; flex:1; font-size:15px; font-weight:bold; }
.hub-list .list-group-item label.toggle { margin-bottom:0; }

/* リンク設定 */
.select-app { margin-bottom:40px; font-size:17px; }
.select-app i { padding-right:5px; font-size:20px; vertical-align:-5px; }
.select-app select { width:80%; font-size:18px; }
.select-app .select2-container--default .select2-selection--single .select2-selection__rendered { line-height:24px; }
.select-app .select2-container--default .select2-selection--single .select2-selection__placeholder { font-size:13px; color:#ccc; }
.hub-icon-list a { display:block; width:auto; padding:30px; text-align:center; border:3px solid transparent; border-radius:4px; }
.hub-icon-list a:hover  { border-color:#dddddd; }
.hub-icon-list a.active { border-color:#3BAFDA; }
.hub-icon-list .icon {
  box-sizing: border-box; display:block;
  width:100px; height:100px; max-width:100%; max-height:100%; margin:0 auto 15px; padding:25px;
  background:#f6f6f6; border:1px solid #eee; }
.hub-icon-list .icon img { max-width:100%; height:auto; }

/* footer */
.site-footer { margin-top:30px; padding:20px 0; text-align:right; background:none; }

@media (min-width: 768px) {
  .navbar-custom #gnav { position:absolute; top:0; right:85px; }
  .navbar-custom #gnav > li.hub { margin-left:10px; padding-top:8px; }

  #main { padding-left:10px; padding-right:10px; }

  .hub-list .list-group-item .icons { width:150px; }
  .hub-list .list-group-item .control { width:150px; text-align:right; }
}
@media (max-width: 992px) {
  .navbar-custom .navbar-brand { width:auto; }
}
@media (max-width: 767px) {
  .navbar-custom .nav li a:focus, .navbar-custom .nav li a:hover { background-color:#ff6425; }
  .navbar-custom #gnav { margin:0 -20px; }
  .navbar-custom #gnav > li { border-top:1px solid #f0a282; }
  .navbar-custom #gnav > li > a { padding:10px 20px; }
  .navbar-custom #gnav > li.hub { padding:5px; }
  .navbar-custom #gnav > li.hub button { width:100%; }
  .navbar-custom #account { right:60px; }
  .navbar-custom #account > li { float:left; }
  .navbar-custom #account > li.avatar { padding:0; }
  .navbar-custom #account > li.notify { margin:0; }
  .navbar-custom #account > li.notify a { height:32px; padding:10px; line-height:12px; }
  .navbar-custom #account > li.notify .badge { top:-3px; }

  #subnav { margin-left:-10px; margin-right:-10px; }
  #subnav > li { float:none; }
  #subnav > li + li { margin-left:0; margin-top:3px; }
  
  #main .panel-body { padding:5px; }
  
  .hub-list .list-group-item { display:block; text-align:center; }
  .hub-list .list-group-item .icons,
  .hub-list .list-group-item .title,
  .hub-list .list-group-item .control { display:block; width:100%; padding:10px 0; }
}