@charset "utf-8";
/**
 * style
 * (c) FOURDIGIT Inc.
 *
 * 1. import
 * 2. html, body
 * 3. HTMLtag, siteCommonClass
 * 4. Layout
 * 5. EachPageStyle
 *
 */
/**
 * 1. import
 */
@import "import/reset.css";
@import "import/util.css";
@import "../ext_ci/ci.css";

/**
 * 2. html, body
 */
body {
  background: url(../imgs/bg-body_2.gif) repeat;
}

.page {
  color: #333333;
  font-size: 14px;
  line-height: 1.5;
  letter-spacing: 0.1em;
  font-family: 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', 'メイリオ', Meiryo, 'ＭＳ Ｐゴシック', sans-serif;
}

/**
 * 3. HTMLtag, siteCommonClass
 */
/* anchor */
a {
  background-color: transparent;
  background-image: none;
  background-repeat: no-repeat;
  color: #0000ff;
  text-decoration: underline;
}

a:visited {}

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

a:active {}

/* heading */
.siteTitle {
  /*dont use <h1> selector*/
}

.contentTitle {
  /*dont use <h2> selector*/
}

/* cap */
.cap,
.caption {
  width: 85%;
  margin: 0 auto;
  background: none;
  color: #6f6f6f;
  font-size: 11px;
  line-height: 15px;
}

.cap {
  padding-top: 5px;
}

/* Responsive */

img {
  max-width: 100%;
  /* height: auto; */
  vertical-align: bottom;
}

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

  .img,
  .img img {
    width: 100% !important;
  }
}

.wrap {
  position: relative;
  width: 960px;
  margin-right: auto;
  margin-left: auto;
}

.wrapper {
  position: relative;
  width: 960px;
  margin-right: auto;
  margin-left: auto;
}

@media only screen and (max-width:960px) {
  .wrap {
    width: auto;
    padding-left: 10px;
    padding-right: 10px;
  }

  .wrapper {
    width: auto;
  }
}

.imgBox {}

@media only screen and (max-width: 640px) {
  .imgBox div {
    float: none !important;
    width: auto !important;
    margin-left: 0px !important;
    margin-right: 0px !important;
  }
}

.w960 {
  display: block;
}

.w768 {
  display: none;
}

.w640 {
  display: none;
}

@media only screen and (max-width: 768px) {
  .w768 {
    display: block;
  }
}

@media only screen and (max-width: 640px) {
  .w960 {
    display: none;
  }

  .w640 {
    display: block;
  }

}




/**
 * 4. Layout
 */
body #container {
  margin-right: auto;
  margin-left: auto;
  background-color: transparent;
  background-image: url(../imgs/space.gif);
  background-repeat: repeat-y;
  background-position: center top;
  text-align: left;
}


/* heading */
.siteTitle {
  float: left;
  padding-top: 5px;
  padding-bottom: 5px;
  padding-right: 17px;
}

@media only screen and (max-width: 960px) {
  .siteTitle {
    border-right: none;
  }
}

@media only screen and (max-width: 640px) {
  .siteTitle {
    float: none !important;
    padding-top: 10px;
    padding-bottom: 10px;
  }
}

@media only screen and (max-width: 320px) {
  .siteTitle img {
    width: 60%;
  }
}

.shldrTxt {
  float: left;
  margin-left: 10px;
  line-height: 15px;
  font-size: 10px;
  color: #000;
  padding-left: 17px;
  border-left: 1px solid #494949;
}

@media only screen and (max-width: 960px) {
  body .shldrTxt {
    display: none;
  }
}


/* gHeader */
body #gHeader {
  /*--background:url(../imgs/bg-contents.gif) repeat;--*/
  width: 100%;
  z-index: 100;
  padding-top: 10px;
  background-color: #fff;
}

body #gHeader .wrap {
  margin-bottom: 10px;
}

body #gHeader #wrapTtl {
  /*width: 440px;
		margin: 0 auto;*/
}

@media only screen and (max-width: 960px) {
  body #gHeader {
    overflow: hidden;
  }
}

