/* =========================================================
   Urban Kurooka - WordPress additional styles
   assets/wp-extra.css

   現在の構成で必要な追加CSSだけをまとめた整理版です。

   - お知らせ一覧 / 投稿詳細
   - 主な施工実績「過去の主な実績（PDF）」

   以下の古いCSSは削除済みです。
   - トップページのお知らせ欄用 .uk-news
   - 旧「業務案内アルバム」用 .uk-business-*
   - 旧 projects-list / projects-page-content 系
   - Photo Gallery by 10Web 用CSS
     （10Web用は assets/gallery.css で管理）
   ========================================================= */


/* =========================================================
   お知らせ一覧 / 投稿詳細
   ========================================================= */

.uk-news-list,
.uk-news-single {
  box-sizing: border-box;
  max-width: 1000px;
  margin: 40px auto 60px;
  padding: 30px;
  background: #fff;
}

.uk-news-list h1,
.uk-news-single h1 {
  margin-top: 0;
}


/* ---------------------------------------------------------
   お知らせ一覧
   --------------------------------------------------------- */

.uk-news-entries {
  margin: 0;
  padding: 0;
}

.uk-news-entry {
  display: flex;
  gap: 24px;
  padding: 14px 0;
  border-bottom: 1px solid #ddd;
}

.uk-news-entry dt {
  flex: 0 0 110px;
}

.uk-news-entry dd {
  margin: 0;
}

.uk-news-entry a {
  color: inherit;
  text-decoration: none;
}

.uk-news-entry a:hover,
.uk-news-entry a:focus {
  text-decoration: underline;
}


/* ---------------------------------------------------------
   お知らせ詳細
   --------------------------------------------------------- */

.uk-news-date {
  margin-bottom: 10px;
}

.uk-news-body {
  margin-top: 30px;
  line-height: 1.9;
}

.uk-news-body img {
  max-width: 100%;
  height: auto;
}

.uk-news-back {
  margin-top: 40px;
  padding-top: 20px;
  border-top: 1px solid #ddd;
}

.uk-news-back a {
  text-decoration: none;
}

.uk-news-back a:hover,
.uk-news-back a:focus {
  text-decoration: underline;
}


/* ---------------------------------------------------------
   ページ送り
   --------------------------------------------------------- */

.uk-news-list .page-numbers {
  margin-top: 30px;
}


/* ---------------------------------------------------------
   お知らせ：スマートフォン
   --------------------------------------------------------- */

@media (max-width: 700px) {

  .uk-news-list,
  .uk-news-single {
    width: 94%;
    margin: 25px auto 40px;
    padding: 20px;
  }

  .uk-news-entry {
    display: block;
  }

  .uk-news-entry dt {
    margin-bottom: 5px;
  }
}


/* =========================================================
   主な施工実績：過去実績PDFリンク
   ========================================================= */

/*
 * 施工実績一覧本体は既存 assets/style.css をそのまま使用します。
 *
 * 元テーマの .projects .row div 等の中央寄せ指定を、
 * PDF欄だけ明示的に解除します。
 */

.projects .row.projects-past-row {
  display: block !important;

  /*
   * 元の施工実績一覧 .projects dl と同じ幅・中央配置。
   * これでPDF欄の左端が上の一覧表と揃います。
   */
  width: 57.5% !important;
  margin: 1rem auto !important;
  padding: 0 !important;
  text-align: left !important;
}

.projects .row.projects-past-row > .projects-past-pdf {
  display: block !important;
  float: none !important;
  flex: none !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  text-align: left !important;
}


/* ---------------------------------------------------------
   PDF欄タイトル
   --------------------------------------------------------- */

.projects .projects-past-pdf h4 {
  margin: 0 0 .35rem !important;
  padding: 0 !important;
  color: #555;
  font-size: 90%;
  font-weight: normal;
  line-height: 1.65;
  text-align: left !important;
}


/* ---------------------------------------------------------
   PDFリンク一覧
   --------------------------------------------------------- */

.projects .projects-pdf-links {
  display: block !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
  text-align: left !important;
}

.projects .projects-pdf-links li {
  display: block !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1.65;
  text-align: left !important;
}


/* ---------------------------------------------------------
   PDFリンク
   「・ 年代 PDFアイコン」をすべて左詰め
   --------------------------------------------------------- */

.projects .projects-pdf-links a,
.projects .projects-pdf-disabled {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: .35rem;
  width: auto !important;
  margin: 0 !important;
  padding: 2px 0 !important;
  color: #777;
  font-size: 90%;
  line-height: 1.65;
  text-align: left !important;
  text-decoration: none;
}

.projects .projects-pdf-bullet {
  display: inline-block;
  flex: 0 0 auto;
  width: .9em;
  text-align: left;
}

.projects .projects-pdf-year {
  display: inline-block;
}


/* ---------------------------------------------------------
   PDFアイコン
   Font Awesome 5: far fa-file-pdf
   --------------------------------------------------------- */

.projects .projects-pdf-icon {
  display: inline-block;
  flex: 0 0 auto;
  margin-left: .1rem;
  color: #d94b58;
  font-size: 1em;
}

.projects .projects-pdf-links a:hover,
.projects .projects-pdf-links a:focus {
  color: #134A8C;
  text-decoration: underline;
}

.projects .projects-pdf-links a:hover .projects-pdf-icon,
.projects .projects-pdf-links a:focus .projects-pdf-icon {
  color: #134A8C;
}


/* ---------------------------------------------------------
   PDF未配置時
   --------------------------------------------------------- */

.projects .projects-pdf-disabled {
  opacity: .45;
  cursor: default;
}

.projects .projects-pdf-disabled .projects-pdf-icon {
  color: #999;
}



