@charset "utf-8";
/* ------------------------------------------------------------------
 * 西田工務店 窓サイト テーマ追加スタイル
 *   元サイトの css/style.css・css/sp.css は一切変更していません。
 *   WordPress 化で必要になった分だけ、このファイルに追記しています。
 * ------------------------------------------------------------------ */

/* 1. 下層ページのヘッダーロゴ（h1 を本文見出しに譲ったため p で再現） */
header p.header-logo {
  height: 90px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 50%;
  float: left;
  margin: 0;
}

header p.header-logo a {
  height: 88px;
}

header p.header-logo img {
  height: 68px;
}

/* 2. 本文の h1 は元サイトの h2 と同じ見た目にする */
main h1 {
  color: #2A3C59;
  border-bottom: 1.5px solid #2A3C59;
  width: auto;
  font-size: 5rem;
  text-align: center;
  font-family: 'Roboto', sans-serif;
  font-weight: 700;
  clear: both;
  margin: 1em 0 0.5em;
}

/* 3. メニュー項目が 1 つ増えたぶんの余白調整 */
header nav ul li {
  padding: 0 0.7em;
}

/* 4. 元サイトの「span は蛍光ペン」指定を、WordPress 化で追加した部分では無効にする
      （投稿本文の span にまで黄色マーカーが掛からないようにするため）。
      記事中でマーカーを使いたいときは class="marker" を指定してください。 */
.nk-card span:not(.nk-card-cat),
.nk-card-body span:not(.nk-card-cat),
.nk-meta span:not(.nk-cats),
.nk-entry span,
.nk-form span,
.nk-catnav span,
.nk-pagination span,
.nk-prevnext span,
.nk-404links span,
.nk-searchform span {
  background: none;
}

.nk-entry .marker,
.nk-entry span.marker {
  background: linear-gradient(transparent 60%, #ff6 60%);
}

/* 4. ブログ記事一覧 */
.nk-cards {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  margin: 2em 0 0;
  padding: 0;
}

.nk-card {
  width: 33.333%;
  padding: 0 1em 2.5em;
  box-sizing: border-box;
}

.nk-card > a {
  display: block;
  height: 100%;
  text-decoration: none;
  color: #333;
  border: 1px solid #dcdfe4;
  border-radius: 4px;
  overflow: hidden;
  background: #fff;
  transition: box-shadow .2s ease, transform .2s ease;
}

.nk-card > a:hover {
  box-shadow: 0 6px 18px rgba(42, 60, 89, .18);
  transform: translateY(-2px);
}

.nk-card-thumb {
  display: block;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  background: #f1f3f6;
}

.nk-card-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.nk-card-body {
  display: block;
  padding: 1.2em 1.2em 1.6em;
}

.nk-card-meta {
  display: flex;
  align-items: center;
  gap: .7em;
  flex-wrap: wrap;
}

.nk-card-date {
  font-size: 1.3rem;
  color: #7a8493;
  letter-spacing: .04em;
}

.nk-card .nk-card-cat {
  display: inline-block;
  font-size: 1.15rem;
  color: #fff;
  background: #2A3C59;
  border-radius: 999px;
  padding: .25em .9em;
  line-height: 1.5;
  white-space: nowrap;
}

.nk-card-title {
  display: block;
  font-size: 1.9rem;
  font-weight: 700;
  color: #2A3C59;
  margin: .3em 0 .5em;
  line-height: 1.45;
}

.nk-card-excerpt {
  display: block;
  font-size: 1.4rem;
  line-height: 1.8;
  color: #555;
}

.nk-empty {
  font-size: 1.6rem;
  text-align: center;
  padding: 3em 0;
}

/* 5. カテゴリー絞り込み */
.nk-catnav ul {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  justify-content: center;
  margin: 1.5em 0 0;
  padding: 0;
}

.nk-catnav li {
  margin: 0 .4em .6em;
}

.nk-catnav a {
  display: block;
  padding: .45em 1.1em;
  border: 1px solid #2A3C59;
  border-radius: 999px;
  font-size: 1.4rem;
  color: #2A3C59;
  text-decoration: none;
}

.nk-catnav a:hover,
.nk-catnav .is-current a {
  background: #2A3C59;
  color: #fff;
}

.nk-catnum {
  display: inline-block;
  margin-left: .5em;
  font-size: 1.1rem;
  opacity: .7;
}

/* 6. ページ送り */
.nk-pagination ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  list-style: none;
  margin: 1em 0 3em;
  padding: 0;
}

