@charset "UTF-8";

/* ========================================
   about.css  v4
   タニモトのコインシャワーについて
======================================== */


/* フォント指定 */
.about-page .lower-bg-wrapper {
  background:
    linear-gradient(rgba(59, 78, 89, 0.45), rgba(59, 78, 89, 0.45)),
    url('../images/about/bg-about-title.jpg') no-repeat center center / cover;
  padding: 0;
}

.about-page .lower-title-area {
  background: transparent;
  padding: 0;
}

.about-page .lower-main-title {
  font-family: 'Inria Sans', sans-serif;
  font-weight: 550;
  font-size: 20px;
  line-height: 60px;
  letter-spacing: 1px;
  text-align: center;
  color: #ffffff;
  border-bottom: none;
  padding: 0;
  display: block;
}

@media (max-width: 768px) {
  /* SP：コインシャワー導入帯と同じ背景 */
  .about-page .lower-bg-wrapper {
    background:
      linear-gradient(rgba(59, 78, 89, 0.55), rgba(59, 78, 89, 0.55)),
      url('../images/about/bg-about-water.jpg') no-repeat center center / cover,
      #4B5B64;
    padding-bottom: 0;
  }
  .about-page .lower-title-area {
    background: transparent;
    padding: 22px 0 22px;
  }
  .about-page .lower-main-title {
    font-size: 20px;
    line-height: normal;
    color: #ffffff;
    border-bottom: 1px solid #ffffff;
    padding: 10px;
  }
}


/* =========================================
   はじめにセクション
   bg-about-intro.svg + 白オーバーレイ 75%
========================================= */
.about-intro-section {
  background:
    url('../images/about/bg-about-intro.jpg') no-repeat center center / cover;
  padding: 80px 20px 70px;
  text-align: center;
}

@media (max-width: 768px) {
  .about-intro-section {
    background:
      url('../images/about/bg-about-intro.jpg') no-repeat center center / cover;
    padding: 50px 20px 40px;
  }
}

.about-intro-inner {
  max-width: 860px;
  margin: 0 auto;
}

/* はじめに 見出し
   Yu Mincho 400 / 32px / ls:3.2px / underline */
.about-title-intro {
  font-family: 'Yu Mincho', '游明朝', YuMincho, serif;
  font-weight: 400;
  font-size: 32px;
  line-height: 35px;
  letter-spacing: 3.2px;
  text-align: center;
  color: #4B5B64;
  text-decoration: underline;
  text-decoration-style: solid;
  text-underline-offset: 6px;
  text-decoration-thickness: 2px;
  margin-bottom: 48px;
  display: block;
}

@media (max-width: 768px) {
  .about-title-intro {
    font-size: 22px;
    line-height: 1.5;
    margin-bottom: 32px;
  }
}

/* 本文：Yu Mincho 400 / 16px / lh:47px / ls:0.32px */
.about-intro-text {
  font-family: 'Yu Mincho', '游明朝', YuMincho, serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 47px;
  letter-spacing: 0.32px;
  text-align: center;
  color: #4B5B64;
  margin-bottom: 0;
}

/* 「いつでも・誰でも・安全で手軽に楽しめる快適なシャワー」
   Yu Gothic Pr6N 400 / 24px / lh:35px / ls:0.48px / #368ABF */
.about-intro-text strong {
  font-family: 'Yu Gothic Pr6N', 'Noto Sans JP', 'ヒラギノ角ゴ ProN W3', 'Hiragino Kaku Gothic ProN', sans-serif;
  font-weight: 400;
  font-size: 24px;
  line-height: 35px;
  letter-spacing: 0.48px;
  color: #368ABF;
  display: block;
  margin: 16px 0;
}

@media (max-width: 768px) {
  .about-intro-text {
    font-size: 14px;
    line-height: 2;
    text-align: center;
  }
  .about-intro-text strong {
    font-size: 18px;
    line-height: 1.6;
  }
}


/* =========================================
   セクション間 矢印（↓）
   icon-arrow-up-dark.svg を rotate(180deg)
   PC:48px / SP:36px
========================================= */
.about-arrow-down {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 32px 0;
  background: transparent;
}

