@charset "utf-8";

/*! ==========================================================================

   INFOPLATE 5 custom.css v.1.0

   ========================================================================== */

/* ==========================================================================
   テーマの基本色
   ========================================================================== */

/* [color] の所にカラーコードを記述する */

/* Smooth
   ========================================================================== */

.smooth a { color: [color] }

.smooth .form-button,
.smooth .button { background-color: [color] }

/* Cure
   ========================================================================== */

.cure .global-navi,
.cure .global-navi-w,
.cure .global-navi-inner li ul li,
.cure .global-navi-inner li ul li ul li,
.cure .subheader--small,
.cure .box--large > .box__title,
.cure .box--large > .box__title--small,
.cure .box--medium > .box__title,
.cure .box--medium > .box__title--small,
.cure .box--medium > .box__title span,
.cure .bgcolor--large,
.cure .bgcolor--medium,
.cure .table--large th,
.cure .form-button,
.cure .button { background-color: [color] }

.cure .subheader--medium,
.cure .box--large,
.cure .box--medium,
.cure .box--medium > .box__title,
.cure .box--medium > .box__title--small,
.cure .bgcolor--large { border-color: [color] }

.cure .subheader--large,
.cure .order__h1,
.cure .voice .voice__head { color: [color] }

.cure .box--large { background: [color(2)] }

/* Merry
   ========================================================================== */

.merry .global-navi,
.merry .global-navi-w,
.merry .global-navi-inner li ul li,
.merry .global-navi-inner li ul li ul li,
.merry .subheader--small,
.merry .box--large > .box__title,
.merry .box--large > .box__title--small,
.merry .box--medium > .box__title,
.merry .box--medium > .box__title--small,
.merry .box--medium > .box__title span,
.merry .bgcolor--large,
.merry .bgcolor--medium,
.merry .table--large th,
.merry .form-button,
.merry .button { background-color: [color] }

.merry .box--large,
.merry .box--medium,
.merry .box--medium > .box__title,
.merry .box--medium > .box__title--small,
.merry .bgcolor--large { border-color: [color] }

.merry .subheader--large,
.merry .subheader--medium,
.merry .order__h1,
.merry .voice .voice__head { color: [color] }

.merry .box--large { background: [color(2)] }
.merry .subheader--medium {
    background: -webkit-linear-gradient     (left, rgba(255,255,255,0), [color(2)], rgba(255,255,255,0));
    background:         linear-gradient( to right, rgba(255,255,255,0), [color(2)], rgba(255,255,255,0));
}

/* Brisk
   ========================================================================== */

.brisk .global-navi,
.brisk .global-navi-w,
.brisk .global-navi-inner li ul li,
.brisk .global-navi-inner li ul li ul li,
.brisk .box--medium > .box__title span,
.brisk .bgcolor--medium,
.brisk .table--large th,
.brisk .form-button { background-color: [color] }

.brisk .subheader--medium,
.brisk .subheader--small .inner,
.brisk .box--large,
.brisk .box--medium > .box__title,
.brisk .box--medium > .box__title--small,
.brisk .bgcolor--medium { border-color: [color] }

.brisk .voice .voice__head { color: [color] }

/* Loud
   ========================================================================== */

.loud .global-navi,
.loud .global-navi-w,
.loud .global-navi-inner li ul li,
.loud .global-navi-inner li ul li ul li,
.loud .box--medium > .box__title span,
.loud .bgcolor--medium,
.loud .table--large th,
.loud .form-button { background-color: [color] }

.loud .subheader--large,
.loud .subheader--small .inner,
.loud .box--large,
.loud .box--medium > .box__title,
.loud .box--medium > .box__title--small { border-color: [color] }

.loud .order__h1,
.loud .voice .voice__head { color: [color] }

.loud .l-container { box-shadow: 0 0 50px 10px [color] }
.loud .subheader--small { box-shadow: 0 0 13px 1px [color] }

.loud .subheader--medium {
    background: [color];
    background: -webkit-linear-gradient     (left, transparent, [color], [color], transparent);
    background:         linear-gradient( to right, transparent, [color], [color], transparent);
}


