@charset "UTF-8";
/*標準ボタン
---------------------------------------------------------------*/
/*鍵フックボタン
---------------------------------------------------------------*/
/*カーテンボタン
---------------------------------------------------------------*/
/*ラインダッシュボタン
---------------------------------------------------------------*/
/*IE対応のグラデーション
========================================================================*/
@import url("https://fonts.googleapis.com/css?family=Noto+Serif+JP:400,600");
/*変数指定
=======================================================*/
/*メインカラー
--------------------------------------------*/
.inbox {
  width: 55%;
}

/*フォント
--------------------------------------------*/
/*body以下
=======================================================*/
body {
  margin: auto;
  padding: 0;
  width: 100%;
  font-family: "Noto Sans JP", sans-serif, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
  font-size: 28px;
  line-height: 1.8;
  color: #333;
  margin-bottom: 100px;
}

body a:hover {
  opacity: 0.8;
}

.left {
  float: left;
}

.right {
  float: right;
}

.text-c {
  text-align: center;
}

img {
  max-width: 100%;
  vertical-align: middle;
}

/*更新画像
=================================================*/
/*更新イメージの調整
----------------------------------------------- */
.com-img {
  display: block;
  overflow: hidden;
  position: relative;
  z-index: 1;
}

.com-img img {
  position: absolute;
  top: 50% !important;
  left: 50% !important;
  width: 100%;
  -o-object-fit: cover;
  object-fit: cover;
  font-family: "object-fit: cover; object-position: bottom";
  -o-object-position: center;
  object-position: center;
  min-height: 100%;
  min-width: 100%;
  transform: translateX(-50%) translateY(-50%);
}

/*共通テキスト
----------------------------------------------- */
.common-txt p {
  margin-bottom: 25px;
}

.common-txt p:last-child {
  margin-bottom: 0;
}

@media screen and (max-width: 768px) {
  .common-txt p br {
    display: none;
  }
}
.tag-list {
  margin-bottom: 80px;
}

.tag-list li {
  display: inline-block;
  vertical-align: middle;
  margin-top: 5px;
}

.tag-list li a {
  display: block;
  padding: 10px 15px;
  background: #333;
  color: #fff;
  font-size: 14px;
}

/*display flexキッド 
=================================================*/
.flex {
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  -js-display: flex;
  display: flex;
  width: 100%;
}

/*折り返し
-----------------------*/
.flx-wrp {
  flex-wrap: wrap;
}

/*逆順
-----------------------*/
.flx-rr {
  flex-direction: row-reverse;
}

/*水平方向の揃え
=================================================*/
/*初期値
-----------------------*/
.flx-btw {
  justify-content: start;
}

/*並列で均等配置（左右隙間なし=space-between）
-----------------------*/
.flx-btw {
  justify-content: space-between;
}

/*並列で均等配置（左右隙間あり=space-around）
-----------------------*/
.flx-ard {
  justify-content: space-around;
}

/*水平揃え　末揃え
-----------------------*/
.flx-end {
  justify-content: flex-end;
}

/*水平揃え　中央揃え
-----------------------*/
.flx-center {
  justify-content: center;
}

/*垂直方向の揃え
=================================================*/
/*水平揃え　上揃え
-----------------------*/
.flx-alitem-strt {
  align-items: flex-start;
}

/*水平揃え　高さ揃え
-----------------------*/
.flx-alitem-strch {
  align-items: stretch;
}

/*水平揃え　縦・横の中央揃え
-----------------------*/
.flx-alitem-c {
  align-items: center;
}

/*水平揃え　下揃え
-----------------------*/
.flx-alitem-end {
  align-items: flex-end;
}

/*水平揃え　ベースライン揃え
-----------------------*/
.flx-alitem-base {
  align-items: baseline;
}

/*複数行にした揃え方
=================================================*/
/*初期値
-----------------------*/
.flx-alcont-strt {
  align-content: flex-start;
}

/*親要素の開始位置から配置。上揃え
-----------------------*/
.flx-alcont-strch {
  align-content: stretch;
}

/*親要素の終点から配置。下揃え
-----------------------*/
.flx-alcont-end {
  align-content: flex-end;
}

/*中央揃え
-----------------------*/
.flx-alcont-c {
  align-content: center;
}

/*最初と最後の子要素を上下の端に配置し、残りの要素は均等に間隔をあけて配置
-----------------------*/
.flx-alcont-s-btw {
  align-content: space-between;
}

/*上下端にある子要素も含め、均等に間隔をあけて配置
-----------------------*/
.flx-alcont-s-ard {
  align-content: space-around;
}

/*=========================================================
	header
=========================================================*/
#header h1 span {
  display: block;
}

#header .hd-l {
  width: 200px;
}

#header .hd-r {
  width: 900px;
}

