@charset "UTF-8";
.area-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 10px;
  list-style-type: none;
  padding: 0;
  margin: 0 0 20px 0;
}

.area-tags li {
  background-color: #f7f8f9; 
  border: 1px solid #e1e3e6;
  border-radius: 8px;
  padding: 2px 6px;
  font-size: 14px;
  color: #333;
  box-shadow: 0 1px 2px rgba(0,0,0,0.05);
  white-space: nowrap;
}

#qr {
  width: 100%;
  max-width: 200px;
  height: auto;
  margin: 20px auto;
  display: block;
}

.to-form {
  display: inline-block;
  transition: opacity 0.3s ease, filter 0.3s ease;
}

.to-form:hover {
  opacity: 0.9;
  filter: brightness(120%);
}

.to-form img {
  max-width: 100%;
  height: auto;
}

.form-btn {
  text-align: center;
  margin: 25px 0 0 0;
}

.to-form-top {
  max-width: 280px;
  display: inline-block;
  transition: opacity 0.3s ease, filter 0.3s ease;
}

.to-form-top:hover {
  opacity: 0.9;
  filter: brightness(120%);
}

#main {
  margin: 30px 0 0 0;
  background-color: #FFF;
  border-radius: 18px;
}

/* --- サービス一覧のグリッド設定 --- */
.service-collection {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-bottom: 30px;
}

/* --- カード全体のデザイン --- */
.service-tile {
  display: flex;
  flex-direction: column;
  border: 1px solid #ccc;
  border-radius: 15px;
  box-shadow: 0 0 3px rgba(0,0,0,0.15);
  overflow: hidden; /* はみ出し防止 */
  text-decoration: none;
  color: #333;
  transition: transform 0.2s, box-shadow 0.2s;
  background-color: #fff;
}

/* --- カードホバー時のアクション（浮き上がり） --- */
.service-tile:hover {
  transform: translateY(-4px);
  border: 1px solid #bbb;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

/* --- 画像エリアの調整 --- */
.tile-img {
  width: 100%;
  aspect-ratio: 4 / 3; /* 画像の比率を固定 */
  overflow: hidden; /* 拡大しても枠からはみ出さないようにする */
}

.tile-img img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* 画像を綺麗に枠に合わせる */
  display: block;
  transition: transform 0.4s ease; /* 拡大アニメーションの滑らかさ */
}

/* --- 画像ホバー時の拡大設定 --- */
.service-tile:hover .tile-img img {
  transform: scale(1.05); /* 1.05倍に拡大 */
}

/* --- 名前部分の調整 --- */
.tile-name {
  padding: 8px 8px;
  text-align: center;
  font-size: 1.3rem;
  font-weight: bold;
  flex-grow: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* --- レスポンシブ設定 --- */
@media (max-width: 600px) {
  .service-collection {
    grid-template-columns: repeat(3, 1fr); /* タブレットは3列 */
  }
}

@media (max-width: 600px) {
  .service-collection {
    grid-template-columns: repeat(2, 1fr); /* スマホは2列 */
  }
}

h3 {
  text-align: center;
  color: #0390FF;
}

/* ヘッダーを固定し、影をつけて動かす設定 */
#header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 9999;
  
  /* ↓この2行を追加！ */
  background-color: #fff; /* 背景を白に */
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15); /* ふんわりした影 */
  
  transition: transform 0.3s ease;
}

/* ヘッダーが被らないようにページ全体を下げる */
body {
  padding-top: 100px; /* ヘッダーの高さに合わせて微調整してね */
}

/* --- 「選ばれる理由」エリアの全体の枠組み --- */
.merit-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* PCでは綺麗に3列に並べる */
  gap: 20px; /* カード同士の隙間 */
  margin-top: 40px;
}

/* --- 各カード（白枠）のデザイン --- */
.merit-box {
  background: #fff;
  border: 1px solid #e1e3e6; /* 薄いグレーの枠線 */
  border-radius: 15px; /* 角を少し丸くする */
  padding: 0 10px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.05); /* ふんわりした控えめな影 */
  display: flex;
  flex-direction: column;
}

/* --- カード上部（数字とタイトル） --- */
.merit-header {
  text-align: center; /* ここは中央寄せ */
  padding-bottom: 10px;
  margin-bottom: 10px;
}

/* --- 青いタイトル --- */
.merit-title {
  color: #0390FF; /* 青色 */
  font-size: 1.7rem;
  font-weight: bold;
  margin: 0;
  line-height: 1.4;
}

/* --- 本文エリア --- */
.merit-body {
  font-size: 1.3rem;
  color: #333;
  line-height: 1.6;
  text-align: left; /* 本文は左寄せにして読みやすく */
}

