/* ==========================================================================
   耐震診断についてページ専用スタイル (addstyle.css)
   ========================================================================== */

.p-sub-seismic-about {
  padding-top: clamp(40px, calc(60 / 1250 * 100vw), 60px);
  margin-bottom: clamp(60px, calc(100 / 1250 * 100vw), 100px);
}

.p-sub-seismic-about__section {
  margin-top: clamp(60px, calc(100 / 1250 * 100vw), 100px);
}

.p-sub-seismic-about__section:first-of-type {
  margin-top: 0;
}

/* 2カラムレイアウト（PC用） */
.p-sub-seismic-about__flex {
  display: flex;
  flex-direction: column;
  gap: clamp(24px, calc(30 / 767 * 100vw), 30px);
  margin-top: clamp(24px, calc(30 / 1250 * 100vw), 30px);
}

.p-sub-seismic-about__text-wrap {
  width: 100%;
}

.p-sub-seismic-about__img-wrap {
  width: 100%;
  max-width: 480px;
  margin: 0 auto;
}

.p-sub-seismic-about__img-wrap img {
  width: 100%;
  height: auto;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

@media screen and (min-width: 768px) {
  .p-sub-seismic-about__flex {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: clamp(30px, calc(50 / 1250 * 100vw), 50px);
  }

  .p-sub-seismic-about__text-wrap {
    flex: 1;
  }

  .p-sub-seismic-about__img-wrap {
    width: 45%;
    max-width: none;
    margin: 0;
  }
}

/* 補助金・評点カード */
.p-sub-seismic-about__card-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(20px, calc(30 / 1250 * 100vw), 30px);
  margin-top: clamp(24px, calc(34 / 1250 * 100vw), 34px);
}

@media screen and (min-width: 768px) {
  .p-sub-seismic-about__card-grid {
    grid-template-columns: 1fr 1fr;
  }
}

.p-sub-seismic-about__card {
  background-color: var(--color-beige);
  border-radius: clamp(10px, calc(15 / 1250 * 100vw), 15px);
  padding: clamp(20px, calc(30 / 1250 * 100vw), 30px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.02);
  display: flex;
  flex-direction: column;
}

.p-sub-seismic-about__card-ttl {
  font-family: var(--font-family-ttl);
  font-size: clamp(18px, calc(20 / 1250 * 100vw), 20px);
  font-weight: 700;
  color: var(--color-accent);
  margin-bottom: 0.8em;
  border-bottom: 2px solid var(--color-accent);
  padding-bottom: 0.5em;
  letter-spacing: 0.05em;
}

.p-sub-seismic-about__card-txt {
  font-size: clamp(14px, calc(16 / 1250 * 100vw), 16px);
  line-height: 1.8;
  font-weight: 500;
}

.p-sub-seismic-about__card-txt span.highlight {
  color: #d1573b;
  font-weight: 700;
  font-size: 1.1em;
}

/* チェックリスト */
.p-sub-seismic-about__check-list {
  margin-top: 1em;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.p-sub-seismic-about__check-item {
  position: relative;
  padding-left: 28px;
  font-size: clamp(14px, calc(16 / 1250 * 100vw), 16px);
  font-weight: 500;
  line-height: 1.6;
}

.p-sub-seismic-about__check-item::before {
  content: "";
  position: absolute;
  left: 6px;
  top: 50%;
  width: 12px;
  height: 6px;
  border-left: 2.5px solid var(--color-accent);
  border-bottom: 2.5px solid var(--color-accent);
  transform: translateY(-70%) rotate(-45deg);
}

.p-sub-seismic-about__check-item span.highlight {
  color: #d1573b;
  font-weight: 700;
  font-size: 1.25em;
}

/* グリッドカード（チェックポイント写真付き） */
.p-sub-seismic-about__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  margin-top: clamp(24px, calc(34 / 1250 * 100vw), 34px);
}

@media screen and (min-width: 580px) {
  .p-sub-seismic-about__grid {
    grid-template-columns: 1fr 1fr;
    gap: 24px;
  }
}

@media screen and (min-width: 960px) {
  .p-sub-seismic-about__grid {
    grid-template-columns: 1fr 1fr 1fr;
    gap: 30px;
  }
}

.p-sub-seismic-about__grid-item {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.02);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  display: flex;
  flex-direction: column;
}

.p-sub-seismic-about__grid-item:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 15px rgba(0, 0, 0, 0.05);
}

