@charset "UTF-8";
/* ==========================================================================
   Project: Hero Section (.p-hero)
   ========================================================================== */
.p-hero {
  position: relative;
  /* 斜めのグラデーション背景（左60%が白、右40%が緑） */
  background-image: linear-gradient(100deg, #f4f7f6 60%, #54947c 0%);
  padding: 15px 20px;
  overflow: hidden;
  z-index: 1; /* 擬似要素を背面に置くための基準 */
}
/* 薄く透ける製品画像を配置するための擬似要素 */
.p-hero::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-image: url("../img/bg_hero-main.png");
  background-position: center right;
  background-repeat: no-repeat;
  opacity: 0.2;
  mix-blend-mode: multiply; /* 背景の緑色と馴染ませる */
  z-index: -1;
}
.p-hero__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 1080px;
  margin: 0 auto;
  gap: 40px;
}
.p-hero__content {
  flex: 1;
  max-width: 600px;
}
.p-hero__logo {
  margin-bottom: 15px;
}
.p-hero__logo img {
  max-width: 80%;
  height: auto;
  display: block;
}
.p-hero__catch {
  color: #333333;
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: 0.05em;
  margin-bottom: 40px;
}
.p-hero__btn {
  margin-top: 20px;
}
.p-hero__image {
  flex: 0 0 320px;
  text-align: center;
}
.p-hero__image img {
  max-width: 70%;
  display: block;
  margin: 0 auto;
}
/* ==========================================================================
   Project: Intro Section (.p-intro)
   ========================================================================== */
.p-intro {
  padding: 40px 20px 0px;
  background-color: #ffffff;
}
.p-intro__inner {
  max-width: 1000px;
  margin: 0 auto;
  text-align: center;
}
.p-intro__title {
  color: #3B7E66;
  font-size: 1.8rem; /* ★文字を少し大きく */
  font-weight: 700;
  border: none; /* ★上下のボーダーを削除 */
  padding: 0;
  margin-bottom: 10px;
  position: relative;
  display: inline-block;
}
.p-intro__text {
  font-size: 1.1rem;
  line-height: 1.8;
  color: #333333;
  text-align: left; /* 左揃えにする */
  display: inline-block; /* テキストの塊を中央に配置する */
}
/* ==========================================================================
   Project: Feature Section (.p-feature)
   ========================================================================== */
.p-feature {
  padding: 20px 20px;
  background-color: #ffffff;
}
.p-feature__inner {
  max-width: 1160px;
  margin: 0 auto;
  text-align: center; /* タイトルとサブタイトルを中央寄せ */
}
.p-feature__title {
  font-size: 2rem;
  font-weight: 700;
  color: #235543;
  margin-bottom: 40px;
  display: inline-block;
}
.p-feature__lead {
  text-align: left;
  font-size: 1.1rem;
  line-height: 1.8;
  margin-bottom: 60px;
  border: 2px solid #55957E;
  padding: 40px;
  background-color: #f9fbfb;
}
.p-feature__lead p {
  margin-bottom: 1em;
}
.p-feature__lead p:last-child {
  margin-bottom: 0;
}
.p-feature__subtitle {
  font-size: 1.8rem;
  font-weight: 700;
  color: #235543;
  margin-bottom: 30px;
}
.p-feature__subtitle-num {
  font-size: 2.6rem;
  margin: 0 5px;
}
.p-feature__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 15px;
  margin-bottom: 15px;
}
.p-feature__card {
  border: 2px solid #55957E;
  display: flex;
  flex-direction: column;
  background-color: #ffffff;
}
.p-feature__card-title {
  background-color: #55957E;
  color: #ffffff;
  font-size: 1.2rem;
  font-weight: 700;
  text-align: center;
  padding: 15px 10px;
  margin: 0;
  min-height: 3.6em; /* 2行になっても高さを揃える */
  display: flex;
  align-items: center;
  justify-content: center;
}
/* アイコンエリアの修正 */
.p-feature__card-icon {
  text-align: center;
  padding: 0px; /* ★余白を減らす（20px -> 10px） */
  height: 130px; /* ★高さを固定して、横並びのカード間で配置を統一する */
  display: flex;
  align-items: center;
  justify-content: center;
}
/* アイコン画像の修正 */
.p-feature__card-icon img {
  width: 80%; /* ★サイズを大きくする（60% -> 80%） */
  max-width: 150px; /* ★最大幅も広げる（120px -> 150px） */
  height: auto;
}
/* テキストエリアの修正 */
.p-feature__card-text {
  padding: 0 15px 20px;
  font-size: 0.9rem;
  line-height: 1.6;
  text-align: left;
  /* margin-top: auto; を削除します（アイコンエリアの高さが揃ったため不要になります） */
}
.p-feature__note {
  text-align: right;
  font-size: 0.8rem;
  color: #333333;
}
/* ==========================================================================
   Project: Spec Section (.p-spec)
   ========================================================================== */