/* --- 3つ目の箱のリスト（チェックマーク）の装飾 --- */
.merit-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.merit-list li {
  margin-bottom: 20px;
}

.merit-list strong {
  color: #0390FF; /* チェックマークの部分を青色に */
  display: block;
  margin-bottom: 0;
}

/* --- ★ 施主支給を徹底サポート！ などのワンポイント --- */
.merit-tag {
  color: #0390FF;
  font-weight: bold;
  text-align: center;
  margin: 0 0 10px;
}

/* --- スマホ表示用（画面が狭い時は1列に縦積みする） --- */
@media (max-width: 600px) {
  .merit-container {
    grid-template-columns: 1fr; /* スマホでは1列 */
  }
}

.center {
  width: auto;
  max-height: 150px;
  height: 100%;
  display: block;
  margin: 0 auto 0;
}

.right {
  width: auto;
  max-height: 150px;
  height: 100%;
  display: block;
  margin: 0 auto; 
  transform: translateX(10px); 
}

.left {
  width: auto;
  max-height: 150px;
  height: 100%;
  display: block;
  margin: 0 auto; 
  transform: translateX(-10px); 
}

/* --- キャラクター画像と見出しを中央に寄せる --- */
.merit-section {
  text-align: center; 
}

/* --- キャラクター画像のサイズと配置の調整（高さで揃える！） --- */
.merit-section img.left,
.merit-section img.right {
  display: inline-block;
  height: 150px; /* ★横幅ではなく「高さ」を固定して2人の背丈を合わせる */
  width: auto;   /* 横幅は画像の比率に合わせて自動調整 */
  margin: 0;
}

@media (max-width: 600px) {
  .merit-section img.left,
  .merit-section img.right {
    /* 2枚横並びなので、1枚あたり最大でも「45%」の幅に制限する（これで絶対にはみ出ない） */
    max-width: 45% !important;
    
    /* 高さは150px固定を解除して、横幅に合わせて自動縮小するようにする */
    height: auto !important;
    transform: none !important;
    /* スマホでも大きくなりすぎないように、最大高さを100pxくらいに制限しておくと綺麗だよ */
    max-height: 100px !important;
    vertical-align: bottom !important;
  }
}

h2 {
  text-align: center;
}

/* --- お支払方法テーブルの全体設定 --- */
.pay-table {
  width: 100%;
  max-width: 650px;    /* 横に広がりすぎないように制限 */
  margin: 40px auto 30px; /* 中央に配置 */
  border-collapse: separate; /* ★角丸にするための必須おまじない */
  border-spacing: 0;   /* セル同士の隙間をピッタリくっつける */
  text-align: center;
}

/* --- 左側の見出し（緑色エリア） --- */
.pay-table th {
  background-color: #4EA72E;       /* 緑色の背景 */
  color: #fff;                     /* 文字は白 */
  padding: 15px 15px;              /* 上下左右の余白 */
  width: 25%;                      /* 左側の幅の割合 */
  vertical-align: middle;
  border-left: 1px solid #4EA72E;  /* 左の枠線 */
  border-bottom: 1px solid #fff;   /* 1行目と2行目の間の白い区切り線 */
}

/* --- 右側のデータ（白色エリア） --- */
.pay-table td {
  background-color: #fff;
  padding: 15px;
  vertical-align: middle;
  border-right: 1px solid #4EA72E; /* 右の枠線 */
  border-bottom: 1px solid #4EA72E;/* 下の枠線 */
}

/* --- 1行目の一番上にも枠線を引く --- */
.pay-table tr:first-child th,
.pay-table tr:first-child td {
  border-top: 1px solid #4EA72E;
}

/* --- 最後の行の左側（th）の下線を緑に戻す --- */
.pay-table tr:last-child th {
  border-bottom: 1px solid #4EA72E;
}

/* --- ★角を丸くする設定 --- */
.pay-table tr:first-child th { border-top-left-radius: 15px; }    /* 左上 */
.pay-table tr:first-child td { border-top-right-radius: 15px; }   /* 右上 */
.pay-table tr:last-child th  { border-bottom-left-radius: 15px; } /* 左下 */
.pay-table tr:last-child td  { border-bottom-right-radius: 15px; }/* 右下 */

/* --- クレジットカード画像のサイズ調整 --- */
.pay-table td img {
  max-height: 30px;      /* 高さを30pxに制限 */
  width: auto; /* 幅は自動調整（←これ大事！） */
  height: auto;/* 高さも自動調整 */
  object-fit: contain;    /* ★これが魔法のコード！比率を保って中に収める */
  margin: 5px 8px;
  vertical-align: middle;
}