@media only screen and (max-width: 640px) {
  body #gHeader {
    padding-top: 0px;
  }

  body #gHeader .wrap {
    border-bottom: 1px solid #ccc;
    margin-bottom: 0px;
  }

  body #gHeader #wrapTtl {
    /*width: 100%;*/
  }
}


/* hNav */
#hNav {
  position: absolute;
  top: 0;
  right: 0px;
}

#hNav p {
  display: block;
}

#hNav p.reserve,
#hNav p.request {
  float: left;
}

#hNav p.reserve {
  margin-right: 10px;
}

@media only screen and (max-width: 960px) {
  #hNav {
    right: 10px;
  }
}

@media only screen and (max-width: 640px) {
  #hNav {
    display: none;
  }
}



#hNavSub {
  float: left;
  margin-top: 5px;
  margin-right: 10px;
}

#hNavSub p {
  padding: 10px 0 0 0;
}

@media only screen and (max-width: 768px) {
  #hNavSub {}

  #hNavSub p {
    display: block !important;
  }
}

@media only screen and (max-width: 640px) {
  #hNavSub {
    position: absolute;
    top: -90px;
    right: 0px;
    margin-top: 10px;
    margin-right: 0px;
  }

  #hNavSub p {
    width: auto !important;
  }
}


/* spNav */
#spNav {
  display: none;
  position: absolute;
  top: 0;
  right: 0;
  -webkit-transition: all 0.5s ease;
  transition: all 0.5s ease;
}

#spNav li {
  cursor: pointer;
  float: left;
  border-left: 1px solid #ccc;
  height: 80px;
  width: 60px;
  text-align: center;
  padding-top: 10px;
}

#spNav li:active {
  opacity: 0.5;
}

@media only screen and (max-width: 640px) {
  #spNav {
    display: block;
  }
}

/* gNav */
#gNav {
  position: relative;
  background: url(../imgs/bg-nav.png) repeat;
  border-bottom: 1px solid #a39572;
  z-index: 9999;
}

body #gNav .wrap {
  margin-bottom: 0px;
}

#gNav ul {
  background: url(../imgs/bg-nav_line.png) repeat-y top left;
}

#gNav li,
#gNav li.off {
  position: relative;
  z-index: 10;
  float: left;
  /* width: 14.28%; */
  width: 12.5%;
  text-align: center;
  vertical-align: bottom;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  background: url(../imgs/bg-nav_line.png) no-repeat right;
  height: 60px;
}

#gNav li.off {
  opacity: 0.5;
  pointer-events: none;
}

#gNav li .New {
  position: absolute;
  top: 3px;
  right: 1px;
  text-align: right;
}

#gNav li a,
#gNav li span,
#gNav li strong {
  display: block;
  width: 100%;
  padding: 17px 0 10px;
  height: 33px;
}

#gNav li a:hover,
#gNav li strong {
  background: url(../imgs/bg-nav_ov.png) no-repeat;
  background-size: 100% 100%;
}

#gNav li.off a:hover,
#gNav li.off strong {
  background: url(../imgs/bg-nav_line.png) no-repeat right;
}

#gNav li a span {
  padding: 0;
}

#gNav li a img {
  filter: alpha(opacity=0);
  -moz-opacity: 0;
  opacity: 0;
}

#gNav li.top a span {
  background: url(../../imgs/nav-top.png) no-repeat center center;
}

#gNav li.top a:hover span {
  background: url(../../imgs/nav-top_ov.png) no-repeat center center;
}

#gNav li.concept a span {
  background: url(../../imgs/nav-concept.png) no-repeat center center;
}

#gNav li.concept a:hover span {
  background: url(../../imgs/nav-concept_ov.png) no-repeat center center;
}

#gNav li.service a span {
  background: url(../../imgs/nav-service.png) no-repeat center center;
}

#gNav li.service a:hover span {
  background: url(../../imgs/nav-service_ov.png) no-repeat center center;
}

