/* 静的化にあたって追加したカスタムCSS (STUDIOランタイムの挙動を再現) */

/* --- モバイルメニュー(ドロワー) 開閉 --- */
.design-canvas__modal {
  visibility: hidden;
  pointer-events: none;
}
.design-canvas__modal .studio-canvas {
  opacity: 0;
  transform: translateX(32px);
  transition: opacity .4s cubic-bezier(.4, .4, 0, 1), transform .4s cubic-bezier(.4, .4, 0, 1);
}
.design-canvas__modal .design-canvas__modal__base {
  background: rgba(0, 0, 0, .16);
  border: none;
  opacity: 0;
  cursor: pointer;
}
.design-canvas__modal.is-open {
  visibility: visible;
  pointer-events: auto;
}
.design-canvas__modal.is-open .studio-canvas {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}
.design-canvas__modal.is-open .studio-canvas > * {
  pointer-events: auto;
}
.design-canvas__modal.is-open .design-canvas__modal__base {
  opacity: 1;
}

/* メニュー展開中は背面スクロールを止める */
body.menu-open {
  overflow: hidden;
}

/* --- 実績紹介(/works/all, /works/tag/*) フィルタボタン行のレスポンシブ調整 ---
   STUDIO元データでは「すべて」とタグ3つが別のフレックス容器に分かれており、
   中間幅で「すべて」だけが孤立した行になって崩れる。内側の容器を
   display:contents で解消し、4つのボタンを1つの折り返し行として流す。
   またSTUDIO元データでは position:sticky のため、スクロールすると
   ボタンが背景なしでカードの上に浮いて重なるバグがあり、固定を解除する。 */
.sd[data-s-b31ada08-71f8-4a20-90ae-0917fe6005e9],  /* /works/all のボタン行 */
.sd[data-s-eca35689-fb21-4d36-af20-2360fa46129e] { /* /works/tag/* のボタン行 */
  position: static;
  top: auto;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: stretch;
  align-content: flex-start;
  justify-content: flex-start;
  gap: 8px;
  height: auto;
}
.sd[data-s-e1541259-882d-42b3-9616-af113f75a4ea],  /* /works/all タグ3つの内側容器 */
.sd[data-s-0a7445ea-6788-4503-99f9-9c7c239f0afd] { /* /works/tag/* 同上 */
  display: contents;
}

@media screen and (max-width: 840px) {
  .sd[data-s-b31ada08-71f8-4a20-90ae-0917fe6005e9],
  .sd[data-s-eca35689-fb21-4d36-af20-2360fa46129e] {
    justify-content: center;
  }
}

/* 狭い画面では「リフォーム・住まいのサポート（即湯・修繕）」が
   ボタン内で2行に折り返すため、文字と余白を少し詰めて1行に収める */
@media screen and (max-width: 430px) {
  .sd[data-s-2479fe15-ad8c-4413-8390-a99a5396bc53],
  .sd[data-s-229f21ad-b0cd-4196-9989-15bd471b8135],
  .sd[data-s-70189f4f-90ee-4d3f-b512-2e9d0403b936],
  .sd[data-s-43ce9a20-94e6-4f99-9334-a4816c37f918] {
    padding: 13px 16px;
  }
  .sd[data-s-13772292-3e2b-4c55-9e2c-f95606ceb537],
  .sd[data-s-72285dbe-b7f1-4462-98fd-4df3d0f6c334],
  .sd[data-s-77c87fe5-7b96-41ee-a485-a184637885a9],
  .sd[data-s-95a84219-79ae-4fd8-9a23-c2e8c74fc38c],
  .sd[data-s-eeab2a73-2bae-43de-84fe-d12f2fa269ac],
  .sd[data-s-969e561e-7ca1-4e39-8bef-d76649eba7ad],
  .sd[data-s-aac2a64a-5d4c-46a1-bff3-095045842532] {
    font-size: clamp(10.5px, 3.1vw, 12px);
    letter-spacing: 0.05em;
    white-space: nowrap;
  }
}

/* --- 実績インタビューの「おすすめ記事(Pick up)」カード ---
   STUDIOのCMS連携枠が空のままなので、build.mjsが静的に挿入するカードのスタイル。
   親コンテナ(daed40b1)は flex row wrap / gap 40px。 */
