@charset "utf-8";
/*
 * ======================================
 * 追加クラス一覧（共通SCSS取り込み検討用）
 * ======================================
 *
 * ヘッダー
 * .lk-header            - sticky（fixedではない）白ヘッダー
 * .lk-header__inner     - inner幅 min(1200px, 100% - 64px) / 上下padding 20px
 * .lk-logo              - ロゴ画像（logo_yoko.png / 高さ66px）
 * .lk-nav               - gap30px・padding無し・hoverは下線ではなく文字色変化
 * .lk-header__right     - 電話（アイコン無し・濃色）+ SNSアイコン
 * .lk-header__tel / __telno / __telsub
 * .lk-sns / __item / --ig / --line
 *
 * メインビュー
 * .lk-mv / __inner / __catch / __dots  - 白抜きコピーを画像下部に重ねるMV
 *
 * セクション共通
 * .lk-sec-blog / .lk-sec-greeting / .lk-sec-area  - デザイン固有のpadding・背景
 * .lk-sechead / --center                          - 見出し行（左：ラベル+H2 / 右：矢印ボタン）
 * .lk-label                                       - Outfit 13px letter-spacing .2em のラベル
 * .lk-h2 / --sm                                   - 38px / 34px の日本語見出し
 * .lk-txt                                         - 本文段落（17px / lh2.1）
 * .lk-btn-arrow                                   - 丸矢印ボタン（背景無し・hoverでgap拡大）
 * .fade / .lk-reveal / .lk-reveal__slide / .is-in  - スクロール連動フェード（IntersectionObserver）
 *
 * TOP
 * .lk-blog-sec / __btn                            - 左：見出し+一覧ボタン ／ 右：記事一覧
 * .lk-blog-list / --1col / --scroll / .lk-blog-card / __thumb / __body / __date / __title
 * .lk-greeting / __lead / __btn / __img
 * .lk-strength / __roof / __body / __btn
 * .lk-strength-list / .lk-strength-card / __img / __in / __no / __title / __desc
 * .lk-area / __txt / __pref / __map / __note / __img
 * .lk-works-list / --page / .lk-works-card / __thumb / __date / __title
 * .lk-pager / .lk-sec-works-list / .lk-archive-label
 * .lk-ph / .lk-ph > img                           - CMSサムネイルの敷き枠
 *
 * 下層ヒーロー
 * .lk-hero / __in / __img / __title / .lk-crumb
 *
 * リフォーム（service）
 * .lk-reform-lead / .lk-anchor-list / .lk-anchor-card / __bg / __veil / __txt / __title / __sub
 * .lk-reform-sec / --rev / __in / __txt / __img / __en / __title / __desc / .lk-tags
 *
 * 施工実績詳細（entry）
 * .lk-entry-wrap / .lk-entry__meta / __date / __title
 * .lk-entry__body（CMS本文のp/h2/h3/img/ul/aを含む） / .lk-entry__pager
 *
 * 会社概要（company）
 * .lk-message / __img / __name / .lk-table
 * .lk-sec-company--career / .lk-career / __ttl / __awards
 *
 * お問い合わせ（contact）
 * .lk-contact-lead / .lk-contact-cards / .lk-contact-card / __ttl / __tel / __note
 * .lk-btn-line / .lk-form（CMSフォーム form-pattern-1 の上書き）
 *
 * CTA・フッター
 * .lk-cta / __inner / __left / __right / __ttl / __sub / __tel / __telicon / __telno / __btn
 * .lk-footer（白背景・3カラム）/ __in / __info / __logo / __txt / __nav / __sns / __snsbtn / __bottom / __copyright
 *
 * ======================================
 * ブログCMSが出力するクラス（HTMLはCMS管理画面側テンプレート）
 * ======================================
 *
 * tag=1（施工実績カード）… .lk-works-card / __thumb.lk-ph / __date / __title
 * tag=2（ブログカード）  … .lk-blog-card / __thumb.lk-ph / __body / __date / __title
 * 記事詳細 c=entry_body  … .lk-entry__body の中に p / h2 / h3 / img / ul / a が出力される
 * 記事詳細 c=page_link   … .pages > .page_next / .page_prev
 * ※ これらはPHP側に記述が無いため未使用に見えるが、CMS出力に当てているクラス。消さないこと。
 *
 * ======================================
 * 共通SCSSに不足していたもの
 * ======================================
 *
 * ■ 値の粒度不足
 *   - font-size：38px / 34px / 21px / 19px の見出しサイズ（fz-* は36・40の刻みのみ）
 *   - gap：16px / 24px / 28px / 32px / 36px / 64px / 72px（gap-* は5,10,15,20,30,40,60）
 *   - section padding：92px / 104px / 72px+90px（section は120/60、--half のみ）
 *
 * ■ 指定方向不足
 *   - grid の非等幅カラム（1fr 300px / 380px 1fr / 220px 1fr）が組めない
 *     → main-side は %ベースのflex、grid-N は等幅のみ
 *   - grid の order 入れ替え（--rev / area の左右反転）は flex の column2--reverse のみ
 *
 * ■ 状態不足
 *   - hover で gap が広がるボタン（btn-circle-arrow は背景色反転のみ）
 *   - hover で暗幕の不透明度だけを変える（card-bnr は画像 scale）
 *
 * ■ 構造不足
 *   - header：sticky（fixedでもabsoluteでもない）型が無い（header-bar=fixed / header-sticky=JS連動）
 *   - MV：画像下部に「白背景の帯を重ねた多行キャッチ」を置く構造が無い
 *   - 三角形の屋根（clip-path polygon）でセクションを繋ぐ装飾が無い
 *   - 下層ヒーロー：画像を左右96px内側に置き、背景に色板を重ねる構造が無い
 *     （page-hero は全面写真 + 暗幕前提）
 *
 * ■ 装飾パターン不足
 *   - スクロールフェード（.fade / .lk-reveal）が共通CSSに無い（AOS前提のため）
 *   - プレースホルダ（画像未入稿の敷き色 + 中央キャプション）のパーツが無い
 */

:root {
  --lk-main: #FF9D18;
  --lk-text: #2C2C2C;
  --lk-body: #3d3833;
  --lk-sub: #6b645e;
  --lk-mute: #8d857c;
  --lk-beige: #FFF3E4;
  --lk-cream: #FBF7F1;
  --lk-ph: #EFE9E1;
  --lk-line: #eee7dd;
  --lk-border: #f1e4d1;
  --lk-border2: #e6dccd;
  --lk-ease: cubic-bezier(0.16, 1, 0.3, 1);
}