#gNav li.plan01 a span {
  background: url(../../imgs/nav-plan01.png) no-repeat center center;
}

#gNav li.plan01 a:hover span {
  background: url(../../imgs/nav-plan01_ov.png) no-repeat center center;
}

#gNav li.plan02 a span {
  background: url(../../imgs/nav-plan02.png) no-repeat center center;
}

#gNav li.plan02 a:hover span {
  background: url(../../imgs/nav-plan02_ov.png) no-repeat center center;
}

#gNav li.share a span {
  background: url(../../imgs/nav-share.png) no-repeat center center;
}

#gNav li.share a:hover span {
  background: url(../../imgs/nav-share_ov.png) no-repeat center center;
}

#gNav li.equipment a span {
  background: url(../../imgs/nav-equipment.png) no-repeat center center;
}

#gNav li.equipment a:hover span {
  background: url(../../imgs/nav-equipment_ov.png) no-repeat center center;
}

#gNav li.location a span {
  background: url(../../imgs/nav-location.png) no-repeat center center;
}

#gNav li.location a:hover span {
  background: url(../../imgs/nav-location_ov.png) no-repeat center center;
}




#gNav li.staff,
#gNav li.outline,
#gNav li.map,
#gNav li.request,
#gNav li.reserve {
  display: none;
}

#gNav li span.new {
  padding: 0;
  position: absolute;
  top: 1px;
  right: 0px;
  width: 28px;
  height: 9px;
  z-index: 1000;
}

@media only screen and (max-width: 960px) {
  #gNav .wrap {
    padding-right: 0px !important;
    padding-left: 0px !important;
  }

}

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

  #gNav li,
  #gNav li.off {
    width: 25%;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
    transition: all 0.3s ease;

  }
}

@media only screen and (max-width: 640px) {
  #gNav {
    display: none;
  }

  #gNav>.wrap {
    padding-right: 0;
    padding-left: 0;
  }

  #gNav ul {
    margin-left: 0;
  }

  #gNav li,
  #gNav li.off {
    float: none;
    margin-left: 0;
    width: 100% !important;
    border-top: 1px solid #B06E6E;
    text-align: center;
    text-indent: 0;
  }

  #gNav li.outline,
  #gNav li.map,
  #gNav li.request,
  #gNav li.reserve {
    display: block;
  }

  #gNav li.outline a,
  #gNav li.map a,
  #gNav li.map strong,
  #gNav li.request a,
  #gNav li.reserve a {
    padding: 20px 0 6px;
    height: 33px;
  }

  #gNav li a,
  #gNav li strong {
    font-family: "ＭＳ Ｐ明朝", "MS PMincho", "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", serif;
    color: #000;
    text-decoration: none;
  }

  #gNav li.request a {
    background-color: #E06022;
  }

  #gNav li.request a:hover {
    background: #FA8952;
  }

  #gNav li.reserve a {
    background-color: #bfa300;
  }

  #gNav li.reserve a:hover {
    background: #cfbc00;
  }
}


/* close */
#closeBtn {
  display: none;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  width: 100%;
  height: 50px;
  padding-top: 15px;
  border-bottom: 1px solid #cfd9df;
  text-align: center;
  cursor: pointer;
  -webkit-transition: all 0.5s ease;
  transition: all 0.5s ease;
  background-color: #FFF;
}

#closeBtn span {
  color: #fff;
  font-size: 18px;
  line-height: 1.0;
}

#closeBtn:hover,
#closeBtn:active {
  color: #CA0000;
}

@media only screen and (max-width: 640px) {
  #closeBtn {
    display: block;
  }
}

/* ftrNav */
#ftrNav {
  margin-top: 30px;
  text-align: center;
}

#ftrNav li {
  display: inline-block;
  margin-right: 0.7em;
  padding-right: 0.7em;
  border-right: solid 1px #bab4ab;
  font-size: 10px;
  line-height: 1.2;
  color: #bab4ab;
}

#ftrNav li.off {
  opacity: 0.5;
  pointer-events: none;
}