.pickup-card {
  display: block;
  width: calc(50% - 20px);
  text-decoration: none;
}
.pickup-card__img {
  aspect-ratio: 16 / 9;
  border-radius: 8px;
  overflow: hidden;
  background: #f4f6f8;
}
.pickup-card__img img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .35s cubic-bezier(.4, .4, 0, 1);
}
.pickup-card:hover .pickup-card__img img {
  transform: scale(1.04);
}
.pickup-card__tag {
  margin: 14px 0 0;
  color: #0096df;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.4;
}
.pickup-card__title {
  margin: 6px 0 0;
  color: #1e1e1e;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.6;
}
@media screen and (max-width: 840px) {
  .pickup-card {
    width: 100%;
  }
}

/* --- ブログ(/blog) ---
   STUDIOのブログCMSが空(記事0件)のため、build.mjsが既存のお知らせ・実績を
   「新着記事」として静的挿入する。そのカード・カテゴリのスタイル。 */

/* サイドバーPICK UP: 画像なしの見出しリンク */
[data-s-40bbcf9a-173a-4804-a328-0b73beda306f] {
  gap: 0; /* STUDIO元のカード用gap(32px)をリスト型に合わせて詰める */
}
.pickup-item {
  display: block;
  width: 100%;
  padding: 16px 0;
  border-bottom: 1px solid #efefef;
  text-decoration: none;
}
.pickup-item:first-child {
  padding-top: 4px;
}
.pickup-item__tag {
  margin: 0;
  color: #0096df;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.4;
}
.pickup-item__title {
  margin: 6px 0 0;
  color: #1e1e1e;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.7;
  transition: color .3s;
}
.pickup-item:hover .pickup-item__title {
  color: #0096df;
}

/* カルーセル: Prev/Nextボタンを撤去したので、ボタン用に空けてあった
   下余白(120px)を詰める。スライドはSTUDIO元の1040pxから一回り小さく */
.blog-carousel [data-s-1876044e-f102-47a5-96e0-d6a0825200fe] {
  width: 800px;
  margin-bottom: 48px;
  padding: 0 24px;
}
.blog-carousel [data-s-9fc07277-55dc-45c8-8e1f-839da00df8b9] {
  padding: 28px;
  gap: 36px;
}
.blog-carousel [data-s-8d2f34fa-5a44-4f95-8abe-36e2bd7e8889] {
  width: 230px;
}
.blog-carousel [data-s-8266cb59-59ae-49ab-aed2-ff9e43172024] {
  font-size: 19px;
}
@media screen and (max-width: 840px) {
  .blog-carousel [data-s-9fc07277-55dc-45c8-8e1f-839da00df8b9] {
    padding: 20px;
  }
  .blog-carousel [data-s-8d2f34fa-5a44-4f95-8abe-36e2bd7e8889] {
    width: 100%;
  }
  .blog-carousel [data-s-8266cb59-59ae-49ab-aed2-ff9e43172024] {
    font-size: 16px;
  }
}

/* 記事一覧カード(親コンテナ17ccebdfは flex row wrap / gap 48(SP:40)) */
.blog-card {
  display: block;
  width: calc(50% - 24px);
  text-decoration: none;
}
.blog-card__img {
  aspect-ratio: 16 / 9;
  border-radius: 8px;
  overflow: hidden;
  background: #f4f6f8;
}
.blog-card__img img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .35s cubic-bezier(.4, .4, 0, 1);
}
.blog-card:hover .blog-card__img img {
  transform: scale(1.04);
}
/* お知らせ(専用サムネ無し)はロゴを余白付きで収める */
.blog-card__img--logo {
  background: #f9f9f9;
  border: 1px solid #efefef;
}
.blog-card__img--logo img {
  object-fit: contain;
  padding: 14% 18%;
  box-sizing: border-box;
}
.blog-card__meta {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 14px 0 0;
}
.blog-card__date {
  color: #777777;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.05em;
}
.blog-card__tag {
  color: #0096df;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.4;
}
.blog-card__title {
  margin: 6px 0 0;
  color: #1e1e1e;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.6;
}
@media screen and (max-width: 840px) {
  .blog-card {
    width: 100%;
  }
}

