@charset "utf-8";
@media screen and (max-width:480px){
  /*画面幅が480pxまでの時*/
}
@media screen and (min-width:781px){
  /*画面幅が781px以上の時*/
}

body {
color:#333;
    -webkit-text-size-adjust : none;
font-size:15px;
font-family:'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','メイリオ',Meiryo,'ＭＳ Ｐゴシック',sans-serif;
}

a{
color:#333;
text-decoration:none;
}



/* リセット */


/* 
html5doctor.com Reset Stylesheet
v1.6.1
Last Updated: 2010-09-17
Author: Richard Clark - http://richclarkdesign.com 
Twitter: @rich_clark
*/




body {
    -webkit-text-size-adjust : none;
}


html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
 caption, tfoot, thead, aside, canvas, details, figcaption, figure, hgroup, menu, section, summary,
time, mark, audio, video {
    margin:0;
    padding:0;
    border:0;
    outline:0;
font-weight:normal;
    vertical-align:bottom;
    /*background:transparent;*/
}


html, body{
    height: 100%;
}

strong{
font-weight:bold;
}

section,div,article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section { 
display:block;
}

ul {
    list-style:none;
}

blockquote, q {
    quotes:none;
}

blockquote:before, blockquote:after,
q:before, q:after {
    content:'';
    content:none;
}

a {
    margin:0;
    padding:0;
    font-size:100%;
    vertical-align:baseline;
    background:transparent;
}

/* change colours to suit your needs */
ins {
    background-color:#ff9;
    color:#000;
    text-decoration:none;
}

/* change colours to suit your needs */
mark {
    background-color:#ff9;
    color:#000; 
    font-style:italic;
    font-weight:bold;
}

del {
    text-decoration: line-through;
}

abbr[title], dfn[title] {
    border-bottom:1px dotted;
    cursor:help;
}

/*
table {
    border-collapse:collapse;
    border-spacing:0;
}
*/

/* change border colour to suit your needs */
hr {
    display:block;
    height:1px;
    border:0;   
    border-top:1px solid #cccccc;
    margin:1em 0;
    padding:0;
}

input, select ,label {
margin-top: 0;
margin-bottom: 0;
padding-top: 0;
padding-bottom: 0;
font-size: 100%;
}

/* main_nav */

#herder #main_nav{
margin:0 0 20px 0;
text-align:right;
}

#herder #main_nav p{
letter-spacing:1px;
font-size:15px;
margin:0 0 5px 0;
}


#herder #main_nav span{
display:block;
margin:0 0 0 2px;
font-size:13px;
color:#607dd0;
}

#herder #main_nav li{
display:inline-block;
text-align:left;
margin:0 30px 0 0;
}

#herder #main_nav li a{
border-left:2px solid #EBEBEB;
display:inline-block;
padding:40px 0 5px 10px;
}

#herder #main_nav li a:hover{
border-left:2px solid #607dd0;
}

.none{
display:none;
}

.linkbox{
cursor:pointer;
}

/* sub_nav */

#sub_nav{
position:absolute;
top:4px;
right:0;
text-align:right;
}

#sub_nav li{
display:inline-block;
}

#sub_nav li a{
letter-spacing:2px;
font-size:13px;
color:#FFF;
line-height:1;
background:#607dd0;
text-align:left;
padding:5px 10px;
}

#sub_nav li a:hover{
background:#ccc;
}





/*--clearfix--*/



.clearfix{
zoom: 100%;
}

.clearfix:after{
display: block;
clear: both;
content: ".";
height: 0.1px;
font-size: 0.1em;
line-height: 0;
visibility: hidden;
}

.clearfix{
display: inline-block;
}

/*ボタン*/
.btn-box {
  display: inline-block;
  width: 150px;
  text-align: center
  font-size: 16px;
  color: #607dd0;
  text-decoration: none;
  font-weight: bold;
  padding: 12px 24px;
  position: relative;
  border: 1px solid #607dd0;
  transition: .4s;
}

.btn-box:hover {
  border: 2px solid transparent;
  color: #71ecf5;
}

.btn-box:before, .btn-box:after {
  width: 100%;
  height: 100%;
  z-index: 3;
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  box-sizing: border-box;
  transform: scale(0);
  transition: .2s;
}

.btn-box:before {
  border-bottom: 2px solid #71ecf5;
  border-left: 2px solid #6df2dc;
  transform-origin: 100% 0%;
}

.btn-box:after {
  border-top: 2px solid #71ecf5;
  border-right: 2px solid #6df2dc;
  transform-origin: 0% 100%;
}

.btn-box:hover:after,
.btn-box:hover:before {
  transform: scale(1);
}