/* ==========================================================================
   base 調整
   ========================================================================== */
body {
  text-wrap: pretty;
}
@media (max-width: 896px) {
  body { font-size: 1.6rem; }
}
@media (max-width: 639px) {
  body { font-size: 1.5rem; }
}

/* デザインのリンク色（既定：くすんだオレンジ → hoverでメインカラー） */
a {
  color: #c97a10;
}
a:hover {
  color: var(--lk-main);
  opacity: 1;
}

/* 画像未入稿箇所のプレースホルダ */
.lk-ph {
  background: var(--lk-ph);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
  color: #a99c8c;
  overflow: hidden;
}
/* ブログCMSが出力するサムネイル画像を枠いっぱいに収める */
.lk-ph > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: bottom;
}
/* サムネイル未設定の記事は CMS 側が CDN の noimage.png（ロゴ画像）を出力する。 */

/* スクロールフェードイン */
.fade {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 1s var(--lk-ease), transform 1s var(--lk-ease);
}
.fade.is-in {
  opacity: 1;
  transform: none;
}
/* ふわっとフェードインする画像枠。わずかに縮みながら現れる。
   監視対象は枠（.lk-reveal）側。子要素は overflow:hidden の枠内で変形するため、
   子を監視すると IntersectionObserver が発火しないことがある
   （claude-design-output の .slide-up が表示されないのはこれが原因）。 */
.lk-reveal__slide {
  height: 100%;
  opacity: 0;
  transform: scale(1.04);
  transition: opacity 1.6s var(--lk-ease), transform 1.6s var(--lk-ease);
}
.lk-reveal.is-in .lk-reveal__slide {
  opacity: 1;
  transform: none;
}

/* ==========================================================================
   header
   ========================================================================== */
.lk-header {
  position: sticky;
  top: 0;
  background: #fff;
}
.lk-header__inner {
  width: min(1200px, calc(100% - 64px));
  max-width: none;
  height: auto;
  min-height: 114px;
  padding: 20px 0;
  gap: 40px;
}
@media (max-width: 1100px) {
  .lk-header__inner { padding: 14px 0; height: auto; min-height: 0; }
}

/* -- ロゴ（横ロゴ画像。ヘッダー高さ114pxはinnerのmin-heightで維持） */
.lk-logo {
  flex: 1 1 auto;   /* デザインと同じくロゴ枠が余白を吸収し、ナビ開始位置を揃える */
  display: flex;
  align-items: center;
}
.lk-logo img {
  height: 66px;
  width: auto;
}
@media (max-width: 1100px) {
  .lk-logo img { height: 44px; }
}
@media (max-width: 639px) {
  .lk-logo img { height: 44px; }
}

/* -- PCナビ */
.lk-nav {
  gap: 30px;
  margin-right: 0;
}
.lk-nav .header__nav-item a {
  padding: 0;
  align-items: flex-start;
  gap: 2px;
  color: var(--lk-text);
}
.lk-nav .header__nav-item a::after {
  display: none;
}
/* 英語はグレー → hover / 現在ページでオレンジ。日本語は常に濃色のまま */
.lk-nav .header__nav-en {
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  line-height: 1.9;
  color: var(--lk-mute);
  transition: color 0.3s ease;
}
.lk-nav .header__nav-item a:hover .header__nav-en,
.lk-nav .header__nav-item--current .header__nav-en {
  color: var(--lk-main);
}
.lk-nav .header__nav-ja {
  font-size: 1.6rem;
  font-weight: 500;
  margin-top: 0;
  line-height: 1.9;
  white-space: nowrap;
  color: var(--lk-text);
}

/* -- 右側（電話 + SNS） */
.lk-header__right {
  gap: 18px;
}
.lk-header__tel {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  text-align: right;
}
.lk-header__telno {
  font-family: "Outfit", "Noto Sans JP", sans-serif;
  font-size: 2.4rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  white-space: nowrap;
  color: var(--lk-text);
  line-height: 1.9;
}
.lk-header__telno:hover {
  color: var(--lk-main);
}
.lk-header__telsub {
  font-size: 1.2rem;
  color: var(--lk-sub);
  white-space: nowrap;
  line-height: 1.9;
}
.lk-sns {
  display: flex;
  gap: 8px;
}
.lk-sns__item {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.8rem;
  transition: opacity 0.3s ease;
}
.lk-sns__item--ig {
  /* Instagram ブランドカラー（公式グラデーション） */
  background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%);
  color: #fff;
}
.lk-sns__item--line {
  background: #06C755;
  color: #fff;
}
.lk-sns__item:hover {
  opacity: 0.7;
  color: #fff;
}

/* -- SPナビ（共通CSSの調整） */
.sp-nav__en {
  font-size: 1.2rem;
}
.sp-nav__link::after {
  margin-left: 15px;   /* 日本語と矢印の間 */
}

/* -- SP画面下の固定バー：オレンジ地・白文字 */
.sp-fixed-bar {
  background: var(--lk-main);
  border-top: 0;
  padding: 6px 0;
  padding-bottom: max(6px, env(safe-area-inset-bottom));
}
.sp-fixed-bar__item + .sp-fixed-bar__item {
  border-left: 1px solid rgba(255, 255, 255, 0.4);
}
.sp-fixed-bar__link {
  padding: 8px 4px;
  color: #fff;
  font-size: 1.3rem;
  font-weight: 700;
  line-height: 1.5;
}
.sp-fixed-bar__link:hover {
  color: #fff;
}
.sp-fixed-bar__link i {
  font-size: 1.7rem;
}

/* ==========================================================================
   main visual
   ========================================================================== */
.lk-mv {
  padding: 0 32px 32px;
  background: #fff;
}
.lk-mv__inner {
  position: relative;
  height: 700px;
  background: var(--lk-ph);
}
.lk-mv__inner #slideshow {
  position: absolute;
  inset: 0;
  height: 100%;
  overflow: hidden;
}
/* CMSスライダーが出力する入れ物も外枠（620px）の高さに追従させる。
   CMS側は #main_slider.slider_wrapper に --swiper-wrapper-height: 98vh を入れているので、
   同じCSS変数を上書きする（詳細度は .lk-mv__inner を足して CMS 側より1段上げている）。 */
