@charset "UTF-8";

/*

clear
=======================================================================================
 */
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, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-size: 100%;
    font-style: normal;
    font-weight: normal;
    vertical-align: baseline;
    background: transparent;
  }

/*
######################################################################################

共通部品

######################################################################################
*/
/*
MainColor
#005bab

SubColor
#7dccf3

SubColor2
#ccebfa

 */
.ColorMain{
  color:#005bab;
}
.ColorSub{
  color:#7dccf3;
}
.ColorText{
  color:#666;
}
.fos9{ font-size:9px;}
.fos10{ font-size:10px;}
.fos11{ font-size:11px;}
.fos12{ font-size:12px;}
.fos13{ font-size:13px;}
.fos14{ font-size:14px;}
.fos15{ font-size:15px;}
.fos16{ font-size:16px;}
.fos17{ font-size:17px;}
.fos18{ font-size:18px;}
.fos19{ font-size:19px;}
.fos20{ font-size:20px;}
.fos21{ font-size:21px;}
.fos22{ font-size:22px;}
.fos23{ font-size:23px;}
.fos24{ font-size:24px;}
.fos25{ font-size:25px;}
.fos26{ font-size:26px;}
.fos27{ font-size:27px;}
.fos28{ font-size:28px;}
.fos29{ font-size:29px;}
.fos30{ font-size:30px;}
.fos35{ font-size:35px;}
.fos40{ font-size:40px;}
.fos45{ font-size:45px;}
.fos50{ font-size:50px;}

.fow-nrm{font-weight: normal;}
.fow-bld{font-weight: bold;}

.ta-left{text-align: left;}
.ta-center{text-align: center}
.ta-right{text-align: right;}
/*

spacer
=======================================================================================
 */
.mg-btm-5{margin-bottom:5px;}
.mg-btm-10{margin-bottom:10px;}
.mg-btm-15{margin-bottom:15px;}
.mg-btm-20{margin-bottom:20px;}
.mg-btm-25{margin-bottom:25px;}
.mg-btm-30{margin-bottom:30px;}
.mg-btm-35{margin-bottom:35px;}
.mg-btm-40{margin-bottom:40px;}
.mg-btm-45{margin-bottom:45px;}
.mg-btm-50{margin-bottom:50px;}
.mg-btm-55{margin-bottom:55px;}
.mg-btm-60{margin-bottom:60px;}

.mg-top-5{margin-top:5px;}
.mg-top-10{margin-top:10px;}
.mg-top-15{margin-top:15px;}
.mg-top-20{margin-top:20px;}
.mg-top-25{margin-top:25px;}
.mg-top-30{margin-top:30px;}

/*

google map
=======================================================================================
 */

.map-size{
  width: 664px;
  height: 234px;
}
@media only screen and (max-width: 800px){
.map-size{
  width: 100%;
  height: 150px150px150px150px150px150px150px150px150px;
}
}
/*

link
=======================================================================================
 */
#Wrapper a img:hover{
  opacity:0.5;
}

.btn-common{
max-width:335px;
}
@media only screen and (max-width: 800px){
.btn-common{
max-width:100%;
}
}
/*

header
=======================================================================================
 */
body{
font-family:  sans-serif, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka;

}
#HeadNav{
  display:block;
  max-width:1000px;
  min-height:70px;
  margin-left:auto;
  margin-right:auto;
  padding:30px 2px 10px 15px;
  overflow:hidden;
}
#HeadNav h1{
  float:left;
}
      #HeadNav #menu {
        float:right;
        /*width:664px;*/
        list-style:none;
        display:block;
        overflow:hidden;
        padding:45px 0px 0px 0px;
      }
          #HeadNav #menu li {
            float:left;
            width:132px;
            font-size:14px;
            text-align:center;
          }
          #HeadNav #menu li a{
            text-decoration:none;
          }
          #HeadNav #menu li a:link,
          #HeadNav #menu li a:visited
          {
            color:#7dccf3;
            text-decoration:none;
          }
          #HeadNav #menu li a:hover{
            color:#005bab;
            font-weight:bold;
          }