/*メインビジュアル
=========================================================*/
#mv {
  padding-top: 5vh;
  padding-bottom: 10vh;
  box-sizing: border-box;
  background: url(../img/mv/mv-l.png) no-repeat left 5vw top 10vh, url(../img/mv/mv-r.png) no-repeat right 3vw top, url(../img/mv/mv-bg.png) no-repeat center bottom;
}

#mv .inbox {
  position: relative;
  height: 100%;
  background: url(../img/mv/mv-img.png) no-repeat center left/60%;
}

#mv .catch {
  position: relative;
  text-align: right;
  margin-bottom: 10vh;
}

#mv .mv-list li {
  margin-right: 2%;
}

#mv .mv-list li:last-child {
  margin-right: 0;
}

/*共通ボタン
=========================================================*/
/*30日間の無料お試し
=========================================================*/
#starting {
  text-align: center;
  padding: 5% 0;
  background: #ccf8fd url(../img/start/start-bg.png) no-repeat center/cover;
}

/*キャンペーン
=========================================================*/
#campain {
  padding: 15% 0 10%;
  background: url(../img/campain/campain-bg-tp.png) no-repeat center top/100%;
  text-align: center;
}

#campain .campain-ttl {
  margin-bottom: 5%;
}

#campain .campain-bx {
  margin-bottom: 8%;
}

#campain .campain-bx .bottle {
  width: 300px;
  margin-right: 30px;
}

#campain .campain-bx .txt {
  width: 700px;
}

/*オムニビオスと一緒に、あなたの暮らしにあったスタイルを
=========================================================*/
#server {
  padding: 0 0 10%;
  text-align: center;
}

#server .server-ttl {
  height: 300px;
  background: #35cffb;
  margin-bottom: 160px;
  position: relative;
}

#server .server-ttl:before {
  content: "";
  position: absolute;
  right: 30%;
  bottom: -97px;
  width: 114px;
  height: 97px;
  background: url(../img/server/server-ttl-tri.png) no-repeat top center;
}

#server .server-ttl img {
  position: relative;
  top: -70px;
}

#server .server-info,
#server .server-img {
  margin-bottom: 15%;
}

/*ゆとりを持った生活に安心して利用
=========================================================*/
#safety {
  padding: 0 0 10%;
  text-align: center;
}

#safety .safety-ttl {
  height: 300px;
  background: url(../img/safety/safety-ttl-bg.png);
  border-bottom: 30px solid #fff;
  box-sizing: border-box;
  margin-bottom: 3%;
  position: relative;
}

#safety .safety-ttl:before {
  content: "";
  position: absolute;
  right: 30%;
  bottom: -72px;
  width: 146px;
  height: 72px;
  background: url(../img/safety/safety-tri.png) no-repeat top center;
}

#safety .safety-ttl img {
  position: relative;
  top: -30px;
}

#safety .safety-info .safety-info-ttl {
  margin-bottom: 8%;
}

#safety .safety-info .safety-info-list li {
  margin-bottom: 13%;
}

#safety .safety-info .safety-info-list li:last-child {
  margin-bottom: 0;
}

#safety .safety-info .safety-info-list li .btn {
  margin-top: 8%;
}

/*そうはいっても毎月の費用が気になる...。
=========================================================*/
#cost {
  padding-bottom: 10%;
  text-align: center;
}

#cost .cost-ttl {
  height: 300px;
  background: #4cec9f;
  margin-bottom: 5%;
}

#cost .cost-ttl img {
  position: relative;
  top: -40px;
}

#cost .cost-info-ttl,
#cost .visible-md,
#cost .norma {
  margin-bottom: 8%;
}

#cost .cost-info-txt {
  margin: 0 0 50px 0;
}

/*お客様からは大満足の声を頂いています！
=========================================================*/
#voice {
  padding: 8% 0 10%;
  background: url(../img/voice/voice-bg-tp.png) no-repeat top center/100%, url(../img/voice/dotted-l.png) repeat-y top left 3%, url(../img/voice/dotted-r.png) repeat-y top right 3%, url(../img/voice/voice-bg.png);
}

#voice .voice-ttl {
  text-align: center;
  margin-bottom: 10%;
}

#voice .voice-list li {
  margin-bottom: 8%;
}

#voice .voice-list li:nth-child(even) {
  text-align: right;
}

#voice .voice-list li:last-child {
  margin-bottom: 0;
}

/*配達エリア
=========================================================*/
#area {
  padding: 8% 0 5%;
  text-align: center;
}
#area .com-worktime {
  margin: 4% auto 0;
  width: 35%;
  min-width: 600px;
}