.p-sub-seismic-about__grid-img-wrap {
  width: 100%;
  aspect-ratio: 4/3;
  overflow: hidden;
  background-color: #f7fafc;
}

.p-sub-seismic-about__grid-img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.p-sub-seismic-about__grid-content {
  padding: 15px 20px;
  text-align: center;
  border-top: 1px solid #edf2f7;
}

.p-sub-seismic-about__grid-ttl {
  font-size: clamp(15px, calc(16 / 1250 * 100vw), 16px);
  font-weight: 700;
  color: var(--color-brown);
  line-height: 1.4;
}

/* レイアウト・文字サイズの細かなユーティリティ調整 */
.u-mt40 {
  margin-top: clamp(30px, calc(40 / 1250 * 100vw), 40px);
}

.u-mb15 {
  margin-bottom: 15px;
}

.u-mb20 {
  margin-bottom: 20px;
}

/* ==========================================================================
   耐震診断・改修の流れページ専用スタイル
   ========================================================================== */

.p-sub-seismic-flow {
  padding-top: clamp(40px, calc(60 / 1250 * 100vw), 60px);
  margin-bottom: clamp(60px, calc(100 / 1250 * 100vw), 100px);
}

.p-sub-seismic-flow__lead {
  margin: 0 auto clamp(40px, calc(60 / 1250 * 100vw), 60px);
  text-align: center;
}

.p-sub-seismic-flow__timeline {
  display: flex;
  flex-direction: column;
  max-width: 480px;
  margin: 0 auto;
  position: relative;
}

@media screen and (min-width: 768px) {
  .p-sub-seismic-flow__timeline {
    max-width: 980px;
  }
}

.p-sub-seismic-flow__item {
  display: flex;
  align-items: flex-start;
  position: relative;
}

.p-sub-seismic-flow__item:not(:last-of-type)::before {
  content: "";
  display: inline-block;
  width: clamp(2px, calc(4 / 1250 * 100vw), 4px);
  height: 100%;
  background-color: var(--color-accent);
  position: absolute;
  top: clamp(50px, calc(90 / 1250 * 100vw), 90px);
  left: clamp(22px, calc(44 / 1250 * 100vw), 44px);
  transform: translateX(-50%);
}

.p-sub-seismic-flow__item:not(:last-of-type) {
  padding-bottom: clamp(40px, calc(65 / 1250 * 100vw), 65px);
}

.p-sub-seismic-flow__number {
  color: #fff;
  font-family: var(--font-family-ttl);
  font-weight: 700;
  font-size: clamp(16px, calc(28 / 1250 * 100vw), 28px);
  line-height: 1;
  letter-spacing: 0.1em;
  width: clamp(44px, calc(88 / 1250 * 100vw), 88px);
  height: clamp(44px, calc(88 / 1250 * 100vw), 88px);
  border-radius: 50vh;
  background-color: var(--color-accent);
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin-top: clamp(16px, calc(24 / 1250 * 100vw), 24px);
}

.p-sub-seismic-flow__number span.step {
  font-size: 0.45em;
  font-weight: 600;
  margin-bottom: 2px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.p-sub-seismic-flow__contents {
  padding-left: clamp(15px, calc(40 / 1250 * 100vw), 40px);
  flex: 1;
}

.p-sub-seismic-flow__bg-beige {
  background-color: var(--color-beige);
  border-radius: clamp(10px, calc(15 / 1250 * 100vw), 15px);
  padding: clamp(20px, calc(30 / 1250 * 100vw), 30px) clamp(20px, calc(40 / 1250 * 100vw), 40px);
  display: flex;
  flex-direction: column;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.02);
}

@media screen and (min-width: 768px) {
  .p-sub-seismic-flow__bg-beige {
    flex-direction: row;
    align-items: center;
  }
}

.p-sub-seismic-flow__txt-wrap {
  flex: 1;
}

.p-sub-seismic-flow__img-wrap {
  margin-top: 20px;
  width: 100%;
  max-width: 150px;
  display: flex;
  justify-content: center;
  align-items: center;
  align-self: center;
  flex: 0 0 auto;
}

@media screen and (min-width: 768px) {
  .p-sub-seismic-flow__img-wrap {
    margin-top: 0;
    margin-left: clamp(30px, calc(50 / 1250 * 100vw), 50px);
    max-width: clamp(120px, calc(160 / 1250 * 100vw), 160px);
  }
}

