@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-2. ハンバーガーボタンの3本線
       span が入れ子になってしまった場合でも線が重ならないようにする保険。 */
.mean-container a.meanmenu-reveal span span {
  margin-top: 3px;
}

/* 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;
}

/* 19. スマホ版バナーの余白に重ねる「住まいのこと何でもご相談下さい!!」
      画像は元のまま。位置は % 指定なので、画面幅が変わっても追従します。
      JavaScript が動かない環境では、動かずに最初から表示されます。 */
.nk-kotoba-wrap {
  position: relative;
}

/* 元サイトの .sp_img img { width:100% } より優先させるため、詳細度を上げている */
.nk-kotoba-wrap img.nk-kotoba {
  position: absolute;
  left: calc(3% + 10px);
  top: 22.5%;
  width: 33%;
  height: auto;
  margin: 0;
  pointer-events: none;
}

.nk-kotoba.nk-pop {
  opacity: 0;
}

@media (prefers-reduced-motion: no-preference) {
  .nk-kotoba.nk-pop.is-on {
    animation: nk-pop .55s cubic-bezier(.2, 1.45, .4, 1) forwards;
  }
}

@media (prefers-reduced-motion: reduce) {
  .nk-kotoba.nk-pop.is-on {
    opacity: 1;
  }
}

@keyframes nk-pop {
  0%   { opacity: 0; transform: scale(.7) rotate(-4deg); }
  65%  { opacity: 1; transform: scale(1.07) rotate(1.5deg); }
  100% { opacity: 1; transform: scale(1) rotate(0deg); }
}

/* 18. 「TOPへ戻る」ボタンを小さくする
      元サイトは画像74px＋余白で約106×80px あった。
      p.fortop（パソコン表示）だけを対象にし、
      スマホの固定フッター内の li.fortop には影響させない。 */
p.fortop {
  padding: .4em .7em .7em;
}

p.fortop img {
  display: block;
  width: 48px;
  max-width: 100%;
  height: auto;
}

/* 17. 補助金の注記など p.center の文字が小さすぎたので、本文（.design）に合わせる
      元は PC 1.6rem / スマホ 1rem（＝10px）で読みづらかった。 */
p.center {
  font-size: 2rem;
  line-height: 1.8;
}

/* 16. Instagram への誘導ブロック
      もとは文字まで含めた1枚画像だったものを、文字は実テキストに起こし、
      ロゴと「今すぐcheck」ボタンだけを画像として残している。 */
.nk-insta {
  text-align: center;
  margin: 3.5em auto 3em;
  padding: 0 1em;
}

.nk-insta-lead {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55em;
  color: #2A3C59;
  font-size: 6rem;
  font-weight: 800;
  letter-spacing: .05em;
  line-height: 1.3;
  margin: 0 0 .35em;
}

.nk-insta-lead::before,
.nk-insta-lead::after {
  content: "";
  width: 5px;
  height: 1.25em;
  background: #1b2430;
  border-radius: 2px;
  flex: none;
}

.nk-insta-lead::before { transform: rotate(-22deg); }
.nk-insta-lead::after  { transform: rotate(22deg); }

.nk-insta-sub {
  font-size: 2.1rem;
  color: #2b2b2b;
  letter-spacing: .06em;
  line-height: 1.7;
  margin: 0 0 1.2em;
}

/* スマホでだけ改行する（PC では無視される） */
br.nk-sp-only {
  display: none;
}

.nk-insta-btn {
  margin: 0 0 1.5em;
}

.nk-insta-btn a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 1.4em;
  flex-wrap: wrap;
  text-decoration: none;
}

.nk-insta-logo {
  width: 300px;
  max-width: 44vw;
  height: auto;
}

.nk-insta-check {
  width: 300px;
  max-width: 44vw;
  height: auto;
}

.nk-insta-posts {
  margin: 0;
}

.nk-insta-posts img {
  width: 100%;
  max-width: 1160px;
  height: auto;
}

