@charset "UTF-8";

body{
margin:0;
padding:0;
background-image:url(/images/common/body_bg.gif);
background-position:left top;
background-repeat:repeat-x;
}


#container{
width:720px;
position:relative;
margin:0 auto;
padding:0;
background-image:url(/images/common/container_bg.gif);
background-position:left top;
background-repeat:repeat-x;
}


#header{
padding:4px 0 0 0;
}

#header h1,
#header h2,
#header h3{
clear:none;
overflow:hidden;
}

#header h1{
width:65px;
height:84px;
float:left;
}

#header h2{
width:470px;
height:84px;
float:left;
}

#header h3{
width:185px;
height:84px;
float:left;
}


#headerNaviArea{
}

#headerNavi{
clear:both;
margin-left:160px;
}

#headerNavi li{
display:inline;
}

#headerNavi li a{
display:block;
width:160px;
height:34px;
text-indent:-9999px;
overflow:hidden;
float:left;
background-position:left top;
background-repeat:no-repeat;
}

#headerNavi li a:hover,
#headerNavi li a.current{
background-position:left bottom;
}

#headerNavi li a#headerNaviTop{
width:80px;
background-image:url(/images/common/headnavi_top.gif);
}

#headerNavi li a#headerNaviSystemDevelopment{
background-image:url(/images/common/headnavi_sys.gif);
}

#headerNavi li a#headerNaviMarketing{
background-image:url(/images/common/headnavi_mkt.gif);
}

#headerNavi li a#headerNaviProducts{
background-image:url(/images/common/headnavi_prd.gif);
}


#headerSubNaviArea{
}

#headerSubNavi{
clear:both;
margin-left:400px;
}

#headerSubNavi li{
display:inline;
}

#headerSubNavi li a{
display:block;
width:80px;
height:25px;
text-indent:-9999px;
overflow:hidden;
float:left;
background-position:left top;
background-repeat:no-repeat;
}

#headerSubNavi li a:hover,
#headerSubNavi li a.current{
background-position:left bottom;
}

#headerSubNavi li a#headerSubNaviCompany{
background-image:url(/images/common/headsubnavi_com.gif);
}

#headerSubNavi li a#headerSubNaviRecruit{
background-image:url(/images/common/headsubnavi_rec.gif);
}

#headerSubNavi li a#headerSubNaviInquiry{
background-image:url(/images/common/headsubnavi_inq.gif);
}

#headerSubNavi li a#headerSubNaviAccess{
background-image:url(/images/common/headsubnavi_map.gif);
}


#sidebar{
width:220px;
margin:25px 20px 25px 0;
clear:both;
float:left;
}

dl#sideNavigation{
margin-bottom:40px;
}

dl#sideNavigation dt{
margin-bottom:4px;
}

dl#sideNavigation dt a,
dl#sideNavigation dd a{
display:block;
height:20px;
line-height:20px;
}

dl#sideNavigation dt a{
width:220px;
text-indent:-9999px;
overflow:hidden;
background-position:left top;
background-repeat:no-repeat;
}

dt#systemDevelopment a{
background-image:url(/images/common/sidenav_sys.gif);
}

dt#marketing a{
background-image:url(/images/common/sidenav_mkt.gif);
}

dt#products a{
background-image:url(/images/common/sidenav_prd.gif);
}

dt#marketing,
dt#products{
margin-top:20px;
}

dl#sideNavigation dd a{
width:210px;
padding-left:10px;
text-decoration:none;
}

dl#sideNavigation dd a:hover,
dl#sideNavigation dd a.current{
background-color:#c39e9d;
color:#ffffff;
}

#topPageBottomBannerArea{
clear:both;
width:690px;
margin:0;
padding:0 15px 0 15px;
}

.topPageBottomBanners,
.topPageBottomBannersNoRightMargin{
width:220px;
margin-right:15px;
float:left;
}
.topPageBottomBannersNoRightMargin{
margin-right:0px;
}

.topPageBottomBanners a#topPageBlogLink{
display:block;
width:220px;
height:57px;
text-indent:-9999px;
overflow:hidden;
background-image:url(/images/top/bnr_ceoblog.jpg);
background-position:left top;
background-repeat:no-repeat;
}

ul.feeds{
padding-top:8px;
padding-left:54px;
height:71px;
list-style-type:disc;
background-image:url(/images/top/feed_bg.gif);
background-position:left top;
background-repeat:no-repeat;
border-bottom:1px solid #cccccc;
}

ul.feeds li{
line-height:16px;
height:16px;
font-size:11px;
}

