@charset "UTF-8";
/* 新着情報アーカイブ: ヘッダー/フッター/パンくずをWP化ページと揃えるための補正。
   本文は news-legacy.css（旧 /css/style.css を #band / #mainArea の中だけに限定したもの）が受け持つ。
   ここでは「旧ヘッダーの高さを前提にしていた指定」と「他ページとの位置合わせ」を行う。
   見積シミュレーション(/mitsumori/css/mitsumori-fix.css)で本番検証済みの内容がベース。
   相違点は、パンくずを旧 ul.pankuzu ではなくWP化ページと同じ div.breadcrumbs にしたこと。 */

/* ---- パンくず ----
   WP化ページと同じ位置（ヘッダー直下・ヒーローの上）に置く。
   テーマCSSの .breadcrumbs は font-size と margin しか持たないので、
   幅は main .inner（max-width:1120px）が受け持つ。
   format.css の body{text-align:center} を受けて中央寄せになるのを戻す。 */
main > .breadcrumbs {
  text-align: left;
  font-size: 1.4rem;
  margin: 10px auto 6px;
}
main > .breadcrumbs .inner {
  padding: 0 10px;
  box-sizing: border-box;
}
/* format.css の a{display:block} がパンくずのリンクに効くとHOMEが改行される */
main > .breadcrumbs a { display: inline; width: auto; }

/* ---- ヒーロー画像 ----
   写真・白文字・英字54px(Oswald)・レスポンシブは、すべて他ページと同じ
   /css/dl-legacy.css の .dl-legacy .dl-band が受け持つ。ここで値を複製しない。
   （旧デザインの <section id="band"> は使わず、他ページと同じ .dl-legacy > .dl-band にした）
   ここで決めるのは縦位置だけ。他ページはヘッダー下端の40px下から始まる。実測値。 */
main > .dl-legacy {
  margin-top: 40px;
}
/* format.css の h1〜h6{font-size:100%} がヒーローの見出しにも効いてしまうため、
   dl-legacy.css の値が確実に勝つようにする。 */
main > .dl-legacy .dl-band .title03 span { font-size: 54px; }
/* テーマCSSは本文の行間を2.0にしており、他ページのヒーロー和文は 22px×2=44px になる。
   format.css がその行間を打ち消してヒーローが12px低くなるので戻す。 */
main > .dl-legacy .dl-band .bandTxt { font-size: 22px; line-height: 2; }
@media screen and (max-width: 1000px) {
  main > .dl-legacy .dl-band .title03 span { font-size: 30px; }
  main > .dl-legacy .dl-band .bandTxt { font-size: 14px; }
}

/* ---- 本文の幅と上余白 ----
   ・テーマCSSが section に大きな padding を与えており、#mainArea も section のため
     ヒーロー画像と本文の間に120pxの空白ができる。
   ・幅は他ページ（テーマの .inner）と同じ max-width:1120px に揃える。旧CSSは1000px固定だった。 */
#mainArea {
  /* ヒーロー下端→本文の16pxは dl-legacy.css の .dl-band{margin-bottom:16px} が担う */
  padding-top: 0;
  margin-top: 0;
  /* body を flex にしているため width:auto だと内容幅になってしまう。100% を明示する */
  width: 100% !important;
  max-width: 1120px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 0;
  padding-right: 0;
  padding-bottom: 60px;
  box-sizing: border-box;
}
@media screen and (max-width: 1160px) {
  #mainArea { padding-left: 20px; padding-right: 20px; }
}
/* 旧レイアウトは leftArea(760px) + aside(右カラム) の2段組だったが、
   新着情報は右カラムが空なので本文を全幅で使う。 */
#mainArea .leftArea {
  width: 100% !important;
  float: none !important;
  margin: 0 !important;
}
#mainArea aside { display: none; }
/* 旧記事の2段組は「本文760px・画像370px＋文章370px」を前提に組まれている。
   .column02 は flex コンテナなので、文章側を flex:1 にして残り幅いっぱいに広げる。
   （そのままだと文章が370pxのまま、右に350pxほどの余白ができる）
   セレクタは元CSSの #mainArea .leftArea .column02 .txtR より詳細度を上げてある。
   なお .column02 は flex-wrap:wrap なので、flex-basis を auto のままにすると
   内容幅で折り返して画像の下に落ちてしまう。basis は 0 にする。 */
#mainArea .leftArea .column02 > .txtR,
#mainArea .leftArea .column02 > .txtL {
  flex: 1 1 0%;
  width: auto;
  min-width: 0;
  float: none;
}

/* ---- 本文セクションの余白 ----
   テーマCSSが section に padding:120px 0 45px を与えており、#mainArea 内の
   section（.leftArea など）にも効いて上が大きく空く。 */
#mainArea section {
  padding-top: 0;
  padding-bottom: 0;
}

/* ---- フッターを常に最下部に置く（内容が短い個別記事の対策）---- */
body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-width: 0;
  text-align: left;
}
body > header { flex: 0 0 auto; }
body > main   { flex: 1 0 auto; }
body > footer { flex: 0 0 auto; margin-top: auto; }
main { display: block; }

/* ---- format.css のリセットがヘッダー・フッターへ漏れる分だけを戻す ----
   format.css は h1〜h6 を font-size:100% にするため、素で読むと
   ヘッダーのロゴ(h1)が小さくなり、フッターのSNS見出し(h4)の余白も変わる。
   本文はこのリセット前提で組まれているので format.css 自体は残し、
   ヘッダー・フッターの中だけ他ページと同じ値に戻す。 */
/* font-weight も format.css に打ち消されるため戻す。中身はロゴ画像なので
   見た目は変わらないが、他ページと算出値を一致させておく。 */
body > header h1 { font-size: 2em; font-weight: 700; }
/* format.css の img{display:block} が効くと h1 の高さが画像そのもの(25px)になり、
   ロゴ下の余白が消えてナビが詰まる。他ページと同じ inline に戻す。 */
body > header img,
body > footer img { display: inline; }
/* format.css は h1〜h6 の font-weight も打ち消すため、フッターの
   「日本ヒューム公式SNS |」が他ページ(700)より細く(400)なっていた。
   行間も他ページは normal なので合わせる。値は catalog / outline の実測値。 */
body > footer h4 {
  font-size: 18px;
  font-weight: 700;
  line-height: normal;
  margin: 0;
  padding: 0;
}

/* ---- 文中のリンク ----
   旧CSSは a を一律 display:block; width:100% にしているため、
   一覧の日付とタイトルが並ぶ行などで意図しない改行が入る。インラインに戻す。 */
#mainArea a[href^="mailto:"],
#mainArea a[href^="tel:"],
#mainArea p > a,
#mainArea td > a,
#mainArea li > a {
  display: inline;
  width: auto;
}

/* 旧ヘッダー用に残っていた要素（新デザインは #pagetop を使う） */
#goTop { display: none; }

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