.about-intro-section + .about-arrow-down,
.about-arrow-down--on-white {
  background: #ffffff;
}

.about-arrow-down img {
  width: 48px;
  height: auto;
  transform: rotate(180deg);
  opacity: 0.5;
  display: block;
}

@media (max-width: 768px) {
  .about-arrow-down { padding: 24px 0; }
  .about-arrow-down img { width: 36px; }
}


/* =========================================
   特徴セクション（PC）
   3カラム: 左特徴 / 中央画像 / 右特徴
   背景 #F7FCFF
========================================= */
.about-features-section {
  background: #F7FCFF;
  padding: 80px 20px;
  text-align: center;
}

.about-features-inner {
  max-width: 1000px;
  margin: 0 auto;
}

/* タニモトのコインシャワーの特徴
   Inria Sans 400 / 36px / ls:1.8px */
.about-title-features {
  font-family: 'Inria Sans', 'Noto Sans JP', sans-serif;
  font-weight: 400;
  font-size: 36px;
  line-height: 1;
  letter-spacing: 1.8px;
  text-align: center;
  color: #3B4E59;
  text-decoration: none;
  margin-bottom: 50px;
  display: block;
}

/* PC: 3カラムグリッド */
.about-features-layout {
  display: grid;
  grid-template-columns: 1fr 220px 1fr;
  gap: 0 40px;
  align-items: center;
}

/* 中央：製品画像 */
.about-features-center {
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top: 20px;
}
.about-features-center img {
  width: 500px;
  max-width: 150%;
  height: auto;
}
@media (max-width: 768px) {
  .about-features-center img { width: 250px; }
}

/* 特徴アイテム */
.about-feature-item {
  padding: 24px 12px;
  text-align: center;
  border-bottom: 1px solid rgba(41, 66, 87, 0.15);
}
.about-feature-item:last-child {
  border-bottom: none;
}
/* シンプル設計（右列最初）の上に区切り線：SPのみ */
@media (max-width: 768px) {
  .about-features-layout > div:last-child .about-feature-item:first-child {
    border-top: 1px solid rgba(41, 66, 87, 0.15);
  }
}
.about-feature-icon {
  width: 56px;
  height: 56px;
  margin: 0 auto 16px;
  display: block;
}

/* フォント指定 */
.about-feature-title {
  font-family: 'Inria Sans', 'Noto Sans JP', sans-serif;
  font-weight: 300;
  font-size: 22px;
  line-height: 1;
  letter-spacing: 1.1px;
  text-align: center;
  color: #4B5B64;
  margin-bottom: 12px;
}

/* 特徴説明文: Inria Sans 300 / 13px / lh:20px */
.about-feature-text {
  font-family: 'Inria Sans', 'Noto Sans JP', sans-serif;
  font-weight: 300;
  font-size: 13px;
  line-height: 20px;
  color: #3B4E59;
}
.about-feature-note {
  font-size: 11px;
  color: #75838A;
  margin-top: 8px;
  line-height: 1.5;
  text-align: right;
}


/* =========================================
   特徴セクション（SP）
   製品画像：最上部・全幅
   特徴：1カラム
========================================= */
@media (max-width: 768px) {
  .about-features-section {
    padding: 40px 16px;
  }
  .about-title-features {
    font-size: 22px;
    line-height: 1.5;
    margin-bottom: 24px;
  }

  .about-features-layout {
    display: flex;
    flex-wrap: wrap;
    gap: 0;
  }

  /* 製品画像：order:-1 で最上部・全幅 */
  .about-features-center {
    display: flex !important;
    order: -1;
    width: 100%;
    justify-content: center;
    padding: 0 0 24px;
    margin-bottom: 0;
  }
  .about-features-center img {
    width: 250px;
    height: auto;
  }

  .about-features-layout > div:not(.about-features-center) {
    width: 100%;
  }

  .about-feature-item {
    padding: 24px 12px;
  }
  .about-feature-icon {
    width: 48px;
    height: 48px;
    margin-bottom: 12px;
  }
  .about-feature-title {
    font-size: 16px;
    margin-bottom: 10px;
    letter-spacing: 0.5px;
  }
  .about-feature-text {
    font-size: 13px;
    line-height: 1.8;
  }
}