/*シェアボタン*/
.follow-me {
  list-style: none;
  margin: 0 0 -8px;
  overflow: hidden;
  padding: 0;
}
.follow-me li {
  float: left;
  margin: 0 8px 8px 0;
  padding: 0;
}
.follow-me li a::before {
  border-style: solid;
  border-width: 1px;
  -webkit-border-radius: 2px;
  border-radius: 2px;
  color: #fff;
  display: inline-block;
  font-family: FontAwesome;
  font-size: 16px;
  height: 42px; /* Button height */
  line-height: 42px; /* Button height */
  -webkit-transition: all .3s ease;
  transition: all .3s ease;
  text-align: center;
  width: 42px; /* Button width */
}
.follow-me li a[href*="amazon.co.jp"]::before,
.follow-me li a[href*="amazon.com"]::before         { border-color: #ff9900; background-color: #ff9900; content: "\f270"; }
.follow-me li a[href*="codepen.io"]::before         { border-color: #000000; background-color: #000000; content: "\f1cb"; }
.follow-me li a[href*="delicious.com"]::before      { border-color: #3399ff; background-color: #3399ff; content: "\f1a5"; }
.follow-me li a[href*="deviantart.com"]::before     { border-color: #05cc47; background-color: #05cc47; content: "\f1bd"; }
.follow-me li a[href*="digg.com"]::before           { border-color: #000000; background-color: #000000; content: "\f1a6"; }
.follow-me li a[href*="dribble.com"]::before        { border-color: #000000; background-color: #ea4c89; content: "\f17d"; }
.follow-me li a[href*="dropbox.com"]::before        { border-color: #007ee5; background-color: #007ee5; content: "\f16b"; }
.follow-me li a[href*="facebook.com"]::before       { border-color: #3b5998; background-color: #3b5998; content: "\f09a"; }
.follow-me li a[href*="feedly.com"]::before         { border-color: #6cc655; background-color: #6cc655; content: "\f09e"; }
.follow-me li a[href*="flickr.com"]::before         { border-color: #0063cc; background-color: #0063dc; content: "\f16e"; }
.follow-me li a[href*="foursquare.com"]::before     { border-color: #f94877; background-color: #f94877; content: "\f180"; }
.follow-me li a[href*="github.com"]::before         { border-color: #181717; background-color: #181717; content: "\f09b"; }
.follow-me li a[href*="plus.google.com"]::before    { border-color: #dc4e41; background-color: #dc4e41; content: "\f0d5"; }
.follow-me li a[href*="b.hatena.ne.jp"]::before     { border-color: #008fde; background-color: #008fde; content: "\f027"; font-family: blogicon; }
.follow-me li a[href*="instagram.com"]::before      { border-color: #125688; background-color: #125688; content: "\f16d"; }
.follow-me li a[href*="last.fm"]::before            { border-color: #d51007; background-color: #d51007; content: "\f202"; }
.follow-me li a[href*="linkedin.com"]::before       { border-color: #0077b5; background-color: #0077b5; content: "\f0e1"; }
.follow-me li a[href*="nicovideo.jp"]::before       { border-color: #eaeaea; background-color: #eaeaea; content: "\f047"; font-family: blogicon; }
.follow-me li a[href*="pinterest.com"]::before      { border-color: #bd081c; background-color: #bd081c; content: "\f0d2"; }
.follow-me li a[href*="getpocket.com"]::before      { border-color: #ef3f56; background-color: #ef3f56; content: "\f265"; }
.follow-me li a[href*="reddit.com"]::before         { border-color: #ff4500; background-color: #ff4500; content: "\f1a1"; }
.follow-me li a[href*="skype.com"]::before,
.follow-me li a[href*="skype:"]::before             { border-color: #00aff0; background-color: #00aff0; content: "\f17e"; }
.follow-me li a[href*="slideshare.net"]::before     { border-color: #2d2d2d; background-color: #2d2d2d; content: "\f1e7"; }
.follow-me li a[href*="spotify.com"]::before        { border-color: #84bd00; background-color: #84bd00; content: "\f1bc"; }
.follow-me li a[href*="steamcommunity.com"]::before { border-color: #171a21; background-color: #171a21; content: "\f1b6"; }
.follow-me li a[href*="stumbleupon.com"]::before    { border-color: #eb4929; background-color: #eb4929; content: "\f1a4"; }
.follow-me li a[href*="tumblr.com"]::before         { border-color: #36465d; background-color: #36465d; content: "\f173"; }
.follow-me li a[href*="twitch.tv"]::before          { border-color: #6441a5; background-color: #6441a5; content: "\f1e8"; }
.follow-me li a[href*="twitter.com"]::before        { border-color: #55acee; background-color: #55acee; content: "\f099"; }
.follow-me li a[href*="vimeo.com"]::before          { border-color: #1ab7ea; background-color: #1ab7ea; content: "\f27d"; }
.follow-me li a[href*="vine.co"]::before            { border-color: #11b58a; background-color: #11b58a; content: "\f1ca"; }
.follow-me li a[href*="weibo.com"]::before          { border-color: #e6162d; background-color: #e6162d; content: "\f18a"; }
.follow-me li a[href*="whatsapp.com"]::before       { border-color: #64d548; background-color: #64d548; content: "\f232"; }
.follow-me li a[href*="wordpress.com"]::before,
.follow-me li a[href*="wordpress.org"]::before      { border-color: #21759b; background-color: #21759b; content: "\f19a"; }
.follow-me li a[href*="youtube.com"]::before        { border-color: #cd201f; background-color: #cd201f; content: "\f16a"; }
.follow-me li a[href$="/feed"]::before              { border-color: #ffa500; background-color: #ffa500; content: "\f09e"; }
.follow-me li a[href$="/subscribe"]::before         { border-color: #363636; background-color: #363636; content: "\f000"; font-family: blogicon; }
.follow-me li a:hover::before {
  background-color: #fff;
}
.follow-me li a[href*="amazon.co.jp"]:hover::before,
.follow-me li a[href*="amazon.com"]:hover::before         { color: #ff9900; }
.follow-me li a[href*="codepen.io"]:hover::before         { color: #000000; }
.follow-me li a[href*="delicious.com"]:hover::before      { color: #3399ff; }
.follow-me li a[href*="deviantart.com"]:hover::before     { color: #05cc47; }
.follow-me li a[href*="digg.com"]:hover::before           { color: #000000; }
.follow-me li a[href*="dribble.com"]:hover::before        { color: #ea4c89; }
.follow-me li a[href*="dropbox.com"]:hover::before        { color: #007ee5; }
.follow-me li a[href*="facebook.com"]:hover::before       { color: #3b5998; }
.follow-me li a[href*="feedly.com"]:hover::before         { color: #6cc655; }
.follow-me li a[href*="flickr.com"]:hover::before         { color: #0063dc; }
.follow-me li a[href*="foursquare.com"]:hover::before     { color: #f94877; }
.follow-me li a[href*="github.com"]:hover::before         { color: #181717; }
.follow-me li a[href*="plus.google.com"]:hover::before    { color: #dc4e41; }
.follow-me li a[href*="b.hatena.ne.jp"]:hover::before     { color: #008fde; }
.follow-me li a[href*="instagram.com"]:hover::before      { color: #125688; }
.follow-me li a[href*="last.fm"]:hover::before            { color: #d51007; }
.follow-me li a[href*="linkedin.com"]:hover::before       { color: #0077b5; }
.follow-me li a[href*="nicovideo.jp"]:hover::before       { color: #eaeaea; }
.follow-me li a[href*="pinterest.com"]:hover::before      { color: #bd081c; }
.follow-me li a[href*="getpocket.com"]:hover::before      { color: #ef3f56; }
.follow-me li a[href*="reddit.com"]:hover::before         { color: #ff4500; }
.follow-me li a[href*="skype.com"]:hover::before,
.follow-me li a[href*="skype:"]:hover::before             { color: #00aff0; }
.follow-me li a[href*="slideshare.net"]:hover::before     { color: #2d2d2d; }
.follow-me li a[href*="spotify.com"]:hover::before        { color: #84bd00; }
.follow-me li a[href*="steamcommunity.com"]:hover::before { color: #171a21; }
.follow-me li a[href*="stumbleupon.com"]:hover::before    { color: #eb4929; }
.follow-me li a[href*="tumblr.com"]:hover::before         { color: #36465d; }
.follow-me li a[href*="twitch.tv"]:hover::before          { color: #6441a5; }
.follow-me li a[href*="twitter.com"]:hover::before        { color: #55acee; }
.follow-me li a[href*="vimeo.com"]:hover::before          { color: #1ab7ea; }
.follow-me li a[href*="vine.co"]:hover::before            { color: #11b58a; }
.follow-me li a[href*="weibo.com"]:hover::before          { color: #e6162d; }
.follow-me li a[href*="whatsapp.com"]:hover::before       { color: #64d548; }
.follow-me li a[href*="wordpress.com"]:hover::before,
.follow-me li a[href*="wordpress.org"]:hover::before      { color: #21759b; }
.follow-me li a[href*="youtube.com"]:hover::before        { color: #cd201f; }
.follow-me li a[href$="/feed"]:hover::before              { color: #ffa500; }
.follow-me li a[href$="/subscribe"]:hover::before         { color: #363636; }

/*\*/

*html .clearfix{
height: 1px;
}

.clearfix{
display: block;
}


/**/


.hidden {
position: absolute;
width: 0;
height: 0;
overflow: hidden;
margin: 0;
padding: 0;
}


/* =============================================================================
   基本
   ========================================================================== */
.tel{
cursor:default;
}