@charset "UTF-8";
/* ---------------------------------------------------------
 キーパーラボ（各ページ共通要素定義）
 URL: http://www.keeperlabo.jp/
 © I-tac Giken. All Rights Reserved.
------------------------------------------------------------ */
body {
  width: 100%;
  background: url(../img/bg_body01.jpg) repeat-x bottom #F7F7F7;
  font-family: "Meiryo", "メイリオ", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", "ＭＳ Ｐゴシック", "ＭＳ ゴシック", Osaka, Osaka-等幅, sans-serif;
  color: #000000;
  font-size: 12px;
}

/* ---------------------------------------------------------
 リンク
------------------------------------------------------------ */
a {
  color: #000;
  text-decoration: underline;
}
a:link, a:visited {
  color: #000;
  text-decoration: underline;
}
a:hover, a:link:hover, a:visited:hover, a:active {
  color: #D01027;
  text-decoration: none;
}

/* ---------------------------------------------------------
 各ブロックの幅高さ指定
------------------------------------------------------------ */
#wrapper {
  width: 100%;
  margin: 0 auto;
  background: url(../img/bg_head01.jpg) repeat-x;
}

#headerArea {
  width: 100%;
  height: 81px;
  background: url(../img/bg_head02.jpg) no-repeat center;
  margin: 0 0 7px;
}

#footerArea {
  background: url(../img/bg_footer01.jpg) repeat-x;
  clear: both;
  height: 160px;
  width: 100%;
}

.pagetop, #topicpathArea, #footerArea .wrap, #gnavArea, #headerArea .wrap {
  width: 946px;
  margin: 0 auto;
  clear: both;
}

#commoncontentsArea, #contentsArea {
  width: 946px;
  margin: 0 auto 10px;
  clear: both;
  position: relative;
}

/* ---------------------------------------------------------
    ヘッダ
------------------------------------------------------------ */
#headerArea .wrap {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: flex-end;
  height: 72px;
  width: 946px;
}
#headerArea .wrap .hgroup {
  display: flex;
  flex-direction: column-reverse;
  justify-content: center;
  align-items: flex-start;
  width: 300px;
  height: 70px;
}
#headerArea .wrap .sitelogo {
  display: flex;
  flex-direction: column-reverse;
  margin-bottom: 0.2rem;
  margin-left: 5px;
}
#headerArea .wrap .sitelogo a {
  text-indent: -9999px;
  background: url(../img/sitelogo201702.png) no-repeat 0 bottom;
  background-size: 80%;
  width: 284px;
  height: 42px;
  display: block;
}
#headerArea .wrap h2.tagline {
  color: #FFF;
  font-size: 12px;
}
#headerArea .wrap #header_wrap {
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  width: 490px;
  height: 82px;
}
#headerArea .wrap #header_wrap ul {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  justify-content: space-between;
  align-items: flex-end;
  margin: 0;
  height: 60px;
  width: 280px;
}
#headerArea .wrap #header_wrap li {
  float: none;
  margin-right: 0;
  height: 27px;
}
#headerArea .wrap #header_wrap p {
  margin-right: 10px;
  width: 200px;
  height: auto !important;
  align-items: end;
  padding: 0;
  font-size: 0.85rem;
  font-weight: 700;
  color: #fff;
  letter-spacing: 1px;
  text-align: right;
}
#headerArea .wrap #header_wrap p span {
  font-size: 1.1rem;
  font-weight: 700;
  color: #fbf500;
}

/*店舗名*/
body#shop #headerArea .wrap .shop_name {
    display: flex;
    height: 46px;
    width: 656px;
    align-items: center;

    h3 {
        color: #FFFFFF;
        display: block;
        font-size: 25px;
        font-weight: bold;
        width: 450px;
    }
    p {
        margin-right: 10px;
        width: 200px;
        height: auto !important;
        align-items: end;
        padding: 0;
        font-size: 0.85rem;
        font-weight: 700;
        color: #fff;
        letter-spacing: 1px;
        text-align: right;
        span {
            font-size: 1.1rem;
            font-weight: 700;
            color: #fbf500;
        }
    }
}