@media only screen and (max-width: 800px){
#HeadNav{
  display:block;
  max-width:1000px;
  min-height:120px;
  margin-left:auto;
  margin-right:auto;
  padding:30px 2px 10px 15px;
}
#HeadNav h1{
  float:none;
}
      #HeadNav #menu {
        max-width:664px;
        list-style:none;
        display:block;
        overflow:hidden;
        padding:20px 0px 0px 0px;
        float:none;
      }
          #HeadNav #menu li {
            width:auto;
            font-size:14px;
            text-align:center;
            margin:0px 20px 10px 0px;
            display:inline-block;
          }
          #HeadNav #menu li a{
            text-decoration:none;
          }
          #HeadNav #menu li a:link,
          #HeadNav #menu li a:visited
          {
            color:#7dccf3;
            text-decoration:none;
          }
          #HeadNav #menu li a:hover{
            color:#005bab;
            font-weight:bold;
          }
}
/*

2ndPageNavi
=======================================================================================
 */
#HeadTitle{
  width:100%;
display:block;
background:#ccebfa url('../images/2ndTitle.png') no-repeat center;
}
#HeadTitle h2{
  max-width:1000px;
  min-height:64px;
  font-size:40px;
  margin: 0px auto 0px auto;
  padding:42px 0px 0px 15px;
  color:#005bab;
}
#PageNavi{
  width:100%;
  margin: 0px auto 0px auto;
}
#PageNavi .JumpNavi{
  max-width:980px;
  min-height:50px;
  line-height:3.5;
  margin: 0px auto 0px auto;
  padding:0px 0px 0px 20px;
}
#PageNavi .JumpNavi li{
  list-style:none;
  display:inline-block;
  font-size: 15px;
  margin:0px 20px 0px 0px;
}
      #PageNavi .JumpNavi li a:link,
      #PageNavi .JumpNavi li a:visited
      {
        text-decoration:none;
        color:#999;
      }
      #PageNavi .JumpNavi li a:hover
      {
        color:#333;
      }

#PageNavi .BreadCrumb{
  border-top:2px solid #efefef;
  width:100%;
}
#PageNavi .BreadCrumb ul{
  max-width:980px;
  height:100px;
  margin: 0px auto 0px auto;
  padding:0px 0px 0px 20px;
}
#PageNavi .BreadCrumb li{
  list-style:none;
  display:inline-block;
  color:#ccc;
  line-height:3.5;
  font-size: 15px;
}
      #PageNavi .BreadCrumb li:not(:last-child):after{
        content:">";
        margin:0px 0px 0px 10px;
        color:#ccc;
      }
      #PageNavi .BreadCrumb li a:link,
      #PageNavi .BreadCrumb li a:visited
      {
        text-decoration:none;
        color:#ccc;
      }
      #PageNavi .BreadCrumb li a:hover
      {
        color:#999;
      }
@media only screen and (max-width: 800px){
#HeadTitle{
  width:100%;
  display:block;
  background:#ccebfa url('../images/2ndTitle.png') no-repeat right;
  background-size:cover;
}
}
/*

PageContainer
=======================================================================================
 */
#PageContainer{
  display:block;
  width:100%;
}
#PageContainer #Wrapper{
max-width:980px;
margin:0px auto 50px auto;
padding:0px 0px 0px 20px;
}
#PageContainer #Wrapper h3{
  max-width:980px;
  font-size:30px;
  color:#005bab;
  margin:0px 0px 20px 0px;
}
#PageContainer #Wrapper p{
  padding:0px 0px 20px 0px;
}
@media only screen and (max-width: 800px){
#PageContainer{
}
#PageContainer #Wrapper{
max-width:980px;
padding:0px 20px 0px 20px;
}
#PageContainer #Wrapper h3{
}
#PageContainer #Wrapper p{
}
}

/*

footer
=======================================================================================
 */
#Footer{
  max-width:670px;
  margin:0px auto 200px auto;
  text-align:center;
}
#FooterShopLink{
  display:block;
  margin:0px 0px 50px 0px;
  padding:0px 20px 20px 20px;
  background:url('../images/NetShopLinkBG.png');
  background-position:top;
  background-repeat:repeat-x;
}
#FooterShopLink .title{
  display:block;
  max-width:100%;
  margin:0px auto 20px auto;
}
#FooterShopLink ul{
  max-width:1000px;
  display:block;
  margin:0px auto 0px auto;
  overflow:hidden;
  text-align:center;
}
#FooterShopLink ul li{
  display:inline-block;
  list-style:none;
  margin:0px 0px 10px 10px;
}
#FooterShopLink ul li img{
width:100%;
}
#FooterMenu{
  max-width:670px;
  overflow:hidden;
  text-align:center;
  margin:0px 0px 50px 0px;
}
#FooterMenu li{
  font-size:12px;
  display:inline-block;
  list-style:none;
}
#FooterMenu li a{
  text-decoration:none;
}
#FooterMenu li a:link,
#FooterMenu li a:visited
{
  color:#666;
}
#FooterMenu li a:hover{
  color:#333;
}
#FooterMenu li:not(:last-child):after{
  content:"｜";
  margin:0px 0px 0px 10px;
}
#FooterAddress{
  font-size:12px;
  color:#666;
  margin:0px 0px 0px 10px;
}
#FooterAddress a{
  text-decoration:none;
}
#FooterAddress a:link,
#FooterAddress a:visited
{
  color:#666;
}
#FooterAddress a:hover{
  color:#333;
}
#FooterCopyright{
  font-size:12px;
  color:#666;
  margin:0px 0px 30px 0px;
}

