@charset "UTF-8";

/* ===========================================================
   自主制作サンプル用の追加スタイル（CRAFTLY）
   style.css には手を入れず、サンプル表示に必要な分だけここに書く。
   =========================================================== */

/* ---------- 最上部の告知バー ----------
   ヘッダーが position:fixed で画面上端に張り付くデザインなので、
   告知バーも固定し、その高さ（--smpbar-h）だけ本文とヘッダーを下げる。
   高さは文字の折り返しで変わるため、ページ末尾の小さなスクリプトで実測して入れている。 */
.smpbar{
  position:fixed;
  top:0; left:0; right:0;
  z-index:1000;
  background:#0B1F2B;
  color:#fff;
  padding:9px 0;
}
body{ padding-top:var(--smpbar-h, 42px); }
.header{ top:var(--smpbar-h, 42px); }
html{ scroll-padding-top:calc(var(--header-h) + var(--smpbar-h, 42px)); }

.smpbar__in{
  width:min(1180px, calc(100% - 44px));
  margin-inline:auto;
  display:flex;
  align-items:center;
  gap:14px;
  flex-wrap:wrap;
}
.smpbar__tag{
  flex:0 0 auto;
  padding:3px 10px;
  background:#2D8FBD;
  color:#fff;
  font-size:11px;
  font-weight:700;
  letter-spacing:.1em;
  line-height:1.7;
}
.smpbar__txt{
  flex:1 1 320px;
  margin:0;
  font-size:12.5px;
  line-height:1.7;
  color:rgba(255,255,255,.86);
}
.smpbar__back{
  flex:0 0 auto;
  color:#fff;
  font-size:12px;
  border-bottom:1px solid rgba(255,255,255,.4);
  padding-bottom:2px;
  white-space:nowrap;
}

@media (max-width:820px){
  .smpbar{ padding:8px 0; }
  .smpbar__in{ gap:8px; width:calc(100% - 28px); }
  .smpbar__txt{ flex:1 1 100%; font-size:11.5px; }
  .smpbar__back{ font-size:11.5px; }
}

/* ---------- ヘッダー右：電話番号の代わり ---------- */
.gnav__smp{
  display:flex;
  flex-direction:column;
  line-height:1.3;
}
.gnav__smp-main{
  font-size:17px;
  font-weight:700;
  letter-spacing:.1em;
}
.gnav__smp-note{
  margin-top:3px;
  font-size:10.5px;
  letter-spacing:.14em;
  opacity:.7;
}

@media (max-width:820px){
  .gnav__smp-main{ font-size:22px; }
  .gnav__smp-note{ font-size:11px; }
}

/* ---------- ファーストビューの注記 ---------- */
.hero__cert{ letter-spacing:.06em; }

/* ---------- 工事イメージの注記 ---------- */
.works__note{
  margin-top:18px;
  max-width:72ch;
  font-size:13.5px;
  line-height:2;
  color:var(--gray);
}
@media (max-width:820px){
  .works__note{ font-size:12.5px; }
}

/* ---------- 水漏れ・つまり：電話番号の代わり ---------- */
.trouble__cta{
  margin-top:14px;
  font-size:clamp(21px,2.6vw,32px);
  font-weight:700;
  line-height:1.6;
  letter-spacing:.05em;
}
.trouble__note{ margin-top:16px; }

/* ---------- 会社情報：地図の代わり ----------
   枠だけ残して平らに塗る。模様を入れると「作りかけ」に見えるので入れない。 */
.company__map--dummy{
  display:flex;
  align-items:center;
  justify-content:center;
  padding:40px;
  background:#E8E8E4;
}
.company__mapnote{
  margin:0;
  text-align:center;
  font-size:13.5px;
  line-height:2.1;
  letter-spacing:.06em;
  color:#8A8F94;
}

/* ---------- 最終お問い合わせ ---------- */
.contact__note--smp{
  margin-top:22px;
  letter-spacing:.06em;
}

/* ---------- Instagramを外したぶんの調整 ---------- */
.fixbar__tel{ flex:1; }