.lk-mv__inner #main_slider.slider_wrapper {
  --swiper-wrapper-height: 100%;
}
.lk-mv__inner #slideshow > div,
.lk-mv__inner #slideshow .swiper,
.lk-mv__inner #slideshow .swiper-container,
.lk-mv__inner #slideshow .swiper-wrapper,
.lk-mv__inner #slideshow .swiper-slide,
.lk-mv__inner #slideshow .main_slider__inner {
  height: 100%;
}
.lk-mv .lk-mv__inner #slideshow img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.lk-mv__catch {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 88px;
  z-index: 2;
  margin: 0;
  max-width: none;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  padding-left: 30px;   /* 画像左端から少し内側に寄せる */
  font-size: 4.5rem;
  line-height: 1.35;
  font-weight: 700;
  color: var(--lk-main);
  letter-spacing: 0.04em;
}
.lk-mv__catch span {
  background: #fff;
  padding: 14px 30px;
  border-radius: 20px;
  display: block;
}
.lk-mv__dots {
  position: absolute;
  bottom: 28px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  display: flex;
  gap: 10px;
}
.lk-mv__dots span {
  width: 34px;
  height: 3px;
  background: rgba(44, 44, 44, 0.25);
  display: block;
}
.lk-mv__dots span.is-active {
  background: var(--lk-main);
}
@media (max-width: 1100px) {
  .lk-mv { padding: 0 20px 20px; }
  .lk-mv__inner { height: 52vw; }
  .lk-mv__catch { font-size: 3.4rem; bottom: 64px; padding-left: 22px; }
  .lk-mv__catch span { padding: 10px 22px; }
}
@media (max-width: 639px) {
  .lk-mv { padding: 0 12px 12px; }
  .lk-mv__inner { height: 400px; }
  .lk-mv__catch { font-size: 2.2rem; bottom: 48px; gap: 4px; padding-left: 16px; }
  .lk-mv__catch span { padding: 8px 14px; border-radius: 14px; }
  .lk-mv__dots span { width: 24px; }
}

/* ==========================================================================
   セクション共通パーツ
   ========================================================================== */
.lk-sec-blog {
  padding: 92px 0;
  background: #fff;
  border-bottom: 1px solid var(--lk-line);   /* 下のセクションとの区切り */
}
.lk-sec-greeting {
  padding: 104px 0;
}
.lk-sec-area {
  padding: 72px 0 90px;
  position: relative;
}
@media (max-width: 896px) {
  .lk-sec-blog { padding: 56px 0; }
  .lk-sec-greeting { padding: 56px 0; }
  .lk-sec-area { padding: 40px 0 56px; }
}

.lk-sechead {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 40px;
  text-align: left;
}
.lk-sechead--center {
  display: block;
  text-align: center;
  margin-bottom: 44px;
}
@media (max-width: 639px) {
  .lk-sechead { flex-direction: column; align-items: flex-start; gap: 16px; margin-bottom: 28px; }
}

.lk-label {
  display: block;
  margin-bottom: 8px;
  font-family: "Outfit", "Noto Sans JP", sans-serif;
  font-size: 1.3rem;
  letter-spacing: 0.2em;
  color: var(--lk-main);
  font-weight: 600;
  line-height: 1.9;
}
.lk-h2 {
  font-size: 3.8rem;
  line-height: 1.4;
  font-weight: 700;
  color: var(--lk-text);
  margin-top: 0;
}
.lk-h2--sm {
  font-size: 3.4rem;
}
@media (max-width: 896px) {
  .lk-h2 { font-size: 3rem; }
  .lk-h2--sm { font-size: 2.6rem; }
}
@media (max-width: 639px) {
  .lk-h2 { font-size: 2.4rem; }
  .lk-h2--sm { font-size: 2.2rem; }
}

/* デザイン固有の余白刻み（共通 mb-* は5刻みのため不足） */
.lk-mb-28 { margin-bottom: 28px; }
.lk-mb-36 { margin-bottom: 36px; }

.lk-txt {
  margin-bottom: 22px;
  font-size: 1.7rem;
  line-height: 2.1;
  color: var(--lk-body);
}
@media (max-width: 639px) {
  .lk-txt { font-size: 1.5rem; margin-bottom: 18px; }
}

/* -- 丸矢印ボタン */
.lk-btn-arrow {
  background: transparent;
  box-shadow: none;
  max-width: none;
  width: auto;
  padding: 0;
  border-radius: 0;
  gap: 14px;
  font-size: 1.7rem;
  font-weight: 700;
  color: var(--lk-text);
  transition: gap 0.25s var(--lk-ease), color 0.25s var(--lk-ease);
}
.lk-btn-arrow .btn__label {
  padding: 0;
}
.lk-btn-arrow .btn__circle {
  width: 40px;
  height: 40px;
  font-size: 1.5rem;
  background: var(--lk-main);
  color: #fff;
}
.lk-btn-arrow:hover {
  background: transparent;
  gap: 20px;
  color: var(--lk-main);
}
.lk-btn-arrow:hover .btn__label {
  color: var(--lk-main);
}
.lk-btn-arrow:hover .btn__circle {
  background: var(--lk-main);
  color: #fff;
}


/* ==========================================================================
   TOP：ブログ
   ========================================================================== */
/* 左：見出し+一覧ボタン ／ 右：記事一覧 の2カラム。
   見出し側は必要幅だけにして、一覧に横幅を回す */
.lk-blog-sec {
  align-items: flex-start;
}
.lk-blog-sec > .column2__child:first-child {
  width: 20%;
}
.lk-blog-sec > .column2__child:last-child {
  width: 78%;
}
@media (max-width: 896px) {
  .lk-blog-sec > .column2__child:first-child,
  .lk-blog-sec > .column2__child:last-child { width: 100%; }
}
.lk-blog-sec__btn {
  margin-top: 28px;
}
@media (max-width: 896px) {
  .lk-blog-sec__btn { margin-top: 20px; margin-bottom: 28px; }
}

.lk-blog-list {
  gap: 16px;
}
/* CMSの一覧テンプレートが末尾に出す「次のn件 >」も非表示にする
   （記事詳細の前後リンク .lk-entry__pager .pages は対象外） */
.lk-blog-list .pages,
.lk-works-list .pages {
  display: none;
}

/* ブログ一覧：1カラム */
.lk-blog-list--1col {
  display: grid;
  grid-template-columns: 1fr;
}
/* TOPのブログ：1件目が見えて、2件目以降は枠内スクロールで見る */
.lk-blog-list--scroll {
  display: grid;
  grid-template-columns: 1fr;
  max-height: 240px;
  overflow-y: auto;
  padding-right: 10px;
  overscroll-behavior: contain;
}
.lk-blog-list--scroll::-webkit-scrollbar {
  width: 6px;
}
.lk-blog-list--scroll::-webkit-scrollbar-track {
  background: var(--lk-cream);
}
.lk-blog-list--scroll::-webkit-scrollbar-thumb {
  background: var(--lk-border2);
  border-radius: 3px;
}
.lk-blog-list--scroll::-webkit-scrollbar-thumb:hover {
  background: var(--lk-main);
}
/* SPはカードが低くなる（サムネ120x90）ので枠も低くする */
@media (max-width: 639px) {
  .lk-blog-list--scroll {
    max-height: 175px;
    padding-right: 6px;
  }
}