/*

PageTopButton
=======================================================================================
 */
p.gotop{
    position: fixed;
    right: 4%;
        bottom: 50px;
}
p.gotop a,
p.gotop a img{
    width: 125px;
    display: block;
}
p.gotop a span{
  position:absolute;
  margin: 42px 0px 0px 43px;
  font-size: 12px;
  color:#fff;
  font-weight:bold;
}


/*
######################################################################################

トップページ

######################################################################################
*/


/*

TopPage > TopImage
=======================================================================================
 */
#TopImage{
  width:100%;
  /* 背景画像使用時
  background:url('../images/demo_office02.jpg') no-repeat center;
  background-size:cover;
  display:block;
  */
  height:570px;
  overflow:hidden;
  margin:0px 0px 0px 0px;
}
#TopImage .TopSlider .Img1,
#TopImage .TopSlider .Img2,
#TopImage .TopSlider .Img3,
#TopImage .TopSlider .Img4,
#TopImage .TopSlider .Img5,
#TopImage .TopSlider .Img6
{
  width:100%;
  height:570px;
  background-size:cover;
  background-repeat:no-repeat;
  background-position:center;
  display:block;
}
#TopImage .TopSlider .Img1{background-image:url('../images/ImageTop01.jpg');}
#TopImage .TopSlider .Img2{background-image:url('../images/ImageTop02.jpg');}
#TopImage .TopSlider .Img3{background-image:url('../images/ImageTop03.jpg');}
#TopImage .TopSlider .Img4{background-image:url('../images/ImageTop04.jpg');}
#TopImage .TopSlider .Img5{background-image:url('../images/ImageTop05.jpg');}
#TopImage .TopSlider .Img6{background-image:url('../images/ImageTop06.jpg');}

@media only screen and (max-width: 800px){

#TopImage{
  width:100%;
  /* 背景画像使用時
  background:url('../images/demo_office02.jpg') no-repeat center;
  background-size:cover;
  display:block;
  */
  height:250px;
  overflow:hidden;
  margin:0px 0px 0px 0px;
}
#TopImage .TopSlider .Img1,
#TopImage .TopSlider .Img2,
#TopImage .TopSlider .Img3,
#TopImage .TopSlider .Img4
{
  width:100%;
  height:350px;
  background-size:cover;
  background-repeat:no-repeat;
  background-position:center;
  display:block;
}
}

/*

TopPage > News
=======================================================================================
 */
#News{
  display:block;
  clear:both;
}
#News .BgOuter{
  width:100%;
  background:url('../images/Kbubble.png') no-repeat;
  background-position:top -45px left 20%;
  background-size:170px;
}
#News .BgInner{
  width:100%;
  background:url('../images/Kbubble.png') no-repeat;
  background-position:bottom 0px right 20%;
  padding:0px 0px 100px 0px;
  background-size:170px;
}
#News .NewsBody{
  max-width:670px;
  margin:0px auto 100px auto;
  padding:50px 0px 0px 0px;
}
#News h2{
  font-size:30px;
  color:#005bab;
  margin:0px auto 20px auto;
  text-align:center;
}
#News .NewsDate{
  font-size:14px;
  font-weight:bold;
  text-align:center;
}
#News .NewsTitle{
  font-size:12px;
  font-weight:normal;
  text-align:center;
  margin:0px 0px 20px 0px;
}
@media only screen and (max-width: 800px){
  #News{
  padding:0px 20px 0px 20px;
  }
