@charset "utf-8";
/* ----------------------------------
              COMMON
---------------------------------- */
body { margin:0px auto 0px auto;font-size:14px;
       font-family:'メイリオ', Meiryo, 'ＭＳ Ｐゴシック' ,sans-serif;
       background: #fff; max-width:1150px; }
header,section,article,aside,footer{ 	display: block;}
img{ margin:0;padding:0;border:none;}
ul,ol{	margin:0;padding:0;list-style:none;list-style-position:outside;}
h1,h2,h3,h4,h5,h6{margin:0;padding:0;}
p{ margin:0;padding:0;}
div{ 	margin:0;padding:0;}

/* ----------------------------------
           COMMON LINK
---------------------------------- */
a:link{ color:#333;text-decoration:none;}
a:visited{ color:#333;text-decoration:none;}
a:hover{ color:#ff0000;	text-decoration:underline;}
a:active{ color:#298ADC;text-decoration:none;}

/* ----------------------------------
          ClearFix
---------------------------------- */
.cf { clear:both;}
.cf:after {  display:block; height:0;  visibility:hidden;
            clear:both;   content:".";}
/* 追加 MacIE 5 と WinIE 7 向け */
/*MacIE \*/
* html .cf{ height:1em;}

/*-------------------------------------
             IMAGE
-------------------------------------*/
img{ max-width: 100%;height: auto;width /***/:auto;　}
a:hover img {opacity: 0.8;filter: alpha(opacity=80);}
/*-------------------------------------
             SPAN
-------------------------------------*/
span.bold { font-weight:bold; }
span.red { color:#ff0000; }
span.bigFont { font-size:16px; }
/*-------------------------------------
             BR
-------------------------------------*/
br.pc { display:block; }
br.sp { display:none; }
  @media screen and (max-width : 480px) { 
       br.pc { display:none; }
       br.sp { display:block; }
  }

/*-------------------------------------
             PC / SP
-------------------------------------*/
.pc { display:block; }
.sp { display:none; }
  @media screen and (max-width : 480px) { 
       .pc { display:none; }
       .sp { display:block; }
  }
/* ----------------------------------
             NAVI
---------------------------------- */

nav { float:left; width:250px; background: linear-gradient(#fff, #ddd);  } 
nav p.logo  { width:100%;color:#ff0000;font-size:26px;font-weight:bold; letter-spacing: 1px; padding:10px 0 10px 20px; }
nav p.logo a:link { color:#ff0000; }
nav p.logo a:visited { color:#ff0000; }
nav p.contact { width:50%; color:#0000ff; font-size:16px; font-weight:bold; padding:5px 0 5px 20px;
            border:2px #ff0000 solid; border-radius:20px; margin:0 10px 24px; }

nav p.contactTxt { margin:10px; font-weight:bold; font-size:16px; }
nav p.contactB { width:50%; color:#0000ff; font-size:16px; font-weight:bold; padding:5px 0 5px 20px;
            border:2px #00ccff solid; border-radius:20px; margin:0 10px 24px; }

nav p.care-title { margin:0px 0 10px; font-weight:bold; font-size:18px; padding:10px 0;
            border-top:1px #f00 solid; border-bottom:1px #f00 solid; text-align:center; }

nav ul  { margin:0px auto 0px 10px; height:auto; }
nav li { padding:6px 0px 6px 30px;font-weight:bold; }

nav ul.care-worker li:first-child { padding:10px 0px 10px 20px; margin-top:10px;
           border-left:#f00 2px solid; border-bottom:#f00 2px solid; }

nav hr.care-intern { height:0px; border:10px #fff solid; margin:10px 0 0; }

nav p.intern-title { margin:0px 0 10px; font-weight:bold; font-size:18px; padding:10px 0;
            border-top:1px #00f solid; border-bottom:1px #00f solid;  text-align:center; }

nav ul.technical-intern li:first-child { padding:10px 0px 10px 20px; margin-top:10px;
           border-left:#00f 2px solid; border-bottom:#00f 2px solid; }

nav ul.helper li:first-child { padding:10px 0px 10px 20px; margin-top:10px;
           border-left:#f00 2px solid; border-bottom:#f00 2px solid; }


nav li a:link { padding:14px 20px 14px 0px;}
nav li a:hover { color:#ff0000;font-weight:bold;text-decoration:none;}

  @media screen and (min-width : 769px){
     .openIcon { display:none;}
     .navList { margin:0px;width:100%;height:auto;background:none; }
  }

  @media screen and (max-width : 768px){
     nav { position:absolute;  top: 0px; background:none; width:100%; z-index:10; }
     nav.open { height:30px;-webkit-transition: .5s linear; 	transition: .5s linear;  }
     nav.close { width:100%; margin-left:260px; -webkit-transition: .5s linear; transition: .5s linear; 
                  background-color: rgba(51,51,51,0.5);}
     #openList { margin:-53px 0px 0px -260px;width:260px; background:#ffcccc; }


     nav p.contact a:link { width:70%; color:#fff; font-size:16px; padding:5px 0 5px; margin:0 10px; }
     nav p.contact a:visited { color:#fff; }
     nav li { padding:5px 0px 5px 20px; }

     .openUl { position:absolute; top:0px; left:0; z-index:10; }

     #openList ul { list-style:none; padding:0px;  margin:0px;width:230px; }
     #openList ul li { color:#000;font-size: 14px;font-weight: bold;background: #ffcccc none repeat scroll 0% 0%;
             width: 240px;border-bottom: 1px solid #FFF;}
     #openList ul li:first-child { padding:5px 10px 5px 10px; width:238px; }
     #openList ul li a:link { color:#000; }
     #openList ul li a:visited { color:#000; }
  }

  @media screen and (max-width : 480px) { 
          nav { position:absolute;top:0; }
  }
/*-------------------------------------
	     Header
-------------------------------------*/
header { float:right;width:calc(100% - (250px + 2%));  padding:0 1%; }
header-inner {}
header h1 { font-size:10px;padding:5px; }
header .company-logo { float:left; padding:0px 5px; width:calc(40% - 10px); }
header .company-logo img { width:100%; display:block; }

  @media screen and (max-width : 768px){
    header { float:none;width:98%; } 
    header .description { font-size:10px;padding:5px 0 5px 50px; }
  }
  @media screen and (max-width : 480px) {
    header h1 { font-size:10px;padding:5px 5px 5px 50px; }
  }

#headerRight { float:right;width:60%;font-weight:bold;font-size:14px;color:#777; }
#headerRight .subTitle { float:left;margin-top:40px;position:relative; }
#headerRight .subTitle a { color:#777; }
#headerRight .subTitle a:hover { color:#ff0000; }
#headerRight .company-name { float:right;margin-top:30px;}
  @media screen and (max-width : 768px){ 
  }
  @media screen and (max-width : 480px) { 
    header .company-logo { float:none; padding:0px 5px; width:calc(100% - 10px); max-width:360px; margin:0 auto; }
    #headerRight { clear:both; width:70%; }
    #headerRight .subTitle {  float:none;width:100%;font-size : 1.3em;margin:-10px 0px 10px 0px;}
    #headerRight .company-name { font-size:16px; float:none;width:100%;margin-top:10px;}
  }

/* ----------------------------------
            WIDE SLIDER
---------------------------------- */
#sliderInner { float:right;width:calc(100% - (250px + 2%));  padding:0 1%; }

h2.top { color: #333;margin:10px 0 20px 0;padding:5px 0 5px 10px;font-size:18px;
             position: relative;text-align:left;background:linear-gradient(#ccc, #fff);  }

.wideslider { 	max-width: 60%;position: relative;overflow: hidden;float:left;}
/* ----------------------------------
.wideslider2 { display:none} 
.wideslider ul,.wideslider ul li { float: left;	display: inline; overflow: hidden;}
.wideslider ul li img {	max-width: 100%;	display: none;}
.wideslider_base {	top: 0;	}
.wideslider_wrap {	top: 0;	position: absolute;	overflow: hidden;}
.slider_prev,.slider_next {	top: 0;	overflow: hidden;	position: absolute;	z-index: 100;	cursor: pointer;}
.slider_prev { background: #fff url(../img/prev.png) no-repeat right center;}
.slider_next { background: #fff url(../img/next.png) no-repeat left center;}
.pagination {	bottom: 10px;	left: 30px;	width: 100%;	height: 15px;
	text-align: left;	position: absolute;	z-index: 200;}
.pagination a {	margin: 0 5px;	width: 15px;	height: 15px;
	display: inline-block;	overflow: hidden;	background: #ff0000;}
.pagination a.active {	filter:alpha(opacity=100)!important;
	-moz-opacity: 1!important;	opacity: 1!important;}
---------------------------------- */
  @media screen and (max-width : 768px){
    #sliderInner { width:100%; }
    .wideslider { float:none;margin:0 auto; }
  }
  /* ----------------------------------
  @media screen and (max-width : 480px) {
    #sliderInner { padding-top:30px; }
    .wideslider { display:none} 
  }

/* ----------------------------------
         H2を画像に被せる
---------------------------------- */
#overlay { text-align:right; margin:0px; position: relative; width:39%; float:right; height:auto; }
  @media screen and (max-width : 768px){
    #overlay { text-align:left;margin:0 5%;width:90%;float:none;height:265px; }
  }
  @media screen and (max-width : 480px) {
    #videoInner { clear:both; }
    #bg-style { background:none; }
    #overlay { display:none;}
  }

#overlay .mainTitle { color:#111;font-size:18px;text-align:right;margin:0px 0 10px 0;font-weight:bold;
                line-height:35px;padding-right:2%;border-bottom:1px #ff0000 solid;
                border-left:3px #ff0000 solid; }

#overlay .firstTitle { color:#fff;font-size:16px;text-align:right;margin:0;line-height:54px;padding:10px 2% 0 0;
             text-shadow: 2px 2px 2px #333, -2px 2px 2px #333,2px -2px 2px #333,-2px -2px 2px #333,
             0px 2px 2px #333, -2px 0px 2px #333, 2px 0px 2px #333, 0px -2px 2px #333,
             5px 5px 6px #333; border:1px #777 solid;
             background:url(../image/subTitleBg.png); }
#overlay .subTitle { color:#fff;font-size:16px;text-align:right;margin:0;line-height:54px;padding:10px 2% 0 0;
             text-shadow: 2px 2px 2px #333, -2px 2px 2px #333,2px -2px 2px #333,-2px -2px 2px #333,
             0px 2px 2px #333, -2px 0px 2px #333, 2px 0px 2px #333, 0px -2px 2px #333,
             5px 5px 6px #333; border-bottom:1px #777 solid;border-right:1px #777 solid;border-left:1px #777 solid;
             background:url(../image/subTitleBg.png);  }
  @media screen and (max-width : 982px){
     #overlay .mainTitle { font-size:18px; }
  }
  @media screen and (max-width : 892px){
     #overlay .mainTitle { font-size:16px; }
     #overlay .subTitle { font-size:14px; }
  }
  @media screen and (max-width : 768px){
    #overlay .mainTitle { text-align:left;padding-left:10px; }
  }
  @media screen and (max-width : 480px) {
    #overlay .subTitle, #overlay .lastTitle { line-height:20px; }
  }
#overlay .contactBtn { margin:10px; width:95%;  }

  @media screen and (max-width : 480px) {
      #overlay .contactBtn { margin:10px 0 0 0; width:350px; }
  }


/*-------------------------------------
	   Top Banner
-------------------------------------*/
#topBanner { max-width: 1000px;height:150px;margin:0 auto;position: relative;overflow: hidden;
             background:url(../image/banner.jpg); background-size: 100% 100%; }
#topBanner h2 { color:#000;font-size:20px;line-height:60px;margin:40px 0 0 0px;
          text-shadow: 3px 3px 3px #fff, -3px -3px 3px #fff,
                      -3px 3px 3px #fff, 3px -3px 3px #fff; }

  @media screen and (max-width : 480px) {
#topBanner { height:60px; }
    #topBanner h2 { margin:0px 0 0 2%; }

  }

/*-------------------------------------
	   Main Contents
-------------------------------------*/
main { float:right; width:calc(100% - (250px + 2%)) ; padding:0 1%;
          background:#fff; margin:10px auto 0 auto; }

article { width:100%; word-break: break-all; }

  @media screen and (max-width : 768px){ 
    main { clear:both; float:none; max-width:98%;width:98%; }
  }
  @media screen and (max-width : 480px) { 
    main {  clear:both; width:98%; padding:20px 1%; }
  }

aside { width:100%; margin:10px auto; word-break: break-all; }

h2.blue { color: #333;margin:20px 0 0 0;padding:5px 0 5px 10px;font-size:18px;
             position: relative;text-align:left;background:linear-gradient(#ccc, #fff);
             border-left:5px #0000ff solid;border-bottom:1px #0000ff solid; }

h2.red { color: #333;margin:20px 0 0 0;padding:5px 0 5px 10px;font-size:18px;
             position: relative;text-align:left;background:linear-gradient(#ccc, #fff);
             border-left:5px #ff0000 solid;border-bottom:1px #ff0000 solid; }
h2.glay {  background:#ccc; padding-left:20px; }

/*-------------------------------------
	   ASIDE
-------------------------------------*/
#facebook { width:500px;margin:30px auto 10px; }

  @media screen and (max-width : 768px) {
      #facebook { width:500px;margin:30px auto; padding-left:0px; }
      div.fb-like-box, div.fb-like-box iframe[style], div.fb-like-box span { width: 98% !important; }
  }
  @media screen and (max-width : 480px) {
      #facebook { width:100%;margin:30px auto; padding-left:0px; }
      div.fb-like-box, div.fb-like-box iframe[style], div.fb-like-box span { width: 98% !important; }
  }

#whatNew { margin:20px 0 40px 100px; height:300px; 
           border:1px #aaa solid; padding:10px; overflow:auto; }

#topContact { margin:40px 0 20px 100px; }
.contact-left { float:left; }

  @media screen and (max-width : 480px) {
      #whatNew { margin:40px 0 20px 10px; }
      #topContact { margin:40px 0 20px 10px; }
  }
/*-------------------------------------
	   Contact Btn
-------------------------------------*/
.contactBtn { margin:0;font-size:16px; font-weight: bold; max-width:100%; width:350px; height:45px;
                border-radius: 20px; text-align:center; float:right; position:relative;
                background: #ccccff; color: #fff; border:#ff0000 solid 1px; }
.contactBtn a { position:absolute; top:0; left:0;padding: 10px 0px;   width:100%;   height:100%; }

  @media screen and (max-width : 768px) {
      .contactBtn { margin:0px;max-width:300px; width:95%; }
  }
  @media screen and (max-width : 480px) {
      .contactBtn { clear:both;margin:10px 2% 0;font-size:20px; width:96%;
                border-radius: 20px; padding-top: 10px;text-align:center;float:none;
                background: #ccccff; color: #fff; border:#ff0000 solid 1px; }
  }
.contactBtn:hover { background: #fff; color: #333; border: solid 1px #333; transition: all 0.5s; }


/*-------------------------------------
	   Column
-------------------------------------*/
#txtContents .columnText { margin:10px 20px 20px 20px;line-height:1.8em; }
  @media screen and (max-width : 480px) {
    #txtContents .columnText {margin:0px; }
  }
#txtContents .columnDate { text-align:right;margin:10px 20px 20px 20px;line-height:1.8em; }
  @media screen and (max-width : 480px) {
    #txtContents .columnDate {margin:0px; }
  }

/*-------------------------------------
	   CONTACT
-------------------------------------*/
#contactForm { margin:30px 0px 20px 50px; }
  @media screen and (max-width : 480px) {
    #contactForm { margin:30px 5px 20px 3px; }
  }
.contactLeft { width:200px;float:left;margin:3px;}
.contactRight { margin:14px; }
.contactRight input, .contactRight textarea { width:400px;}
  @media screen and (max-width : 768px){
    .contactRight input, .contactRight textarea { width:80%;}
  }
  @media screen and (max-width : 480px) {
    .contactRight input, .contactRight textarea { width:100%;}
  }
.submitBtn { margin-left:200px;}
  @media screen and (max-width : 768px){
    .submitBtn { margin-left:5%;}
  }
  @media screen and (max-width : 480px) {
    .submitBtn { margin-left:5%;}
  }
#contactForm table { table-layout:fixed; }
#contactForm .formTable { width:80%;margin:10px auto 10px auto;
         border-spacing:0;border-collapse:collapse; }
#contactForm .formTable td { width:70%;padding:5px 20px 5px 20px;word-wrap:break-word; }
#contactForm .formTable th { width:30%;padding:5px 20px 5px 20px; }
/*-------------------------------------
	   Company
-------------------------------------*/
#company { font-size:14px;margin:20px 0px 40px 0px;}
#company ul { margin:20px 0 10px 50px;padding:0;}
#company ul li { display:inline; }
#googleMap { width:100%;margin:20px 0px 20px 80px; }
  @media screen and (max-width : 480px) {
    #company { margin:20px 0px 10px 1%; }
    #company ul { margin:20px 0 10px 10px;padding:0;}
    #googleMap { display:none;}
  }
#googleMapMobile { display:none;}
  @media screen and (max-width : 480px) {
    #googleMapMobile { display:block;margin:20%;}
  }

/*-------------------------------------
	     Footer
-------------------------------------*/
footer { clear:both;  width:100% ; text-align:center;border-top:1px #fff solid;
         margin:40px auto 0px auto; padding-top:20px;
         background:#ccc; font-size:12px; font-weight:bold; }
footer ul { max-width:1000px;text-align:center;margin:0px auto 0px auto;}
footer li { float:left; width:14.6%; padding:10px 1%;}
footer li.footFirst { padding-left:20px;}
footer li a { display:block;text-decoration:none;}
footer li a:link { color:#000;}
footer li a:visited{ color:#000;text-decoration:none;}
footer li a:hover{ color:#ff0000;text-decoration: none;}
  @media screen and (max-width : 768px){
    footer { width:98%; }
  }
  @media screen and (max-width : 480px) {
    footer { width:98%; }
    footer li { float:none;width:96%; }
  }

address { clear:both;color:#000;font-size: 12px; text-align:center;
          padding: 20px 0px 20px 0px;margin:0px auto 5px auto; }
address a {text-decoration: none;}
address a:link {color:#000;text-decoration: none;}
address  a:visited{ color:#000;text-decoration:none;}
address a:hover {color:#ff0000;text-decoration: none;}