/* --- FAQ全体の枠組み --- */
.faq-container {
  width: 100%;
  max-width: 850px; /* 横に広がりすぎないように制限 */
  margin: 40px auto; /* 中央寄せ */
}

/* --- 各質問の箱 --- */
.faq-item {
  border-bottom: 1px solid #e1e3e6; /* 各アイテムの下に薄いグレーの線を引く */
}

/* 一番上のアイテムだけ、上にも線を引く */
.faq-item:first-child {
  border-top: 1px solid #e1e3e6;
}

/* --- 質問（Q）のエリア --- */
.faq-question {
  display: flex;
  justify-content: space-between; /* 文字を左、アイコンを右に分ける */
  align-items: center;
  background-color: #f7f8f9; /* 画像と同じ薄いグレーの背景 */
  padding: 18px 20px;
  font-weight: bold;
  color: #333;
  cursor: pointer;
  list-style: none; /* デフォルトの黒い三角形(▶)を消す */
  outline: none; /* クリック時の青い枠線を消す */
  transition: background-color 0.2s ease;
}

/* Safari用の三角形(▶)消し */
.faq-question::-webkit-details-marker {
  display: none;
}

/* マウスを乗せた時に少し背景色を濃くする */
.faq-question:hover {
  background-color: #e1e3e6;
}

/* --- 右側の開閉アイコン（＋ / ー） --- */
.faq-icon {
  position: relative;
  width: 14px;
  height: 14px;
  flex-shrink: 0; /* 文字が長い時にアイコンが潰れるのを防ぐ */
  margin-left: 15px;
}

/* 横線（常に表示される「ー」の部分） */
.faq-icon::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: #333;
  transform: translateY(-50%);
}

/* 縦線（閉じている時だけ表示されて「＋」になる部分） */
.faq-icon::after {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: 2px;
  height: 100%;
  background-color: #333;
  transform: translateX(-50%);
  transition: transform 0.3s ease, opacity 0.3s ease; /* なめらかに動かす魔法 */
}

.faq-item {
  margin-bottom: 10px; /* ★ ここでQとQの間にスペース（スキマ）を作ります */
  border: 1px solid #eaeaea; /* 上下左右をぐるっと枠線で囲む */
  border-radius: 15px; /* 角を少し丸くして優しい印象に */
  overflow: hidden; /* Qのグレー背景が角丸からはみ出るのを防ぐおまじない */
}

/* ★開いた時（open状態）に縦線を消して「ー」アイコンにする */
.faq-item[open] .faq-question .faq-icon::after {
  transform: translateX(-50%) rotate(90deg);
  opacity: 0;
}

/* 以前の「一番上だけ上に線を引く」という設定をリセット（上書き）します */
.faq-item:first-child {
  border-top: 1px solid #eaeaea;
}

/* --- 回答（A）のエリア --- */
.faq-answer {
.faq-answer {
  padding: 25px 20px;
  background-color: #fff; /* 回答部分は白背景 */
  color: #333;
  line-height: 1.8;
  font-size: 1.6rem;
}
}

/* Aの段落の余白を整える */
.faq-answer p {
  margin: 20px;
}

/* =========================================
   出張エリアのタグ化デザイン
========================================= */

/* --- タグを並べる枠組み（ul） --- */
.area-tags {
  display: flex;
  flex-wrap: wrap;         /* 右端までいったら自動で改行する */
  justify-content: left; /* 全体を中央に寄せる */
  gap: 10px 10px;          /* タグ同士の隙間（上下10px、左右10px） */
  padding: 0;
  margin: 0 0 50px 0;      /* 下のグループとの間にしっかり余白を作る */
  list-style: none;        /* 黒ポッチ(・)を消す */
}

/* --- 各タグ（li）のデザイン --- */
.area-tags li {
  background-color: #f8f8f8;
  border: 1px solid #eaeaea; /* 薄いグレーの枠線 */
  border-radius: 8px;        /* 角を少し丸くする */
  padding: 2px 10px;         /* タグの内側の余白（上下8px、左右16px） */
  color: #333;               /* 文字は濃いグレーで読みやすく */
  font-size: 1.5rem;
  margin: 0;                 /* SIRIUS2の余計な余白を消す */
  box-shadow: 0 2px 6px rgba(0,0,0,0.04); /* ほんの少しだけ影をつけて立体感を出す */
}