#News .BgOuter{
  background-size:100px;
}
#News .BgInner{
  background-size:100px;
}
}
/*
######################################################################################

会社概要

######################################################################################
*/
.DataTable{}
.DataTable table{
  border-collapse: collapse;
  width:100%;
  border:none;
  margin:0px auto 100px auto;
}
.DataTable tr{
}
.DataTable th{
  width:145px;
  font-size: 12px;
  font-weight:bold;
  text-align:left;
  color:#333;
  border-bottom:1px solid #efefef;
  padding:10px 10px 10px 0px;
}
.DataTable td{
  font-size: 12px;
  text-align:left;
  color: #666;
  border-bottom:1px solid #efefef;
  padding:10px 10px 10px 0px;
}
#PageContainer #Wrapper .DataTable table p,
#PageContainer #Wrapper .DataTable table p{
  padding:0px 0px 0px 0px;
}

.DataTable a{
  text-decoration:none;
}
.DataTable a:link,
.DataTable a:visited
{
  color:#666;
}
.DataTable a:hover{
  color:#333;
}
@media only screen and (max-width: 800px){
    .DataTable{}
    .DataTable table{
      border-collapse: collapse;
      max-width:100%;
      border:none;
      margin:0px auto 100px auto;
    }
    .DataTable tr{
    }
    .DataTable th{
      width:100%;
      max-width:100%;
      display:block;
      border:none;
      background:#efefef;
      text-align:center;
    }
    .DataTable td{
      width:100%;
      max-width:100%;
      display:block;
      border:none;
      text-align:center;
    }
    #PageContainer #Wrapper .DataTable table p,
    #PageContainer #Wrapper .DataTable table p{
      padding:0px 0px 0px 0px;
    }
}
/*
######################################################################################

お問い合わせ

######################################################################################
*/
#mailformpro{
  border:1px solid #ccebfa;
  max-width:957px;
  padding:20px 0px 20px 0px;
  margin:0px 0px 50px 0px;
  text-align:center;
}
#mailformpro dl{
  width:665px;
  margin:0px auto 0px auto;
  text-align:left;
  overflow:hidden;
}
#mailformpro dt{
  font-size: 12px;
  color:#333;
  font-weight: bold;
}
#mailformpro dd{
display:block;
overflow:hidden;
}
#mailformpro dd input{
  width:100%;
  height:30px;
  border:1px solid #a8ddf7;
  margin:0px 0px 20px 0px;
  padding:3px;
  box-sizing:border-box;
}
#mailformpro dd textarea{
  width:98%;
  height:140px;
  border:1px solid #a8ddf7;
  padding:3px;
}
#mailformpro .required{
  color:#f00;
}

.btn-privacy{
max-width:335px;
}

.btn-privacy:hover,
.btn-submit:hover,
.btn-reset:hover{
  cursor:pointer;
  opacity:0.5;
}
.btn-submit{
  border:none;
  width:335px;
  height:50px;
  background:url('../images/submit.png') no-repeat left top;
}
.btn-reset{
  border:none;
  width:335px;
  height:50px;
  background:url('../images/reset.png') no-repeat left top;
}
@media only screen and (max-width: 800px){
#mailformpro{
}
#mailformpro dl{
  width:100%;
  padding: 0px 10px 0px 10px;
}
#mailformpro dt{
}
#mailformpro dd input,
#mailformpro dd textarea
{
  width:88%;
}
#mailformpro .required{
}
.btn-privacy{
max-width:100%;
}

}
/*
######################################################################################

事業内容

######################################################################################
*/
/*
#PageContainer #Wrapper p.btn{
  overflow:hidden;
  clear:both;
  display:block;
  margin:0px 0px 30px 0px;
}
#PageContainer #Wrapper p.btn span.btntxt{
  font-size: 12px;
  float:left;
  max-width:500px;
  margin:0px 0px 20px 20px;
}
#PageContainer #Wrapper p.btn a:link,
#PageContainer #Wrapper p.btn a:visited
{
  color:#333;
}
#PageContainer #Wrapper p.btn a:hover{
  color:#999;
}
#PageContainer #Wrapper p.btn img{
  float:left;
  border:1px solid #333;
  display:block;
  width:400px;
}

@media only screen and (max-width: 800px){
#PageContainer #Wrapper p.btn{
  width:100%;
  max-width:400px;
  margin:0px auto 30px auto;
  padding:2px;
}
#PageContainer #Wrapper p.btn a{
  float:none;
}
#PageContainer #Wrapper p.btn img{
  float:none;
  display:inline-block;
  width:100%;
}
#PageContainer #Wrapper p.btn span.btntxt{
  float:none;
  display:inline-block;
  margin:0px auto 20px auto;
}
}*/

