@import url('http://fonts.googleapis.com/earlyaccess/notosansjapanese.css');

body {
  padding: 0;
  margin: 0;
　font-family: 'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro',sans-serif;
  background: #F2F0E9; }

header {
  background: #A9CC66;
  padding: 6px 10px;
  text-align: center;
  font-size: 13px;
  font-family: 'Noto Sans Japanese', serif;
  color: #FFF; }

h2 {
  font-size: 18px;
  margin-bottom: 20px;
  font-family: 'Noto Sans Japanese', serif;
  font-weight: bold;
  border-bottom: 1px solid #DDD;
  padding: 0 0 10px 8px;
  color: #083643; }

/* div.MyProfile */

div.MyProfile {
  text-align: center;
  margin: 30px 0; }

div.MyProfile p.image img {
  width: 80px; }

div.MyProfile h1 {
  font-family: 'Noto Sans Japanese', serif;
  font-weight: bold;
  font-size: 20px;
  color: #083643;
  margin: 3px 0;
  padding-top: 3px; }

div.MyProfile p.name {
  margin-bottom: 5px;
  font-family: 'Noto Sans Japanese', serif;
  color: #083643; }

div.MyProfile p.sns {
  margin-bottom: 0; }

div.MyProfile p.sns a {
  font-size: 30px;
  margin-right: 10px; }

div.MyProfile p.sns a:hover {
  opacity: 0.8; }

div.MyProfile p.sns a:last-child {
  margin-right: 0; }

div.MyProfile p.sns a.facebook { color: #3A5B94; }
div.MyProfile p.sns a.twitter { color: #4AADE9; }
div.MyProfile p.sns a.vimeo { color: #4BF; }
div.MyProfile p.sns a.linkedin { color: #0075AD; }
div.MyProfile p.sns a.youtube { color: #CF3427; }

/* div.ContentBox */

a:hover {
  text-decoration: none; }

a:hover div.ContentBox p.image img {
  opacity: .65; }

a:hover div.ContentBox i.fa-share {
  display: inline-block;
  text-align: center;
  position: absolute;
  top: 25%;
  left: 0;
  right: 0;
  font-size: 80px;
  color: #A9CC66; }

a:hover div.ContentBox.Document i.fa-share {
  top: 30%; }

a:hover div.ContentBox.Card i.fa-share {
  top: 15%; }

div.ContentBox {
  background: #FFF;
  border-radius: 3px;
  box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.18); }

div.ContentBox p.image {
  margin-bottom: 0; }

div.ContentBox p.image img {
  width: 100%;
  border-radius: 3px 3px 0 0; }

div.ContentBox i.fa-share {
  display: none; }

div.ContentBox p.specialty {
  padding: 0 10px 10px;
  margin: -5px 0 0;
  line-height: 22px; }

div.ContentBox p.description {
  color: #333;
  padding: 10px;
  margin-bottom: 0;
  border-top: 1px solid #E7E7E7; }

div.ContentBox p.name {
  color: #333;
  padding: 10px;
  border-top: 1px solid #E7E7E7;
  margin-bottom: 0; }

div.ContentBox p.name img {
  width: 30px;
  margin-right: 8px;
  vertical-align: top;
  border-radius: 3px; }

div.ContentBox p.name span.date {
  font-size: 12px;
  color: #777;
  margin-left: -20px;
  display: block; }

/* VideoBox */

div.VideoBox {
  background: #FFF;
  border-radius: 3px;
  box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.18); }
  
div.VideoBox p.video {
  margin-bottom: 0; }

div.VideoBox p.title {
  color: #333;
  padding: 10px;
  margin-bottom: 0;
  border-top: 1px solid #E7E7E7; }

div.VideoBox p.specialty {
  padding: 0 10px 10px;
  margin: -5px 0 0;
  line-height: 22px; }

div.VideoBox p.name {
  color: #333;
  padding: 10px;
  border-top: 1px solid #e7e7e7;
  margin-bottom: 0; }

div.VideoBox p.name img {
  width: 30px;
  margin-right: 8px;
  vertical-align: top;
  border-radius: 3px; }

div.VideoBox p.name span.date {
  font-size: 12px;
  color: #777;
  margin-left: -20px;
  display: block; }

/* BackToTop */

div#BackToTop {
  position: fixed;
  right: 10px;
  bottom: 10px; }

div#BackToTop i {
  font-size: 40px; }

/* ShareButton */

div.ShareButton { 
 text-align: center;
 padding: 10px 10px 15px;
 line-height: 28px; }

div.ShareButton a { 
 margin: 0 3px; }

div.ShareButton a:last-child {
 margin-right: 0; }

div.ShareButton a span.label-facebook {
 background: #3A5B94;
 padding: 3px 8px 4px; }

div.ShareButton a span.label-facebook i {
 padding-right: 5px;
 font-size: 12px; }

div.ShareButton a span.label-twitter {
 background: #4AADE9;
 padding: 3px 8px 4px; }

div.ShareButton a span.label-twitter i {
 padding-right: 5px;
 color: #FFF;
 font-size: 13px; }

div.ShareButton a span.label-google {
 background: #EB3F30;
 padding: 3px 8px 4px; }

div.ShareButton a span.label-google i {
 padding-right: 5px;
 color: #FFF;
 font-size: 12px; }

div.ShareButton a span.label-linkedin {
 background: #0087B8;
 padding: 3px 8px 4px; }

div.ShareButton a span.label-linkedin i {
 padding-right: 5px;
 color: #FFF;
 font-size: 12px; }

div.ShareButton a span.label-line {
 background: #00C442;
 padding: 3px 8px 4px; }

div.ShareButton a span.label-line img {
 width: 16px;
 margin: 0 4px 0 -2px;
 padding-bottom: 5px; }

div.ShareButton a:hover {
 text-decoration: none; }

div.ShareButton a:hover span.label {
 opacity: 0.8; }

/* footer */

footer {
  text-align: center;
  border-top: 1px solid #DDD;
  padding: 15px 0;
  font-family: 'Noto Sans Japanese', serif; }

/* label */

.label-bootstrap { background: #6F5499; }
.label-responsive { background: #A9CC66; }
.label-gae { background: #5FA3D2; }
.label-jquerymobile { background: #108040; }
.label-4D { background: #25456D; }
.label-illustrator { background: #E07304; }
.label-fontawesome { background: #00A079; }
.label-canon { background: #D3000D; }

@media (min-width: 992px) {
  div.container {
	width: 890px; }

  div.row.first { margin-bottom: 20px; }
  div.row.second { margin-bottom: 30px; }
}

@media (min-width: 768px) and (max-width: 991px) {
  div.container {
    width: 100%; }

  div.row.first, div.row.second {
	padding: 0 5px; }
  div.row.first { margin-bottom: 20px; }
  div.row.second { margin-bottom: 30px; }

  div.col-sm-12 {
	padding-right: 18px;
	padding-left: 18px; }

  div.col-sm-4 {
    padding-left: 7px;
	padding-right: 7px; }

  h2 {
  	margin-right: -3px;
  	margin-left: -3px; }

  a:hover div.ContentBox i.fa-share {
	top: 20%; }
  
  a:hover div.ContentBox.Card i.fa-share {
  	top: 12%; }
}

@media (max-width: 767px) {
  div.col-sm-4 {
	margin-bottom: 20px; }
}

@media (max-width: 480px) {
  header {
    border-top: 10px solid #A9CC66;
    background: none;
    padding: 0; }

  header span {
    display: none; }
}