.p-sub-seismic-flow__img-wrap img {
  width: 100%;
  height: auto;
}

.p-sub-seismic-flow__ttl {
  font-family: var(--font-family-ttl);
  font-weight: 700;
  font-size: clamp(18px, calc(24 / 1250 * 100vw), 24px);
  line-height: 1.4;
  letter-spacing: 0.05em;
  color: var(--color-brown);
  margin-bottom: 0.8em;
}

.p-sub-seismic-flow__sub-ttl {
  font-family: var(--font-family-ttl);
  font-weight: 700;
  font-size: clamp(15px, calc(16 / 1250 * 100vw), 16px);
  line-height: 1.4;
  color: var(--color-accent);
  margin-top: 1em;
  margin-bottom: 0.5em;
}

.p-sub-seismic-flow__caution-box {
  background-color: #fff;
  border-left: 4px solid #d1573b;
  padding: 15px;
  margin-top: 15px;
  border-radius: 0 4px 4px 0;
}

.p-sub-seismic-flow__caution-txt {
  font-size: clamp(13px, calc(14 / 1250 * 100vw), 14px);
  font-weight: 600;
  color: #d1573b;
  line-height: 1.5;
}

/* ==========================================================================
   耐震改修工事の種類ページ専用スタイル
   ========================================================================== */

.p-sub-seismic-kinds {
  padding-top: clamp(40px, calc(60 / 1250 * 100vw), 60px);
  margin-bottom: clamp(60px, calc(100 / 1250 * 100vw), 100px);
}

.p-sub-seismic-kinds__lead {
  margin: 0 auto clamp(40px, calc(60 / 1250 * 100vw), 60px);
  text-align: center;
}

.p-sub-seismic-kinds__section {
  margin-top: clamp(60px, calc(100 / 1250 * 100vw), 100px);
}

.p-sub-seismic-kinds__section:first-of-type {
  margin-top: 0;
}

.p-sub-seismic-kinds__desc {
  font-size: clamp(14px, calc(16 / 1250 * 100vw), 16px);
  line-height: 1.6;
  margin-bottom: 25px;
  font-weight: 500;
}

/* ステップカードのグリッド */
.p-sub-seismic-kinds__step-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  margin-top: 25px;
}

@media screen and (min-width: 580px) {
  .p-sub-seismic-kinds__step-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media screen and (min-width: 960px) {
  .p-sub-seismic-kinds__step-grid {
    grid-template-columns: 1fr 1fr 1fr 1fr;
  }

  /* 7ステップなどの変則用 */
  .p-sub-seismic-kinds__step-grid.col-7 {
    grid-template-columns: repeat(4, 1fr);
  }

  .p-sub-seismic-kinds__step-grid.col-7>*:nth-child(n+5) {
    grid-column: span 1;
  }
}

.p-sub-seismic-kinds__step-card {
  background-color: var(--color-beige);
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.02);
  display: flex;
  flex-direction: column;
}

.p-sub-seismic-kinds__step-img {
  display: none;
}

.p-sub-seismic-kinds__step-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.p-sub-seismic-kinds__step-content {
  padding: 15px;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.p-sub-seismic-kinds__step-num {
  font-family: var(--font-family-ttl);
  font-size: clamp(13px, calc(14 / 1250 * 100vw), 14px);
  font-weight: 700;
  color: var(--color-accent);
  margin-bottom: 5px;
  text-transform: uppercase;
}

.p-sub-seismic-kinds__step-txt {
  font-size: clamp(13px, calc(14 / 1250 * 100vw), 14px);
  font-weight: 700;
  line-height: 1.4;
  color: var(--color-brown);
}

/* 金物グリッド */
.p-sub-seismic-kinds__hardware-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  margin-top: 30px;
}