.lk-blog-card {
  background: #fff;
  border: 1px solid var(--lk-border);
  display: flex;
  align-items: center;
  gap: 28px;
  padding: 20px 26px 20px 20px;
  color: var(--lk-text);
}
.lk-blog-card__thumb {
  width: 200px;
  height: 140px;
  flex: none;
}
.lk-blog-card__body {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.lk-blog-card__date {
  font-family: "Outfit", "Noto Sans JP", sans-serif;
  font-size: 1.4rem;
  color: var(--lk-mute);
  line-height: 1.9;
}
.lk-blog-card__title {
  font-size: 1.8rem;
  line-height: 1.7;
  font-weight: 500;
  color: var(--lk-text);
  transition: color 0.3s ease;
}
.lk-blog-card:hover .lk-blog-card__title {
  color: var(--lk-main);
}
@media (max-width: 639px) {
  .lk-blog-card { gap: 14px; padding: 14px; }
  .lk-blog-card__thumb { width: 92px; height: 69px; }
  .lk-blog-card__title { font-size: 1.5rem; }
}

/* ==========================================================================
   TOP：ごあいさつ
   ========================================================================== */
.lk-greeting {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 72px;
  align-items: center;
}
.lk-greeting__lead {
  margin-bottom: 30px;
  font-size: 3.8rem;
  line-height: 1.5;
  font-weight: 700;
}
.lk-greeting__btn {
  margin-top: 12px;
}
.lk-greeting__img {
  height: 460px;
  overflow: hidden;
}
.lk-greeting__img > div {
  height: 100%;
  background-color: var(--lk-ph);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}
@media (max-width: 896px) {
  .lk-greeting { grid-template-columns: 1fr; gap: 36px; }
  .lk-greeting__lead { font-size: 2.8rem; }
  .lk-greeting__img { height: 320px; }
}
@media (max-width: 639px) {
  .lk-greeting__lead { font-size: 2.2rem; margin-bottom: 20px; }
  .lk-greeting__img { height: 240px; }
}

/* ==========================================================================
   TOP：強み
   ========================================================================== */
.lk-strength {
  padding: 0 0 100px;
  background: #fff;
}
.lk-strength__roof {
  height: 110px;
  background: var(--lk-cream);
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
}
.lk-strength__body {
  background: var(--lk-cream);
  padding: 20px 0 64px;
}
.lk-strength-list {
  gap: 28px;
}
.lk-strength-card {
  background: #fff;
  border: 1px solid #ecdfc9;
  padding: 0 0 34px;
}
.lk-strength-card__img {
  height: 200px;
  background-color: var(--lk-ph);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.lk-strength-card__in {
  padding: 30px 32px 0;
}
.lk-strength-card__no {
  margin-bottom: 16px;
  font-family: "Outfit", "Noto Sans JP", sans-serif;
  font-size: 3.4rem;
  font-weight: 600;
  color: var(--lk-main);
  line-height: 1;
}
.lk-strength-card__title {
  margin-bottom: 14px;
  font-size: 2.1rem;
  line-height: 1.6;
  font-weight: 700;
}
.lk-strength-card__desc {
  font-size: 1.7rem;
  line-height: 1.95;
  color: #4c4641;
}
.lk-strength__btn {
  margin-top: 44px;
  text-align: center;
}
@media (max-width: 896px) {
  .lk-strength { padding: 0 0 56px; }
  .lk-strength__roof { height: 70px; }
  .lk-strength__body { padding: 16px 0 40px; }
  .lk-strength-list { gap: 20px; }
  .lk-strength-card__in { padding: 22px 22px 0; }
  .lk-strength-card__desc { font-size: 1.5rem; }
}

/* ==========================================================================
   TOP：対応エリア
   ========================================================================== */
.lk-area {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
}
.lk-area__txt {
  order: 2;
  justify-self: center;
  width: min(520px, 100%);
  padding: 52px 48px;
  z-index: 2;
  text-align: center;
}
.lk-area__pref {
  margin-bottom: 20px;
  font-size: 2.8rem;
  line-height: 1.5;
  font-weight: 700;
  color: var(--lk-main);
  letter-spacing: 0.08em;
}
.lk-area__map {
  width: min(280px, 100%);
  display: block;
  margin: 0 auto 22px;
}
.lk-area__note {
  font-size: 1.6rem;
  line-height: 1.9;
  color: #4c4641;
  text-align: left;
}
.lk-area__img {
  order: 1;
  height: 560px;
  overflow: hidden;
}
.lk-area__img > div {
  height: 100%;
  background-color: var(--lk-ph);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}
/* mv-kenburns は既定 100vh のため、対応エリアの枠（560px）に合わせる */
.lk-area__slider {
  height: 100%;
}
/* ズームアップは切り替わるたびにやり直したいので infinite にする */
.lk-area__slider .mv-kenburns__img {
  animation-iteration-count: infinite;
  animation-duration: 9s;
}
@media (max-width: 896px) {
  .lk-area { grid-template-columns: 1fr; }
  .lk-area__img { order: 1; height: 300px; }
  .lk-area__txt { order: 2; padding: 32px 24px; }
  .lk-area__pref { font-size: 2.2rem; }
  .lk-area__map { width: min(230px, 100%); }
}
@media (max-width: 639px) {
  .lk-area__map { width: min(190px, 60%); margin-bottom: 18px; }
}


/* ==========================================================================
   施工事例カード（TOP / 一覧）
   ========================================================================== */
.lk-works-list {
  gap: 32px;
}
.lk-works-list--page {
  gap: 36px;
}
.lk-works-card {
  display: block;
  color: var(--lk-text);
}
.lk-works-card__thumb {
  height: 220px;
}
.lk-works-list--page .lk-works-card__thumb {
  height: 230px;
}
.lk-works-card__date {
  font-family: "Outfit", "Noto Sans JP", sans-serif;
  font-size: 1.3rem;
  color: var(--lk-mute);
  margin: 16px 0 0;
  line-height: 1.9;
}
.lk-works-card__title {
  font-size: 1.7rem;
  line-height: 1.7;
  font-weight: 500;
  color: var(--lk-text);
  transition: color 0.3s ease;
}
.lk-works-list--page .lk-works-card__title {
  font-size: 1.9rem;
  margin: 0;
}
.lk-works-card:hover .lk-works-card__title {
  color: var(--lk-main);
}

/* -- 施工実績一覧ページのセクション余白 */
.lk-sec-works-list {
  padding: 76px 0 100px;
}
@media (max-width: 896px) {
  .lk-sec-works-list { padding: 48px 0 56px; }
}

/* -- ページャー */
.lk-pager {
  margin: 56px 0 0;
}
.lk-pager .pagination__list {
  gap: 8px;
}
.lk-pager .pagination__link {
  width: 46px;
  min-width: 46px;
  height: 46px;
  padding: 0;
  border-radius: 0;
  border-color: var(--lk-border2);
  background: #fff;
  font-family: "Outfit", "Noto Sans JP", sans-serif;
  font-size: 1.6rem;
  color: var(--lk-text);
}
.lk-pager .pagination__link.is-current {
  border-color: var(--lk-main);
  background: var(--lk-main);
  color: #fff;
}

/* ==========================================================================
   下層ページヒーロー
   ========================================================================== */
.lk-hero {
  padding: 0 0 28px;
}
.lk-hero::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 70%;
  height: 56%;
  background: #FFD79A;
}
.lk-hero__in {
  position: relative;
  width: calc(100% - 96px);
  margin: 0 auto;
  padding-top: 48px;
}
.lk-hero__img {
  position: relative;
  height: 420px;
  overflow: hidden;
  background-color: var(--lk-ph);
  background-size: cover;
  background-position: center 65%;
  background-repeat: no-repeat;
}
.lk-hero__img::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 55%;
  background: linear-gradient(transparent, rgba(30, 25, 18, 0.62));
}
.lk-hero__title {
  position: absolute;
  left: 44px;
  bottom: 38px;
  z-index: 2;
  font-size: 4rem;
  line-height: 1.4;
  font-weight: 700;
  color: #fff;
  letter-spacing: 0.06em;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
}
.lk-crumb {
  display: flex;
  justify-content: flex-end;
  padding: 20px 4px 0;
  font-size: 1.4rem;
  color: var(--lk-mute);
}
.lk-crumb .breadcrumb__item:not(:last-child)::after {
  content: "»";
  margin: 0 0.6em;
  color: var(--lk-mute);
}
.lk-crumb .breadcrumb__link {
  color: #c97a10;
}
.lk-crumb .breadcrumb__link:hover {
  color: var(--lk-main);
  text-decoration: none;
}
.lk-crumb .breadcrumb__current {
  color: var(--lk-text);
  font-weight: 700;
}
@media (max-width: 896px) {
  .lk-hero__in { width: calc(100% - 40px); padding-top: 28px; }
  .lk-hero__img { height: 280px; }
  .lk-hero__title { left: 24px; bottom: 24px; font-size: 2.8rem; }
}
@media (max-width: 639px) {
  .lk-hero__img { height: 200px; }
  .lk-hero__title { left: 16px; bottom: 16px; font-size: 2.1rem; }
  .lk-crumb { font-size: 1.2rem; }
}