.nk-pagination li {
  margin: 0 .25em .5em;
}

.nk-pagination a,
.nk-pagination span {
  display: block;
  min-width: 2.6em;
  padding: .5em .7em;
  text-align: center;
  font-size: 1.4rem;
  text-decoration: none;
  color: #2A3C59;
  border: 1px solid #c9ced8;
  border-radius: 3px;
}

.nk-pagination .current {
  background: #2A3C59;
  border-color: #2A3C59;
  color: #fff;
}

/* 7. 記事本文 */
.nk-meta {
  font-size: 1.4rem;
  color: #7a8493;
  text-align: center;
  margin: 1em 0 1.5em;
}

.nk-meta .nk-cats {
  margin-left: 1em;
}

.nk-meta a {
  color: #2A3C59;
}

.nk-hero img {
  width: 100%;
  height: auto;
  display: block;
  margin: 0 auto 2em;
}

.nk-entry {
  font-size: 1.6rem;
  line-height: 1.95;
  color: #333;
  max-width: 820px;
  margin: 0 auto;
}

.nk-entry p {
  margin: 0 0 1.6em;
}

.nk-entry img,
.nk-entry iframe,
.nk-entry video {
  max-width: 100%;
  height: auto;
}

.nk-entry figure {
  margin: 0 0 1.6em;
}

.nk-entry figcaption {
  font-size: 1.3rem;
  color: #7a8493;
  text-align: center;
  margin-top: .5em;
}

.nk-entry h2 {
  font-size: 2.4rem;
  text-align: left;
  margin: 2em 0 .8em;
}

.nk-entry h3 {
  font-size: 1.9rem;
  width: auto;
  margin: 2em 0 .8em;
  text-align: left;
  background: #eef2f7;
  color: #2A3C59;
  padding: .6em 1em;
  border-left: 5px solid #2A3C59;
}

.nk-entry h4 {
  font-size: 1.8rem;
  margin: 1.8em 0 .6em;
}

.nk-entry ul,
.nk-entry ol {
  margin: 0 0 1.6em 1.6em;
}

.nk-entry li {
  list-style: inherit;
  margin-bottom: .4em;
}

.nk-entry ul li {
  list-style: disc;
}

.nk-entry ol li {
  list-style: decimal;
}

.nk-entry blockquote {
  margin: 0 0 1.6em;
  padding: 1em 1.4em;
  background: #f5f7fa;
  border-left: 5px solid #c9ced8;
}

.nk-entry table {
  width: 100%;
  border-collapse: collapse;
  margin: 0 0 1.6em;
  font-size: 1.5rem;
}

.nk-entry th,
.nk-entry td {
  border: 1px solid #d5d9e0;
  padding: .7em .9em;
  text-align: left;
}

.nk-entry th {
  background: #eef2f7;
}

.nk-entry a {
  color: #1d6fb8;
}

.nk-prevnext {
  display: flex;
  justify-content: space-between;
  list-style: none;
  margin: 3em auto 1em;
  padding: 1.5em 0 0;
  border-top: 1px solid #dcdfe4;
  max-width: 820px;
  font-size: 1.4rem;
}

.nk-prevnext a {
  color: #2A3C59;
  text-decoration: none;
}

.nk-prevnext a:hover {
  text-decoration: underline;
}

.nk-prevnext .nk-next {
  margin-left: auto;
  text-align: right;
}

/* 8. 共通 CTA */
.nk-cta {
  margin-top: 3em;
}

.nk-cta .fullwide-img {
  width: 100%;
  height: auto;
}

/* 9. 検索フォーム・404 */
.nk-searchform {
  display: flex;
  justify-content: center;
  margin: 2em 0 3em;
}

.nk-searchform input[type="search"] {
  font-size: 1.6rem;
  padding: .6em .8em;
  border: 1px solid #c9ced8;
  border-radius: 3px 0 0 3px;
  width: 60%;
  max-width: 420px;
}