/* --- お見積りバナー（ボタン）の調整 --- */
.form-btn {
  text-align: center;   /* バナーを真ん中に寄せる */
  margin: 30px auto;    /* 上下のコンテンツとも少し隙間を空ける */
  padding: 0 4%;        /* ★ここがポイント！左右に4%の余白を作る（ギリギリ防止！） */
  max-width: 700px;     /* PCで見た時に画像が巨大化しすぎないように制限 */
}

/* --- 中の画像の挙動 --- */
.form-btn img {
  width: 100%;          /* 余白を除いた幅にぴったり合わせる */
  height: auto;         /* 画像が歪まないように比率をキープ */
  display: block;
  margin: 20px auto;
}

/* --- 青いカプセル型ボタン（.blueback） --- */
.blueback {
  display: block; /* ブロック要素に変更 */
  width: fit-content; /* 中身の長さに合わせる */
  margin: 10px auto; /* 左右のmarginをautoにして中央に寄せる */
  background-color: #0390FF;
  color: #fff;
  font-weight: bold;
  text-decoration: none;
  padding: 12px 30px;
  border-radius: 50px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
  transition: all 0.3s ease;
}

.blueback:hover {
  background-color: #0077cc;
  transform: translateY(-3px);
  box-shadow: 0 6px 12px rgba(3, 144, 255, 0.4);
}

/* =========================================
   選ばれる理由 / お得で安心な理由 ボックス
========================================= */

/* --- 大枠の箱 --- */
.included-box {
  border: 1px solid #4EA72E;     /* BANSIIROカラーの緑色の枠線 */
  border-radius: 15px;           /* 角を丸く */
  padding: 35px 40px;            /* 内側の余白をゆったりと */
  margin: 40px auto;
  max-width: 650px;
  background-color: #F0FDF4;     /* ほんのり優しい薄緑の背景 */
}

/* --- タイトル部分（✨ BANSIIROの〜） --- */
.included-title {
  display: block;
  text-align: center;
  font-size: 2rem;
  font-weight: bold;
  color: #0390FF;                /* ★文字色を青に変更！ */
  margin-bottom: 25px;           /* 点線を消したので、下の隙間をスッキリさせました */
}

/* --- リスト全体 --- */
.included-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

/* --- リストの各項目（li） --- */
.included-list li {
  margin-bottom: 20px;
  line-height: 1.8;              /* ★行間をリスト全体に設定して読みやすく！ */
}

/* 最後の項目だけ下の隙間をなくす */
.included-list li:last-child {
  margin-bottom: 0;
}

/* --- 青い見出し（中間マージンゼロ！など） --- */
.item-name {
  display: inline;               /* ★改行せずに横に続ける魔法！ */
  color: #0390FF;
  font-size: 1.6rem;
  font-weight: bold;
  margin-right: 10px;            /* ★説明文との間に少しだけ隙間を空ける */
}

/* --- 説明文（テキスト） --- */
.item-desc {
  display: inline;               /* ★見出しのすぐ横に続ける魔法！ */
  font-size: 1.4rem;
  color: #333;
}

/* =========================================
   施工費用（料金表）のテーブルデザイン【シマシマ背景版】
========================================= */

/* --- 上の注意書きテキスト --- */
.price-intro {
  text-align: center;
  font-size: 1.5rem; /* ★変更してくれていた大きめサイズ */
  color: #333;
  margin-bottom: 15px;
}

/* --- テーブル全体の大枠 --- */
.price-table {
  width: 100%;
  max-width: 700px;
  margin: 0 auto 40px;
  border-collapse: separate;
  border-spacing: 0;
  border: 1px solid #4EA72E; /* 外枠は緑色 */
  border-radius: 15px;
  overflow: hidden;
  text-align: center;
}

/* --- ヘッダー（緑の背景部分） --- */
.price-table th {
  background-color: #4EA72E;
  color: #fff;
  padding: 16px 10px;
  font-weight: bold;
  font-size: 1.5rem; /* ★変更してくれていた大きめサイズ */
  border-top: none;
  border-bottom: none;
  border-left: none;
  border-right: none;
}

/* ヘッダーの左側と右側の間にある「白い縦線」 */
.price-table th:first-child {
  border-right: 1px solid #fff; 
  width: 60%;
}

/* 奇数行（1, 3, 5行目...）は白背景 */
.price-table tbody tr:nth-child(odd) td {
  background-color: #fff;
}

/* 偶数行（2, 4, 6行目...）は薄緑（#F0FDF4）背景 */
.price-table tbody tr:nth-child(even) td {
  background-color: #F0FDF4;
}