#headerArea .wrap .contact {
  right: 350px;
  top: 0;
  position: relative;
}

#shop #headerArea .wrap .contact {
  right: 0;
  position: absolute;
}

/*問い合わせスペース（通常版）*/
#headerArea .wrap .contact .rsv {
  text-indent: -9999px;
}
#headerArea .wrap .contact .rsv a {
  background: url(../img/btn_rsrv01.png) no-repeat;
  width: 272px;
  height: 58px;
  display: block;
  position: absolute;
  top: 8px;
  right: 189px;
  text-indent: -9999px;
}
#headerArea .wrap .contact .rsv a:hover {
  background: url(../img/btn_rsrv01.png) no-repeat bottom;
}
#headerArea .wrap .contact .inquiry_rv, #headerArea .wrap .contact .inquiry {
  text-indent: -9999px;
}
#headerArea .wrap .contact .inquiry_rv a {
  background: url(../img/rv.png) no-repeat;
  width: 232px;
  height: 31px;
  display: block;
  position: absolute;
  top: 16px;
  right: 6px;
}
#headerArea .wrap .contact .inquiry a {
  background: url(../img/iqn.png) no-repeat;
  width: 153px;
  height: 27px;
  display: block;
  position: absolute;
  top: 48px;
  right: 42px;
}
#headerArea .wrap .krp a {
  background: url(../img/labo_head.jpg) no-repeat;
  width: 180px;
  height: 50px;
  display: block;
  position: absolute;
  top: 17px;
  right: 245px;
}
#headerArea .wrap .keeper_cm a {
  background: url(../img/keeper_cm.jpg) no-repeat;
  width: 249px;
  height: 50px;
  display: block;
  position: absolute;
  top: 17px;
  right: 245px;
}
#headerArea .wrap .krp, #headerArea .wrap .keeper_cm {
  text-indent: -9999px;
}
#headerArea .wrap .contact .inquiry_rv a:hover {
  background: url(../img/rv_hover.png) no-repeat;
}
#headerArea .wrap .contact .inquiry a:hover {
  background: url(../img/iqn_hover.png) no-repeat;
}
#headerArea .wrap .contact .reserve {
  width: 230px;
  display: block;
  position: absolute;
  top: 52px;
  right: 6px;
  color: #FFF;
  font-weight: bold;
  font-size: 14px;
  text-align: center;
}
#headerArea .wrap .contact .reserve a {
  color: #ffffff;
  text-decoration: none;
}
#headerArea .wrap .contact .reserve a:hover {
  color: #ffffff;
  text-decoration: underline;
}

/*問い合わせスペース（店舗版）*/
body#shop #headerArea .wrap .contact .rsv {
  text-indent: -9999px;
}
body#shop #headerArea .wrap .contact .rsv a {
  background: url(../img/btn_rsrv02.png) no-repeat;
  width: 222px;
  height: 57px;
  display: block;
  position: absolute;
  top: 13px;
  right: 178px;
}
body#shop #headerArea .wrap .contact .rsv a:hover {
  background: url(../img/btn_rsrv02.png) no-repeat bottom;
}
body#shop #headerArea .wrap .contact .inquiry {
  text-indent: -9999px;
}
body#shop #headerArea .wrap .contact .inquiry a {
  background: url(../img/btn_inquiry02.png) no-repeat;
  width: 230px;
  height: 36px;
  display: block;
  position: absolute;
  top: 13px;
  right: 6px;
}
body#shop #headerArea .wrap .contact .inquiry a:hover {
  background: url(../img/btn_inquiry02.png) no-repeat bottom;
}
body#shop #headerArea .wrap .contact .tel {
  width: 230px;
  display: block;
  position: absolute;
  top: 52px;
  right: 6px;
  color: #FFF;
  font-weight: bold;
  font-size: 14px;
  text-align: center;
}
body#shop #headerArea .wrap .contact .tel a {
  color: #ffffff;
  text-decoration: none;
}
body#shop#headerArea .wrap .contact .tel a:hover {
  color: #ffffff;
  text-decoration: underline;
}