.com-worktime {
  font-weight: 700;
  line-height: 1.6;
}
.com-worktime .in-dl {
  margin-bottom: 20px;
}
.com-worktime .in-dl:last-of-type {
  margin-bottom: 0;
}
.com-worktime .in-dl dt {
  width: 200px;
  background: #4cec9f;
  color: #fff;
  padding: 5px 10px;
  border-radius: 10px;
}
.com-worktime .in-dl dd {
  text-align: left;
  padding-left: 30px;
  width: calc(100% - 200px);
}

/*よくあるご質問
=========================================================*/
#qa {
  padding: 5% 0;
}

#qa .qa-ttl {
  text-align: center;
  margin-bottom: 8%;
}

#qa .qa-list article {
  margin-bottom: 5%;
  padding: 5%;
  box-sizing: border-box;
  border-radius: 20px;
  border: solid 2px #35cffb;
}

#qa .qa-list article:last-child {
  margin-bottom: 0;
}

#qa .qa-list article .qa-list-ttl {
  margin-bottom: 3%;
  font-weight: 700;
  padding-left: 6%;
  background: url(../img/qa/q-icon.png) no-repeat left top 1rem;
}

/*final
=========================================================*/
#final {
  padding-bottom: 15%;
  text-align: center;
  background: url(../img/common/ft-walking-icon.png) no-repeat right 10% bottom;
}

#final .final-img {
  width: 70%;
  margin: 0 auto 10%;
}

/*=========================================================
	footer
=========================================================*/
#footer {
  position: relative;
}

#footer #copyright {
  text-align: center;
  padding: 5px 0;
  background: #35cffb;
}

#footer #copyright small {
  color: #fff;
  font-size: 12px;
}

#footer #copyright small a {
  color: #fff;
}

/*=========================================================
	下層
=========================================================*/
/*サブビジュアル
=========================================================*/
#ma {
  height: 350px;
  background: url(../img/common/ma-bg.jpg) no-repeat center/cover;
}

#ma .ma-inbox,
#ma .inbox {
  height: 100%;
}

.ma-ttl {
  color: #fff;
  font-size: 50px;
  font-weight: bold;
  letter-spacing: 0.2rem;
  text-shadow: rgba(0, 0, 0, 0) 1px 1px 5px, rgba(0, 0, 0, 0) -1px 1px 5px, rgba(0, 0, 0, 0) 1px -1px 5px, rgba(0, 0, 0, 0) -1px -1px 5px, rgba(0, 0, 0, 0) 1px 1px 8px, rgba(0, 0, 0, 0) -1px 1px 8px, rgba(0, 0, 0, 0) 1px -1px 8px, rgba(0, 0, 0, 0) -1px -1px 8px;
  text-align: center;
}

/*下層共通タイトル
=========================================================*/
/*パンくず
=========================================================*/
#bread-clumb {
  width: 100%;
  position: absolute;
  margin: 0 auto;
  padding: 10px 0 50px;
}

#bread-clumb li {
  position: relative;
  color: #333;
  font-size: 14px;
  float: left;
  margin-right: 20px;
}

#bread-clumb li:after {
  content: ">";
  position: absolute;
  display: block;
  right: -15px;
  top: 0;
}

#bread-clumb li:last-child {
  margin-right: 0;
}

#bread-clumb li:last-child:after {
  display: none;
}

#bread-clumb li a {
  color: #333;
}

/*サイトマップ
=========================================================*/
#site-map ul li {
  border-bottom: 1px solid #35cffb;
}

#site-map ul li a {
  color: #333;
}

#site-map ul li a:before {
  border-left: 8px solid #35cffb;
}

#site-map ul li a:hover {
  color: #35cffb;
}

#site-map ul li a:hover:before {
  left: 10px;
}

/*404
=========================================================*/
.not-found-txt p a {
  color: #35cffb;
}


/*追従バナー
=========================================================*/
.fixed-banner {
  position: fixed;
  z-index: 100000;
  bottom: 0;
  left: 0;
  right: 0;
}

.fixed-banner > div {
  text-align: center;
  width: 50%;
}

.fixed-banner > div a {
  font-size: 34px;
  color: #fff;
  font-weight: 700;
  height: 100px;
}

.fixed-banner > div a small {
  font-size: 28px;
}

.fixed-banner .aside-mail a {
  background: #35cffb;
}

.fixed-banner .aside-mail a span {
  position: relative;
  padding-left: 50px;
}

.fixed-banner .aside-mail a span:before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 40px;
  height: 40px;
  background: url(../img/common/mail-icon.png) no-repeat center/contain;
  margin-top: -20px;
}

.fixed-banner .aside-tel a {
  background: #4cec9f;
}

.fixed-banner .aside-tel a span {
  position: relative;
  padding-left: 50px;
}

.fixed-banner .aside-tel a span:before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 40px;
  height: 40px;
  background: url(../img/common/tel-icon.png) no-repeat top center/contain;
  margin-top: -20px;
} /*# sourceMappingURL=style.css.map */