/* データセルの余白と、グレーの枠線設定 */
.price-table td {
  padding: 10px 10px;
  border-top: none;
  border-left: none;
  border-right: none;
  border-bottom: 1px solid #eaeaea; /* 中の横線は薄いグレー */
  vertical-align: middle;
}

/* 左側のデータセルと右側の間にある「縦線」 */
.price-table td:first-child {
  border-right: 1px solid #eaeaea; /* 中の縦線も薄いグレー */
}

/* ★一番下の行だけ、下線を消す */
.price-table tbody tr:last-child td {
  border-bottom: none;
}

/* --- テキストの装飾（色と大きさ） --- */

/* 左側の青い文字（施工内容） */
.price-table td strong {
  display: block;
  color: #0390FF;
  font-size: 1.6rem;
  margin-bottom: 0;
}

/* 右側の赤い文字（価格） */
.price-value {
  color: #BF0000;
  font-size: 1.8rem;
  font-weight: bold;
}

/* 小さな注釈文字（カッコの中のグレーの部分） */
.unit-note {
  display: block;
  color: #666;
  font-size: 1.3rem;
  font-weight: normal;
  margin-top: 0;
}

/* =========================================
   施工写真のギャラリー（5列グリッド）
========================================= */

/* --- ギャラリー全体を囲う箱 --- */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr); /* ★ここを「5」に変更！パソコンでは5列になります */
  gap: 15px;                 /* 画像の間の隙間 */
  max-width: 1000px;         /* ★5枚並ぶので、箱の最大幅を少し広く（1000px）しました */
  margin: 0 auto 40px;
}

/* --- リンク（<a>タグ）の枠設定 --- */
.gallery-link {
  display: block;
  text-decoration: none;
  border-radius: 15px;       /* 枠の角を丸くする */
  overflow: hidden;          /* 枠からはみ出た部分を隠す（枠固定の魔法！） */
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
  transition: box-shadow 0.3s ease;
}

/* --- 中の画像（<img>タグ）の設定 --- */
.gallery-link img {
  width: 100%;
  height: 100%;
  aspect-ratio: 1 / 0.9;       /* 正方形に揃える */
  object-fit: cover;
  display: block;
  transition: transform 0.3s ease;
}

/* --- マウスを乗せた時の動き --- */
.gallery-link:hover img {
  transform: scale(1.1);    /* 中の画像だけが5%拡大される */
}

.gallery-link:hover {
  box-shadow: 0 8px 16px rgba(0,0,0,0.15);
}

/* --- ★レスポンシブ（画面幅による列数の調整） --- */

/* タブレットくらいの画面幅（900px以下）の時 */
@media (max-width: 600px) {
  .gallery-grid {
    grid-template-columns: repeat(3, 1fr); /* 5列だと窮屈なので「3列」に減らす */
  }
}

/* スマホの画面幅（600px以下）の時 */
@media (max-width: 600px) {
  .gallery-grid {
    grid-template-columns: repeat(2, 1fr); /* さらに狭いので「2列」にする */
    gap: 10px; /* 隙間も少し狭くする */
  }
}


/* =========================================
   画像拡大表示（モーダル）のデザイン
========================================= */

/* --- 画面全体を覆う半透明の黒背景（最初は隠しておく） --- */
#image-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.8); /* ★ここで半透明の黒にしているよ */
  z-index: 99999;            /* ヘッダーよりもさらに一番手前に持ってくる */
  display: flex;
  justify-content: center;   /* 画像を左右の真ん中に */
  align-items: center;       /* 画像を上下の真ん中に */
  opacity: 0;                /* 最初は透明で見えない */
  visibility: hidden;        /* クリックできないように隠す */
  transition: all 0.3s ease; /* ふわっと表示させる魔法 */
}

/* --- JavaScriptで「is-show」クラスがついた時（表示する時）--- */
#image-modal.is-show {
  opacity: 1;
  visibility: visible;
}

/* --- 真ん中に表示される拡大画像 --- */
#modal-img {
  max-width: 90%;            /* 横幅が画面をはみ出ないように */
  max-height: 90vh;          /* 高さも画面からはみ出ないように */
  box-shadow: 0 4px 20px rgba(0,0,0,0.5); /* 画像に影をつけて浮き立たせる */
  border-radius: 15px;        /* 角を少し丸くする */
}

/* --- 閉じるボタン（×） --- */
#modal-close {
  position: absolute;
  top: 20px;
  right: 30px;
  color: #fff;
  font-size: 50px;           /* スマホでも押しやすいように大きめに */
  font-weight: bold;
  cursor: pointer;
  transition: color 0.2s;
}

/* ×ボタンにマウスを乗せた時 */
#modal-close:hover {
  color: #aaa;
}
/* =========================================
   施工実績のある主な石材・メーカー（リスト）
========================================= */

