/* ホームページ制作（仕様 6-6）。共通部品は site.css、ここはこのページ固有の配置だけ。 */

/* ============================== */
/*          2 管理者機能付き         */
/* ============================== */

.p-web-admin__grid {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
  align-items: center;
  gap: clamp(32px, 5vw, 72px);
}

.p-web-admin__body .c-heading {
  margin-bottom: 2rem;
}

/* キャプチャをブラウザの枠に収める */
.p-web-admin__screen {
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: #fff;
  box-shadow: var(--shadow-card);
}

.p-web-admin__bar {
  display: flex;
  gap: 6px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--color-border);
  background: var(--color-surface);
}

.p-web-admin__bar span {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(0, 95, 60, 0.18);
}

@media (max-width: 1023px) {
  .p-web-admin__grid {
    grid-template-columns: 1fr;
  }
}

/* ============================== */
/*           3 料金プラン           */
/* ============================== */

.p-web-price__lead {
  margin-bottom: 1.5rem;
  color: var(--color-primary-deep);
  font-size: 0.92rem;
  font-weight: 700;
}

.p-web-price__grid {
  align-items: stretch;
}

@media (min-width: 1024px) {
  .p-web-price .c-price-card__target {
    min-height: 3.6em;
  }
}

.p-web-price__foot {
  margin-top: clamp(32px, 4vw, 48px);
  color: var(--color-primary-deep);
  font-weight: 700;
  text-align: center;
}

@media (max-width: 1023px) {
  .p-web-price__grid {
    grid-template-columns: 1fr;
    max-width: 640px;
    margin-inline: auto;
  }
}

/* ============================== */
/*           4 業界比較            */
/* ============================== */

.p-web-compare .c-compare tbody th {
  min-width: 10rem;
}

@media (max-width: 767px) {
  .p-web-compare .c-compare tbody th {
    min-width: 0;
  }
}

.p-web-compare__notes {
  margin-top: 1.5rem;
}

/* ============================== */
/*      6 制作例・お客様の声         */
/* ============================== */

.p-web-works .c-coming-soon {
  padding-block: clamp(56px, 7vw, 96px);
}

.p-web-works .c-coming-soon__en {
  font-size: clamp(1.5rem, 3.2vw, 2.25rem);
}