#ftrNav li.last {
  margin-right: 0;
  padding-right: 0;
  border-right: none;
}

#ftrNav li strong {
  font-weight: normal;
}

#ftrNav li a {
  color: #bab4ab;
}

#ftrNav li.offTxt {
  color: #ccc;
}

@media only screen and (max-width: 768px) {
  #ftrNav {
    background: #fff;
    border-top: solid 1px #bab4ab;
    text-align: left;
  }

  #ftrNav li {
    display: inline-block;
    width: 50%;
    margin-right: 0;
    border-right: none;
    border-bottom: solid 1px #bab4ab;
    text-align: center;

    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -o-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
  }

  #ftrNav .plan {
    padding-bottom: 15px;
  }

  #ftrNav li a,
  #ftrNav li strong,
  #ftrNav li span {
    display: block;
    padding: 15px 0;
  }

  #ftrNav li:nth-child(2n+1) {
    border-right: solid 1px #bab4ab;
  }

  #ftrNav li.last {
    border-right: solid 1px #bab4ab;
  }
}



/* pagetop */
#pagetop {
  text-align: right;
  padding-bottom: 10px;
}

#pagetopArea {
  margin-top: 20px;
  background: url(../imgs/bg-pagetop.png) repeat;
  text-align: center;
  border-bottom: solid 1px #c3c3c3;
}

#pagetopArea a {
  display: block;
}

@media only screen and (max-width: 768px) {
  #pagetopArea {
    margin-top: 0;
  }
}


/* fNav */
#fNav {
  position: relative;
  background: url(../imgs/bg-fnav.jpg) repeat;
  border-top: 3px solid #8f6c00;
  border-bottom: 3px solid #8f6c00;
}

#fNav ul {
  background: url(../imgs/bg-fnav_line.png) repeat-y top left;
}

#fNav li {
  position: relative;
  z-index: 10;
  float: left;
  width: 14.28%;
  text-align: center;
  vertical-align: bottom;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  background: url(../imgs/bg-nav_line.png) no-repeat right;
  height: 42px;

}

#fNav li a,
#fNav li span,
#fNav li strong {
  display: block;
  width: 100%;
  height: 29px;
  padding: 7px 0 6px;
}

#fNav li a:hover,
#fNav li strong {
  background: url(../imgs/bg-fnav_ov.png) no-repeat bottom;
  background-size: 100% 100%;
}

#fNav li span.new {
  padding: 0;
  position: absolute;
  top: 1px;
  right: 0px;
  width: 28px;
  height: 9px;
  z-index: 1000;
}

@media only screen and (max-width: 960px) {
  #fNav .wrap {
    padding-right: 0px !important;
    padding-left: 0px !important;
  }
}

@media only screen and (max-width: 768px) {
  #fNav li {
    width: 20%;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
    transition: all 0.3s ease;
  }
}

@media only screen and (max-width: 480px) {
  #fNav li {
    width: 33.333%;
  }

  #ftrNav li.offTxt {
    /*padding: 15px 0;*/
  }
}




/* fContact */
#gFooter .Inner {
  padding-top: 20px;
  border-bottom: 2px solid #d9d9d9;
  background-color: #FFF;

}

#fContact {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  padding: 0px;
  letter-spacing: -.4em;
  -webkit-transition: all 0.5s ease;
  transition: all 0.5s ease;
  position: relative;
  overflow: hidden;
  padding-bottom: 20px;

}

#fContact .tel,
#fContact .txt {
  display: inline-block;
  *display: inline;
  *zoom: 1;
  /* vertical-align: middle; */
  /* letter-spacing: normal; */
  text-align: left;
  vertical-align: middle;
  margin-top: 0px;
  /* padding-top: 10px; */
}

#fContact .tel {
  margin-right: 10px;
  pointer-events: none;
}

#fContact .time {
  /* float: left; */
}

#fContact .mail {
  /* margin-top: 7px; */
  position: relative;
  top: -18px;
  left: 200px;
}

#sm {
  display: none;
}