.p-spec {
  padding: 40px 20px;
  background-color: #f3f3f3; /* 薄いグレーでセクションを区切る */
}
.p-spec__inner {
  max-width: 1080px;
  margin: 0 auto;
}
.p-spec__title {
  font-size: 2rem;
  font-weight: 700;
  color: #235543;
  margin-bottom: 40px;
  text-align: center;
}
.p-spec__grid {
  display: flex;
  gap: 40px;
  background-color: #ffffff;
  border: 1px solid #55957E;
  padding: 40px;
}
.p-spec__info {
  flex: 1;
}
.p-spec__visual {
  flex: 0 0 400px;
  text-align: center;
}
.p-spec__section {
  margin-bottom: 30px;
}
.p-spec__section:last-child {
  margin-bottom: 0;
}
.p-spec__heading {
  font-size: 1.2rem;
  font-weight: 700;
  color: #333333;
  border-bottom: 2px solid #55957E;
  padding-bottom: 10px;
  margin-bottom: 15px;
}
.p-spec__list {
  list-style: disc;
  padding-left: 1.5em;
  line-height: 1.8;
}
.p-spec__list li {
  margin-bottom: 5px;
}
.p-spec__note {
  font-size: 0.9rem;
  color: #666666;
}
.p-spec__text {
  line-height: 1.8;
}
.p-spec__size {
  font-size: 1.1rem;
  font-weight: 700;
  margin-bottom: 20px;
}
.p-spec__image img {
  max-width: 100%;
  height: auto;
}
.p-spec__caption {
  font-size: 0.8rem;
  text-align: right;
  margin-top: 10px;
  color: #666666;
}
/* ==========================================================================
   Project: Flow Section (.p-flow) - タイムライン型デザイン
   ========================================================================== */
.p-flow {
  padding: 40px 20px;
  background-color: #ffffff;
}
.p-flow__inner {
  max-width: 1080px;
  margin: 0 auto;
}
.p-flow__title {
  font-size: 2.2rem;
  font-weight: 700;
  color: #1b2a47; /* 画像に合わせた濃いネイビー */
  margin-bottom: 30px;
  text-align: center;
}
.p-flow__lead {
  font-size: 1.1rem;
  line-height: 1.8;
  margin-bottom: 60px;
  text-align: left; /* ★文章を左揃えにする */
  display: table; /* ★ブロックとして中央配置するための設定 */
  margin-left: auto;
  margin-right: auto;
}
/* カードのグリッド */
.p-flow__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-bottom: 20px;
}
/* カード本体 */
.p-flow__step {
  background-color: #f7f7f9;
  border-radius: 8px;
  border: 1px solid #e0e0e0;
  padding: 0 15px 20px;
  overflow: hidden; /* ヘッダーの背景が角丸からはみ出ないようにする */
  text-align: center;
  display: flex;
  flex-direction: column;
}
/* STEPラベル（緑背景のヘッダーに変更） */
.p-flow__step-badge {
  display: block;
  background-color: #55957E; /* ★追加: 背景色を緑にする */
  color: #ffffff; /* ★変更: 文字色を白にする */
  font-size: 1.2rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  padding: 15px 10px; /* ★追加: ヘッダーの内側に上下の余白をもたせる */
  margin: 0 -20px 25px; /* ★追加: ネガティブマージンで親要素の左右余白(20px)を打ち消し、横幅いっぱいに広げる */
}
/* 画像 */
.p-flow__step-image {
  margin-bottom: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 200px; /* 画像の高さがバラバラでも揃うように固定 */
}
.p-flow__step-image img {
  width: 260%;
  max-width: none; /* ★最大幅の制限を解除して大きくする */
  height: 100%; /* ★エリアいっぱいに広げる */
  object-fit: contain; /* ★縦横比を維持したまま全体を表示 */
}
/* タイトル */
.p-flow__step-title {
  font-size: 1.2rem;
  font-weight: 700;
  color: #1b2a47;
  line-height: 1.4;
  margin: 5px auto 10px;
}
.p-flow__step-title span {
  font-size: 0.85rem;
  font-weight: normal;
  display: block;
  margin-top: 5px;
}
/* テキスト */
.p-flow__step-text {
  font-size: 0.95rem;
  line-height: 1.6;
  text-align: left; /* 長文のため、読みやすさを考慮して左揃え */
  color: #333333;
  font-feature-settings: "palt"; /* ★追加: 日本語の無駄な文字間隔を自動で詰める */
}
.p-flow__caption {
  text-align: right;
  font-size: 0.8rem;
  color: #666666;
}
/* ==========================================================================
   Media Queries (SP)
   ========================================================================== */