/* ==========================================================================
   色
   ========================================================================== */

/* ページ背景色 */
body { background-color: #fff }

/* ページ背景画像 */
body {
  background-image: none;
  background-position: ;
  background-repeat: ;
  background-attachment: fixed;
}

/* リンク */
a { color:  }
a:hover { color:  }

/* サイトタイトル */
.site-title,
.site-title a { color:  }
.site-title a:hover { color:  }
.site-description { color:  }

/* ヘッダーナビ */
.header-navi li a { color:  }
.header-navi li a:hover,
.header-navi li a.active { color:  }

/* グローバルナビ */
.global-navi-inner,
.global-navi-inner-w,
.global-navi-inner li ul li,
.global-navi-inner li ul li ul li { background-color:  }
.global-navi-inner li a { color: ; text-shadow:  }

/* コンテンツエリアの背景色 */
.l-container { background-color: transparent }

/* ページの先頭への三角 url(img/pagetop-blk.png) か url(img/pagetop-wht.png) */
.pagetop a { background-image:  }

/* フッター */
.l-footer address,
.l-footer p { color:  }
.l-footer a { color:  }


/* ==========================================================================
   大きさ
   ========================================================================== */

/* ページ全体の幅 */

.c1  .l-header-inner, .c1  .global-navi, .c1  .global-navi-inner, .c1  .l-container, .c1  .l-footer-inner { max-width: 960px }
.c2l .l-header-inner, .c2l .global-navi, .c2l .global-navi-inner, .c2l .l-container, .c2l .l-footer-inner { max-width: 100% }
.c2r .l-header-inner, .c2r .global-navi, .c2r .global-navi-inner, .c2r .l-container, .c2r .l-footer-inner { max-width: 960px }

.c1s .l-header-inner, .c1s .global-navi, .c1s .global-navi-inner, .c1s .l-container, .c1s .l-footer-inner { max-width: 720px }

/* メイン・サブの幅 (%) */
.l-main { width:  }
.l-sub  { width:  }

/* c2l */
.c2l .l-main { width:  }
.c2l .l-sub  { width:  }

/* メイン・サブ間の間隔 (px) */
/* c2r */
.c2r .l-main { padding-right:  }
.c2r .l-sub  { padding-left:   }

/* c2l */
.c2l .l-main { padding-left:   }
.c2l .l-sub  { padding-right:  }

/* サイトタイトル */
.site-title { font-size:  }
.site-title { font-weight:  }

/* サイトの説明 */
.site-description { font-size:  }
.site-description { width:  }

/* ヘッダーナビ */
.header-navi li { font-size:  }

/* グローバルナビ */
.global-navi-inner li { font-size:  }

/* コンテンツエリア内側の余白 [N]には同じ数字が入る */
.l-container, .c2l .l-container, .c2r .l-container { padding: 0 }
*[class*="bgcolor--"], .c2l *[class*="bgcolor--"], .c2r *[class*="bgcolor--"] { margin-left:  -0px }
*[class*="bgcolor--"], .c2l *[class*="bgcolor--"], .c2r *[class*="bgcolor--"] { margin-right: -0px }

/* ボックス内側の余白 [Nm],[Ns]には同じ数字が入る */
*[class*="box--"] { padding: 5px 5px 0px 5px }
*[class*="box--"] > *[class*="box__title"],
*[class*="box--"] > .box__title--small { margin: -5px -5px 5px }

.sub *[class*="box--"] { padding: 20px }
.sub *[class*="box--"] > *[class*="box__title"],
.sub *[class*="box--"] > .box__title--small { margin: -20px -20px 20px }

/* 背景色の余白 */
*[class*="bgcolor--"] { padding:  }

/* フッター */
.l-footer address,
.l-footer p { font-size:  }


/* ==========================================================================
   形
   ========================================================================== */

/* コンテンツエリアの角 */
.l-container { border-radius:  }

/* コンテンツエリアの影 */

.l-container {
    box-shadow: none;
    /* oldie */
    -pie-box-shadow: none;
}


/* ==========================================================================
   その他
   ========================================================================== */

.l-row { margin-top: 1em; margin-bottom: 0.5em;}

/* ヘッダー */

.l-header {
    margin-top: 0px;
    margin-bottom: 0px;
    border-bottom: 1px solid #ddd;
}

@media(max-width: 640px) {
  .l-header {
      margin-top: 0;
      margin-bottom: 0;
  }
}

.header-inner {
    margin-bottom: 15px;
}

/* ヘッダーナビ */

li.header-navi-trial a { color: #c30; font-weight: bold; }
li.header-navi-trial a:hover { color: #f00 }

/* コンテンツエリア */

.l-container.frame {
  margin-bottom: 0;
  padding: 0;
  border: none;
  background: transparent;
  box-shadow: none;
}

/* バナー */

.banner {
  margin: 0 -100px 75px;
  padding: 25px 0 0;
}

@media(max-width: 640px) {
  .banner {
    margin: 0 0 25px;
    padding: 25px 0 0;
  }
}

.flexslider .flex-control-paging li a {
  background: rgba(0,0,0,.666);
  background: -webkit-linear-gradient       (top, rgba(0,0,0,.25), rgba(0,0,0,.666));
  background:         linear-gradient( to bottom, rgba(0,0,0,.25), rgba(0,0,0,.666));
}

.flexslider .flex-control-paging li a:hover {
  background: rgba(51,102,204,.5);
  background: -webkit-linear-gradient       (top, rgba(51,102,204,.333), rgba(51,102,204,.75));
  background:         linear-gradient( to bottom, rgba(51,102,204,.333), rgba(51,102,204,.75));
}

.flexslider .flex-control-paging li a.flex-active {
  background: rgba(51,102,204,1);
  background: -webkit-linear-gradient       (top, rgba(51,102,204,.5), rgba(51,102,204,1));
  background:         linear-gradient( to bottom, rgba(51,102,204,.5), rgba(51,102,204,1));
}

/* 小見出し */

.subheader--large {
  font-size: 30px;
  font-size: 3.0rem;
  margin: 2em 0 1.333em;
}

.subheader--medium {
  font-size: 22px;
  font-size: 2.2rem;
}

/* 見出し行頭 */

.subheader-num {
  font-weight: normal;
  color: #fff;
  display: block;
  float: left;
  margin-right: 8px;
  margin-top: 1px;
  padding: 8px 14px;
  border-radius: 5px;
  background: #3399FF;
  background: -webkit-linear-gradient       (top, #3399FF, #336699);
  background:         linear-gradient( to bottom, #3399FF, #336699);
  font-size: 15px;
  font-size: 1.5rem;
  line-height: 1.1;
  text-shadow: 0 1px 0 rgba(1,1,1,.1);
}

/* 周辺光量落ち */

.vignetting {
  position: relative;
}

.vignetting:after {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 100%;
  height: 100%;
  border: 1px solid rgba(0,0,0,.1);
  box-shadow: 0 0 20px rgba(0,0,0,.1) inset;
  content: "";
}

/* お客様の声 小 */

.voice--small {
  padding: 2em;
}

.voice-s-head {
  color: rgb(51, 51, 51);
  font-size: 18px;
  font-size: 1.8rem;
  font-weight: normal;
  font-style: italic;
  line-height: 1.618;
  margin: .5em 0 1em;

}

.voice-s-name {
  text-align: right;
  font-size: 15px;
  font-size: 1.5rem;
  margin-bottom: 1em;
  font-style: italic;
}

.voice--small p {
  color: rgb(102, 102, 102);
  font-size: 13px;
  font-size: 1.3rem;
  margin: 0 0 .5em;
  line-height: 1.618;
}

/* 製品詳細図 */

.detail-fig {
  width: 100%;
  border: 1px solid #eee;
}

/* フッターの上にライン */

.l-footer {
  padding-top: 20px;
  border-top: 1px solid #ddd;
}