@media only screen and (max-width: 768px) {
  #fContact {
    padding: 18px 0;
    text-align: center;
  }

  #sm {
    display: block;
  }

  #pc {
    display: none;
  }
}

@media only screen and (max-width: 640px) {
  #fContact {
    overflow: inherit;
    position: relative;
  }

  #fContact .tel,
  #fContact .txt {
    display: block;
    text-align: center;
  }

  #fContact .tel {
    pointer-events: auto;
  }

  #fContact .time {
    margin-top: 10px;
  }

  #fContact .mail {
    display: none;
  }
}




/* fbtn */
#fbtn {
  position: absolute;
  top: 5px;
  right: 0px;
  border-left: 1px #848484 dotted;
  padding-left: 10px;
  height: 40px;
}

#fbtn li {
  float: left;
  padding-top: 8px;
}

#fbtn li:first-child {
  margin-right: 30px;
}

#fbtn li a img {
  vertical-align: bottom;
}

@media only screen and (max-width: 768px) {
  #fbtn {
    padding-top: 20px;
    position: relative;
    top: 0px;
    right: 0px;
    text-align: center;
    border-left: none;
    padding-left: 0px;
    line-height: 0px;
    height: auto;
  }

  #fbtn li {
    float: none;
    display: inline-block;
    *display: inline;
    *zoom: 1;
  }
}


/* ftrCv */
#spCV {
  display: none;
  position: fixed;
  width: 100%;
  text-align: center;
  background: #5a1d0d;
  bottom: 0;
  left: 0;
  z-index: 99;
}

#spCV a {
  display: block;
  font-size: 16px;
  color: #fff;
  text-decoration: none;
  padding: 10px;
}

#spCV a .small {
  font-size: 10px;
}

@media only screen and (max-width: 640px) {
  #spCV {
    display: block;
  }
}

/* ftrCv */
#ftrCv {
  text-align: center;
}



/* cvbnr */
#cvbnr {
  background-color: #fff;
  background-image: url(../imgs/bg-cvbnr.gif);
  background-position: left top;
  background-repeat: repeat-x;
  border: 1px solid #f0f0f0;
  padding-top: 20px;
  margin-bottom: 40px;
  clear: both;
}

#cvbnr .Inner {
  background-color: #fff;
  background-image: url(../imgs/bg-contact.jpg);
  background-position: right bottom;
  background-repeat: no-repeat;
  padding: 20px 20px 17px 20px;
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  -o-box-sizing: border-box;
}

#cvbnr .Inner p.titleA {
  margin-bottom: 10px;
}

#cvbnr .Inner ul li {
  float: left;
  margin-right: 10px;
}

#cvbnr .Inner ul li img {
  vertical-align: top;
}

#cvbnr .Inner ul li.cvttl {
  margin-top: 6px;
  margin-right: 20px;
}

#cvbnr .Inner ul li a {
  display: inline-block;
}

#cvbnr .Inner ul li.btReq {
  margin-top: -5px;
}

@media only screen and (max-width: 960px) {
  #cvbnr .Inner {
    background-image: none;
  }

  #cvbnr .Inner ul li.cvttl {
    margin-bottom: 10px;
  }

  #cvbnr .Inner ul li {
    margin-bottom: 20px;
  }
}

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

@media only screen and (max-width: 600px) {
  #cvbnr .Inner ul li.cvttl {
    float: none;
    width: 100%;
    clear: both;
    margin-bottom: 10px;
    text-align: center;
  }

  #cvbnr .Inner ul li.btRes,
  #cvbnr .Inner ul li.btReq {
    width: 100%;
    text-align: center;
  }

  #cvbnr .Inner ul li.btReq a {
    margin-right: -5px;
  }
}

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

  #cvbnr .Inner ul li.btRes,
  #cvbnr .Inner ul li.btReq {
    float: none;
    margin: 0 auto 20px;
  }
}





/* contact01 */
.contact01 {
  border-top: 1px solid #e9e2cc;
  padding-top: 20px;
  padding-bottom: 20px;
}

