@charset "UTF-8";
/* 見積シミュレーション: ヘッダー/フッターをWP化ページと揃えるための補正。
   本文は mitsumori-legacy.css（旧CSSを #band / #mainArea の中だけに限定したもの）を使う。
   ここでは「旧ヘッダーの高さを前提にしていた指定」と「他ページとの位置合わせ」を行う。 */

/* ---- ヒーロー画像 ----
   旧CSSは #band に padding-top:150px / background-position:center 150px を指定していた。
   旧ヘッダーが上に重なる前提の値なので打ち消す。テーマCSSの section 用 padding も消す。 */
#band {
  padding-top: 0;
  padding-bottom: 0;
  background-position: center top;
  background-size: cover;
  /* WP化ページのヒーロー(.dl-band)はヘッダーの40px下から始まるので合わせる */
  margin-top: 40px;
  margin-bottom: 0;
}
/* ヒーローの中身は他ページと同じ .dl-band 構造にしたので、
   文字組み（英字54px + 日本語22px）はテーマCSSがそのまま効く。
   ここでは高さと縦位置だけ整える。 */
/* 他ページは flex ではなく padding で文字位置を決めているので同じ方式にする。
   flex 中央寄せだと英字の位置が45pxほど下にずれる。 */
#band .dl-band {
  height: 178px;          /* WP化ページのヒーローと同じ高さ */
  display: block;
  text-align: center;
  box-sizing: border-box;
}
/* 文字組みは他ページ（dl-legacy.css の .dl-band）と同じ値を明示する。
   dl-legacy.css 自体は .dl-legacy 配下にしか効かないが、
   1行目の @import で Oswald を読み込むために link はしてある。 */
/* 数値はすべて他ページ（catalog等）の実測値に合わせている */
#band .dl-band .title03 { margin: 0; padding: 0; line-height: normal; }
#band .dl-band .title03 span {
  display: inline-block;
  font-family: 'Oswald', sans-serif;
  font-size: 54px;
  font-weight: 500;
  letter-spacing: 4px;
  line-height: normal;
  padding: 26px 10px 0;
}
#band .dl-band .bandTxt {
  margin: -8px 0 0;
  padding: 0 0 36px;
  font-size: 22px;
  font-weight: 700;
  line-height: 44px;
}

/* ---- 本文の幅と上余白 ----
   ・テーマCSSが section に大きな padding を与えており、#mainArea も section のため
     ヒーロー画像とパンくずの間に120pxの空白ができていた。
   ・幅は他ページ（テーマの .inner）と同じ max-width:1120px に揃える。旧CSSは1000px固定だった。 */
#mainArea {
  padding-top: 0;
  margin-top: 0;
  /* body を flex にしているため width:auto だと内容幅になってしまう。100% を明示する */
  width: 100% !important;
  max-width: 1120px;      /* 他ページ（テーマの .inner）と同じ幅・同じ左右位置 */
  margin-left: auto;
  margin-right: auto;
  padding-left: 0;
  padding-right: 0;
  box-sizing: border-box;
}
/* 画面が1120pxに満たないときだけ左右に余白を入れる */
@media screen and (max-width: 1160px) {
  #mainArea { padding-left: 20px; padding-right: 20px; }
}

/* ---- パンくず: 他ページと同じ左寄せ・上下の余白は詰める ----
   format.css の body{text-align:center} を受けて中央寄せになっていたのを直す。 */
#mainArea .pankuzu {
  text-align: left;
  margin: 0 0 8px;
  padding: 12px 0 0;
  font-size: 13px;
}
#mainArea .pankuzu li { display: inline; float: none; }

/* ---- フッターを常に最下部に置く（内容が短いページ対策）---- */
body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-width: 0;
  text-align: left;
}
body > header,
body > #band { flex: 0 0 auto; }
body > #mainArea { flex: 1 0 auto; }
body > footer { flex: 0 0 auto; margin-top: auto; }

/* ---- format.css のリセットがヘッダー・フッターへ漏れる分だけを戻す ----
   format.css は h1〜h6 を font-size:100% にするため、素で読むと
   ヘッダーのロゴ(h1)が小さくなり、フッターのSNS見出し(h4)の余白も変わる。
   本文のフォームはこのリセット前提で組まれているので format.css 自体は残し、
   ヘッダー・フッターの中だけ他ページと同じ値に戻す。 */
body > header h1 { font-size: 2em; }        /* 他ページと同じ 36px 相当 */
/* format.css の img{display:block} が効くと h1 の高さが画像そのもの(25px)になり、
   ロゴ下の余白が消えてナビが詰まる。他ページと同じ inline に戻す。 */
body > header img,
body > footer img { display: inline; }
body > footer h4 {
  font-size: 18px;
  line-height: 1.6;
  margin: 0;
  padding: 0;
}

/* ---- 文中のリンク ----
   旧CSSは a を一律 display:block; width:100% にしているため、
   「mail : nhc@…」のような文中リンクが改行されてしまう。インラインに戻す。 */
#mainArea a[href^="mailto:"],
#mainArea a[href^="tel:"],
#mainArea p > a,
#mainArea td > a {
  display: inline;
  width: auto;
}

/* ---- 本文セクションの余白 ----
   テーマCSSが section に padding:120px 0 45px を与えており、#mainArea 内の
   section（.default など）にも効いてリード文の上が164px空いていた。
   上を詰めて、その分を下の余白に回す。 */
#mainArea section {
  /* 他ページはパンくず下の余白が20px。見積はリード文なので少し広めに取る */
  padding-top: 24px;
  padding-bottom: 45px;
}
#mainArea section > p:first-child,
#mainArea .contents > p:first-of-type {
  margin-top: 0;
  margin-bottom: 32px;
}
#mainArea { padding-bottom: 60px; }

/* 旧ヘッダー用に残っていた要素 */
#goTop { display: none; }

/* ---- スマートフォン（旧CSSは固定幅なので本文側を可変にする）---- */
@media screen and (max-width: 1000px) {
  #band { background-size: cover; }
  #band .title { height: 120px; line-height: 120px; }
  #mainArea {
    width: auto !important;
    max-width: 100%;
    padding: 0 14px;
    box-sizing: border-box;
  }
  #mainArea table { width: 100%; }
  #mainArea img { max-width: 100%; height: auto; }
}