a#topPageKaitekiselectLink,
a#topPageEposcaLink,
a#topPageHelloDreamLink{
display:block;
width:220px;
padding:6px 0 4px 0;
height:45px;
text-indent:-9999px;
overflow:hidden;
background-position:left 6px;
background-repeat:no-repeat;
border-top:1px solid #cccccc;
}

a#topPageHelloDreamLink{
height:98px;
background-image:url(/images/top/hd_kitty.jpg);
}
span#topPageHelloDreamComment{
font-size:11px;
}

a#topPageCosmicdiaryLink{
padding-top:4px;
border-bottom:1px solid #cccccc;
}
a#topPageCosmicdiaryLink img{
padding-top:4px;
padding-bottom:4px;
_padding-bottom:7px;
}

a#topPageKaitekiselectLink{
background-image:url(/images/top/bnr_kaitekiselect.jpg);
}

a#topPageEposcaLink{
background-image:url(/images/top/bnr_eposca.jpg);
}

p#sidebarLogo{
width:220px;
height:176px;
text-indent:-9999px;
overflow:hidden;
background-image:url(/images/common/sidebar_logo.jpg);
background-position:center top;
background-repeat:no-repeat;
}


#content{
margin:25px 0;
width:480px;
overflow:hidden;
float:left;
}

h1.pageTitle{
font-size:120%;
font-weight:bold;
margin-bottom:10px;
}

h2.contentsTitle{
margin:16px 0;
padding:0 4px 0 8px;
line-height:30px;
font-weight:bold;
color:#ffffff;
background-color:#c39e9d;
border-left:14px solid #ceb0af;
}

h3.contentsSubTitle{
margin:20px 0 8px 0;
padding:0 4px 0 8px;
line-height:24px;
font-weight:bold;
border-left:4px solid #cccccc;
}

h5.contentsSubTitle{
margin:8px 0 8px 0;
font-weight:bold;
}

h4.contentsCopy,
h6.contentsCopy{
margin:8px 0;
color:#c41616;
}

ul.contentsList,
ul.contentsExample{
margin:20px 0;
}

ul.contentsExample{
list-style-type:disc;
}

ul.contentsExample li{
display:inline;
margin-right:20px;
}


#footer{
position:static;
margin-top:15px;
padding-top:10px;
border-top:1px solid #9d9d9d;
clear:both;
}

#footerLinkFirst,
#footerLinkSecond{
text-align:center;
}

#footerLinkFirst li,
#footerLinkSecond li{
display:inline;
}

#footerLinkFirst li a,
#footerLinkSecond li a{
color:#666666;
}

#footerCopyright{
margin-top:10px;
text-align:center;
color:#666666;
}


#topPageInformation{
}

#topPageInformation h4#headlineTitle{
width:200px;
height:14px;
text-indent:-9999px;
overflow:hidden;
background-image:url(/images/top/information_title.gif);
background-position:left top;
background-repeat:no-repeat;
}

#topPageInformation dl{
margin-top:8px;
_margin-top:-16px;
}

#topPageInformation dl dt,
#topPageInformation dl dd{
display:block;
}

#topPageInformation dl dt{
width:6em;
float:left;
clear:both;
}

#topPageInformation dl dd{
width:390px;
float:left;
}

#topPageInformation dl dt{
color:#666666;
margin-right:10px;
}



div.contentsMainImage{
margin-bottom:20px;
}

a.toPageTop{
display:block;
margin:10px 0 20px 0;
width:120px;
overflow:hidden;
text-align:right;
line-height:100%;
float:right;
}



h1.companyCopy{
margin:0 0 20px 0;
font-weight:bold;
}

p.companyRead{
width:260px;
float:left;
}

#companyCeoImage{
width:186px;
float:right;
}

table.companyTable{
width:478px;
margin:20px 0 0 1px;
border-collapse:collapse;
border-top:1px solid #cccccc;
border-left:1px solid #cccccc;
}

table.companyTable th,
table.companyTable td{
padding:8px;
color:#565656;
border-right:1px solid #cccccc;
border-bottom:1px solid #cccccc;
vertical-align:top;
}

table.companyTable th{
background-color:#f3f3f3;
font-weight:bold;
text-align:left;
}


dl.hellodreamArea{
margin:20px 0 0 0;
}

dl.hellodreamArea dt{
display:block;
width:200px;
height:49px;
margin:0 10px 0 0;
float:left;
}

dl.hellodreamArea dd{
display:block;
width:300px;
padding-top:0.5em;
float:left;
}


div#externalLinks{
margin-bottom:10px;
padding-top:10px;
border-top:1px solid #cccccc;
border-bottom:1px solid #cccccc;
}

div.topPageFacebooks{
margin-top:70px;
width:100%;
overflow:hidden;
}