.contact01 .Inner01 {
  float: left;
  padding-right: 20px;
  margin-right: 20px;
  border-right: 1px solid #e9e2cc;
}

.contact01 .Inner02 {
  float: left;
}

.contact01 .Inner02 .txt01 {
  letter-spacing: normal;
}

.contact01 .Inner02 .mail {
  background: url(../imgs/ftr-mail.png) no-repeat 0px 3px;
  padding-left: 25px;
}

.contact01 .Inner02 .mail a {
  color: #626262;
}

.contact01 .Inner02 .mail a:hover {
  text-decoration: none;
}




/* floatBnr */
#float {
  z-index: 99999 !important;
  width: 285px;
  height: 223px;
  position: absolute;
  top: 190px;
  right: 30px;
}

#floatArea {
  /*--background:url(../imgs/floatbnr/bg-fltbnr02.png) no-repeat;--*/
  z-index: 9999 !important;
  width: 285px;
  height: 225px;
  position: absolute;
}

#floatArea {
  position: absolute;
  cursor: move;
}

#float .btReq {
  position: absolute;
  top: 30px;
  width: 230px;
  text-align: center;
}

#float .btRes01 {
  position: absolute;
  bottom: 155px;
  left: 5px;
  width: 275px;
  text-align: center;
}

#float .btRes02 {
  position: absolute;
  bottom: 8px;
  left: 5px;
  width: 275px;
  text-align: center;
}

#float .btClose {
  position: absolute;
  top: -10px;
  right: -10px;
}

@media only screen and (max-width: 960px) {
  #float {
    display: none;
  }

  #floatArea {
    display: none;
  }
}





/* common */
.titleS,
.titleA,
.titleB,
.titleC,
.text {
  color: #000;
  font-family: "ＭＳ Ｐ明朝", "MS PMincho", "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", serif;
}

.titleS {
  font-size: 32px;
}

.titleA {
  font-size: 26px;
}

.titleB {
  font-size: 22px;
}

.titleC {
  font-size: 18px;
}

.text {
  font-size: 14px;
}

.titleS span,
.titleA span,
.titleB span,
.titleC span,
.text span {
  display: none;
}

span.red {
  color: #bb1111 !important;
}

span.dred {
  color: #8b252f !important;
}

span.orange {
  color: #ea7f00 !important;
}

span.brown {
  color: #6f2b16 !important;
}

.white {
  color: #FFF !important;
}

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

  .titleS img,
  .titleA img,
  .titleB img,
  .titleC img,
  .text img {
    display: none;
  }

  .titleS span,
  .titleA span,
  .titleB span,
  .titleC span,
  .text span {
    display: block;
  }

  .titleS span strong,
  .titleA span strong,
  .titleB span strong,
  .titleC span strong,
  .text span strong {
    color: #8c252f;
    font-weight: normal;
  }

  .text span br {
    display: none;
  }
}

@media only screen and (max-width: 640px) {
  .titleS {
    font-size: 28px;
  }

  .titleA {
    font-size: 20px;
  }

  .titleB {
    font-size: 18px;
  }

  .titleC {
    font-size: 16px;
  }

  .text {
    font-size: 14px;
  }
}


/* bottom */
.greenline {
  padding-bottom: 10px;
  border-bottom: 1px solid #25b6a0;
}


/* 960 */
.w408 {
  width: 42.5%;
}

.w450 {
  width: 46.875%;
}

.w487 {
  width: 50.7291667%;
}

.w505 {
  width: 52.6041667%;
}

/* ftrBnrArea */
.ftrBnrArea {
  margin-bottom: 20px;
}

.ftrBnrArea li {
  display: inline-block;
  margin-left: 10px;
}

@media only screen and (max-width: 768px) {
  .ftrBnrArea {
    margin: -10px 0 20px -10px;
    text-align: center;
  }
}

@media only screen and (max-width: 430px) {
  .ftrBnrArea li {
    display: block;
    margin-bottom: 10px;
    margin-left: 0;
  }
}