/* ---------------------------------------------------------
   主な施工実績：タブレット
   元テーマの .projects dl と同じ 70%
   --------------------------------------------------------- */

@media (max-width: 1240px) {
  .projects .row.projects-past-row {
    width: 70% !important;
  }
}

/* ---------------------------------------------------------
   主な施工実績：スマートフォン
   --------------------------------------------------------- */

@media (max-width: 875px) {

  /*
   * 元テーマのスマートフォン時 .projects dl と同じ幅。
   */
  .projects .row.projects-past-row {
    width: 90% !important;
  }

  .projects .projects-past-pdf h4,
  .projects .projects-pdf-links a,
  .projects .projects-pdf-disabled {
    font-size: 90%;
  }
}


/* =========================================================
   オリジナルHTMLのレイアウト基準をWordPress上でも維持
   ========================================================= */

/*
 * 「container」は一般的なクラス名のため、
 * WordPressプラグイン等のCSSと競合しやすいクラスです。
 *
 * 元サイト assets/style.css の基準値:
 *
 * .container {
 *   margin: 0 auto;
 *   max-width: 1242px;
 *   width: 100%;
 * }
 *
 * をWordPress側でも確実に維持します。
 */
html body > .container {
  box-sizing: content-box !important;
  width: 100% !important;
  max-width: 1242px !important;

  margin-left: auto !important;
  margin-right: auto !important;

  padding-left: 0 !important;
  padding-right: 0 !important;
}


/* =========================================================
   代表挨拶・会社沿革
   PC版は元company.htmlと同じ文字組みに固定
   ========================================================= */

@media (min-width: 1241px) {

  /*
   * 元サイト body:
   * font-size: 85%;
   * font-family: Segoe UI ...
   * line-height: 1.65;
   *
   * ブラウザ標準16pxを基準にすると85%=13.6px。
   * WordPressの追加CSSやプラグインに影響されないよう
   * 会社ページのテーマ領域に明示します。
   */
  body.company > .container {
    font-family:
      'Segoe UI',
      Tahoma,
      Geneva,
      Verdana,
      sans-serif !important;

    font-size: 13.6px !important;
    line-height: 1.65 !important;
  }


  /*
   * 元サイト:
   * .company .greeting { width:80%; }
   *
   * 1242px × 80% = 993.6px
   */
  body.company .company .greeting,
  body.company section.greeting {
    box-sizing: content-box !important;

    width: 80% !important;
    max-width: 993.6px !important;

    margin-left: auto !important;
    margin-right: auto !important;
  }


  /*
   * 元サイト:
   * h3 / article / ceo = flex-basis:85%
   *
   * 993.6px × 85% = 844.56px
   *
   * flex-shrinkの影響もなくすため width / max-width も
   * 同じ値に揃えます。
   */
  body.company section.greeting .row > h3,
  body.company section.greeting .row > .article,
  body.company section.greeting .row > .ceo {
    box-sizing: content-box !important;

    flex: 0 0 85% !important;
    flex-basis: 85% !important;

    width: 85% !important;
    max-width: 844.56px !important;
  }


  /*
   * 元サイトの本文文字設定をそのまま固定。
   *
   * 13.6px × 95% = 12.92px
   */
  body.company section.greeting .article {
    font-family:
      'Segoe UI',
      Tahoma,
      Geneva,
      Verdana,
      sans-serif !important;

    font-size: 12.92px !important;
    line-height: 1.4 !important;

    letter-spacing: normal !important;
    word-spacing: normal !important;

    word-break: normal !important;
    overflow-wrap: normal !important;
    white-space: normal !important;
  }


  body.company section.greeting .article p {
    /*
     * 元style.cssでは .container p { line-height:1.65; } が
     * .article の line-height:1.4 より優先されます。
     */
    font-family:
      'Segoe UI',
      Tahoma,
      Geneva,
      Verdana,
      sans-serif !important;

    font-size: 12.92px !important;
    line-height: 1.65 !important;

    letter-spacing: normal !important;
    word-spacing: normal !important;

    margin: 0.5rem 0 0.8rem !important;

    word-break: normal !important;
    overflow-wrap: normal !important;
    white-space: normal !important;
  }


  /*
   * 元HTMLで個別指定されている2つの段落marginを復元。
   */
  body.company section.greeting .article p[style*="margin-bottom"] {
    margin-bottom: 0 !important;
  }

  body.company section.greeting .article p[style*="margin: 0 auto"],
  body.company section.greeting .article p[style*="margin:0 auto"] {
    margin: 0 auto !important;
  }


  body.company section.greeting h3 {
    font-family:
      'Times New Roman',
      Times,
      serif !important;

    font-size: 17px !important;
    font-weight: bold !important;

    letter-spacing: normal !important;
    word-spacing: normal !important;
  }


  /*
   * 会社沿革・会社概要も元PC幅をそのまま使用。
   */
  body.company section.enkaku {
    width: 80% !important;
    max-width: 993.6px !important;

    margin-left: auto !important;
    margin-right: auto !important;
  }

  body.company section.enkaku dl {
    width: 80% !important;
    max-width: 794.88px !important;
  }

  body.company section.gaiyou {
    width: auto !important;
    max-width: none !important;
  }

  body.company section.gaiyou dl {
    width: 70% !important;
    max-width: 869.4px !important;
  }
}


/* =========================================================
   1240px以下
   =========================================================
   ここでは幅を独自固定しません。

   元の assets/style.css にある
   max-width:1240px / 1070px / 875px のレスポンシブ指定を
   そのまま動かします。

   これにより、オリジナルHTMLとWordPressで同じ画面幅なら
   同じレスポンシブ条件になります。
   ========================================================= */