/* ==========================================================================
   リフォーム（reform.php）
   ========================================================================== */
.lk-sec-reform-top {
  padding: 80px 0 60px;
}
.lk-reform-lead {
  max-width: 900px;
  margin: 0 auto 64px;
  text-align: center;
}
.lk-reform-lead .lk-h2--sm {
  margin-bottom: 22px;
  line-height: 1.6;
}
.lk-reform-lead p {
  font-size: 1.7rem;
  line-height: 2.1;
  color: var(--lk-body);
}
/* SPは中央揃えだと読みにくいので左揃え */
@media (max-width: 639px) {
  .lk-reform-lead p { text-align: left; }
}

/* 蛍光ペン（デザイン：#FFE0AE / 62%から） */
.marker {
  background: linear-gradient(transparent 62%, #FFE0AE 62%);
  padding: 0 2px;
}

.lk-anchor-list {
  gap: 24px;
}
.lk-anchor-card {
  position: relative;
  display: block;
  height: 160px;
  overflow: hidden;
  background: #3a3630;
  color: #fff;
}
.lk-anchor-card__bg {
  position: absolute;
  inset: 0;
  display: block;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.lk-anchor-card__veil {
  position: absolute;
  inset: 0;
  display: block;
  background: rgba(44, 38, 30, 0.68);
  transition: background 0.35s ease;
}
.lk-anchor-card:hover .lk-anchor-card__veil {
  background: rgba(44, 38, 30, 0.1);
}
.lk-anchor-card__txt {
  position: absolute;
  left: 26px;
  right: 26px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 8px;
  pointer-events: none;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.45);
}
.lk-anchor-card__title {
  font-size: 2.2rem;
  font-weight: 700;
  color: #fff;
  line-height: 1.5;
}
.lk-anchor-card__sub {
  font-size: 1.4rem;
  color: rgba(255, 255, 255, 0.85);
  line-height: 1.7;
}

.lk-reform-sec {
  padding: 70px 0;
  background: #fff;
  scroll-margin-top: 120px;   /* sticky ヘッダー分。アンカーリンクで見出しが隠れないように */
}
.lk-reform-sec__in {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
}
.lk-reform-sec--rev .lk-reform-sec__txt { order: 2; }
.lk-reform-sec--rev .lk-reform-sec__img { order: 1; }
.lk-reform-sec__en {
  margin-bottom: 8px;
  font-family: "Outfit", "Noto Sans JP", sans-serif;
  font-size: 1.2rem;
  letter-spacing: 0.2em;
  color: var(--lk-main);
  font-weight: 600;
  line-height: 1.9;
}
.lk-reform-sec__title {
  margin-bottom: 18px;
  font-size: 3.2rem;
  line-height: 1.5;
  font-weight: 700;
}
.lk-reform-sec__desc {
  margin-bottom: 20px;
  font-size: 1.7rem;
  line-height: 2.05;
  color: var(--lk-body);
}
.lk-reform-sec__img > div {
  width: 100%;
  height: 340px;
  background-color: var(--lk-ph);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.lk-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.lk-tags span {
  font-size: 1.6rem;
  font-weight: 500;
  color: var(--lk-text);
  border: 1px solid var(--lk-border2);
  padding: 9px 16px;
  background: #fff;
  line-height: 1.9;
}
@media (max-width: 896px) {
  .lk-sec-reform-top { padding: 48px 0 40px; }
  .lk-reform-lead { margin-bottom: 40px; }
  .lk-reform-sec { padding: 40px 0; }
  .lk-reform-sec__in { grid-template-columns: 1fr; gap: 28px; }
  .lk-reform-sec--rev .lk-reform-sec__txt,
  .lk-reform-sec--rev .lk-reform-sec__img { order: 0; }
  .lk-reform-sec__title { font-size: 2.4rem; }
  .lk-reform-sec__img > div { height: 240px; }
  .lk-anchor-list { gap: 16px; }
}

/* ==========================================================================
   施工実績 詳細（entry.php）
   ========================================================================== */
.lk-entry-wrap {
  padding: 64px 0 100px;
}
/* 右に月別アーカイブを置くレイアウト（一覧・記事ページ共通） */
.lk-with-side {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 64px;
  align-items: start;
}
@media (max-width: 896px) {
  .lk-with-side { grid-template-columns: 1fr; gap: 40px; }
}

/* -- サイドバー（月別アーカイブ） */
.lk-side__box {
  padding: 26px 24px;
}
.lk-side__ttl {
  margin-bottom: 16px;
  font-size: 1.9rem;
  font-weight: 700;
  border-bottom: 2px solid var(--lk-main);
  padding-bottom: 10px;
}
/* CMS output_blog_entry_month.php の <ul><li><a>… */
.lk-side__archive ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 12px;
}
.lk-side__archive li {
  margin: 0;
}
.lk-side__archive a {
  display: block;
  font-size: 1.5rem;
  line-height: 1.6;
  color: var(--lk-text);
}
.lk-side__archive a:hover {
  color: var(--lk-main);
}
.lk-entry__meta {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 18px;
}
.lk-entry__date {
  font-family: "Outfit", "Noto Sans JP", sans-serif;
  font-size: 1.5rem;
  color: var(--lk-mute);
}
/* 月別アーカイブで絞り込んだときの見出し */
.lk-archive-label {
  margin-bottom: 28px;
  font-size: 2.1rem;
  font-weight: 700;
  color: var(--lk-text);
}
.lk-entry__title {
  margin-bottom: 32px;
  font-size: 3.6rem;
  line-height: 1.6;
  font-weight: 700;
}
/* 本文はブログCMSが出力する。CMS側のタグに対して本文タイポグラフィを当てる */
.lk-entry__body {
  font-size: 1.7rem;
  line-height: 2.15;
  color: var(--lk-body);
}
.lk-entry__body p {
  margin-bottom: 26px;
  font-size: 1.7rem;
  line-height: 2.15;
  color: var(--lk-body);
}
.lk-entry__body h2 {
  margin-bottom: 16px;
  font-size: 2.6rem;
  line-height: 1.6;
  font-weight: 700;
  color: var(--lk-text);
  border-left: 5px solid var(--lk-main);
  padding-left: 16px;
}
.lk-entry__body h2 {
  margin-top: 40px;
}
.lk-entry__body h3 {
  margin: 32px 0 12px;
  font-size: 2.1rem;
  line-height: 1.6;
  font-weight: 700;
  color: var(--lk-text);
}
.lk-entry__body img {
  max-width: 100%;
  height: auto;
  margin-bottom: 26px;
}
.lk-entry__body ul,
.lk-entry__body ol {
  margin: 0 0 26px 1.6em;
  list-style: revert;
}
.lk-entry__body a {
  color: #c97a10;
  text-decoration: underline;
}
.lk-entry__body a:hover {
  color: var(--lk-main);
}

/* 前後記事リンク（CMS c=page_link の出力：.pages > .page_next / .page_prev） */
.lk-entry__pager {
  margin: 40px 0;
}
.lk-entry__pager .pages {
  display: flex;
  align-items: center;
  gap: 16px;
  border-top: 1px solid var(--lk-line);
  padding: 18px 0 0;
}
.lk-entry__pager .page_next {
  margin-right: auto;
}
.lk-entry__pager .page_prev {
  margin-left: auto;
  text-align: right;
}
.lk-entry__pager a {
  font-size: 1.5rem;
  line-height: 1.6;
  color: var(--lk-text);
}
.lk-entry__pager a:hover {
  color: var(--lk-main);
}
/* SPは記事タイトルが長いと横並びで窮屈になるので縦積みにする */
@media (max-width: 639px) {
  .lk-entry__pager .pages {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }
  .lk-entry__pager .page_next,
  .lk-entry__pager .page_prev {
    margin: 0;
    text-align: left;
  }
}
@media (max-width: 896px) {
  .lk-entry-wrap { padding: 40px 0 56px; }

  .lk-entry__title { font-size: 2.6rem; margin-bottom: 24px; }
  .lk-entry__body h2 { font-size: 2.1rem; }
  .lk-archive-label { font-size: 1.8rem; margin-bottom: 20px; }
}
/* ==========================================================================
   会社概要（company.php）
   ========================================================================== */
.lk-sec-company {
  padding: 88px 0;
}
.lk-sec-company--last {
  padding: 88px 0 100px;
}
.lk-message {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 56px;
  align-items: start;
}
.lk-message__side {
  position: sticky;
  top: 134px;   /* stickyヘッダー114px + 余白 */
}
.lk-message__img {
  height: 300px;
  font-size: 1.4rem;
}
/* 代表挨拶の段落間は空けない */
.lk-message .lk-txt {
  margin-bottom: 0;
}
.lk-message__name {
  margin-top: 20px;
  font-size: 2rem;
  font-weight: 700;
  text-align: center;
}

/* -- 経歴（代表挨拶の下に小さく簡潔に） */
.lk-career {
  margin-top: 36px;
  background: #F7F6F4;   /* うっすらグレー */
  padding: 28px 32px;
}
@media (max-width: 639px) {
  .lk-career { padding: 20px; }
}
.lk-career__ttl {
  margin-bottom: 12px;
  font-size: 2rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--lk-text);
}
.lk-career__list .dl-timeline__row {
  gap: 20px;
  padding: 10px 0;
  border-color: var(--lk-line);
}
.lk-career__list .dl-timeline__row:first-child {
  border-top-color: var(--lk-line);
}
.lk-career__list .dl-timeline__year {
  min-width: 74px;
  font-size: 1.6rem;
  color: var(--lk-main);
}
.lk-career__list .dl-timeline__text {
  font-size: 1.5rem;
  line-height: 1.8;
  color: var(--lk-sub);
}
.lk-career__awards {
  margin-top: 14px;
  font-size: 1.5rem;
  line-height: 1.8;
  color: var(--lk-mute);
}
@media (max-width: 639px) {
  .lk-career__list .dl-timeline__row { flex-direction: column; gap: 2px; }
}
.lk-table {
  background: #fff;
  border: 1px solid var(--lk-border);
}
.lk-table th,
.lk-table td {
  padding: 24px 28px;
  border: 0;
  border-bottom: 1px solid var(--lk-border);
  font-size: 1.7rem;
  line-height: 1.9;
  vertical-align: top;
}
.lk-table tr:last-child th,
.lk-table tr:last-child td {
  border-bottom: 0;
}
.lk-table th {
  width: 240px;
  background: #FFFBF5;
  font-weight: 700;
  color: var(--lk-text);
}
.lk-table td {
  color: var(--lk-body);
}
@media (max-width: 896px) {
  .lk-sec-company { padding: 48px 0; }
  .lk-sec-company--last { padding: 48px 0 56px; }
  .lk-message { grid-template-columns: 1fr; gap: 28px; }
  .lk-message__side { position: static; max-width: 300px; margin: 0 auto; }
  .lk-message__img { height: 360px; }
  .lk-table th, .lk-table td { padding: 16px 18px; font-size: 1.5rem; }
  .lk-table th { width: 120px; }
}
@media (max-width: 639px) {
  .lk-table th, .lk-table td { display: block; width: auto; }
  .lk-table th { border-bottom: 0; padding-bottom: 8px; }
}