@media screen and (min-width: 580px) {
  .p-sub-seismic-kinds__hardware-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media screen and (min-width: 960px) {
  .p-sub-seismic-kinds__hardware-grid {
    grid-template-columns: 1fr 1fr 1fr;
    gap: 30px;
  }
}

.p-sub-seismic-kinds__hardware-card {
  background: #fff;
  border: 1px solid #edf2f7;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.01);
  display: flex;
  flex-direction: column;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.p-sub-seismic-kinds__hardware-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 15px rgba(0, 0, 0, 0.04);
}

.p-sub-seismic-kinds__hardware-img {
  display: none;
}

.p-sub-seismic-kinds__hardware-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.p-sub-seismic-kinds__hardware-content {
  padding: 20px;
  text-align: center;
}

.p-sub-seismic-kinds__hardware-ttl {
  font-size: clamp(14px, calc(15 / 1250 * 100vw), 15px);
  font-weight: 700;
  color: var(--color-brown);
  line-height: 1.4;
}

/* ==========================================================================
   耐震補助金についてページ専用スタイル
   ========================================================================== */

.p-sub-seismic-subsidy {
  padding-top: clamp(40px, calc(60 / 1250 * 100vw), 60px);
  margin-bottom: clamp(60px, calc(100 / 1250 * 100vw), 100px);
}

.p-sub-seismic-subsidy__lead {
  margin: 0 auto clamp(40px, calc(60 / 1250 * 100vw), 60px);
  text-align: center;
}

.p-sub-seismic-subsidy__section {
  margin-top: clamp(60px, calc(100 / 1250 * 100vw), 100px);
}

.p-sub-seismic-subsidy__section:first-of-type {
  margin-top: 0;
}

/* 各市補助金カードグリッド */
.p-sub-seismic-subsidy__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 30px;
  margin-top: 30px;
}

@media screen and (min-width: 768px) {
  .p-sub-seismic-subsidy__grid {
    grid-template-columns: 1fr 1fr;
  }
}

.p-sub-seismic-subsidy__card {
  background-color: var(--color-beige);
  border-radius: 12px;
  padding: clamp(20px, calc(30 / 1250 * 100vw), 30px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.02);
  display: flex;
  flex-direction: column;
}

.p-sub-seismic-subsidy__card-ttl {
  font-family: var(--font-family-ttl);
  font-size: clamp(18px, calc(22 / 1250 * 100vw), 22px);
  font-weight: 700;
  color: var(--color-accent);
  margin-bottom: 0.8em;
  border-bottom: 2px solid var(--color-accent);
  padding-bottom: 0.5em;
}

.p-sub-seismic-subsidy__card-ttl em {
  font-size: 0.7em;
  color: var(--color-brown);
  font-style: normal;
  display: block;
  font-weight: 500;
  margin-top: 5px;
}

.p-sub-seismic-subsidy__card-list {
  display: flex;
  flex-direction: column;
  gap: 15px;
  margin-bottom: 25px;
  flex: 1;
}

.p-sub-seismic-subsidy__card-item {
  font-size: clamp(14px, calc(15 / 1250 * 100vw), 15px);
  line-height: 1.6;
}

.p-sub-seismic-subsidy__card-item strong {
  color: #d1573b;
  font-size: 1.1em;
}

.p-sub-seismic-subsidy__btn {
  display: inline-block;
  text-align: center;
  background-color: var(--color-accent);
  color: #fff;
  font-weight: 700;
  padding: 12px 20px;
  border-radius: 50vh;
  transition: background-color 0.3s ease;
  font-size: clamp(13px, calc(14 / 1250 * 100vw), 14px);
  margin-top: auto;
}

.p-sub-seismic-subsidy__btn:hover {
  background-color: var(--color-brown);
  color: #fff;
}

/* シミュレーションテーブル */
.p-sub-seismic-subsidy__table-wrap {
  overflow-x: auto;
  margin-top: 25px;
}

.p-sub-seismic-subsidy__table {
  width: 100%;
  border-collapse: collapse;
  font-size: clamp(14px, calc(15 / 1250 * 100vw), 15px);
}

.p-sub-seismic-subsidy__table th,
.p-sub-seismic-subsidy__table td {
  border: 1px solid #e2e8f0;
  padding: 12px 15px;
  text-align: left;
}

.p-sub-seismic-subsidy__table th {
  background-color: var(--color-beige);
  color: var(--color-brown);
  font-weight: 700;
  width: 30%;
}

.p-sub-seismic-subsidy__table td {
  background-color: #fff;
}

.p-sub-seismic-subsidy__table td strong.alert-red {
  color: #d1573b;
  font-weight: 700;
}

/* 計算表示 */
.p-sub-seismic-subsidy__calc-box {
  background-color: var(--color-beige);
  border-radius: 12px;
  padding: clamp(25px, calc(40 / 1250 * 100vw), 40px);
  margin-top: 30px;
  text-align: center;
}