/* --- トップの乾太くんお試しセクション(Movie) ---
   build.mjsが「見出し+全幅動画」をこの2カラム構成に差し替える。
   左: ベネフィット3つ + 申し込みCTA(#contact-formへ) + 電話導線
   右: 縦型ショート動画のプレーヤー */
.kt {
  box-sizing: border-box;
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 48px 72px;
  padding: 16px 0 32px;
  font-family: 'Noto Sans JP', sans-serif;
  text-align: left;
}
.kt__text {
  flex: 1 1 480px;
  min-width: 0;
  max-width: 640px;
  display: flex;
  flex-direction: column;
  gap: 22px;
}
.kt__eyebrow {
  margin: 0;
  font-family: Poppins, sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: #ff8634;
}
.kt__title {
  margin: 0;
  font-size: clamp(24px, 2.4vw, 34px);
  font-weight: 900;
  line-height: 1.45;
  letter-spacing: 0.04em;
  color: #1e1e1e;
}
.kt__title span {
  color: #0073ab;
}
.kt__lead {
  margin: 0;
  font-size: 15px;
  line-height: 1.9;
  color: #4e5a66;
}
.kt__checks {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.kt__checks li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
.kt__checks svg {
  flex: none;
  margin-top: 2px;
}
.kt__checks p {
  margin: 0;
  font-size: 15px;
  line-height: 1.7;
  color: #1e1e1e;
}
.kt__cta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  margin-top: 4px;
}
.kt__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 58px;
  padding: 0 48px;
  border-radius: 999px;
  background: #0096df; /* ロゴ・サイト共通のブランドブルー */
  color: #ffffff;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-decoration: none;
  transition: background .25s;
}
.kt__btn:hover {
  background: #0084c4;
}
.kt__note {
  margin: 0;
  font-size: 13.5px;
  font-weight: 600;
  color: #3f4a55;
}
.kt__tel {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: #4e5a66;
}
.kt__tel a {
  font-family: Poppins, sans-serif;
  font-size: 16px;
  font-weight: 700;
  color: #1e1e1e;
  text-decoration: none;
}
.kt__video {
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}
.kt__player {
  width: 300px;
  height: 533px;
  border-radius: 22px;
  overflow: hidden;
  background: #1e1e1e;
  box-shadow: 0 18px 44px rgba(16, 42, 60, 0.22);
}
.kt__player iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}
.kt__caption {
  margin: 0;
  font-size: 13px;
  font-weight: 700;
  color: #4e5a66;
}
@media screen and (max-width: 840px) {
  .kt {
    gap: 36px;
    padding: 8px 0 16px;
  }
  .kt__player {
    width: 272px;
    height: 483px;
  }
  .kt__btn {
    width: 100%;
    box-sizing: border-box;
  }
  .kt__cta {
    align-items: center;
  }
}

/* --- お問い合わせフォーム簡略版(案A: トップ・/contact) ---
   build.mjsがSTUDIO元の7項目フォームをこのマークアップに差し替える。 */