@media (max-width: 768px) {
  /* Hero Section SP Override */
  .p-hero {
    /* 背景の分割を「斜め（170度）」に変更（割合は画像に合わせて微調整可能） */
    background-image: linear-gradient(160deg, #f4f7f6 58%, #54947c 0%);
    padding: 40px 15px;
  }
  /* スマホ表示時は背景の透かし画像を非表示にする */
  .p-hero::before {
    display: none;
  }
  /* ★変更: 要素の並び順をCSSで入れ替えるためのFlexbox設定 */
  .p-hero__inner {
    display: flex;
    flex-direction: column;
    text-align: center;
    gap: 0; /* gapをリセットし、各要素のmarginで余白を管理する */
  }
  .p-hero__content {
    display: contents; /* ラッパーの枠を無効化し、内側の要素を直接並べ替え可能にする */
  }
  /* 要素ごとの並び順（order）と余白の指定 */
  .p-hero__logo {
    order: 1; /* 1番目 */
    margin-bottom: 20px;
  }
  .p-hero__logo img {
    max-width: 320px;
    margin: 0 auto;
  }
  .p-hero__catch {
    order: 2; /* 2番目 */
    font-size: 1.3rem;
    margin-bottom: 20px;
    text-align: left;
  }
  .p-hero__image {
    order: 3; /* 3番目 */
    flex: auto;
    width: 100%;
    max-width: 230px;
    margin: 0 auto 30px; /* 画像の下にボタンとの余白を設定 */
  }
  .p-hero__btn {
    order: 4; /* 4番目（一番下） */
    margin-top: 0;
  }
  /* 導入セクション */
  .p-intro {
    padding: 40px 15px 0px;
  }
  .p-intro__title {
    font-size: 1.4rem;
    padding: 15px 0;
    margin-bottom: 20px;
  }
  .p-intro__text {
    font-size: 1rem;
    text-align: left; /* スマホ閲覧時は左揃えにして可読性を保つ */
  }
  /* スマホ閲覧時はPC用の強制改行を無効化し、自然な折り返しにする */
  .p-intro__text br {
    display: none;
  }
  /* 選ばれる理由セクション */
  .p-feature {
    padding: 20px 15px 40px;
  }
  .p-feature__title {
    font-size: 1.6rem;
    margin-bottom: 30px;
  }
  .p-feature__lead {
    padding: 20px;
    font-size: 1rem;
    margin-bottom: 40px;
  }
  .p-feature__subtitle {
    font-size: 1.4rem;
    margin-bottom: 20px;
  }
  .p-feature__subtitle-num {
    font-size: 1.8rem;
  }
  .p-feature__grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .p-feature__card-title {
    font-size: 1rem;
    padding: 10px;
    min-height: 4em;
  }
  .p-feature__card-icon {
    padding: 0px 15px;
  }
  .p-feature__card-icon img {
    width: 70%;
  }
  .p-feature__card-text {
    font-size: 0.9rem;
    padding: 0 10px 15px;
  }
  /* 商品特長セクション */
  .p-spec, .p-flow {
    padding: 40px 15px;
  }
  .p-spec__title, .p-flow__title {
    font-size: 1.6rem;
    margin-bottom: 30px;
  }
  .p-spec__grid {
    flex-direction: column;
    padding: 20px;
    gap: 30px;
  }
  .p-spec__visual {
    flex: auto;
  }
  .p-flow {
    padding: 50px 15px;
  }
  .p-flow__title {
    font-size: 1.6rem;
  }
  .p-flow__lead {
    font-size: 1rem;
    text-align: left;
    margin-bottom: 40px;
  }
  .p-flow__lead br {
    display: none;
  }
  /* スマホ時は1列に縦積み */
  .p-flow__grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .p-flow__step {
    padding: 0 15px 30px; /* 上余白を0にし、左右余白を15pxに設定 */
  }
}