.p-sub-seismic-subsidy__calc-flex {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 15px;
  margin-top: 20px;
}

@media screen and (min-width: 768px) {
  .p-sub-seismic-subsidy__calc-flex {
    flex-direction: row;
    justify-content: center;
    gap: 30px;
  }
}

.p-sub-seismic-subsidy__calc-item {
  background: #fff;
  border-radius: 8px;
  padding: 15px 25px;
  min-width: 220px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.02);
}

.p-sub-seismic-subsidy__calc-label {
  font-size: clamp(13px, calc(14 / 1250 * 100vw), 14px);
  font-weight: 700;
  color: var(--color-brown);
  margin-bottom: 5px;
}

.p-sub-seismic-subsidy__calc-val {
  font-size: clamp(18px, calc(22 / 1250 * 100vw), 22px);
  font-weight: 700;
  color: #d1573b;
}

.p-sub-seismic-subsidy__calc-sign {
  font-size: 28px;
  font-weight: 700;
  color: var(--color-brown);
}

.p-sub-seismic-subsidy__calc-total {
  background: #fff;
  border: 3px solid #d1573b;
  border-radius: 8px;
  padding: 20px 30px;
  min-width: 260px;
  box-shadow: 0 4px 10px rgba(209, 87, 59, 0.05);
}

.p-sub-seismic-subsidy__calc-total-label {
  font-size: clamp(14px, calc(16 / 1250 * 100vw), 16px);
  font-weight: 700;
  color: #d1573b;
  margin-bottom: 5px;
}

.p-sub-seismic-subsidy__calc-total-val {
  font-size: clamp(24px, calc(32 / 1250 * 100vw), 32px);
  font-weight: 700;
  color: #d1573b;
}

/* 画像の非表示設定（一旦非表示） */
.p-sub-seismic-subsidy__img {
  display: none;
}

.c-sub-sec-ttl-green {
  margin-bottom: 20px;
}

/* ==========================================================================
   トップページ：コラムセクション (addstyle.css)
   ========================================================================== */
.p-top-column {
  background-color: #fff;
  padding-top: clamp(60px, calc(125 / 1250 * 100vw), 125px);
  padding-bottom: clamp(60px, calc(125 / 1250 * 100vw), 125px);
  position: relative;
  z-index: 1;
}

.p-top-column .c-sec-ttl {
  align-items: center;
}

.p-top-column__top-txt {
  margin-top: clamp(23px, calc(30 / 1250 * 100vw), 30px);
  text-align: center;
}

.p-top-column__list {
  margin-top: clamp(30px, calc(50 / 1250 * 100vw), 50px);
  display: grid;
  grid-template-columns: 1fr;
  gap: 30px;
}

@media screen and (min-width: 768px) {
  .p-top-column__list {
    grid-template-columns: repeat(3, 1fr);
  }
}

.p-top-column__item {
  background: #fff;
  border: 1px solid #edf2f7;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.02);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  display: flex;
  flex-direction: column;
  height: 100%;
}

.p-top-column__item:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 15px rgba(0, 0, 0, 0.05);
}

.p-top-column__item-link {
  display: flex;
  flex-direction: column;
  height: 100%;
  text-decoration: none;
  color: inherit;
}

.p-top-column__img-wrap {
  width: 100%;
  aspect-ratio: 16/9;
  overflow: hidden;
  background-color: var(--color-beige);
  display: flex;
  align-items: center;
  justify-content: center;
}

.p-top-column__img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.p-top-column__item:hover .p-top-column__img-wrap img {
  transform: scale(1.05);
}

.p-top-column__content {
  padding: 20px;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.p-top-column__date {
  font-family: var(--font-family-en);
  font-size: calc(14 / 16 * 1rem);
  color: #888;
  margin-bottom: 8px;
}

.p-top-column__item-ttl {
  font-size: clamp(15px, calc(16 / 1250 * 100vw), 16px);
  font-weight: 700;
  color: var(--color-brown);
  line-height: 1.5;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  margin-top: 0;
}

.p-top-column__link {
  margin: clamp(30px, calc(40 / 1250 * 100vw), 40px) auto 0;
}

.p-top-column__loading,
.p-top-column__error,
.p-top-column__empty {
  grid-column: 1 / -1;
  text-align: center;
  padding: 40px 0;
  color: #888;
  font-weight: 500;
}