/* --- リスト全体の大枠 --- */
.maker-list-simple {
  list-style: none;            /* デフォルトの黒丸(・)を消す */
  padding: 0;
  margin: 40px auto;         /* 左右を中央寄せにして、下に余白 */
  max-width: 700px;            /* 料金表などと横幅を揃える */
  border-top: 1px solid #eaeaea; /* ★一番上の薄いグレーの横線 */
}

/* --- 各行（li）の設定 --- */
.maker-list-simple li {
  display: flex;               /* 中身を「横並び」にする魔法 */
  padding: 10px 10px;          /* 上下20px、左右10pxでゆったり余白を取る */
  border-bottom: 1px solid #eaeaea; /* ★各行の下に引くグレーの横線 */
  align-items: flex-start;     /* 右の文章が改行されても、上端で綺麗に揃える */
}

/* --- 左側の青い文字（メーカー・石種） --- */
.maker-label {
  width: 130px;                /* 幅を固定して、縦のラインをピッタリ揃える */
  flex-shrink: 0;              /* 画面が狭くなってもこの幅を維持する */
  color: #0390FF;              /* 鮮やかな青色 */
  font-weight: bold;
  font-size: 1.6rem;
}

/* --- 右側のテキスト（ユニソン〜など） --- */
.maker-products {
  color: #555;                 /* 読みやすい濃いめのグレー */
  font-size: 1.5rem;
  line-height: 1.6;            /* 行間を少し開けてスッキリ見せる */
}

/* --- ★スマホで見た時の調整（画面幅が500px以下の時） --- */
@media (max-width: 600px) {
  .maker-list-simple li {
    flex-direction: column;    /* スマホの狭い画面では「縦並び」に変更して読みやすくする！ */
    padding: 15px 5px;
  }
  .maker-label {
    margin-bottom: 8px;        /* 縦並びにした時の、青文字とグレー文字の間の隙間 */
  }
}

/* =========================================
   DIY注意喚起のボックス（.mobile-alert-box）
========================================= */

/* --- ボックス全体（緑枠と薄緑背景） --- */
.mobile-alert-box {
  border: 1px solid #4EA72E; /* 外枠の緑色 */
  border-radius: 15px;                  /* 角を優しく丸くする */
  background-color: #F0FDF4; /* 薄い緑色の背景 */
  max-width: 100%;                     /* 上の表やリストと幅をピッタリ揃える */
  margin: 40px auto;       /* 左右を中央寄せにして、下に余白を作る */
  padding: 20px 25px;                   /* ボックスの内側にゆとりを持たせる */
}

/* --- タイトル部分（⚠️〜の方へ） --- */
.alert-title {
  background-color: transparent; /* ★SIRIUS2のピンク背景を完全に消す！ */
  color: #0390FF;                /* 青色を強制 */
  font-weight: bold;
  font-size: 1.8rem;
  border: none;                  /* ★SIRIUS2の赤い線を一度全部消す */
  border-bottom: 1px dashed #4EA72E; /* ★緑の点線だけを引き直す！ */
  padding: 0 0 15px 0;           /* 余計な余白を消して、下だけ隙間を作る */
  margin-bottom: 10px;
  text-align: left;
}

/* =========================================
   ご依頼から完了まで（ステップ・手順フロー）
========================================= */

/* --- 全体の枠 --- */
.step-container {
  max-width: 700px;              /* 他のコンテンツと横幅を揃える */
  margin: 40px auto;           /* 左右中央寄せ、下に余白 */
}

/* --- 各ステップの項目（1つのまとまり） --- */
.step-item {
  position: relative;            /* 丸や線を絶対配置するための基準にする */
  padding-left: 55px;            /* 丸い数字と線の分のスペースを左に空ける */
  padding-bottom: 30px;          /* 次のステップとの隙間（ここを線が通る！） */
}

/* --- 丸と丸をつなぐ縦線（疑似要素で自動作成） --- */
.step-item::before {
  content: '';
  position: absolute;
  left: 14px;                    /* 30pxの丸のド真ん中に線が来るように計算 */
  top: 30px;                     /* 丸のすぐ下からスタート */
  bottom: 0;                     /* アイテムの一番下（隙間の終わり）まで線を引く */
  width: 2px;                    /* 線の太さ */
  background-color: #e1e3e6;     /* 薄いグレーの線 */
}

/* ★最後の項目だけ縦線を消す（線が飛び出さないように） */
.step-item:last-child::before {
  display: none;
}