.nk-searchform button {
  font-size: 1.5rem;
  padding: .6em 1.4em;
  border: 1px solid #2A3C59;
  background: #2A3C59;
  color: #fff;
  border-radius: 0 3px 3px 0;
  cursor: pointer;
}

.nk-404links {
  list-style: none;
  text-align: center;
  margin: 2em 0;
  padding: 0;
}

.nk-404links li {
  display: inline-block;
  margin: 0 .6em .6em;
  font-size: 1.5rem;
}

.nk-404links a {
  color: #2A3C59;
}

.screen-reader-text {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
  white-space: nowrap;
}

/* 10. Contact Form 7 */
.nk-form {
  max-width: 820px;
  margin: 0 auto 2em;
  font-size: 1.6rem;
}

.nk-form label {
  display: block;
  font-weight: 600;
  color: #2A3C59;
  margin-bottom: .4em;
}

.nk-form p {
  margin: 0 0 1.4em;
}

.nk-form input[type="text"],
.nk-form input[type="tel"],
.nk-form input[type="email"],
.nk-form input[type="url"],
.nk-form input[type="date"],
.nk-form input[type="number"],
.nk-form select,
.nk-form textarea {
  width: 100%;
  font-size: 1.6rem;
  font-family: inherit;
  padding: .7em .8em;
  border: 1px solid #c2c8d2;
  border-radius: 4px;
  background: #fff;
  box-sizing: border-box;
  margin-top: .3em;
}

.nk-form textarea {
  min-height: 10em;
  line-height: 1.7;
}

.nk-form input:focus,
.nk-form textarea:focus,
.nk-form select:focus {
  outline: none;
  border-color: #2A3C59;
  box-shadow: 0 0 0 3px rgba(42, 60, 89, .12);
}

.nk-form .nk-req {
  display: inline-block;
  background: #c0392b;
  color: #fff;
  font-size: 1.1rem;
  font-weight: 700;
  padding: .15em .6em;
  border-radius: 3px;
  margin-left: .5em;
  vertical-align: middle;
}

.nk-form .nk-submit {
  text-align: center;
  margin-top: 2em;
}

.nk-form input[type="submit"] {
  font-size: 1.8rem;
  font-family: inherit;
  color: #fff;
  background: #2A3C59;
  border: none;
  border-radius: 4px;
  padding: .8em 3.5em;
  cursor: pointer;
  transition: opacity .2s;
}

.nk-form input[type="submit"]:hover {
  opacity: .85;
}

.nk-form .wpcf7-not-valid-tip {
  color: #c0392b;
  font-size: 1.4rem;
  margin-top: .3em;
}

.nk-form .wpcf7-response-output {
  font-size: 1.5rem;
  border-width: 2px;
  padding: 1em;
  margin: 1.5em 0 0;
  border-radius: 4px;
}

.nk-form-notice {
  border: 2px dashed #c0392b;
  padding: 1.5em;
  background: #fff6f5;
}

/* 12. 確認画面へボタンの文字色（元サイトの head 内 style を移設） */
.btnB {
  color: #5f5f5f;
}

/* 13. 迷惑メール対策の罠フィールド（人間には見せない） */
.nk-hp {
  position: absolute !important;
  left: -9999px !important;
  top: auto !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
}

/* 11. スマートフォン */
@media screen and (max-width: 900px) {
  header p.header-logo {
    width: 100%;
    float: none;
  }

  header p.header-logo img {
    height: 50px;
    top: 20px;
    left: 0.5em;
    z-index: 999999;
    position: fixed;
  }

  main h1 {
    font-size: 2.5rem;
    margin-top: 2rem;
  }

  .nk-card {
    width: 50%;
    padding: 0 .5em 1.6em;
  }

  .nk-entry {
    font-size: 1.5rem;
  }

  .nk-prevnext {
    flex-direction: column;
    gap: .8em;
  }

  .nk-prevnext .nk-next {
    text-align: left;
    margin-left: 0;
  }
}

@media screen and (max-width: 560px) {
  .nk-card {
    width: 100%;
  }
}

/* PC: 右下の「TOP」ボタンを従来の半分の大きさに（画像 74px → 37px、余白も半分） */
@media screen and (min-width: 801px) {
  .fortop {
    padding: .25em .5em .5em .5em;
  }
  .fortop img {
    width: 37px;
    height: auto;
    vertical-align: middle;
  }
}