.nk-insta-compact {
  margin: 3em auto;
}

.nk-insta-compact .nk-insta-sub {
  font-size: 2.4rem;
}

/* 15. スクロールして見えた瞬間に一度だけ動かす演出
      ・.nk-shine …「今すぐcheck」ボタンがキラッと光る
      ・.nk-shake … 画像がブルブルッと震える
      どちらも js/fade-in.js が .is-on を付けたときだけ動きます。
      「視差効果を減らす」設定の端末では動きません。 */
.nk-shine {
  position: relative;
  display: inline-block;
  line-height: 0;
}

/* 包み要素を画像とぴったり同じ大きさにする（光が画像からはみ出さないように） */
.nk-shine > img {
  display: block;
}

.nk-shine::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  background: linear-gradient(105deg,
    rgba(255, 255, 255, 0) 40%,
    rgba(255, 255, 255, .85) 47%,
    rgba(255, 255, 255, .98) 50%,
    rgba(255, 255, 255, .85) 53%,
    rgba(255, 255, 255, 0) 60%);
  background-size: 280% 100%;
  background-position: 170% 0;
}

@media (prefers-reduced-motion: no-preference) {
  .nk-shine.is-on::after {
    animation: nk-shine 2.4s ease-out 2;
  }

  .nk-shake.is-on {
    animation: nk-shake .75s ease-in-out 2;
  }
}

@keyframes nk-shine {
  0%   { background-position: 170% 0; opacity: 1; }
  30%  { background-position: -70% 0; opacity: 1; }
  31%, 100% { opacity: 0; }
}

@keyframes nk-shake {
  0%, 100% { transform: translateX(0) rotate(0deg); }
  10% { transform: translateX(-7px) rotate(-0.45deg); }
  20% { transform: translateX(7px)  rotate(0.45deg); }
  30% { transform: translateX(-6px) rotate(-0.35deg); }
  40% { transform: translateX(6px)  rotate(0.35deg); }
  50% { transform: translateX(-4px) rotate(-0.2deg); }
  60% { transform: translateX(4px)  rotate(0.2deg); }
  70% { transform: translateX(-2px); }
  80% { transform: translateX(2px); }
  90% { transform: translateX(-1px); }
}

/* 14. 画像をふわっと表示する（js/fade-in.js がクラスを付けたときだけ効く）
      JavaScript が動かない環境では、この指定自体が付かないので画像は普通に表示されます。 */
@media (prefers-reduced-motion: no-preference) {
  .nk-fade {
    opacity: 0;
    transform: translateY(20px);
    will-change: opacity, transform;
  }

  .nk-fade.is-shown {
    opacity: 1;
    transform: none;
    transition: opacity .9s ease, transform .9s cubic-bezier(.22, .61, .36, 1);
  }
}

/* 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-insta-lead {
    /* 画面が狭いときは自動で縮み、最大 31px。小さい端末でもはみ出さない */
    font-size: clamp(2.1rem, 7.9vw, 3.1rem);
    gap: .3em;
    white-space: nowrap;
  }

  .nk-insta-lead::before,
  .nk-insta-lead::after {
    flex: none;
  }

  .nk-insta-lead::before,
  .nk-insta-lead::after {
    width: 3px;
  }

  br.nk-sp-only {
    display: inline;
  }

  .nk-insta-sub {
    font-size: 1.8rem;
  }

  .nk-insta-compact .nk-insta-sub {
    font-size: 1.8rem;
  }

  /* スマホではロゴとボタンを縦2段に並べ、それぞれ幅70%まで大きくする */
  .nk-insta-btn a {
    flex-direction: column;
    gap: .9em;
    width: 100%;
  }

  .nk-insta-logo {
    width: 70%;
    max-width: 70%;
  }

  .nk-shine {
    width: 70%;
  }

  .nk-insta-check {
    width: 100%;
    max-width: 100%;
  }

  p.center {
    font-size: 1.6rem;
    width: 88%;
    line-height: 1.8;
  }

  .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%;
  }
}