/*
ShopList
*/
#Wrapper a img:hover{
  opacity:1;
}
#Wrapper a.sl-body
{
  display:block;
  position:relative;
  overflow:hidden;
  border:2px solid #ccebfa;
  max-width:976px;
  min-height:300px;
  font-size:14px;
  text-decoration:none;
  color:#333;
  margin:0px 20px 25px 0px;
}
#Wrapper .sl-body .Simage{
  border:1px solid #999;
    position:absolute;
    z-index:-999;
    width: 450px;
    margin: 40px 0px 0px 450px;
    opacity: 0.6;
}
#Wrapper .sl-body .Stitle{
  position:absolute;
  margin:20px 0px 0px 20px;
  display:block;
  max-width:320px;
}
#Wrapper .sl-body .Stext{
  max-width:600px;
  padding:10px;
  background:rgba(255,255,255,0.8);
  position:absolute;
  margin:140px 0px 0px 40px;
  display:block;
}

@media only screen and (max-width: 800px){
#Wrapper a.sl-body
{
  display:block;
  position:relative;
  overflow:hidden;
  border:2px solid #ccebfa;
  max-width:976px;
  height:500px;
  font-size:14px;
  text-decoration:none;
  color:#333;
  margin:0px 20px 25px 0px;
  text-align:center;
  padding:20px;
}
#Wrapper .sl-body .Simage{
  border:1px solid #999;
    position:static;
    z-index:auto;
    max-width: 100%;
    margin: 10px 0px 0px 0px;
    opacity: 1;
}
#Wrapper .sl-body .Stitle{
  position:static;
  margin:20px 0px 0px 0px;
  display:inline-block;
  max-width:100%;
}
#Wrapper .sl-body .Stext{
  max-width:600px;
  padding:10px;
  background:rgba(255,255,255,0.8);
  position:static;
  margin:10px 0px 20px 0px;
  display:block;
}
}



/*
######################################################################################

採用情報

######################################################################################
*/
.req_DataTable{
  max-width:960px;
  margin:0px auto 50px auto;
  padding:20px 20px 50px 20px;
  border:1px solid #CCEBFA;
}
.req_DataTable p.discription{
  max-width:660px;
  margin: 0px auto 50px auto;
}
.req_DataTable table{
  border-collapse: collapse;
  max-width:660px;
  border:none;
  margin:0px auto 100px auto;
}
.req_DataTable tr{
}
.req_DataTable th{
  width:145px;
  font-size: 12px;
  font-weight:bold;
  text-align:left;
  color:#333;
  border-bottom:1px solid #efefef;
  padding:10px 10px 10px 0px;
}
.req_DataTable td{
  font-size: 12px;
  text-align:left;
  color: #666;
  border-bottom:1px solid #efefef;
  padding:10px 10px 10px 0px;
}
#PageContainer #Wrapper .req_DataTable table p,
#PageContainer #Wrapper .req_DataTable table p{
  padding:0px 0px 0px 0px;
}
.req_DataTable .req_btn{
max-width:335px;
}
@media only screen and (max-width: 800px){
    .req_DataTable{}
    .req_DataTable table{
      border-collapse: collapse;
      max-width:100%;
      width:100%;
      border:none;
      margin:0px auto 100px auto;
    }
    .req_DataTable tr{
    }
    .req_DataTable th{
      width:100%;
      max-width:100%;
      display:block;
      border:none;
      background:#efefef;
      text-align:left;
      padding: 10px 0px 10px 10px;
    }
    .req_DataTable td{
      width:100%;
      max-width:100%;
      display:block;
      border:none;
      text-align:left;
      padding: 10px 0px 10px 10px;
    }
    #PageContainer #Wrapper .req_DataTable table p,
    #PageContainer #Wrapper .req_DataTable table p{
      padding:0px 0px 0px 0px;
    }
.req_DataTable .req_btn{
  width:100%;
}
}
/*
######################################################################################

個人情報保護方針

######################################################################################
*/
#Privacy{
  padding:15px;
  color:#333;
}
#Privacy a:link,
#Privacy a:visited
{
  text-decoration:none;
  color:#333;
}
#Privacy a:hover
{
  color:#999;
}
#Privacy h2{
  font-size: 14px;
  font-weight: bold;
}
#Privacy h3{
  font-size: 12px;
  font-weight: bold;
}
#Privacy p{
  font-size: 12px;
  margin:0px 0px 20px 0px;
}