@charset "utf-8";
/* CSS Document */

/*-----------------------------------------------
base
#38678C 青
#BA1E0F 赤
-----------------------------------------------*/

/*-----------------------------------------------
  text link
-----------------------------------------------*/

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

a[href^="tel:"] {
cursor:default;
}
a[href^="tel:"]:hover {
text-decoration:none;
}

body {
color:#333;
font-size:15px;
line-height:1.5;
font-family:Verdana, Roboto, "Droid Sans", "メイリオ", Meiryo, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "ＭＳ Ｐゴシック", sans-serif;
}

/*-----------------------------------------------
  header
-----------------------------------------------*/

#header {
position:sticky;
top:0;
z-index:10000;
width:100%;
background:#FFF;
}
#header .inner {
width:100%;
max-width:1200px;
margin:0 auto;
padding:1em 4%;
overflow:hidden;
}
#header .logo {
float:left;
width:240px;
}
#header .logo img {
width:100%;
}
#header .join {
float:right;
width:20em;
font-weight:bold;
color:#FFF;
background:#0075BE;
background: -webkit-gradient(linear, left top, left bottom, color-stop(0.51, #0075BE), color-stop(0.49, #1E9CD7));
background: -webkit-linear-gradient(top, #1E9CD7 49%, #0075BE 51%);
background: -moz-linear-gradient(top, #1E9CD7 49%, #0075BE 51%);
background: -o-linear-gradient(top, #1E9CD7 49%, #0075BE 51%);
background: -ms-linear-gradient(top, #1E9CD7 49%, #0075BE 51%);
background: linear-gradient(to bottom, #1E9CD7 49%, #0075BE 51%);
box-shadow:2px 2px 5px 0px #CCC;
border:2px solid #FFF;
border-radius:5px;
-webkit-transition:all 0.2s ease-out;
transition:all 0.2s ease-out;
}
#header .join a {
display:block;
padding:1em 1em 1em 3.5em;
color:#FFF;
text-decoration:none;
background:url(../img/arw01_white.png) 2.5em center no-repeat;
background-size:0.5em;
}
#header .join:hover {
opacity:0.8;
}
#header .join br {
display:none;
}

@media (max-width:800px) {
#header {
position:static;
padding:1em 2.5%;
}
#header .logo {
float:none;
width:50%;
margin:0 auto;
}
#header .join {
float:none;
width:100%;
margin:10px auto 0 auto;
}
}
@media (max-width:600px) {
#header .logo {
width:60%;
}
#header .join {
display:none;
}
}

/*-----------------------------------------------
  main
-----------------------------------------------*/

#main {
width:100%;
min-height:600px;
}

@media (max-width:800px) {
#main {
padding-top:0;
}
}

/*-----------------------------------------------
  footer
-----------------------------------------------*/

#footer  {
width:100%;
margin-top:4em;
text-align:center;
}
#footer .pagetop a {
display:block;
padding:1.5em 1em;
background:#CDC2A4;
-webkit-transition:all 0.2s ease-out;
transition:all 0.2s ease-out;
}
#footer .pagetop a:hover {
opacity:0.8;
}
#footer .privacy {
margin-top:2em;
padding:0 4%;
font-size:0.85em;
}
#footer .privacy a {
padding-left:1em;
background:url(../img/arw01_red.png) left center no-repeat;
background-size:0.6em;
}
#footer .copyright {
margin-top:1em;
padding:0 4%;
font-size:0.85em;
}
#footer .logo {
margin-top:2em;
padding:1em 4%;
background:#F0F0F0;
}
#footer .logo img {
width:100%;
max-width:160px;
}