/* =========================================================
   公文書風・極太角ゴシック・直線的デザイン用 追加CSS
   ========================================================= */
.showa-wrapper {
  color: #333;
  /* 全編を角ゴシックで統一。明朝体や丸ゴシックは排除 */
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 18px;
  line-height: 1.8;
  padding: 20px 0;
}

/* 極太角ゴシックの適用 */
.showa-wrapper .fw-black {
  font-weight: 900 !important;
}
.showa-wrapper .fw-bold {
  font-weight: bold;
}

/* 途中改行防止のためのインラインブロック */
.showa-wrapper .ib { display: inline-block; }

/* 指定カラーパレット */
.showa-wrapper .tc-navy { color: #001f5b; }
.showa-wrapper .tc-red { color: #d50000; }
.showa-wrapper .tc-green { color: #00a651; } /* 安心・許可のグリーン */
.showa-wrapper .bg-navy { background-color: #001f5b; }
.showa-wrapper .bg-white { background-color: #ffffff; }

/* ------------------------------
   PC/スマホ 改行制御
   ------------------------------ */
@media (max-width: 767px) {
  .br-pc { display: none; }
}
@media (min-width: 768px) {
  .br-sp { display: none; }
}

/* ------------------------------
   見出しスタイル（角丸・影・グラデーション完全排除）
   ------------------------------ */
.showa-wrapper .sec-title {
  font-size: clamp(20px, 5vw, 28px);
  font-weight: 900;
  color: #ffffff;
  background-color: #001f5b;
  text-align: center;
  padding: 15px 20px;
  margin: 60px 0 30px;
  border: none;
  border-radius: 0; /* 丸み禁止 */
  box-shadow: none; /* 影禁止 */
}
.showa-wrapper .sec-title-sub {
  font-size: clamp(18px, 4.5vw, 22px);
  font-weight: 900;
  color: #001f5b;
  border-left: 12px solid #001f5b;
  border-bottom: 2px solid #001f5b;
  padding: 8px 15px;
  margin: 40px 0 20px;
}

/* ------------------------------
   画像コンポーネント（直線・角丸なし）
   ------------------------------ */
.img-wrap {
  position: relative;
  overflow: hidden;
  border-radius: 0; /* 丸み禁止 */
  border: 2px solid #001f5b;
  box-shadow: none; /* 影禁止 */
  background-color: #f0f0f0;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
  text-align: center;
}
.img-wrap::after {
  content: attr(data-placeholder);
  position: absolute;
  color: #001f5b;
  font-size: 14px;
  font-weight: bold;
  opacity: 0.6;
  padding: 10px;
}
.img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  position: relative;
  z-index: 1;
  background-color: #fff;
}
.img-wrap.wide { width: 100%; aspect-ratio: 16/9; max-width: 800px; margin-bottom: 20px; }
.img-wrap.square { width: 100%; max-width: 400px; aspect-ratio: 1/1; margin-bottom: 20px; }
.img-wrap.small { width: 100%; max-width: 250px; aspect-ratio: 4/3; }
.img-wrap.portrait { width: 120px; aspect-ratio: 3/4; border-radius: 0; border-width: 2px; }
.img-wrap.no-border { border: none; box-shadow: none; background: transparent; }

/* 宣言・署名エリア (公文書・賞状風。角丸なし) */
.b-promise-box {
  border: 4px double #001f5b;
  padding: 30px;
  background: #ffffff;
  margin: 40px 0;
  border-radius: 0;
}
.b-promise-box p { font-size: clamp(15px, 4vw, 18px); margin-bottom: 15px; font-weight: bold; }
.b-sign {
  text-align: right;
  margin-top: 40px;
  font-size: clamp(18px, 4vw, 22px);
  position: relative;
  padding-right: 90px;
  color: #001f5b;
  font-weight: 900;
}
/* ハンコ（直線的な四角形に変更） */
.b-hanko {
  color: #d50000;
  border: 4px solid #d50000;
  border-radius: 0; /* 丸み禁止 */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 80px;
  height: 80px;
  font-size: clamp(18px, 4vw, 22px);
  position: absolute;
  right: 0;
  top: -25px;
  transform: rotate(0deg); /* 斜めライン禁止 */
  font-weight: 900;
}

/* 価格・強調バッジ (直線的) */
.b-price-badge {
  display: inline-block;
  border: 4px solid #001f5b;
  background-color: #ffeb3b;
  padding: 15px 30px;
  font-size: clamp(18px, 4.5vw, 24px);
  font-weight: 900;
  color: #001f5b;
  border-radius: 0; /* 丸み禁止 */
  box-shadow: none;
  margin: 20px 0;
  line-height: 1.4;
}

/* 2カラムレイアウト */
.b-flex { display: flex; gap: 30px; align-items: stretch; margin-bottom: 30px; }
.b-flex-img { flex: 1; }
.b-flex-txt { flex: 1.5; display: flex; flex-direction: column; justify-content: center; font-weight: bold; }

/* テーブル（公文書風・直線・太枠） */
.b-table { width: 100%; border-collapse: collapse; margin: 20px 0; border: 4px solid #001f5b; }
.b-table th, .b-table td { border: 2px solid #001f5b; padding: 15px; font-size: clamp(14px, 4vw, 18px); vertical-align: middle; font-weight: bold; }
.b-table th { background-color: #f0f0f0; text-align: left; width: 30%; color: #001f5b; }

.b-price-table th { background-color: #001f5b; color: #ffffff; text-align: center; }
.b-price-table td:nth-child(2) { color: #d50000; font-weight: 900; font-size: clamp(18px, 5vw, 22px); text-align: center; }
.b-price-table td:nth-child(3) { text-align: center; }

/* 4ステップ (直線的) */
.b-step { border: 4px solid #001f5b; padding: 20px; margin-bottom: 10px; background: #ffffff; border-radius: 0; }
.b-step h4 {
  margin: 0 0 15px 0;
  background: #001f5b;
  color: #ffffff;
  padding: 10px 20px;
  display: inline-block;
  font-weight: 900;
  border-radius: 0;
  font-size: clamp(16px, 4vw, 18px);
}
.b-arrow { text-align: center; font-size: 30px; color: #001f5b; margin-bottom: 10px; font-weight: 900; }

/* 自費で直す前の知恵ボックス (赤太枠・直線) */
.b-alert-box { background: #ffffff; border: 4px solid #d50000; padding: 25px; margin-top: 30px; border-radius: 0; }
.b-alert-box ul li { font-weight: bold; }

/* 吹き出し風 (人間味・ただし丸み・斜め線は使わず四角と直角で表現) */
.b-speech-box {
  background-color: #fff9c4; /* 薄い黄色 */
  border: 3px solid #1a1a1a;
  padding: 20px;
  position: relative;
  border-radius: 0;
  font-weight: bold;
}
.b-speech-box::after {
  content: "";
  position: absolute;
  top: 20px;
  left: -20px;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  border-right: 20px solid #1a1a1a;
}
.b-speech-box::before {
  content: "";
  position: absolute;
  top: 20px;
  left: -15px;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  border-right: 20px solid #fff9c4;
  z-index: 1;
}

/* ------------------------------
   既存流用部分の改変デザイン（公文書・直線的）
   ------------------------------ */
/* Q&A */
.qa-wrap { margin-bottom: 20px; border: 4px solid #001f5b; border-radius: 0; background: #ffffff; padding: 20px; box-shadow: none; }
.qa-q { display: flex; align-items: flex-start; margin-bottom: 15px; font-size: clamp(16px, 4.5vw, 20px); font-weight: 900; color: #d50000; }
/* Qのアイコンも四角に */
.qa-q::before { content: "Q"; display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; background: #d50000; color: #ffffff; border-radius: 0; margin-right: 15px; flex-shrink: 0; font-family: Arial, sans-serif; font-size: 24px; }
.qa-a { display: flex; align-items: flex-start; font-size: clamp(15px, 4vw, 18px); font-weight: 900; color: #001f5b; }
/* Aのアイコンも四角に */
.qa-a::before { content: "A"; display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; background: #001f5b; color: #ffffff; border-radius: 0; margin-right: 15px; flex-shrink: 0; font-family: Arial, sans-serif; font-size: 24px; }

/* 会社概要テーブル */
.company-table { width: 100%; border-collapse: collapse; border: 4px solid #001f5b; margin-bottom: 20px;}
.company-table th, .company-table td { border: 2px solid #001f5b; padding: 15px; font-size: clamp(14px, 3.5vw, 16px); font-weight: bold;}
.company-table th { background-color: #001f5b; color: #ffffff; width: 30%; text-align: left; }
.company-table tr:nth-child(even) td { background-color: #f0f0f0; }

/* 対応エリアバッジ */
.area-badges { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 15px; }
.area-badge { background: #ffffff; border: 2px solid #001f5b; padding: 8px 12px; border-radius: 0; font-size: clamp(12px, 3.5vw, 14px); color: #001f5b; font-weight: 900; }

/* ------------------------------
   スマホ専用レイアウト調整（ここを1つに統合しました）
   ------------------------------ */
@media (max-width: 767px) {
  .showa-wrapper { padding: 10px; }
  .showa-wrapper .sp-left { text-align: left !important; }
  .showa-wrapper .sec-title { margin: 40px 0 20px; padding: 15px; }
  .showa-wrapper .sec-title-sub { border-left-width: 8px; padding-left: 10px; }
  
  .b-flex { flex-direction: column; gap: 15px; }
  
  /* --- テーブル共通のスマホ対応 --- */
  .b-table th, .b-table td { display: block; width: 100%; text-align: left; border: 2px solid #001f5b; }
  
  /* --- 料金表（b-price-table）をスマホで「カード型」にして分かりやすく --- */
  .b-price-table { border: none; /* テーブル全体の外枠を削除 */ }
  .b-price-table thead { display: none; /* スマホでは上の見出し行を消す */ }
  .b-price-table tbody tr { 
    display: block; 
    margin-bottom: 30px; 
    border: none; /* カードの大枠を削除 */
  }
  .b-price-table tbody td { 
    display: flex; 
    justify-content: space-between; 
    align-items: center;
    border: none; 
    border-bottom: 2px dotted #001f5b; 
    padding: 12px 5px; 
    text-align: right !important; 
  }
  .b-price-table tbody td:last-child { border-bottom: 2px solid #001f5b; }
  
  /* サービス名のセル（1行目）をカードのタイトルにする */
  .b-price-table tbody td:nth-child(1) { 
    background-color: #001f5b; 
    color: #ffffff; 
    justify-content: flex-start;
    font-size: 18px; 
    text-align: left !important; 
    border-bottom: none;
    padding: 10px 15px;
  }
  /* 金額と時間のセルに項目名（ラベル）を自動で追加する */
  .b-price-table tbody td:nth-child(2)::before { content: "【総額】"; font-size: 14px; color: #333; font-weight: bold; }
  .b-price-table tbody td:nth-child(3)::before { content: "【作業時間】"; font-size: 14px; color: #333; font-weight: bold; }

  /* 署名・ハンコ */
  .b-sign { padding-right: 65px; }
  .b-hanko { width: 60px; height: 60px; line-height: 60px; top: -15px; border-width: 3px; }
  
  /* バッジ */
  .b-price-badge { padding: 15px 20px; border-width: 4px; }
  
  /* 会社概要などのその他テーブル */
  .company-table th, .company-table td { display: block; width: 100%; border: 2px solid #001f5b; margin-bottom: -2px; }
  .company-table th { width: auto; } /* 30%の固定幅を解除して全幅に */
  
  /* スマホ時の吹き出しの尻尾位置調整 */
  .b-speech-box::after { top: -15px; left: 20px; border-left: 10px solid transparent; border-right: 10px solid transparent; border-bottom: 15px solid #1a1a1a; border-top: none; }
  .b-speech-box::before { top: -11px; left: 20px; border-left: 10px solid transparent; border-right: 10px solid transparent; border-bottom: 15px solid #fff9c4; border-top: none; }
}