/* --- 青い丸の数字 --- */
.step-num {
  position: absolute;
  left: 0;
  top: 0;
  width: 30px;
  height: 30px;
  background-color: #0390FF;     /* ボタンと同じ鮮やかな青色 */
  color: #fff;
  border-radius: 50%;            /* 完全な丸にする */
  display: flex;                 /* 数字を丸のド真ん中に配置 */
  justify-content: center;
  align-items: center;
  font-weight: bold;
  font-size: 1.5rem;
  z-index: 2;                    /* 線より上に表示させる */
}

/* --- ステップのタイトル --- */
.step-title {
  font-size: 1.5rem;
  font-weight: bold;
  color: #333;
  margin-bottom: 12px;
  padding-top: 3px;              /* 青い丸とテキストの「高さのバランス」を微調整 */
}

/* --- ステップの説明文（グレーの箱） --- */
.step-desc {
  background-color: #f7f8f9;     /* とても薄い優しいグレー */
  padding: 18px 20px;
  border-radius: 15px;            /* 箱の角を少し丸くする */
  color: #333;
  font-size: 1.5rem;
  line-height: 1.6;              /* 文章が読みやすいように行間を空ける */
}

/* --- 強調テキスト（ピンク・赤系） --- */
.red-text {
  color: #FF29C9;                /* 画像と同じ、少しピンクがかった鮮やかな赤！ */
  font-weight: bold;
}

/* --- 注意書きテキスト（※のついた文章） --- */
.note-text {
  display: inline-block;
  color: #FF29C9;                /* こちらもピンクレッドに合わせる */
  font-size: 1.3rem;
  margin-top: 6px;               /* 上の文章と少しだけ隙間を空ける */
}

/* --- ★スマホ表示の微調整 --- */
@media (max-width: 600px) {
  .step-item {
    padding-left: 45px;          /* スマホは画面が狭いので左の余白を少し減らす */
  }
}

/* =========================================
   施工事例のカード型レイアウト【絶対に崩れない強制版】
========================================= */

/* --- カード全体の枠 --- */
.feature-item {
  background-color: #fff;
  border-radius: 15px;
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.15);
  padding: 40px;
  margin: 0 auto 40px;
  max-width: 850px;   /* 全体の幅 */
  display: flex;
  align-items: center;
  justify-content: space-between; /* ★gapを使わず、左右に散らす安全な方法に変更 */
  box-sizing: border-box;
}

/* --- 左側のテキストエリア --- */
.feature-text {
  width: 45%;         /* ★文字エリアの幅を「絶対に58%」に強制確保！ */
  flex-shrink: 0;     /* ★絶対に縮ませない（潰させない）魔法！ */
  box-sizing: border-box;
}

/* タイトル（h3） */
.feature-text h3 {
  font-size: 2rem;    /* ご希望のサイズそのまま！ */
  font-weight: bold;
  color: #333;
  text-align: center;
  background: none;
  border: none;
  border-bottom: 2px solid #4EA72E;
  padding: 0 0 15px 0;
  margin: 0 0 20px 0;
  line-height: 1.5;
}

/* 説明文（p） */
.feature-text p {
  font-size: 1.6rem;  /* ご希望のサイズそのまま！ */
  color: #333;
  line-height: 1.8;
  margin: 0 0 20px 0;
}

/* リスト（地域など） */
.feature-text ul {
  list-style-type: disc;
  padding-left: 25px;
  margin: 0;
}

.feature-text ul li {
  font-size: 1.6rem;
  color: #333;
}

/* --- 右側の画像エリア --- */
.feature-image {
  width: 45%;         /* ★画像エリアの幅を「絶対に37%」に強制！ */
  flex-shrink: 0;     /* ★絶対に画像を潰させない！ */
  box-sizing: border-box;
}

.feature-image img {
  width: 100%;
  height: auto;
  border-radius: 10px;
  display: block;
  box-shadow: 0 0 8px rgba(0,0,0,0.1);
}

/* --- ★スマホ表示の自動切り替え --- */
@media (max-width: 600px) {
  .feature-item {
    flex-direction: column;
    padding: 25px;
  }
  .feature-text,
  .feature-image {
    width: 100%;
    margin-bottom: 20px;
  }
}

/* =========================================
   石の種類比較テーブル（3列レイアウト・シマシマ版）
========================================= */

/* --- テーブル全体の大枠 --- */
.compare-table {
  width: 100%;
  max-width: 850px; 
  margin: 40px auto;
  border-collapse: separate;
  border-spacing: 0;
  border: 1px solid #4EA72E; /* 外枠は緑色 */
  border-radius: 15px;
  overflow: hidden;
  text-align: center;
}

