@charset "UTF-8";

/* ================================================ */

/* RESET */
/*
YUI 3.16.0 (build 76f0e08)
Copyright 2014 Yahoo! Inc. All rights reserved.
Licensed under the BSD License.
http://yuilibrary.com/license/

cssreset-min.css 一部改変 */
html{color:#000;background:#FFF}body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{margin:0;padding:0}table{border-collapse:collapse;border-spacing:0}fieldset,img{border:0}address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal}ol,ul{list-style:none}caption,th{text-align:left}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal}q::before,q::after{content:''}abbr,acronym{border:0;font-variant:normal}sup{vertical-align:text-top}sub{vertical-align:text-bottom}input,textarea,select{font-family:inherit;font-size:inherit;font-weight:inherit;*font-size:100%}legend{color:#000}

/* ================================================ */

/* CLEAR */
.clr_box{clear:both;}
.clr_both{clear:both;font-size:2px;line-height:1}
.clr{clear:both;overflow:hidden;width:1px;height:1px;margin:0-1px-1px0;border:0;padding:0;font-size:0;line-height:0;}

.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 */

/* ================================================ */

/* ICON */
@font-face {
  font-family: 'icons';
  src:  url('fonts/icons.eot?t7caht');
  src:  url('fonts/icons.eot?t7caht#iefix') format('embedded-opentype'),
    url('fonts/icons.ttf?t7caht') format('truetype'),
    url('fonts/icons.woff?t7caht') format('woff'),
    url('fonts/icons.svg?t7caht#icons') format('svg');
  font-weight: normal;
  font-style: normal;
}
/*
STYLE
  font-family: 'icons' !important;
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;

  logo               \e600
  setting            \e601
  upgrade            \e602
  desktop            \e603
  info               \e604
  alert              \e605
  help               \e606
  mail               \e607
  search             \e608
  edit               \e609
  login              \e60a
  logout             \e60b
  circle             \e60c
  cross              \e60d
  plus               \e60e
  minus              \e60f
  arrow_left         \e610
  arrow_right        \e611
  arrow_up           \e612
  arrow_down         \e613
  doublearrow_left   \e614
  doublearrow_right  \e615
  doublearrow_up     \e616
  doublearrow_down   \e617
  doublecircle       \e618
  triangle           \e619
  check              \e61a
  delete             \e61b
  download           \e61c
  upload             \e61d
  server             \e61e
  web                \e61f
  ssl                \e620
  user               \e621
  group              \e622
  friend             \e623
  special            \e624
  cloud              \e625
*/

/* ICON - old */
@font-face {
  font-family: 'bindcloud';
  src:url('fonts/bindcloud.eot?7lhupl');
  src:url('fonts/bindcloud.eot?#iefix7lhupl') format('embedded-opentype'),
    url('fonts/bindcloud.woff?7lhupl') format('woff'),
    url('fonts/bindcloud.ttf?7lhupl') format('truetype'),
    url('fonts/bindcloud.svg?7lhupl#bindcloud') format('svg');
  font-weight: normal;
  font-style: normal;
}
/*
CODE
  bindcloud   \e600
  setting     \e601
  up        \e602
  pc        \e603
  info      \e604
  notice      \e605
  help      \e606
  mail      \e607
  search      \e608
  pencil      \e609
  login     \e60a
  logout      \e60b
  circle      \e60c
  cross     \e60d
  plus      \e60e
  minus     \e60f
  arrow_left    \e610
  arrow_right   \e611
  arrow_up    \e612
  arrow_down    \e613
  arrow_left2   \e614
  arrow_right2  \e615
  arrow_up2   \e616
  arrow_down2   \e617
*/

/* ================================================ */

/*
FONT SIZE
  14px  1.000em 100.00%
*/

/* ================================================ */

html {
  background: #e9e9e9;
  font-family: -apple-system, BlinkMacSystemFont, 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', Meiryo, sans-serif;
  font-size: 14px;
  line-height: 1.6;
  color: #363636;
}
body {
}
a {
  /*color: #2daa96;*/
  color: #0bc8c0;
  text-decoration: none;
  transition: all .3s;
}
a:visited,
a:focus,
a:hover {
  text-decoration: underline;
}
img {
  vertical-align: middle;
}
strong {
  font-weight: bold;
}
em {
  color: #c00;
  font-weight: bold;
}
sup {
  vertical-align: top;
  line-height: 1;
}
sub {
  vertical-align: bottom;
  line-height: 1;
}
small {
  font-size: .85em;
}
hr {
  border-top: 1px solid;
  border-right: none;
  border-bottom: none;
  border-left: none;
}
iframe {
  border: none;
}

/* ================================================ */

#betaVer {
  padding: 4px 16px 3px;
  background-color: #ffd;
  text-align: center;
  box-shadow: inset 0 -1px 2px rgba(0,0,0,.2);
}

