@charset "UTF-8";

/* --- 1. パンくずエリア --- */

/* 全幅を白にして左右のグレーを消す */
.breadcrumb-area {
  background: #F7F7F7;
}

.breadcrumb {
  background: #F7F7F7;
}
.breadcrumb a { text-decoration: none; color: #0D518C; font-weight: 500; }
.breadcrumb span:not(.current) { margin: 0 6px; color: #9AA5AC; font-size: 14px; }
.breadcrumb span.current { color: #4B5B64; font-weight: 400; }

/* --- 上部パンくずの横幅をヘッダーに合わせる --- */
.breadcrumb-area .inner {
  max-width: 1200px;
  margin: 0 auto;
}

/* サブページ上部パンくず：.inner内なのでcommon.cssのpadding重複を解除 */
.breadcrumb-area .inner .breadcrumb {
  padding-left: 0;
  padding-right: 0;
}

/* --- 2. 水面背景エリア --- */
.lower-bg-wrapper {
  background: #E9EBEC url('../images/products/bg-products.jpg') no-repeat center top / cover;
  padding-bottom: 80px;
  display: flex;
  flex-direction: column;
}
.lower-title-area { padding: 40px 0 24px; }  /* bottom追加で見出し下余白を確保 */
.lower-title-area .inner { max-width: 1200px; margin: 0 auto;}

.lower-main-title {
  font-family: 'Inria Sans', 'Noto Sans JP', sans-serif;
  font-weight: 400;
  font-size: 32px;
  line-height: 1;
  letter-spacing: 0.05em;
  color: #ffffff;
  border-bottom: 1px solid rgba(255, 255, 255, 0.4);
  padding-bottom: 15px;
  display: block;
}

/* カテゴリー別：背景が明るい場合は見出しを#4B5B64に */
.bg-panel .lower-main-title,
.bg-water .lower-main-title {
  color: #4B5B64;
  border-bottom-color: #4B5B64;
}
.bg-panel .lower-sub-title,
.bg-water .lower-sub-title {
  color: #4B5B64;
}
.lower-sub-title {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.85);
  font-weight: 400;
  margin-top: 12px;
  letter-spacing: 0.03em;
}

/* 水販売機ページの「シリーズ」小文字 */
.lower-main-title-sub {
  font-size: 0.6em;
  font-weight: 400;
  letter-spacing: 0.05em;
  vertical-align: middle;
  margin-left: 4px;
}

/* --- 3. 白い箱（製品・バナーコンテナ） --- */
.lower-main-content { background: transparent; }
.lower-main-content .white-box {
  background: #ffffff;
  padding: 40px 60px;
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
}

/* --- 下部パンくず --- */
.breadcrumb-bottom {
  width: 100%; background: #ffffff; padding: 7px 20px; font-size: 13px; border-top: 1px solid #eee;
}
.breadcrumb-bottom .inner { max-width: 1200px; margin: 0 auto; }
.breadcrumb-bottom a { text-decoration: none; color: #0D518C; font-weight: 500; }
.breadcrumb-bottom span:not(.current) { margin: 0 6px; color: #9AA5AC; font-size: 14px; }
.breadcrumb-bottom span.current { color: #4B5B64; font-weight: 400; margin-left: 0; }

/* --- 「TOPへ戻る」ボタン帯（全ページ共通） --- */
.lower-back-area {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 106px;
  padding: 0 20px;
  background:
    linear-gradient(rgba(41, 66, 87, 0.65), rgba(41, 66, 87, 0.65)),
    url('../images/about/bg-about-back.jpg') no-repeat center center / cover;
}
.lower-back-btn {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 359px;
  padding: 14px 32px;
  border: 1px solid #ffffff;
  color: #ffffff;
  font-size: 14px;
  font-weight: 550;
  letter-spacing: 0.05em;
  background: transparent;
  text-decoration: none;
  transition: 0.25s;
}
.lower-back-btn span {
  font-size: 18px;
  line-height: 1;
}
.lower-back-btn:hover {
  background: #ffffff;
  color: #294257;
}

@media (max-width: 768px) {
  .lower-back-area {
    height: auto;
    padding: 30px 16px;
  }
  .lower-back-btn {
    width: 100%;
    max-width: 320px;
    padding: 14px 20px;
    font-size: 13px;
  }
}


/* --- SP用レイアウト --- */
@media (max-width: 768px) {
  .lower-bg-wrapper {
    background: #fff; 
    padding-bottom: 40px;
  }
  /* パンくず inner: 他テキストの左端(20px)に揃えるため横padding付与 */
  .breadcrumb-area .inner {
    padding: 0 20px;
  }
  /* フッターパンくず：outer padding:20px + .innerのpadding:20px = 40px になるのを防ぐ
     footer-links の左端20pxに揃える */
  .breadcrumb-bottom .inner {
    padding: 0;
  }
  .lower-title-area .inner {
    padding: 0 20px;
  }
  .lower-main-title {
    font-size: 20px; color: #294257; border-bottom: 1px solid #294257; padding-bottom: 10px;
  }
  .lower-sub-title {
    font-size: 14px;
    color: #4B5B64;
    margin-top: 8px;
  }
  .lower-main-content .white-box {
    padding: 0 20px 40px;
    background: transparent;
  }
}