/* =========================================
   「コインシャワー導入で...」帯
   Yu Mincho 600 / 30px / ls:5%
   背景: rgba(59,78,89,0.60) + bg-about-water.jpg
========================================= */
.about-water-band {
  background:
    linear-gradient(rgba(59, 78, 89, 0.55), rgba(59, 78, 89, 0.55)),
    url('../images/about/bg-about-water.jpg') no-repeat center center / cover,
    #4B5B64;
  padding: 25px 20px;
  text-align: center;
}

.about-water-band-title {
  font-family: 'Yu Mincho', '游明朝', YuMincho, serif;
  font-weight: 400;
  font-size: 30px;
  line-height: 1;
  letter-spacing: 0.05em;
  text-align: center;
  color: #ffffff;
  text-shadow: 0px 1px 4px rgba(0, 0, 0, 0.50);
}

@media (max-width: 768px) {
  .about-water-band { padding: 24px 16px; }
  .about-water-band-title { font-size: 18px; line-height: 1.5; }
}


/* =========================================
   水資源セクション（コンテンツ）
   背景：白
========================================= */
.about-water-section {
  background: #ffffff;
  padding: 60px 20px 80px;
  text-align: center;
}

@media (max-width: 768px) {
  .about-water-section { padding: 40px 16px 60px; }
}

.about-water-inner {
  max-width: 860px;
  margin: 0 auto;
}

/* 「コインシャワーは水資源を大切にします」
   Yu Gothic Pr6N 400 / 24px / ls:1.92px
   border-bottom: 1px #CECECE */
.about-water-lead {
  font-family: 'Yu Gothic Pr6N', 'Noto Sans JP', 'ヒラギノ角ゴ ProN W3', 'Hiragino Kaku Gothic ProN', sans-serif;
  font-weight: 400;
  font-size: 24px;
  line-height: 1.4;
  letter-spacing: 1.92px;
  text-align: center;
  color: #294257;
  display: inline-block;
  border-bottom: 1px solid #CECECE;
  padding-bottom: 10px;
  margin-bottom: 0;
}

/* 「コインシャワー」「水資源」→ #368ABF */
.about-water-lead .text-cyan,
.about-water-lead .text-blue {
  color: #368ABF;
}

/* 「設定時間を5分で運用した場合の節水効果」
   Inria Sans 300 / 24px / ls:1.68px
   「5」は 27px */
.about-water-subtitle {
  font-family: 'Inria Sans', 'Noto Sans JP', sans-serif;
  font-weight: 300;
  font-size: 24px;
  letter-spacing: 1.68px;
  color: #3B4E59;
  margin-bottom: 30px;
  margin-top: 20px;
  display: block;
}
.about-water-subtitle .about-num-large {
  font-family: 'Inria Sans', sans-serif;
  font-size: 27px;
  font-weight: 300;
  line-height: 1;
}

@media (max-width: 768px) {
  .about-water-lead {
    font-size: 18px;
    letter-spacing: 0.8px;
  }
  .about-water-subtitle {
    font-size: 16px;
    letter-spacing: 0.5px;
  }
  .about-water-subtitle .about-num-large {
    font-size: 20px;
  }
}


/* =========================================
   節水比較テーブル
   border-spacing: 1px + background: #CECECE でグリッド線表現
========================================= */
.about-table-wrap {
  margin-bottom: 0;
}

.about-compare-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 1px;
  background: #CECECE;
  font-family: 'Inria Sans', 'Noto Sans JP', sans-serif;
  margin-bottom: 0;
}

/* 全セル共通 */
.about-compare-table th,
.about-compare-table td {
  border: none;
  padding: 12px 16px;
  text-align: center;
  line-height: 1.4;
  color: #3B4E59;
  background: #ffffff;
}

/* ヘッダー左（空白セル）*/
.about-compare-table thead th:first-child {
  background: #75838A;
}

/* ヘッダー 通常のシャワー */
.about-compare-table thead th:nth-child(2) {
  background: #ffffff;
  font-weight: 400;
  font-size: 14px;
  color: #4B5B64;
}

/* ヘッダー コインシャワー */
.about-compare-table thead th:last-child {
  background: #ffffff;
  font-weight: 550;
  font-size: 14px;
  color: #368ABF;
}

