/* ===========================================================
 * Construction LP（足場幕・建築幕・現場シート）専用CSS
 * GranDesign
 * =========================================================== */

/* ------------------ リセットに近い基本 ------------------ */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: "Yu Gothic", "Hiragino Kaku Gothic ProN", "メイリオ", sans-serif;
  margin: 0;
  padding: 0;
  line-height: 1.7;
  color: #333;
  background: #ffffff;         /* ★ 全体背景は白に戻す */
}

img {
  max-width: 100%;
  height: auto;
  border: none;
  vertical-align: bottom;
}

a {
  color: inherit;
  text-decoration: none;
}

a:hover {
  opacity: 0.9;
}

/* スマホ時だけ改行したい br */
.sp {
  display: none;
}

/* ------------------ 共通レイアウト ------------------ */
#wrap {
  width: 100%;
  overflow: hidden;
}

.inner {
  width: 92%;
  max-width: 1100px;
  margin: 0 auto;
}

.section {
  padding: 60px 0;
  background: #ffffff;         /* ★ セクションの標準背景：白 */
  color: #003553;              /* 読みやすい濃い紺 */
}

.section.bg-light {
  background: #f4f8fc;         /* うすい水色の帯 */
  color: #003553;
}

.center {
  text-align: center;
}

/* ------------------ ヘッダー ------------------ */
#header {
  background: #00253a;
  color: #fff;
  padding: 10px 0;
}

.header-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 92%;
  max-width: 1100px;
  margin: 0 auto;
}

.site-logo {
  font-size: 14px;
  margin: 0;
}

.site-logo .brand {
  font-size: 18px;
  font-weight: bold;
  color: #ffdd66;
}

.header-tel {
  font-size: 13px;
  line-height: 1.4;
  text-align: right;
}

.tel-number {
  font-size: 18px;
  font-weight: bold;
}

.tel-time {
  font-size: 11px;
  opacity: 0.85;
}

/* ------------------ ファーストビュー ------------------ */
.fv {
  background: linear-gradient(to bottom, #005587, #003553);
  color: #fff;
  padding: 70px 0 80px;
}

.fv-inner {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 32px;
}

.fv-text {
  flex: 0 0 52%;
}

.fv-image {
  flex: 0 0 42%;
  display: flex;
  justify-content: center;
  align-items: flex-start;
}

/* ラベル */
.fv-label {
  font-size: 14px;
  display: inline-block;
  background: #ffcc00;
  color: #000;
  padding: 4px 12px;
  margin-bottom: 14px;
  border-radius: 4px;
}

/* タイトル・サブタイトル */
.fv-title {
  font-size: 32px;
  margin: 0 0 16px;
}

.fv-sub {
  display: block;
  font-size: 18px;
  margin-top: 8px;
}

.em {
  color: ##ff6a00;
  font-weight: 700;
}

/* リード文 */
.fv-lead {
  font-size: 16px;
  margin: 0 0 18px;
}

/* バッジ（横並び） */
.fv-badges {
  list-style: none;
  padding-left: 0;
  margin: 20px 0 10px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.fv-badges li {
  background: #ffffffdd;
  color: #003366;
  padding: 6px 14px;
  font-size: 13px;
  border-radius: 999px;
  font-weight: 600;
  white-space: nowrap;
}

/* CTA（横並び） */
.fv-cta {
  display: flex;
  gap: 20px;
  align-items: center;
  margin-top: 26px;
}

.fv-cta a img {
  display: block;
}

/* FV画像：右／少し下げる・小さめ */
.fv-image img {
  width: 100%;
  max-width: 520px;
  height: auto;
  margin-top: 52px;         /* 見出しの行まで下げる調整 */
  border-radius: 10px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.45);
}

/* ------------------ セクションタイトル ------------------ */
.sec-title {
  font-size: 28px;
  border-left: 8px solid #ff9800;
  padding-left: 12px;
  margin: 0 0 24px;
  color: #003553;
}

.section.bg-light .sec-title {
  color: #003553;
}

.sec-subtitle {
  font-size: 20px;
  margin: 0 0 12px;
}

.sec-mini {
  font-size: 16px;
  margin: 8px 0;
}

/* ------------------ カラム系 ------------------ */
.cols {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
}

.cols .col {
  flex: 1;
  min-width: 260px;
}

.cols-middle {
  align-items: center;
}

/* ------------------ リスト・テーブル ------------------ */
.list-dot {
  list-style: disc;
  margin: 0;
  padding-left: 20px;
}

.list-dot.center {
  list-style: disc;
  display: inline-block;
  text-align: left;
}

.size-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

.size-table th,
.size-table td {
  border: 1px solid #ccc;
  padding: 8px 10px;
}

/* ------------------ 制作事例グリッド ------------------ */
.works-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 24px;
}