/* ==========================================================================
   お問い合わせ（contact.php）
   ========================================================================== */
.lk-sec-contact {
  padding: 80px 0 60px;
}
.lk-contact-lead {
  margin-bottom: 40px;
  font-size: 1.9rem;
  line-height: 2;
  color: var(--lk-body);
  text-align: center;
}
.lk-contact-cards {
  gap: 24px;
  margin-bottom: 64px;
}
.lk-contact-card {
  background: #F6F5F3;
  padding: 36px 34px;
}
.lk-contact-card__ttl {
  margin-bottom: 10px;
  font-size: 2.2rem;
  font-weight: 700;
}
.lk-contact-card__tel {
  margin-bottom: 12px;
  font-family: "Outfit", "Noto Sans JP", sans-serif;
  font-size: 4rem;
  font-weight: 600;
  line-height: 1.2;
  color: var(--lk-text);
  display: inline-block;
}
.lk-contact-card__tel:hover {
  color: var(--lk-main);
}
.lk-contact-card__note {
  font-size: 1.6rem;
  line-height: 1.9;
  color: var(--lk-sub);
}
.lk-contact-card__note--mb {
  margin-bottom: 22px;
}
.lk-btn-line {
  max-width: none;
  width: auto;
  border-radius: 4px;
  padding: 16px 32px;
  font-size: 1.7rem;
  font-weight: 700;
  font-family: "Noto Sans JP", sans-serif;
}
/* a:hover の文字色（オレンジ）が効いてしまうので白で固定 */
.lk-btn-line:hover {
  color: #fff;
}
.lk-form {
  border-top: 1px solid var(--lk-line);
  padding-top: 56px;
}