#head-area {
  position: relative;
  background-color: #0bc8c0;
  padding-left: 16px;
  padding-right: 48px; /* ヘルプ余白 */
  height: 48px;
  line-height: 48px;
}
#head-area > p:first-child {
  float: left;
}

/* ロゴ */
#head-area > p:first-child {
  height: 48px;
  background: url(../img/head_logo.png) left center no-repeat;
}
#head-area > p:first-child::after {
  content: "control panel";
  margin-left: 114px;
  padding: 4px 8px;
  font-size: 14px;
  color: #fff;
  letter-spacing: 1px;
  border: 1px solid;
 }
#head-area > p:first-child > img {
  display: none;
}

#head-area #logout-button,
#head-area #launch-button {
  float: right;
}
#head-area #logout-button a,
#head-area #launch-button a {
  display: inline-block;
  padding: 0 1.5em;
  color: #fff;
  text-align: center;
  text-decoration: none;
}
#head-area #logout-button a:hover,
#head-area #logout-button a:focus,
#head-area #logout-button a:active {
  background-color: #09a09a;
}
#head-area #launch-button a {
  border-radius: 1px;
  text-shadow: 0 -1px rgba(0,0,0,.2);
  background: #2DAA96;
}
#head-area #launch-button a:hover,
#head-area #launch-button a:focus,
#head-area #launch-button a:active {
  text-shadow: none;
  background: #14917D;
}

@media (max-width: 768px) {
  #head-area {
    height: 36px;
    padding-right: 36px;
    line-height: 36px;
  }
  #head-area > p:first-child {
    height: 36px;
  }
  #head-area > p:first-child::after {
    margin-left: 105px;
    padding: 4px;
    font-size: 10px;
    letter-spacing: 0;
  }
  #head-area #logout-button a,
  #head-area #launch-button a {
    padding: 0 .5em;
  }
}


/* ================================================ */

#login-area {
  margin-bottom: 32px;
  padding: 8px 16px;
  background: #09a09a;
  box-shadow: 0 0 4px rgba(0,0,0,.2);
  line-height: 24px;
  color: #fff;
}
#login-area a {
  color: inherit;
}
#login-area #manual,
#login-area #login,
#login-area #logincourse {
  float: right;
}
#login-area #logincourse {
  margin-right: 8px;
  padding-right: 8px;
  border-right: 1px solid;
}
#login-area #manual {
  position: absolute;
  top: 0;
  right: 0;
}
#login-area #manual img {
  display: none;
}
#login-area #manual a {
  display: block;
  width: 48px;
  border-left: 1px solid rgba(9,160,154,.6);
  text-align: center;
  text-shadow: none;
  font-size: 24px;
  line-height: 2;
}
#login-area #manual a:hover,
#login-area #manual a:focus,
#login-area #manual a:active {
  background-color: #09a09a;
  text-decoration: none;
}
#login-area #manual a::before {
  /* icon */
  content: "\e606";
  font-family: 'icons' !important;
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  /* line-height: 1; */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}


@media (max-width: 768px) {
  #login-area #manual a {
    width: 36px;
    line-height: 1.5;
  }
}


#backtotoppage,
#backtotoppagefnc {
  float:left;
}
#backtotoppage a,
#backtotoppagefnc a {
  display: inline-block;
  margin-right: 8px;
}
#backtotoppage a::before,
#backtotoppagefnc a::before {
  /* icon */
  content: "\e610";
  font-family: 'icons' !important;
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;

}

/* ================================================ */

#copy {
  clear: both;
  margin: .5em auto;
  text-align: center;
}
#copy,
#copy font {
  font-size: .85rem;
  color: rgba(0,0,0,.6);
}
#copy:first-of-type {
  margin-top: 1rem;
}
#copy:last-of-type {
  margin-bottom: 2rem;
}

/* ================================================ */