/* --- ヘッダー（緑の背景部分） --- */
.compare-table th {
  background-color: #4EA72E;
  color: #fff;
  padding: 16px 10px;
  font-weight: bold;
  font-size: 1.5rem; 
  border-top: none;
  border-bottom: none;
  border-left: none;
  border-right: 1px solid #fff; /* 白い縦線 */
}

/* 一番右のヘッダーだけ右側の白い線を消す */
.compare-table th:last-child {
  border-right: none;
}

/* ★各列の横幅をベストなバランスに固定 */
.compare-table th:nth-child(1) { width: 25%; }
.compare-table th:nth-child(2) { width: 50%; }
.compare-table th:nth-child(3) { width: 25%; }

/* --- データセルの背景（★ここをシマシマに変更！） --- */

/* 奇数行（1, 3, 5行目...）は白背景 */
.compare-table tbody tr:nth-child(odd) td {
  background-color: #fff;
}

/* 偶数行（2, 4, 6行目...）は薄緑背景 */
.compare-table tbody tr:nth-child(even) td {
  background-color: #F0FDF4;
}

/* --- データセルの枠線と文字設定 --- */
.compare-table td {
  padding: 15px 10px; 
  border-top: none;
  border-left: none;
  border-bottom: 1px solid #eaeaea; /* 中の横線は薄いグレー */
  border-right: 1px solid #eaeaea;  /* 中の縦線も薄いグレー */
  vertical-align: middle;
  color: #333;
  font-size: 1.5rem; 
  line-height: 1.6;
}

/* 一番右のセルだけ右側のグレー線を消す */
.compare-table td:last-child {
  border-right: none;
}

/* 一番下の行だけ下側のグレー線を消す（外枠と重なるのを防ぐ） */
.compare-table tbody tr:last-child td {
  border-bottom: none;
}

/* --- 左側の青い強調文字（種類名） --- */
.compare-table td strong {
  display: block;
  color: #0390FF;
  font-size: 1.6rem; 
  font-weight: bold;
  margin-bottom: 0;
}

/* --- ★スマホ表示の自動切り替え（画面幅が768px以下の時） --- */
@media (max-width: 600px) {
  .compare-table th, 
  .compare-table td {
    padding: 12px 5px;
    font-size: 1.2rem; 
  }
  .compare-table td strong {
    font-size: 1.5rem;
  }
}

/* =========================================
   確認事項のリスト（.short-list）
========================================= */

/* --- リスト全体 --- */
.short-list {
  list-style: none; /* デフォルトの黒い丸(・)を消す */
  padding: 0;
  margin: 0;
}

/* --- 各項目（li） --- */
.short-list li {
  margin-bottom: 20px;         /* 項目と項目の間の隙間をゆったり取る */
  line-height: 1.8; /* 行間を広げてスマホでも読みやすくする */
  color: #333;
  font-size: 1.4rem;           /* 少し大きめの見やすいサイズ */
}

/* 最後の項目だけ下の余白をなくす（箱の下側が空きすぎないようにする） */
.short-list li:last-child {
  margin-bottom: 0;
}

/* --- 青い項目名（バッジ部分） --- */
.short-list .badge {
  color: #0390FF;   /* 鮮やかな青色 */
  font-weight: bold;
  margin-right: 12px;          /* 後ろの黒い文章との間に少し隙間を作る */
  font-size: 1.5rem;          /* 項目名だけほんの少し大きくして目立たせる */
}

/* PC表示：高さ最大100pxに制限 */
.to-form-top img {
  max-height: 100px;
  width: auto;
  height: auto;
}

/* スマホ表示（600px以下）：横幅めいっぱいにする */
@media screen and (max-width: 600px) {
  .to-form-top img {
    width: 100%;
    max-width: 100%;
    max-height: none;
    height: auto;
  }
}

.search-keyword input[type="search"] {
  border: 1px solid #4EA72E;
  background-color: #fff;
  border-radius: 100px;
  color: var(--clr-form-txt, #333);
  cursor: auto;
  font-size: 1.6rem;
  line-height: 48px;
  padding: 0 48px 0 24px;
  width: 100%;
  height: 100%;
}
.search-keyword input[type="search"]::placeholder {
  color: var(--clr-form-txt, #333);
  opacity: .5;
}

.pay-img {
  width: 100%;
  aspect-ratio: 4 / 3; /* 画像の比率を固定 */
  overflow: hidden; /* 拡大しても枠からはみ出さないようにする */
}

.pay-img img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* 画像を綺麗に枠に合わせる */
  display: block;
  border-radius: 8px;
}