/* --------------------------------------------------------------------------
   CMSお問い合わせフォーム（cms_ajax / form-pattern-1）の見た目をデザインに合わせる
   CMS の mail-form.css は body 内に <link> で後から挿入されるため、
   同詳細度では CMS 側が勝つ。ここでは .lk-form を足して詳細度を1段上げている。
   -------------------------------------------------------------------------- */
.lk-form .form-contents {
  padding: 0;
  margin: 0;
}
.lk-form .form-contents form dl {
  display: grid;
  grid-template-columns: 220px 1fr;
  column-gap: 24px;
  margin-bottom: 0;
}
.lk-form .form-contents form dl dt:not(.pattern-exclusion) {
  grid-column: 1;
  float: none;
  width: auto;
  margin: 0;
  padding: 14px 0 0;
  font-size: 1.7rem;
  font-weight: 700;
  color: var(--lk-text);
}
.lk-form .form-contents form dl dd:not(.pattern-exclusion) {
  grid-column: 2;
  margin: 0;
  padding: 0 0 26px;
  border-bottom: 0;
}
/* ラベル + 必須／任意バッジ（バッジはCMSの ::before。row-reverseで右に置く） */
.lk-form .form-contents.form-pattern-1 dl dt:not(.pattern-exclusion) span {
  display: inline-flex;
  flex-direction: row-reverse;
  align-items: center;
  gap: 10px;
}
.lk-form .form-contents.form-pattern-1 dl dt:not(.pattern-exclusion) span::before {
  top: 0;
  margin: 0;
  padding: 4px 9px;
  border-radius: 0;
  font-size: 1.2rem;
  font-weight: 700;
  line-height: 1.9;
  white-space: nowrap;
}
.lk-form .form-contents.form-pattern-1 dl dt:not(.pattern-exclusion) span.required::before {
  content: "必須";
  color: #fff;
  background: var(--lk-main);
}
.lk-form .form-contents.form-pattern-1 dl dt:not(.pattern-exclusion) span.optional::before {
  content: "任意";
  color: var(--lk-sub);
  background: #F2EDE5;
}
/* 入力欄 */
.lk-form .form-contents.form-pattern-1 dd:not(.pattern-exclusion) .textarea {
  width: 100%;
  padding: 16px 18px;
  border: 1px solid #e0d6c6;
  border-radius: 0;
  background: #FFFCF8;
  font-family: inherit;
  font-size: 1.7rem;
  color: var(--lk-text);
}
.lk-form .form-contents dd:not(.pattern-exclusion) input.textarea {
  height: auto;
}
.lk-form .form-contents.form-pattern-1 dd:not(.pattern-exclusion) textarea.textarea {
  min-height: 150px;
  resize: vertical;
}
.lk-form .form-contents.form-pattern-1 dd:not(.pattern-exclusion) .textarea:focus {
  border-color: var(--lk-main);
  outline: none;
}
/* 送信ボタン */
.lk-form .form-contents.form-pattern-1 .submit-btn {
  width: auto;
  margin: 44px auto 0;
  padding: 22px 72px;
  border: 0;
  border-radius: 4px;
  background: var(--lk-main);
  color: #fff;
  font-family: inherit;
  font-size: 2rem;
  font-weight: 700;
}
.lk-form .form-contents.form-pattern-1 .submit-btn:hover {
  background: var(--lk-main);
  opacity: 0.9;
}
.lk-form .form-contents.form-pattern-1 .submit-btn::before {
  background-color: #fff;
}
@media (max-width: 896px) {
  .lk-sec-contact { padding: 48px 0 40px; }
  .lk-contact-lead { font-size: 1.6rem; margin-bottom: 28px; }
  .lk-contact-cards { margin-bottom: 40px; }
  .lk-contact-card { padding: 24px 20px; }
  .lk-contact-card__tel { font-size: 3rem; }
  .lk-form { padding-top: 36px; }
  .lk-form .form-contents form dl { grid-template-columns: 1fr; }
  .lk-form .form-contents form dl dt:not(.pattern-exclusion) { grid-column: 1; padding-top: 0; margin-bottom: 8px; }
  .lk-form .form-contents form dl dd:not(.pattern-exclusion) { grid-column: 1; padding-bottom: 20px; }
  .lk-form .form-contents.form-pattern-1 .submit-btn { margin-top: 28px; padding: 18px 44px; font-size: 1.7rem; }
}
@media (max-width: 639px) {
  /* 中央揃えだと読みにくいのでSPは左揃え */
  .lk-contact-lead { text-align: left; }
}