#headerArea .wrap .related {
  position: absolute;
  width: 300px;
  right: 0;
  top: 0;
  margin: 0;
  padding-top: 15px;
}
#headerArea .wrap ul.related li {
  float: left;
  margin-right: 5px;
}
#headerArea .wrap ul.related li img:hover {
  -moz-filter: brightness(0.85);
  -o-filter: brightness(0.85);
  -ms-filter: brightness(0.85);
  filter: brightness(0.85);
}

/* ---------------------------------------------------------
 グローバルナビ
------------------------------------------------------------ */
#gnavArea {
  margin: 0 auto 6px;
}
#gnavArea nav.w946 {
  width: 946px;
}
#gnavArea ul {
  width: 100%;
  margin: 0 auto;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
#gnavArea ul li {
  display: block;
  width: 10%;
}
#gnavArea ul li.photo_log,
#gnavArea ul li.recruit,
#gnavArea ul li.shop {
  width: 8%;
}
#gnavArea ul li.labo,
#gnavArea ul li.service {
  width: 11%;
}
#gnavArea ul li.guidebook,
#gnavArea ul li.size {
  width: 12%;
}
#gnavArea ul li.size {
  width: 13%;
}
#gnavArea ul li a {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 96%;
  height: 34px;
  text-decoration: none !important;
  margin: 0;
  color: #222;
  font-weight: bold;
  font-size: 0.75rem;
  letter-spacing: -1px;
  /* text-stroke: 0.1px #222;
  -webkit-text-stroke: 0.1px #222; */
}
/* #gnavArea ul li.home a {
  width: 96%;
  background: #ccc;
  border-radius: 0 0 0.25rem 0.25rem;
} */
#gnavArea ul li a:hover,
#gnavArea ul li a.current {
  width: 96%;
  background: #ccc;
  border-radius: 0 0 0.25rem 0.25rem;
}

/* ---------------------------------------------------------
    パンくずエリア
------------------------------------------------------------ */
#topicpathArea {
  margin: 0 auto 6px;
  padding: 6px 0 0;
  clear: both;
}

body #service01 #topicpathArea, body #service02 #topicpathArea, body #service03 #topicpathArea, body #service04 #topicpathArea, body #service05 #topicpathArea, body #service06 #topicpathArea, body #service07 #topicpathArea, body #service08 #topicpathArea {
  margin: 0 auto 18px;
}

#topicpathArea ol li {
  display: inline;
  list-style: none;
}
#topicpathArea ol li a {
  background: url(../img/topicdir01.gif) no-repeat right;
  padding: 0 20px 0 0;
}

/* ---------------------------------------------------------
 フッター
------------------------------------------------------------ */
#footerArea .wrap {
  position: relative;
  overflow: hidden;
  height: 100%;
}
#footerArea .wrap .utiltylink {
  position: absolute;
  top: 18px;
  left: 0;
}
#footerArea .wrap .utiltylink ul li {
  display: inline;
  margin: 0 26px 0 0;
}
#footerArea .wrap .utiltylink ul li a {
  text-decoration: none;
  color: #FFFFFF;
}
#footerArea .wrap .utiltylink ul li a:hover {
  text-decoration: underline;
}
#footerArea .wrap .socialbookmark {
  line-height: 17px;
  padding: 3px 3px 0;
  position: absolute;
  top: 10px;
  left: 244px;
  height: 24px;
}
#footerArea .wrap .socialbookmark ul li {
  display: inline;
}
#footerArea .wrap .socialbookmark ul li div {
  display: inline;
  display: inline !important;
}
#footerArea .wrap .socialbookmark ul li div span {
  top: -5px;
}
#footerArea .wrap .copyright {
  position: absolute;
  top: 18px;
  right: 0;
  text-indent: -9999px;
  background: url(../img/copyright_keeper.gif) no-repeat;
  width: 263px;
  height: 12px;
}
#footerArea .wrap p.copy {
  position: absolute;
  top: 18px;
  right: 0;
  color: white;
}

#sp_switch {
  display: none;
}

/* ---------------------------------------------------------
 1カラム
------------------------------------------------------------ */
/*本文*/
#main1colArea {
  width: 944px;
  background: url(../img/bg_1col_top01.png) no-repeat top;
  padding: 10px 0 0;
  clear: both;
  margin: 0 0 15px;
}