/* 左列（項目名）：#75838A 背景・明るいテキスト */
.about-compare-table .col-label {
  background: #75838A;
  color: #F5F5F5;
  font-weight: 400;
  font-size: 14px;
  text-align: left;
  min-width: 130px;
}

/* 通常のシャワー列の値：#F5F5F5 背景（.highlight / .row-shared セルは除外） */
.about-compare-table td:nth-child(2):not(.col-label):not(.highlight):not(.row-shared) {
  background: #F5F5F5;
  color: #3B4E59;
}

/* コインシャワー列の値：#368ABF テキスト・白背景 */
.about-compare-table .highlight {
  color: #368ABF;
  font-weight: 550;
  background: #ffffff;
}

/* 30名（人）行：両列共通データなのでダーク色・白背景 */
.about-compare-table .row-shared {
  color: #4B5B64;
  font-weight: 400;
  background: #ffffff;
  text-align: center;
}

/* 大きい数値 (24px) — 使用回数・流量・時間 */
.about-num-xl {
  font-family: 'Inria Sans', sans-serif;
  font-size: 24px;
  font-weight: 400;
  line-height: 1;
  display: inline;
}

/* 単位・括弧テキスト (16px) */
.about-num-unit {
  font-size: 16px;
  font-weight: 400;
  display: inline;
}

/* 中程度の数値 (20px) — 水量の行 */
.about-num-l {
  font-family: 'Inria Sans', sans-serif;
  font-size: 20px;
  font-weight: 400;
  line-height: 1;
  display: inline;
}

@media (max-width: 768px) {
  .about-compare-table {
    font-size: 12px;
  }
  .about-compare-table th,
  .about-compare-table td {
    padding: 8px 6px;
  }
  .about-compare-table .col-label {
    min-width: 80px;
  }
  .about-num-xl { font-size: 16px; }
  .about-num-unit { font-size: 12px; }
  .about-num-l { font-size: 14px; }
}

/* 平均約50%減↓：テーブル右下 */
.about-reduce-badge {
  display: block;
  text-align: right;
  font-size: 13px;
  font-weight: 550;
  color: #294257;
  margin-top: 8px;
  margin-bottom: 40px;
  background: none;
  padding: 0;
}
.about-reduce-badge .reduce-color {
  color: #368ABF;
}

/* 節水コールアウント（1枚画像） */
.about-savings-img-wrap {
  margin: 0 auto 40px;
  max-width: 560px;
  text-align: center;
}
.about-savings-img-wrap img {
  width: 100%;
  height: auto;
  display: block;
}


/* コールアウント下の大きい矢印（ブルー #368ABF） */
.about-arrow-down--large {
  display: flex;
  justify-content: center;
  padding: 20px 0 40px;
  background: #ffffff;
}

.about-arrow-down--large img {
  width: 60px;
  height: auto;
  transform: rotate(180deg);
  /* #368ABF に変換するフィルター */
  filter: brightness(0) saturate(100%) invert(53%) sepia(58%) saturate(502%) hue-rotate(174deg) brightness(92%) contrast(84%);
}

@media (max-width: 768px) {
  .about-arrow-down--large { padding: 16px 0 32px; }
  .about-arrow-down--large img { width: 44px; }
}


/* フォント指定 */
.about-body-text {
  font-family: 'Inria Sans', 'Noto Sans JP', sans-serif;
  font-weight: 300;
  font-size: 16px;
  line-height: 40px;
  letter-spacing: 1.60px;
  color: #3B4E59;
  text-align: left;
  max-width: 574px;
  margin: 0 auto 20px;
}

/* 黄色下線（太さ4px / #FFDE5C） */
.about-underline {
  font-weight: 400;
  color: inherit;
  text-decoration: underline;
  text-decoration-color: #FFDE5C;
  text-underline-offset: 3px;
  text-decoration-thickness: 4px;
}

.about-contact-link {
  color: #0D518C;
  text-decoration: underline;
}

@media (max-width: 768px) {
  .about-body-text {
    font-size: 14px;
    line-height: 2;
    letter-spacing: 0.5px;
  }
}


/* lower.css で全ページ共通の背景画像を設定済み */