.work-item {
  margin: 0;
  font-size: 14px;
}

.work-item img {
  border-radius: 6px;
  box-shadow: 0 3px 10px rgba(0,0,0,0.18);
  margin-bottom: 8px;
}

/* ------------------ 流れ（番号付きリスト） ------------------ */
.flow-list {
  margin: 0;
  padding-left: 20px;
}

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

/* ------------------ セクション内 CTA ------------------ */
.section-cta {
  margin-top: 32px;
  text-align: center;
}

.section-cta img {
  max-width: 340px;
}

/* ------------------ 問い合わせフォーム ------------------ */
.lp-contact-form-wrap {
  background: #f4faff;
  padding: 40px 25px;
  border-radius: 8px;
  border: 2px solid #cde7ff;
}

.contact-form {
  margin: 0;
}

.contact-form label {
  font-weight: bold;
  margin-top: 18px;
  display: block;
}

.contact-form input,
.contact-form textarea {
  width: 100%;
  padding: 10px;
  border: 1px solid #bbb;
  border-radius: 4px;
  font-size: 15px;
  font-family: inherit;
}

.contact-form textarea {
  resize: vertical;
}

.req {
  color: #d00;
  font-size: 13px;
}

.form-submit {
  width: 100%;
  padding: 14px;
  margin-top: 25px;
  font-size: 18px;
  background: #ff7a00;
  color: #fff;
  border: none;
  border-radius: 999px;
  cursor: pointer;
  transition: 0.3s;
}

.form-submit:hover {
  background: #e06600;
}

/* ------------------ フッター ------------------ */
#footer {
  background: #001b2a;
  color: #fff;
  padding: 40px 0 20px;
  font-size: 14px;
}

.footer-inner {
  width: 92%;
  max-width: 1100px;
  margin: 0 auto;
}

.footer-logo {
  font-weight: bold;
  margin-bottom: 10px;
}

.company-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.company-table th,
.company-table td {
  padding: 4px 6px;
  vertical-align: top;
}

.company-table th {
  width: 80px;
  font-weight: normal;
  opacity: 0.8;
}

.company-table a {
  color: #aad4ff;
}

.copyright {
  text-align: center;
  font-size: 11px;
  margin: 10px 0 0;
}

.pagetop {
  text-align: center;
  padding: 8px 0 0;
  font-size: 11px;
}

.pagetop a {
  color: #fff;
  text-decoration: underline;
}

/* ------------------ スマホ対応 ------------------ */
@media (max-width: 767px) {

  .sp {
    display: inline;
  }

  .header-inner {
    flex-direction: column;
    text-align: center;
  }

  .header-tel {
    text-align: center;
    margin-top: 6px;
  }

  .fv {
    padding: 40px 0 45px;
  }

  .fv-inner {
    flex-direction: column;
    align-items: center;
  }

  .fv-text,
  .fv-image {
    flex: 1 1 auto;
    width: 100%;
  }

  .fv-title {
    font-size: 24px;
    text-align: left;
  }

  .fv-lead {
    font-size: 15px;
  }

  .fv-image img {
    margin-top: 20px;
    width: 90%;
  }

  .fv-badges {
    justify-content: flex-start;
  }

  .fv-cta {
    flex-direction: column;
    align-items: flex-start;
  }

  .fv-cta a img {
    width: 230px;
  }

  .sec-title {
    font-size: 22px;
  }
}
/* =====================================
 * FV 以外では em を紺色に変更（白背景対策）
 * ===================================== */
.section .em,
.section.bg-light .em {
  color: #003553 !important;
  font-weight: 700;
}

/* FV（一番上の青背景）だけは黄色のまま */
.fv .em {
  color: #ffeb3b !important;
}
/* =====================================
 * 白背景では「目に刺さる安全オレンジ」に変更
 * ===================================== */
.section .em,
.section.bg-light .em {
  color: #ff6a00 !important;
  font-weight: 700;
}

/* FV（青背景）は従来どおり黄色 */
.fv .em {
  color: #ffeb3b !important;
}