/* ==========================================================================
   CTA 帯
   ========================================================================== */
.lk-cta {
  padding: 64px 0;
}
.lk-cta__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
}
.lk-cta__ttl {
  margin-bottom: 8px;
  font-size: 3rem;
  line-height: 1.5;
  font-weight: 700;
  color: #fff;
}
.lk-cta__sub {
  font-size: 1.7rem;
  color: rgba(255, 255, 255, 0.92);
  line-height: 1.9;
}
.lk-cta__right {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-shrink: 0;
}
.lk-cta__tel {
  background: #fff;
  padding: 18px 30px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--lk-text);
}
.lk-cta__tel:hover {
  color: var(--lk-text);
  opacity: 0.9;
}
.lk-cta__telicon {
  font-size: 2.2rem;
  color: var(--lk-text);
}
.lk-cta__telno {
  font-family: "Outfit", "Noto Sans JP", sans-serif;
  font-size: 3rem;
  font-weight: 600;
  color: var(--lk-text);
  line-height: 1.2;
}
.lk-cta__btn {
  background: var(--lk-text);
  color: #fff;
  padding: 22px 36px;
  font-size: 1.8rem;
  font-weight: 700;
  border-radius: 4px;
  white-space: nowrap;
}
.lk-cta__btn:hover {
  color: #fff;
  opacity: 0.9;
}
@media (max-width: 1100px) {
  .lk-cta__inner { flex-direction: column; align-items: flex-start; gap: 24px; }
  .lk-cta__ttl { font-size: 2.4rem; }
}
@media (max-width: 639px) {
  .lk-cta { padding: 40px 0; }
  .lk-cta__ttl { font-size: 2rem; }
  .lk-cta__sub { font-size: 1.5rem; }
  .lk-cta__right { flex-direction: column; align-items: stretch; width: 100%; }
  .lk-cta__tel { justify-content: center; padding: 14px 20px; }
  .lk-cta__telno { font-size: 2.4rem; }
  .lk-cta__btn { text-align: center; padding: 16px 20px; }
}

/* ==========================================================================
   フッター
   ========================================================================== */
.lk-footer {
  padding: 72px 0 28px;
  background: #fff;
}
/* 3カラム：左=ロゴ+会社情報 ／ 中央=ナビ ／ 右=SNSボタン */
.lk-footer__in {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 40px 72px;
  align-items: start;
}
.lk-footer__logo {
  margin-bottom: 20px;
}
.lk-footer__logo img {
  height: 66px;
  width: auto;
}
.lk-footer__txt {
  margin-bottom: 6px;
  font-size: 1.5rem;
  line-height: 1.9;
  color: var(--lk-sub);
}
.lk-footer__txt:last-child {
  margin-bottom: 0;
}
.lk-footer__nav {
  display: grid;
  grid-template-columns: repeat(2, minmax(150px, auto));
  gap: 12px 40px;
  padding-top: 6px;
}

/* -- SNSボタン（アイコン + 文字の角丸ボタン） */
.lk-footer__sns {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-top: 6px;
}
.lk-footer__snsbtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-width: 200px;
  padding: 13px 22px;
  border-radius: 6px;
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.6;
  transition: opacity 0.3s ease;
}
.lk-footer__snsbtn i {
  font-size: 1.9rem;
}
.lk-footer__snsbtn:hover {
  opacity: 0.85;
}
.lk-footer__snsbtn--ig {
  /* Instagram ブランドカラー（公式グラデーション） */
  background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%);
  border: 0;
  color: #fff;
}
.lk-footer__snsbtn--ig:hover {
  color: #fff;
}
.lk-footer__snsbtn--line {
  background: #06C755;
  border: 1px solid #06C755;
  color: #fff;
}
.lk-footer__snsbtn--line:hover {
  color: #fff;
}
.lk-footer__nav .footer-body__nav-item a {
  font-size: 1.7rem;
  color: var(--lk-text);
}
.lk-footer__nav .footer-body__nav-item a::before {
  content: "・";
}
.lk-footer__nav .footer-body__nav-item a:hover {
  color: var(--lk-main);
}
.lk-footer__bottom {
  margin: 40px auto 0;
  border-top: 1px solid var(--lk-line);
  padding-top: 20px;
  font-size: 1.3rem;
  line-height: 1.9;
  text-align: center;
}
.lk-footer__copyright {
  font-family: "Outfit", "Noto Sans JP", sans-serif;
  font-size: 1.3rem;
  color: var(--lk-mute);
}
@media (max-width: 896px) {
  .lk-footer { padding: 48px 0 24px; }
  .lk-footer__in { grid-template-columns: 1fr; gap: 32px; }
  .lk-footer__logo img { height: 56px; }
  .lk-footer__nav { grid-template-columns: repeat(2, auto); justify-content: start; column-gap: 40px; }
  .lk-footer__txt { font-size: 1.4rem; }
  .lk-footer__nav .footer-body__nav-item a { font-size: 1.5rem; }
  .lk-footer__nav { grid-template-columns: repeat(2, auto); justify-content: start; gap: 10px 28px; }
  .lk-footer__snsbtn { min-width: 0; width: 100%; max-width: 260px; }
}
/* SPはフッター全体を中央揃えに */
@media (max-width: 639px) {
  .lk-footer__in { text-align: center; justify-items: center; }
  .lk-footer__nav { justify-content: center; }
  .lk-footer__sns { align-items: center; }
  .lk-footer__bottom { margin-top: 32px; padding-bottom: 70px; }
}