#main1colArea_20 {
  box-sizing: border-box;
  background-color: #fff;
  border: solid 1px #ccc;
  box-shadow: -1px -1px 2px 0px #ccc, 1px 1px 2px 0px #ccc;
  padding: 20px;
  margin: 15px auto;
  text-align: center;
}

#main1colArea .wrap {
  background: url(../img/bg_1col_bot01.png) no-repeat bottom;
  padding: 0 0 10px;
}
#main1colArea .article_body {
  clear: both;
  background: url(../img/bg_1col_mid01.png) repeat-y;
  position: relative;
}

/* ---------------------------------------------------------
 2カラム
------------------------------------------------------------ */
#commoncontentsArea #mainArea {
  width: 704px;
  float: left;
}
#commoncontentsArea #subArea {
  width: 227px;
  float: right;
  margin: 0 0 30px;
}
#commoncontentsArea #main2colArea {
  width: 704px;
  background: url(../img/bg_2col_top01.png) no-repeat;
  padding: 23px 0 0;
}

/*本文*/
#main2colArea {
  width: 704px;
  background: url(../img/bg_2col_top01.png) no-repeat;
  padding: 23px 0 0;
}
#main2colArea .wrap {
  background: url(../img/bg_2col_bot01.png) no-repeat bottom;
  padding: 0 0 10px;
}
#main2colArea .wrap .block {
  clear: both;
  background: url(../img/bg_2col_mid01.png) repeat-y;
}

/* ---------------------------------------------------------
 汎用スタイル
------------------------------------------------------------ */
.txtR {
  text-align: right;
}

.txtL {
  text-align: left;
}

.txtCTR {
  text-align: center;
}

.fr {
  float: right;
}

.fl {
  float: left;
}

.txt10 {
  font-size: 10px;
}

/* ---------------------------------------------------------
 ページの先頭へ
------------------------------------------------------------ */
.pagetop {
  position: relative;
  height: 31px;
}
.pagetop .btn a {
  background: url(../img/btn_pagetop01.png) no-repeat;
  width: 162px;
  height: 31px;
  display: block;
  position: absolute;
  bottom: 0;
  right: 0;
  text-indent: -9999px;
}
.pagetop .btn a:hover {
  background: url(../img/btn_pagetop01.png) no-repeat right;
}

/* ---------------------------------------------------------
 サイドバー
------------------------------------------------------------ */
/* ---------------------------------------------------------
 ページ下部keepre-dock
------------------------------------------------------------ */
#keepre-dock-fixed {
  z-index: 10000;
}

/* ---------------------------------------------------------
 clearfix
------------------------------------------------------------ */
.clearfix {
  zoom: 1;
}
.clearfix:after {
  content: "";
  display: block;
  clear: both;
}

/* ---------------------------------------------------------
 スマホ用
------------------------------------------------------------ */
#sp-gnavi {
  display: none;
}/*# sourceMappingURL=common.css.map */

/* ---------------------------------------------------------
 共通CTA（Call To Action）
------------------------------------------------------------ */
.serviceCtaSection {
  margin-top: 25px;
  padding: 10px;
}

.serviceCtaWrap {
  background-color: #F9E7DD;
  padding: 25px 25px;
  border-radius: 5px;
  text-align: center;
}
.serviceCtaWrap .ctaTitle {
  font-size: 1.3rem;
  font-weight: 900;
  margin-bottom: 10px;
}
.serviceCtaWrap .ctaText {
  font-size: 1rem;
  font-weight: bold;
  margin-bottom: 25px;
}
.serviceCtaWrap .ctaText span {
  font-weight: bold;
  color: #ce1125;
}
.serviceCtaWrap .ctaLinkWrap {
  display: flex;
  width: 60%;
  justify-content: center;
  gap: 45px;
  margin: 0 auto;
}
.serviceCtaWrap .ctaLinkWrap .ctaLinkBox {
  text-align: center;
  flex: 1;
}
.serviceCtaWrap .ctaLinkWrap .ctaLinkText {
  font-size: 0.8rem;
  font-weight: bold;
  margin-bottom: 5px;
}