div.leftFacebook{
width:335px;
float:left;
}

div.rightFacebook{
width:335px;
float:right;
}


.clearfix:after{
    content:".";
    display:block;
    height:0;
    clear:both;
    visibility:hidden;
}
.clearfix{
    display:inline-block;
    min-height:1%;  /* for IE 7*/
}
/* Hides from IE-mac */
* html .clearfix { height: 1%; }
.clearfix { display: block; }
/* End hide from IE-mac */

#logoArea #gnav {
  display:none;
}

@media screen and (min-width: 0px) and (max-width: 750px) {
  body {
    background-image:none;
    font-size:24px;
  }
  #container {
    display:inline-flex;
    flex-wrap:wrap;
    background-image:none;
    width:100%;
    box-sizing:border-box;
    padding:0 10px;
  }
  #header {
    order:0;
    width:100%;
  }
  #header #logoArea #headerCopy {
    display:none;
  }
  #header #logoArea #headerName {
    margin-left:10px;
  }
  #header #logoArea #gnav {
    display:block;
  }
  #header #logoArea #gnav a.menu {
    position:absolute;
    right:10px;
    top:10px;
    display:block;
    width:46px;
    height:46px;
    z-index:1000;
  }
  #header #logoArea #gnav ul {
    display:none;
    position:absolute;
    top:0px;
    left:0px;
    width:100%;
    border-top:1px solid #cccccc;
    background-color:rgba(255,255,255,0.95);
    border-top:66px solid rgba(196,22,22,0.85);
    z-index:100;
    box-shadow:0 2px 12px 2px #aaaaaa;
  }
  #header #logoArea #gnav ul li a {
    display:block;
    padding:6px 10px 6px 24px;
    border-bottom:1px solid #cccccc;
  }
  #sidebar {
    order:20;
    width:100%;
  }
  #sidebar #sideNavigation {
    margin-top:30px;
    padding-top:10px;
    border-top:1px solid #cccccc;
  }
  #sidebar #sideNavigation dt a {
    background-image:none;
    text-indent:0;
    font-size:110%;
    font-weight:bold;
    width:100%;
    height:auto;
    line-height:1.5em;
  }
  #sidebar #sideNavigation dd a {
    display:block;
    width:100%;
    padding:10px 0 10px 10px;
  }
  #sidebar a#topPageHelloDreamLink {
    margin:0 auto;
  }
  #sidebar p#sidebarLogo {
    margin-left:auto;
    margin-right:auto;
  }
  #content {
    order:10;
    width:100%;
    display:inline-flex;
    flex-wrap:wrap;
  }
  #content div, #content p,
  #content h1, #content h2, #content h3, #content h4, #content h5, #content h6 {
    width:100%;
  }
  #content .contentsMainImage img {
    width:100%;
    height:auto;
  }
  #content #topPageInformation dd {
    margin-bottom:10px;
  }
  #content #companyCeoImage {
    order:10;
    float:none;
    width:100%;
    text-align:center;
    margin-bottom:20px;
  }
  #content p.companyRead {
    order: 20;
    float:none;
    width:100%;
  }
  #content form {
    width:100%;
    margin:0;
    padding:0;
  }
  #content table.companyTable {
    order:30;
    width:100%;
  }
  #content table.companyTable th,
  #content table.companyTable td {
    font-size:24px;
  }
  #content table#inquiry_table {
    margin-left:0;
    margin-right:0;
    width:100%;
    border:none;
    display:block;
  }
  #content table#inquiry_table th,
  #content table#inquiry_table td {
    border:1px solid #999999;
    margin-bottom:-1px;
    font-size:24px;
    display:block;
    width:77%;
  }
  #content table#inquiry_table td input,
  #content table#inquiry_table td textarea {
    max-width:60%;
  }
  #content table#inquiry_table span.guide {
    display:inline;
  }
  #content table#inquiry_table span.guide:before {
    content:"\A";
    white-space:pre;
  }
  #content .buttons input {
    width:auto;
  }
  #content a.toPageTop {
    width:100%;
  }
  #topPageBottomBannerArea {
    order:30;
  }
  #topPageBottomBannerArea .topPageFacebooks div {
    float:none;
    width:100%;
    margin-bottom:10px;
    text-align:center;
  }
  #topPageBottomBannerArea .topPageFacebooks iframe {
    width:100%;
  }
  #footer {
    order:40;
    width:100%;
  }

  #content h1 {
    display:block;
    width:100%;
    text-align:center;
  }
  #topPageInformation dl dt,
  #topPageInformation dl dd {
    display:inline;
    width:auto;
  }
  #headerNavi {
    display:none;
  }
  #headerSubNavi {
    display:none;
  }
}