.cf {
  box-sizing: border-box;
  width: 100%;
  max-width: 720px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 22px;
  font-family: 'Noto Sans JP', sans-serif;
  text-align: left;
}
.cf__lead {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.7;
  color: #6b7480;
}
.cf__field {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.cf__labelrow {
  display: flex;
  align-items: center;
  gap: 8px;
}
.cf__label {
  font-size: 14px;
  font-weight: 700;
  color: #1e1e1e;
}
.cf__badge {
  font-size: 11px;
  font-weight: 700;
  border-radius: 4px;
  padding: 2px 7px;
}
.cf__badge--req {
  color: #c4581a;
  background: #fdeee4;
}
.cf__badge--opt {
  color: #4e5a66;
  background: #eef1f4;
}
.cf__hint {
  font-size: 12px;
  color: #6b7480;
}
.cf__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.cf__chip {
  position: relative;
}
.cf__chip input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.cf__chip span {
  display: inline-block;
  padding: 11px 18px;
  border: 1.5px solid #dfe3e8;
  border-radius: 999px;
  font-size: 13.5px;
  font-weight: 500;
  color: #444c55;
  background: #fff;
  cursor: pointer;
  transition: border-color .15s, background .15s, color .15s;
}
.cf__chip input:checked + span {
  border-color: #0096df;
  background: #e8f6fd;
  color: #006da3;
  font-weight: 700;
}
.cf__chip input:focus-visible + span {
  outline: 2px solid #0096df;
  outline-offset: 2px;
}
.cf__input,
.cf__textarea {
  box-sizing: border-box;
  width: 100%;
  border: 1.5px solid #dfe3e8;
  border-radius: 10px;
  padding: 0 16px;
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 15px;
  color: #1e1e1e;
  background: #fff;
}
.cf__input {
  height: 52px;
}
.cf__textarea {
  height: 110px;
  padding: 12px 16px;
  line-height: 1.7;
  resize: vertical;
}
.cf__input::placeholder,
.cf__textarea::placeholder {
  color: #a9b0b8;
}
.cf__input:focus,
.cf__textarea:focus {
  outline: 2px solid #0096df;
  outline-offset: 0;
  border-color: #0096df;
}
.cf__submitblock {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 2px;
}
.cf__submit {
  height: 56px;
  border: none;
  border-radius: 999px;
  background: #0096df;
  color: #fff;
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.1em;
  cursor: pointer;
}
.cf__privacy {
  margin: 0;
  font-size: 12px;
  color: #6b7480;
  text-align: center;
}
.cf__privacy a {
  color: #0096df;
}
.cf__other {
  margin: -2px 0 0;
  font-size: 12px;
  color: #6b7480;
  text-align: center;
}
.cf__other a {
  color: #0096df;
}
.cf__tel {
  margin-top: 4px;
  border-top: 1px solid #ebeef1;
  padding-top: 18px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px 14px;
}
.cf__tel-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 700;
  color: #1e1e1e;
}
.cf__tel-number {
  font-family: Poppins, sans-serif;
  font-size: 22px;
  font-weight: 700;
  color: #1e1e1e;
  text-decoration: none;
}

/* サイドバーのカテゴリリンク(チップ型) */
.blog-cat {
  display: inline-block;
  padding: 10px 20px;
  border: 1px solid #dfdfdf;
  border-radius: 999px;
  color: #1e1e1e;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-decoration: none;
  transition: border-color .3s, color .3s;
}
.blog-cat:hover {
  border-color: #0096df;
  color: #0096df;
}

/* --- サイト全体の動き --- */
@media (prefers-reduced-motion: no-preference) {

  /* スクロールリビール(site.jsが .js-anim を付与し、表示領域に入ると .is-in)
     ※ STUDIO側のスタイルと衝突しないよう:
       - transformではなく独立プロパティの translate で動かす
       - 隠すのは「.is-inが付く前」だけ。出現後はsite.jsがクラスごと外し、
         要素は完全にSTUDIOの元スタイルへ戻る */
  .js-anim {
    transition:
      opacity .9s cubic-bezier(.4, .4, 0, 1),
      translate .9s cubic-bezier(.4, .4, 0, 1);
    transition-delay: var(--anim-delay, 0ms);
  }
  .js-anim:not(.is-in) {
    opacity: 0;
    translate: 0 26px;
  }

  /* ボタンのホバー: ふわっと浮く */
  button.button.sd,
  a.button.sd {
    transition: transform .3s cubic-bezier(.4, .4, 0, 1), box-shadow .3s cubic-bezier(.4, .4, 0, 1), opacity .3s;
  }
  button.button.sd:hover,
  a.button.sd:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(0, 0, 0, .12);
  }

  /* 画像カード(実績・お知らせ等)のホバー: 浮き上がり
     ※ カルーセル内のスライドはtransformで送り動作をしているため除外
       (ホバーのtransformが勝つとスライドが原点へ飛ぶ) */
  a.link.sd:not([data-type="carousel"] *):has(> img.sd),
  a.link.sd:not([data-type="carousel"] *):has(img.sd) {
    transition: transform .35s cubic-bezier(.4, .4, 0, 1);
  }
  a.link.sd:not([data-type="carousel"] *):has(img.sd):hover {
    transform: translateY(-4px);
  }

  /* スクロールするとヘッダーに影 */
  header.fixed.sd {
    transition: box-shadow .35s ease;
  }
  body.scrolled header.fixed.sd {
    box-shadow: 0 2px 18px rgba(0, 0, 0, .08);
  }

  /* ページ内アンカーはスムーズスクロール */
  html {
    scroll-behavior: smooth;
  }
}