@charset "UTF-8";
/*
 * ======================================
 * 追加クラス一覧（共通SCSS取り込み検討用）
 * ======================================
 *
 * .kr-main                              - 本文の基準（18px／行間2）
 * [data-aos="fade-up"]                  - スクロール表示の移動量（20px）
 * .kr-icon / --fill                     - Material Symbols Rounded のアイコン（塗りあり）
 * .kr-fill / .kr-r12〜20 / .kr-ph       - 写真を枠いっぱいに敷く・角丸・NO IMAGE の枠
 * .kr-sec / .kr-inner / --1200〜880     - セクション上下余白（clamp）・内側の幅（左右24px込み）
 * .kr-head / __en / __ja / __lead / .kr-bar - セクション見出し（英字ラベル＋日本語＋緑のバー）
 * .kr-catch / .kr-txt                   - ブラウンのキャッチ文・本文（行間2.1）
 * .kr-btn / --outline / --green / --header / --lg / --md - ピル型ボタン（hover で色が満ちる）
 * .kr-more                              - ボタンの中央寄せ行
 * .kr-loader                            - ローダー（緑背景＋KR＋黄色のバー）
 * .kr-header / .kr-logo / .kr-htel / .kr-gnav - 固定ヘッダー・ロゴ・電話・ナビ（下線が中央から伸びる・ページ内リンクのドロップダウン）
 * .kr-footer / .kr-fnav                 - フッター・フッターナビ（黄色の＞・下線フェード）
 * .kr-cta / .kr-tel                     - お問い合わせ導線（電話カード＋フォームカード）
 * .kr-hero                              - 下層ページタイトル（写真＋暗幕・パンくず右）
 * .kr-mv                                - TOPメインビジュアル（左テキスト＋写真3枚）
 * .kr-feat                              - 4つの特徴（2枚表示スライダー）
 * .kr-svc                               - 対応できる工事カード（写真下端に白丸アイコン）
 * .kr-work / .kr-ba / .kr-tag           - 施工事例カード・施工前後の2枚表示・カテゴリラベル
 * .kr-msg                               - 代表ごあいさつ（写真＋本文）
 * .kr-area                              - 対応エリア（同心円の図＋一覧）
 * .kr-split / .kr-ttl-icon / .kr-checks / .kr-points - リフォーム・鉄工ガラスの写真＋説明ブロック
 * .kr-others / .kr-note                 - その他のご依頼カード・「お断りする工事は…」の枠
 * .kr-tabs / .kr-works / .kr-zoom       - 施工事例のカテゴリ切り替え・一覧・写真の拡大表示（lightbox2）
 * .kr-profile / .kr-access              - 会社概要の表・アクセス
 * .kr-badge / .kr-telbox / .kr-form / .kr-privacy - お問い合わせ
 *
 * ======================================
 * 共通SCSSに不足していたもの
 * ======================================
 *
 * 値の粒度不足：
 *   - container は 1320px 以下で 95% に縮むため、1120px（左右24px込み）固定の内側幅を .kr-inner で追加
 *   - section は 120px 固定のため、clamp(72px, 9vw, 112px) の .kr-sec を追加
 *   - fz-* は 18／19／21／23／25px など1px刻みの値が無いため、各部品のクラスで指定
 * 構造不足：
 *   - 英字ラベル＋日本語＋短いバー＋リード文の見出し（heading は en が 5rem 固定で、バーが無い）
 *   - 写真下端に半分かかる白丸アイコンのカード（card-service には無い）
 *   - 施工前／施工後の2枚＋中央の矢印（ビフォーアフター）
 *   - 同心円の対応エリア図
 *   - 2枚表示のカードスライダー（Slick を使わず CSS transform で移動）
 * 状態不足：
 *   - ナビの hover で下線が中央から伸びる／選択中は緑の下線（header__nav-item の下線アニメと値が違う）
 *   - 同意チェックで送信ボタンを有効化したときの disabled の色
 * 装飾パターン不足：
 *   - Material Symbols Rounded（Font Awesome に無いアイコン：two_wheeler・volunteer_activism 等）
 *   - NO IMAGE の枠（写真未着の箇所）
 *
 */

/* ==========================================================
   全体
   ========================================================== */
/* PC固定レイアウト（スマホ対応なし）。横幅が足りないときは横スクロールで見せる */
body { min-width: 1200px; font-weight: 500; overflow-x: visible; }
/* リンクの切り替わりは 0.4s でふわっと（作業者指示：0.3〜0.6s） */
a { color: #1F7A68; transition: color 0.4s ease, opacity 0.4s ease, background-color 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease, text-decoration-color 0.4s ease; }
a:hover { opacity: 1; }
/* hover で見た目が変わらないリンク（電話番号・パンくず・案内文のリンク）は少し薄くする */
.kr-htel:hover, .kr-tel:hover, .kr-hero__crumb a:hover, .kr-form__note a:hover, #cms-contact-1-1-area dd.kr-cms-agree a:hover { opacity: 0.7; }
input, select, textarea, button { font-family: inherit; }
input:focus, select:focus, textarea:focus { outline: 3px solid rgba(39, 149, 126, 0.35); outline-offset: 1px; border-color: #27957E; }

.kr-main { font-size: 18px; line-height: 2; color: #3B342B; }

/* アイコン（Google Fonts の Material Symbols Rounded） */
.kr-icon {
  font-family: 'Material Symbols Rounded';
  font-style: normal;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  font-feature-settings: 'liga';
  -webkit-font-smoothing: antialiased;
}
.kr-icon--fill { font-variation-settings: 'FILL' 1; }

/* 写真：枠いっぱいに敷く／角丸／NO IMAGE（写真未着の枠） */
.kr-fill { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; background: #E6DFD0; }
.kr-r12 { border-radius: 12px; }
.kr-r14 { border-radius: 14px; }
.kr-r20 { border-radius: 20px; }
.kr-ph {
  background: #E6DFD0 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='600' height='400' viewBox='0 0 600 400' preserveAspectRatio='xMidYMid slice'%3E%3Crect width='600' height='400' fill='%23E6DFD0'/%3E%3Ctext x='300' y='210' text-anchor='middle' font-family='sans-serif' font-size='28' fill='%237A6A55'%3ENO IMAGE%3C/text%3E%3C/svg%3E") center / cover no-repeat;
  user-select: none;
}
.kr-photo { position: relative; }
.kr-photo--1x1 { aspect-ratio: 1 / 1; }
.kr-photo--4x3 { aspect-ratio: 4 / 3; }
.kr-photo--4x5 { aspect-ratio: 4 / 5; }
.kr-photo--3x2 { aspect-ratio: 3 / 2; }
.kr-photo--16x10 { aspect-ratio: 16 / 10; }

/* スクロール表示（AOS）：下から 20px ふわっと出す。移動量だけ上書き（aos.css は 100px） */
[data-aos="fade-up"] { transform: translate3d(0, 20px, 0); }

/* ==========================================================
   セクション・内側の幅
   ========================================================== */
.kr-sec { padding: clamp(72px, 9vw, 112px) 0; }
.kr-inner { max-width: 1120px; margin: 0 auto; padding: 0 24px; }
.kr-inner--1200 { max-width: 1200px; }
.kr-inner--1000 { max-width: 1000px; }
.kr-inner--960 { max-width: 960px; }
.kr-inner--880 { max-width: 880px; }
.kr-inner--center { text-align: center; }
.kr-anchor { scroll-margin-top: 146px; }

/* ==========================================================
   見出し・文章
   ========================================================== */
.kr-head { text-align: center; margin-bottom: 56px; }
.kr-head--mb48 { margin-bottom: 48px; }
.kr-head--mb40 { margin-bottom: 40px; }
.kr-head--about { margin-bottom: 0; }
.kr-head__en { margin: 0 0 8px; font-family: 'Nunito', sans-serif; font-weight: 800; font-size: 16px; letter-spacing: 0.2em; color: #7A6A55; }
.kr-head__ja { word-break: auto-phrase; text-wrap: balance; margin: 0; font-size: clamp(28px, 3.6vw, 38px); font-weight: 700; line-height: 1.5; color: #3B342B; letter-spacing: 0.08em; }
.kr-head--sm .kr-head__ja { font-size: clamp(26px, 3.2vw, 34px); }
.kr-head__lead { margin: 0; font-size: 18px; line-height: 2; }
.kr-head--form .kr-head__lead { line-height: 1.9; }
.kr-bar { width: 56px; height: 4px; border-radius: 2px; background: #27957E; margin: 20px auto 0; }
.kr-bar--lead { margin-bottom: 24px; }
.kr-head--about .kr-bar { margin-bottom: 48px; }
.kr-bar--left { margin: 18px 0 24px; }
.kr-bar--left28 { margin: 18px 0 28px; }

/* ブラウンのキャッチ文 */
.kr-catch { word-break: auto-phrase; text-wrap: balance; margin: 0 0 12px; font-size: clamp(22px, 2.4vw, 26px); font-weight: 700; line-height: 1.7; color: #7A6A55; }
.kr-catch--mb20 { margin-bottom: 20px; }
.kr-catch--lg { margin-bottom: 28px; font-size: clamp(24px, 3vw, 32px); text-wrap: pretty; }
.kr-catch--msg { margin-bottom: 24px; font-size: clamp(23px, 2.6vw, 30px); text-wrap: pretty; }
/* 本文（行間2.1） */
.kr-txt { margin: 0; font-size: 18px; line-height: 2.1; text-wrap: pretty; }
.kr-txt--lead { margin: 0 auto; max-width: 760px; text-align: left; }
.kr-txt--mb20 { margin-bottom: 20px; }
.kr-txt--mb32 { margin-bottom: 32px; }

/* ==========================================================
   ボタン（ピル型。hover で色が満ちる）
   ========================================================== */
.kr-btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 14px 48px; font-weight: 700; font-size: 19px; border-radius: 999px; text-decoration: none;
  transition: color 0.4s ease, background-color 0.4s ease, border-color 0.4s ease;
}
.kr-btn .kr-icon { font-size: 24px; }
.kr-btn--outline { background: #FFFFFF; color: #7A6A55; border: 2px solid #7A6A55; }
.kr-btn--outline:hover { background: #7A6A55; color: #FFFFFF; }
.kr-btn--green { background: #27957E; color: #FFFFFF; }
.kr-btn--green:hover { background: #1F7A68; color: #FFFFFF; }
.kr-btn--header { padding: 13px 38px; }
.kr-btn--md { gap: 10px; padding: 16px 48px; }
.kr-btn--lg { gap: 10px; padding: 16px 54px; font-size: 20px; }
.kr-btn--lg .kr-icon { font-size: 26px; }
.kr-more { margin-top: 56px; display: flex; justify-content: center; }
.kr-more--44 { margin-top: 44px; }

/* ==========================================================
   ローダー（JS が動くときだけ表示）
   ========================================================== */
.kr-loader { position: fixed; inset: 0; z-index: 1000; background: #1F7A68; display: none; align-items: center; justify-content: center; opacity: 1; transition: opacity 0.6s ease; }
.kr-js .kr-loader { display: flex; }
.kr-js .kr-loader.is-hide { opacity: 0; pointer-events: none; }
.kr-js .kr-loader.is-gone { display: none; }
.kr-loader__in { display: flex; flex-direction: column; align-items: center; gap: 28px; }
.kr-loader__logo { display: flex; align-items: center; gap: 14px; }
.kr-loader__mark { display: block; flex: none; }
.kr-loader__name { font-size: 30px; font-weight: 700; color: #FFFFFF; letter-spacing: 0.08em; white-space: nowrap; }
.kr-loader__track { width: 160px; height: 3px; border-radius: 2px; background: rgba(255, 255, 255, 0.25); overflow: hidden; }
.kr-loader__bar { height: 100%; width: 0; background: #F3D45E; border-radius: 2px; transition: width 0.8s ease; }

/* ==========================================================
   ヘッダー
   ========================================================== */
.kr-header-fix { position: fixed; top: 0; left: 0; right: 0; z-index: 50; }
.kr-header { min-width: 1200px; background: #FFFFFF; transition: box-shadow 0.4s ease; color: #3B342B; }
.kr-header.is-scrolled { box-shadow: 0 4px 16px rgba(59, 52, 43, 0.12); }
.kr-header-space { height: 146px; }
/* ヘッダー・MV の横幅は、4つの特徴・対応できる工事などのコンテンツ幅（1120px／左右24px込み）にそろえる（作業者指示。デザインは 1200px） */
.kr-header__top { max-width: 1120px; margin: 0 auto; padding: 16px 24px; display: flex; flex-wrap: nowrap; align-items: center; justify-content: space-between; gap: 16px 32px; }
.kr-header__right { display: flex; flex-wrap: nowrap; align-items: center; gap: 16px 28px; }

/* ロゴ（看板のマーク＋横に社名） */
/* リンクはロゴ部分だけ（フッターで横幅いっぱいに広がらないよう inline-flex＋左寄せ）。hover で少し薄く（作業者指示） */
.kr-logo { display: inline-flex; align-self: flex-start; align-items: center; gap: 14px; text-decoration: none; transition: opacity 0.4s ease; }
.kr-logo:hover { opacity: 0.7; }
.kr-logo__mark { display: block; flex: none; }   /* マークは includes/config.php の kr_logo_mark()（看板のマークを SVG で再現） */
.kr-logo__name { font-size: 24px; font-weight: 700; color: #3B342B; letter-spacing: 0.08em; white-space: nowrap; }
/* 社名の上の一言（作業者指示）：それぞれの「小池リフォーム」の幅に収まる大きさ
   ヘッダー 12.5px（社名 181.5px）／フッター 14px（社名 204.1px）／ローダー 15px（社名 226.8px） */
.kr-logo__text { display: flex; flex-direction: column; gap: 5px; }   /* 一言と社名の間は少しだけ空ける（作業者指示。2px→5px） */
.kr-logo__catch { font-size: 12.5px; font-weight: 700; line-height: 1.3; letter-spacing: 0.02em; color: #5A4F40; white-space: nowrap; }
.kr-logo__catch--footer { font-size: 14px; letter-spacing: 0.04em; color: #FFFFFF; }
.kr-logo__catch--loader { font-size: 15px; letter-spacing: 0.08em; color: #FFFFFF; }
.kr-logo__text .kr-logo__name, .kr-logo__text .kr-loader__name { line-height: 1.3; }
.kr-logo--footer .kr-logo__name { color: #FFFFFF; font-size: 27px; }   /* フッターのロゴは少し大きく（マーク 64px。作業者指示。ヘッダーは 56px・24px） */

/* 電話番号 */
.kr-htel { display: flex; align-items: center; gap: 10px; text-decoration: none; color: #3B342B; }
.kr-htel:hover { color: #3B342B; }
.kr-htel .kr-icon { font-size: 34px; color: #27957E; }
.kr-htel__body { display: flex; flex-direction: column; line-height: 1.3; }
.kr-htel__num { font-family: 'Nunito', sans-serif; font-weight: 800; font-size: 28px; letter-spacing: 0.05em; color: #7A6A55; }
.kr-htel__time { font-size: 13px; color: #5A4F40; white-space: nowrap; }

/* ナビ（hover で薄ベージュの下線が中央から伸びる。選択中は緑の下線） */
/* ナビの横幅はロゴの左端〜お問い合わせボタンの右端にそろえる（作業者指示。デザインは中央寄せ） */
.kr-gnav__inner { max-width: 1120px; margin: 0 auto; padding: 0 20px; display: flex; flex-wrap: nowrap; justify-content: space-between; }
.kr-gnav__link {
  display: block; padding: 14px 4px 5px; margin: 0 0 10px;
  font-size: 18px; font-weight: 700; color: #3B342B; text-decoration: none;
  border-bottom: 3px solid transparent;
  background-image: linear-gradient(#E6DFD0, #E6DFD0); background-repeat: no-repeat; background-position: center bottom; background-size: 0% 3px; background-origin: border-box;
  transition: background-size 0.4s ease;
}
.kr-gnav__link:hover { color: #3B342B; background-size: 100% 3px; }
.kr-gnav__link.is-current { border-bottom-color: #27957E; background-image: none; transition: none; }
/* ドロップダウン（ページ内リンク。作業者指示）：hover でふわっと出す。項目との間に隙間を作らないよう上の余白は ::before でつなぐ */
.kr-gnav__item { position: relative; }
.kr-gnav__sub { position: absolute; top: calc(100% + 14px); left: 50%; z-index: 10; min-width: 220px; margin: 0; padding: 10px 0; list-style: none; background: #FFFFFF; border-radius: 12px; box-shadow: 0 8px 24px rgba(59, 52, 43, 0.12); opacity: 0; visibility: hidden; transform: translate(-50%, 8px); transition: opacity 0.4s ease, transform 0.4s ease, visibility 0.4s ease; }
.kr-gnav__sub::before { content: ""; position: absolute; left: 0; right: 0; top: -16px; height: 16px; }
/* 上に吹き出しの▲（作業者指示）。位置は項目の中央（--kr-arrow-x は common.js で入れる。無いときは中央） */
.kr-gnav__sub::after { content: ""; position: absolute; top: -10px; left: var(--kr-arrow-x, 50%); transform: translateX(-50%); width: 0; height: 0; border-left: 10px solid transparent; border-right: 10px solid transparent; border-bottom: 10px solid #FFFFFF; filter: drop-shadow(0 -2px 2px rgba(59, 52, 43, 0.06)); }
.kr-gnav__item--has-sub:hover .kr-gnav__sub, .kr-gnav__item--has-sub:focus-within .kr-gnav__sub { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
/* 右端の項目（お問い合わせ）は、1200px 幅で画面外にはみ出さないよう右そろえで出す */
.kr-gnav__item:last-child .kr-gnav__sub { left: auto; right: 0; transform: translate(0, 8px); }
.kr-gnav__item:last-child:hover .kr-gnav__sub, .kr-gnav__item:last-child:focus-within .kr-gnav__sub { transform: translate(0, 0); }
.kr-gnav__sub-link { display: flex; align-items: center; gap: 4px; padding: 10px 22px; font-size: 17px; font-weight: 500; line-height: 1.5; color: #3B342B; text-decoration: none; white-space: nowrap; transition: color 0.4s ease, background-color 0.4s ease; }
.kr-gnav__sub-link::before { content: "chevron_right"; font-family: 'Material Symbols Rounded'; font-size: 20px; line-height: 1; color: #27957E; font-feature-settings: 'liga'; }
.kr-gnav__sub-link:hover { color: #1F7A68; background: #FAF8F3; }

/* ==========================================================
   フッター
   ========================================================== */
.kr-footer { background: #1F7A68; color: #FFFFFF; }
.kr-footer__inner { max-width: 1120px; margin: 0 auto; padding: 80px 24px 48px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: 48px 56px; align-items: center; }
.kr-footer__info { display: flex; flex-direction: column; gap: 28px; }
.kr-footer__addr { margin: 0; font-size: 15px; line-height: 1.9; }
.kr-fnav { display: grid; grid-template-columns: repeat(3, max-content); gap: 10px 48px; font-size: 15px; line-height: 1.6; padding-top: 24px; padding-left: 22px; border-top: 1px solid rgba(255, 255, 255, 0.3); }
.kr-fnav__link { position: relative; display: inline-block; justify-self: start; color: #FFFFFF; text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 4px; transition: text-decoration-color 0.4s ease; }
.kr-fnav__link:hover { color: #FFFFFF; text-decoration-color: #FFFFFF; }
.kr-fnav__arrow { position: absolute; left: -22px; top: 50%; transform: translateY(-50%); font-size: 20px; color: #F3D45E; }
.kr-footer__map { border-radius: 16px; overflow: hidden; background: #FAF8F3; aspect-ratio: 16 / 9; width: 100%; }
.kr-footer__bottom { border-top: 1px solid rgba(255, 255, 255, 0.3); }
.kr-footer__bottom-in { max-width: 1120px; margin: 0 auto; padding: 24px; display: flex; justify-content: center; }
.kr-footer__copy { margin: 0; font-size: 13px; }

/* ==========================================================
   お問い合わせ導線（電話カード＋フォームカード）
   ========================================================== */
.kr-cta { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.kr-cta__card { background: #FFFFFF; border-radius: 16px; padding: 40px 32px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.kr-cta__card--form { justify-content: center; gap: 20px; }
.kr-cta__ttl { margin: 0; font-size: 20px; font-weight: 700; }
.kr-cta__time { margin: 0; font-size: 18px; line-height: 1.8; }
/* 大きい電話番号（ブラウン＋緑の受話器） */
.kr-tel { display: flex; align-items: center; gap: 10px; text-decoration: none; color: #7A6A55; }
.kr-tel:hover { color: #7A6A55; }
.kr-tel .kr-icon { font-size: 44px; color: #27957E; }
.kr-tel__num { font-family: 'Nunito', sans-serif; font-weight: 800; font-size: clamp(34px, 4vw, 42px); letter-spacing: 0.02em; line-height: 1.3; }
.kr-tel--lg { gap: 12px; }
.kr-tel--lg .kr-icon { font-size: 52px; }
.kr-tel--lg .kr-tel__num { font-size: clamp(38px, 5vw, 52px); line-height: 1.2; }

/* ==========================================================
   下層ページタイトル
   ========================================================== */
.kr-hero { background: #5A4F40; padding: clamp(80px, 9vw, 120px) 0; }
.kr-hero__bg { position: absolute; inset: 0; }
.kr-hero__veil { position: absolute; inset: 0; background: rgba(43, 37, 30, 0.55); pointer-events: none; }
.kr-hero__inner { position: relative; max-width: 1120px; margin: 0 auto; padding: 0 24px; display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; pointer-events: none; }
.kr-hero__en { margin: 0 0 8px; font-family: 'Nunito', sans-serif; font-weight: 800; font-size: 16px; letter-spacing: 0.2em; color: #FFFFFF; }
.kr-hero__ja { word-break: auto-phrase; text-wrap: balance; margin: 0; font-size: clamp(32px, 4.2vw, 46px); font-weight: 700; line-height: 1.5; color: #FFFFFF; letter-spacing: 0.08em; }
.kr-hero__crumb { margin: 0; font-size: 14px; line-height: 1.6; color: #FFFFFF; white-space: nowrap; }
.kr-hero__crumb a { pointer-events: auto; color: #FFFFFF; text-decoration: underline; }

/* ==========================================================
   TOP：メインビジュアル
   ========================================================== */
.kr-mv { padding: clamp(48px, 6vw, 88px) 0 clamp(64px, 8vw, 104px); }
.kr-mv__inner { max-width: 1120px; margin: 0 auto; padding: 0 24px; display: grid; grid-template-columns: minmax(500px, 5fr) minmax(0, 6fr); gap: 48px 56px; align-items: center; }   /* 1120px 幅にしたため、説明文が3行に収まるよう左の欄は 500px を確保 */
.kr-mv__ttl { margin: 0; font-size: 48px; line-height: 1.5; font-weight: 700; color: #27957E; letter-spacing: 0.08em; white-space: nowrap; }
.kr-mv__sub { margin: 20px 0 0; font-size: 28px; line-height: 1.7; font-weight: 700; color: #5A4F40; white-space: nowrap; }
.kr-mv__txt { margin: 28px 0 0; font-size: 19px; line-height: 2; text-wrap: pretty; }
.kr-mv__photos { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); grid-template-rows: repeat(2, minmax(0, 1fr)); gap: 16px; height: 540px; }
.kr-mv__photo { position: relative; overflow: hidden; border-radius: 20px; }
.kr-mv__photo--main { grid-row: span 2; }
/* MV の最初の表示（作業者指示）：ローダーが消えたら（html.kr-mv-on）キャッチを下からふわっと、写真は右からすっと入りつつ少し拡大した状態から戻る。JS が無いときは動かさない */
.kr-js .kr-mv__ttl, .kr-js .kr-mv__sub, .kr-js .kr-mv__txt { opacity: 0; transform: translateY(16px); transition: opacity 0.9s ease, transform 0.9s ease; }
.kr-js .kr-mv__photo { opacity: 0; transform: translateX(40px); transition: opacity 1s ease, transform 1s cubic-bezier(0.22, 1, 0.36, 1); }
.kr-js .kr-mv__photo > * { transform: scale(1.08); transition: transform 2.4s cubic-bezier(0.22, 1, 0.36, 1); }
.kr-mv-on .kr-mv__ttl, .kr-mv-on .kr-mv__sub, .kr-mv-on .kr-mv__txt, .kr-mv-on .kr-mv__photo { opacity: 1; transform: none; }
.kr-mv-on .kr-mv__photo > * { transform: none; }
.kr-js .kr-mv__sub { transition-delay: 0.15s; }
.kr-js .kr-mv__txt { transition-delay: 0.3s; }
.kr-js .kr-mv__photo--main { transition-delay: 0.1s; }
.kr-js .kr-mv__photo:nth-child(2) { transition-delay: 0.25s; }
.kr-js .kr-mv__photo:nth-child(3) { transition-delay: 0.4s; }
.kr-js .kr-mv__photo:nth-child(2) > * { transition-delay: 0.25s; }
.kr-js .kr-mv__photo:nth-child(3) > * { transition-delay: 0.4s; }

/* ==========================================================
   TOP：4つの特徴（2枚表示のスライダー）
   ========================================================== */
.kr-feat { overflow: hidden; border-radius: 16px; }
.kr-feat__track { display: flex; gap: 24px; transform: translateX(0); transition: transform 0.6s ease; }
.kr-feat__card { flex: 0 0 calc(50% - 12px); background: #FFFFFF; border-radius: 16px; padding: 40px 44px; }
.kr-feat__head { display: flex; align-items: center; gap: 24px; }
.kr-feat__icon { flex: none; width: 96px; height: 96px; border-radius: 50%; background: #F3F9F6; display: flex; align-items: center; justify-content: center; }
.kr-feat__icon .kr-icon { font-size: 52px; color: #27957E; }
.kr-feat__body { min-width: 0; }
.kr-feat__no { margin: 0; font-family: 'Nunito', sans-serif; font-weight: 800; font-size: 16px; letter-spacing: 0.12em; line-height: 1.6; color: #27957E; }
.kr-feat__ttl { word-break: auto-phrase; text-wrap: balance; margin: 2px 0 0; font-size: 25px; line-height: 1.5; font-weight: 700; }
.kr-feat__txt { margin: 24px 0 0; font-size: 18px; line-height: 1.95; }
.kr-feat__ctrl { margin-top: 36px; display: flex; align-items: center; justify-content: center; gap: 28px; }
.kr-feat__arrow { width: 56px; height: 56px; border-radius: 50%; border: 2px solid #27957E; background: #FFFFFF; color: #27957E; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background-color 0.4s ease, color 0.4s ease; }
.kr-feat__arrow .kr-icon { font-size: 32px; }
.kr-feat__arrow:hover:not(:disabled) { background: #27957E; color: #FFFFFF; }
.kr-feat__arrow:disabled { opacity: 0.35; cursor: not-allowed; }
.kr-feat__dots { display: flex; gap: 12px; }
.kr-feat__dot { width: 14px; height: 14px; border-radius: 50%; border: none; padding: 0; cursor: pointer; background: #CFE5DD; transition: background-color 0.4s ease; }
.kr-feat__dot.is-active { background: #27957E; }

/* ==========================================================
   TOP：対応できる工事
   ========================================================== */
.kr-svcs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; }
/* スクロール表示（AOS）は外側の枠に付ける。カードに直接付けると AOS の transition がカードの影のふわっとした切り替えを上書きするため */
.kr-svcs__cell { display: flex; }
.kr-svcs__cell > .kr-svc { flex: 1; min-width: 0; }
.kr-svc { display: flex; flex-direction: column; background: #FFFFFF; border-radius: 16px; overflow: hidden; text-decoration: none; color: #3B342B; transition: color 0.4s ease, background-color 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease; }
.kr-svc:hover { color: #3B342B; }
/* hover は影を付けず、写真を少し大きくする（作業者指示。デザインは影 rgba(59,52,43,0.12)） */
.kr-svc .kr-photo { overflow: hidden; }
.kr-svc .kr-fill { transition: transform 0.4s ease; }
.kr-svc:hover .kr-fill { transform: scale(1.05); }
/* 白い背景に置くときは、カードの文字の部分とアイコンの丸を薄緑にする（TOP。作業者指示。枠は付けない） */
.kr-svcs--framed .kr-svc, .kr-svcs--framed .kr-svc__icon { background: #F3F9F6; }
.kr-svc__body { position: relative; flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 12px; padding: 50px 28px 24px; }
.kr-svc__icon { position: absolute; left: 50%; top: -38px; transform: translateX(-50%); width: 76px; height: 76px; border-radius: 50%; background: #FFFFFF; display: flex; align-items: center; justify-content: center; font-size: 38px; color: #27957E; }
.kr-svc__ttl { margin: 0 0 4px; text-align: center; font-size: 23px; line-height: 1.5; font-weight: 700; letter-spacing: 0.06em; }
.kr-svc__txt { margin: 0; font-size: 17px; line-height: 1.8; }
.kr-svc__more { margin-top: auto; padding-top: 4px; align-self: flex-end; display: flex; align-items: center; gap: 2px; font-size: 15px; font-weight: 700; color: #27957E; }
.kr-svc__more .kr-icon { font-size: 20px; }
/* hover：文字の部分とアイコンの丸を濃い緑に、見出し・本文・アイコンを白、「詳しく見る」を黄色に（作業者指示。0.4s でふわっと）
   緑は #1F7A68（#27957E だと白い本文・黄色の文字のコントラストが足りないため） */
.kr-svc__icon, .kr-svc__more { transition: color 0.4s ease, background-color 0.4s ease; }
.kr-svcs--framed .kr-svc:hover, .kr-svcs--framed .kr-svc:hover .kr-svc__icon { background: #1F7A68; color: #FFFFFF; }
.kr-svc:hover .kr-svc__more { color: #F3D45E; }

/* ==========================================================
   施工事例（TOP・施工事例ページ共通）
   ========================================================== */
.kr-works-top { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }
.kr-work { min-width: 0; display: flex; flex-direction: column; gap: 18px; }
/* 施工前／施工後の2枚＋中央の矢印 */
.kr-ba { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; }
.kr-ba--h256 { height: 256px; }
.kr-ba--h256 .kr-photo { height: 100%; }
.kr-ba__label { position: absolute; top: 10px; left: 10px; padding: 1px 14px; border-radius: 999px; background: #FFFFFF; color: #5A4F40; font-size: 14px; font-weight: 700; line-height: 1.5; pointer-events: none; }
.kr-ba__label--after { background: #7A6A55; color: #FFFFFF; }
.kr-ba__arrow { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 40px; height: 40px; border-radius: 50%; background: #FFFFFF; display: flex; align-items: center; justify-content: center; font-size: 28px; color: #27957E; box-shadow: 0 2px 8px rgba(59, 52, 43, 0.15); pointer-events: none; }
.kr-single { position: relative; height: 256px; }
/* カテゴリラベル（緑背景・白文字） */
.kr-tag { display: inline-block; padding: 1px 16px; border-radius: 999px; background: #27957E; color: #FFFFFF; font-size: 14px; font-weight: 700; }
.kr-work__ttl { word-break: auto-phrase; text-wrap: balance; margin: 10px 0 6px; font-size: 21px; line-height: 1.6; font-weight: 700; }
.kr-work__txt { margin: 0; font-size: 17px; line-height: 1.9; color: #5A4F40; }

/* ==========================================================
   代表ごあいさつ（TOP・会社概要）
   ========================================================== */
.kr-msg { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 48px 64px; align-items: center; }
.kr-msg--top { align-items: start; }
.kr-msg__photo { max-width: 420px; width: 100%; justify-self: center; }
.kr-msg__sign { margin: 28px 0 0; font-size: 18px; line-height: 1.8; text-align: right; }
.kr-msg__sign--32 { margin-top: 32px; }
.kr-msg__name { font-size: 24px; font-weight: 700; margin-left: 16px; }

/* ==========================================================
   TOP：対応エリア（同心円の図＋一覧）
   ========================================================== */
.kr-area { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 48px 72px; align-items: center; }
.kr-area__map { position: relative; width: 100%; max-width: 480px; aspect-ratio: 1 / 1; justify-self: center; }
.kr-area__ring { position: absolute; inset: 0; border-radius: 50%; border: 2px dashed #B7A98F; }
.kr-area__mid { position: absolute; inset: 14%; border-radius: 50%; background: #FAF8F3; }
.kr-area__lbl { position: absolute; left: 0; right: 0; margin: 0; text-align: center; font-weight: 700; line-height: 1.5; }
.kr-area__lbl--out { top: 5%; font-size: clamp(16px, 1.8vw, 19px); color: #5A4F40; }
.kr-area__lbl--mid { word-break: auto-phrase; text-wrap: balance; top: 19%; font-size: clamp(18px, 2.2vw, 24px); color: #7A6A55; }
.kr-area__core { position: absolute; inset: 33%; border-radius: 50%; background: #7A6A55; display: flex; flex-direction: column; align-items: center; justify-content: center; color: #FFFFFF; text-align: center; }
.kr-area__core-sm { font-size: clamp(16px, 1.6vw, 17px); line-height: 1.4; }
.kr-area__core-lg { font-size: clamp(22px, 2.6vw, 30px); font-weight: 700; line-height: 1.4; }
/* 基本位置は「大阪府全域」の文字より下（跳ねても文字にかからないよう、デザインの 26% から下げた。作業者指示） */
.kr-area__pin { position: absolute; left: 50%; top: 27.75%; transform: translateX(-50%); font-size: 48px; color: #27957E; animation: kr-pin-bounce 2.4s ease-in-out infinite; }
/* マップピンがぽんっと跳ねる（作業者指示）。2.4秒に1回、控えめに */
@keyframes kr-pin-bounce {
  0%, 60%, 100% { transform: translateX(-50%) translateY(0); }
  20% { transform: translateX(-50%) translateY(-8px); }
  32% { transform: translateX(-50%) translateY(0); }
  42% { transform: translateX(-50%) translateY(-3px); }
  52% { transform: translateX(-50%) translateY(0); }
}
@media (prefers-reduced-motion: reduce) { .kr-area__pin { animation: none; } }
.kr-area__list { margin: 0; display: flex; flex-direction: column; gap: 14px; }
.kr-area__row { display: flex; align-items: center; gap: 16px; padding: 16px 22px; border-radius: 12px; background: #FAF8F3; }
.kr-area__row .kr-icon { font-size: 30px; color: #27957E; }
.kr-area__row dt { font-weight: 700; font-size: 18px; min-width: 5.5em; }
.kr-area__row dd { margin: 0; font-size: 18px; }

/* ==========================================================
   リフォーム・鉄工ガラス：写真＋説明ブロック
   ========================================================== */
.kr-split { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px 64px; align-items: center; }
.kr-ttl-icon { display: flex; align-items: center; gap: 14px; }
.kr-ttl-icon .kr-icon { font-size: 44px; color: #27957E; }
.kr-ttl-icon__ja { word-break: auto-phrase; text-wrap: balance; margin: 0; font-size: clamp(26px, 3.2vw, 34px); font-weight: 700; line-height: 1.5; letter-spacing: 0.08em; }
.kr-split__lead { margin: 0 0 24px; font-size: 18px; line-height: 2; }
/* チェック付きの工事一覧 */
.kr-checks { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.kr-checks--col { display: flex; flex-direction: column; margin-bottom: 32px; }
.kr-checks__item { display: flex; align-items: center; gap: 10px; padding: 14px 18px; background: #FFFFFF; border-radius: 12px; font-size: 18px; font-weight: 700; line-height: 1.5; }
.kr-checks--beige .kr-checks__item { background: #FAF8F3; }
.kr-checks__item .kr-icon { font-size: 26px; color: #27957E; }
/* 写真3枚（大1＋小2） */
.kr-photos3 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.kr-photos3__main { grid-column: span 2; }
/* 番号付きの説明 */
.kr-points { display: flex; flex-direction: column; gap: 20px; border-top: 1px solid #DCD3C2; padding-top: 28px; }
.kr-points--light { border-top-color: #E6DFD0; }
.kr-points__row { display: flex; gap: 16px; align-items: flex-start; }
.kr-points__no { flex: none; font-family: 'Nunito', sans-serif; font-weight: 800; font-size: 20px; color: #7A6A55; line-height: 1.6; }
.kr-points__txt { margin: 0; font-size: 18px; line-height: 1.9; }
.kr-points__txt strong { font-weight: 700; }

/* その他のご依頼 */
.kr-others { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.kr-others__card { background: #FAF8F3; border-radius: 16px; padding: 36px 28px; text-align: center; }
.kr-others__icon { width: 88px; height: 88px; border-radius: 50%; background: #FFFFFF; margin: 0 auto 16px; display: flex; align-items: center; justify-content: center; }
.kr-others__icon .kr-icon { font-size: 48px; color: #27957E; }
.kr-others__ttl { word-break: auto-phrase; text-wrap: balance; margin: 0; font-size: 22px; font-weight: 700; line-height: 1.5; }
.kr-others__txt { margin: 12px 0 0; font-size: 17px; line-height: 1.8; color: #5A4F40; }
.kr-note { margin-top: 40px; border: 2px solid #E6DFD0; border-radius: 16px; padding: clamp(32px, 4vw, 48px); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px 40px; }
.kr-note__body { flex: 1 1 420px; }
.kr-note__ttl { word-break: auto-phrase; text-wrap: balance; margin: 0 0 8px; font-size: clamp(21px, 2.4vw, 25px); font-weight: 700; line-height: 1.6; color: #7A6A55; }
.kr-note__txt { margin: 0; font-size: 18px; line-height: 2; }

/* ==========================================================
   施工事例ページ
   ========================================================== */
.kr-sec--works { padding: clamp(64px, 8vw, 96px) 0 clamp(72px, 9vw, 112px); }
.kr-works__intro { margin: 0 auto 32px; max-width: 760px; text-align: center; font-size: 18px; line-height: 2; }
/* カテゴリボタン（同じ幅。選択中は下に吹き出しの▼） */
/* 横幅はコンテンツ幅いっぱいに、同じ幅で並べる（作業者指示。デザインは 136px 固定の中央寄せ） */
.kr-tabs { display: flex; flex-wrap: nowrap; gap: 12px; margin-bottom: 56px; }
/* 文字は 15px（作業者指示：「ガラス・サッシ」の左右に余白を取るため。デザインは 18px） */
.kr-tabs__btn { position: relative; flex: 1 1 0; min-width: 0; font-size: 15px; font-weight: 700; line-height: 1.5; padding: 10px 0; border-radius: 999px; border: 2px solid #CBBFA8; background: #FFFFFF; color: #3B342B; cursor: pointer; transition: color 0.4s ease, background-color 0.4s ease, border-color 0.4s ease; }
.kr-tabs__btn:hover { border-color: #7A6A55; color: #7A6A55; }
.kr-tabs__btn.is-active { border-color: #7A6A55; background: #7A6A55; color: #FFFFFF; }
.kr-tabs__arrow { position: absolute; left: 50%; bottom: -11px; transform: translateX(-50%); width: 0; height: 0; border-left: 9px solid transparent; border-right: 9px solid transparent; border-top: 10px solid #7A6A55; display: none; }
.kr-tabs__btn.is-active .kr-tabs__arrow { display: block; }
.kr-works { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 64px 40px; }   /* 事例の下の線をやめたため、行の間を 64px に（デザインは 48px＋線） */
.kr-works .kr-work { gap: 20px; }   /* 事例の下の線は付けない（作業者指示） */
.kr-works .kr-work.is-hidden { display: none; }
/* 写真がまだ無いカテゴリ（鉄工など）を選んだときの文 */
.kr-works__empty { margin: 0; padding: 48px 24px; border-radius: 16px; background: #FAF8F3; text-align: center; font-size: 18px; line-height: 2; color: #5A4F40; }
.kr-works__empty[hidden], .kr-works[hidden] { display: none; }
.kr-works .kr-work__ttl { font-size: 19px; letter-spacing: 0.06em; }   /* 作業者指示で小さく（デザインは 22px・0.08em） */
/* 「ガラス・サッシ」だけ字間を詰める（「・」の左右が広く見えるため。作業者指示） */
.kr-tabs__btn[data-cat="ガラス・サッシ"] { letter-spacing: -0.04em; }
/* 施工事例（TOP・施工事例ページ）の写真は hover で少し大きく（作業者指示）。枠からはみ出さないよう枠で切る。写真があるときはクリックで拡大（lightbox2） */
.kr-works .kr-photo, .kr-works .kr-single, .kr-works-top .kr-photo { overflow: hidden; border-radius: 12px; }
.kr-works .kr-fill, .kr-works-top .kr-fill { transition: transform 0.4s ease; }
.kr-works .kr-photo:hover .kr-fill, .kr-works .kr-single:hover .kr-fill, .kr-works-top .kr-photo:hover .kr-fill { transform: scale(1.05); }
.kr-zoom { position: absolute; inset: 0; display: block; cursor: zoom-in; }

/* ==========================================================
   会社概要
   ========================================================== */
.kr-profile { margin: 0; background: #FFFFFF; border-radius: 16px; padding: 8px clamp(20px, 4vw, 48px); }
.kr-profile__row { display: flex; flex-wrap: wrap; gap: 4px 32px; padding: 22px 0; border-bottom: 1px solid #E6DFD0; }
.kr-profile__row:last-child { border-bottom: none; }
.kr-profile__row dt { flex: 0 0 8em; font-weight: 700; color: #7A6A55; }
.kr-profile__row dd { margin: 0; flex: 1 1 320px; }
.kr-access__addr { margin: 0; font-size: 18px; line-height: 1.9; display: flex; align-items: center; justify-content: center; gap: 8px; flex-wrap: wrap; }
.kr-access__addr .kr-icon { font-size: 28px; color: #27957E; }
.kr-access__map { border-radius: 20px; overflow: hidden; background: #FAF8F3; height: clamp(320px, 40vw, 460px); }

/* ==========================================================
   お問い合わせ
   ========================================================== */
.kr-badge { margin: 32px auto 0; display: inline-flex; align-items: center; gap: 10px; padding: 12px 38px; border-radius: 999px; background: #FAF8F3; font-size: 19px; font-weight: 700; color: #3B342B; line-height: 1.6; }
.kr-badge .kr-icon { font-size: 28px; color: #27957E; }
.kr-telbox { background: #FFFFFF; border-radius: 20px; padding: clamp(32px, 5vw, 48px); display: flex; flex-direction: column; align-items: center; gap: 16px; text-align: center; }
.kr-telbox__time { margin: 0; font-size: 19px; line-height: 1.7; }
/* 「必須」のラベル */
.kr-req { padding: 0 14px; border-radius: 6px; background: #7A6A55; color: #FFFFFF; font-size: 16px; line-height: 1.7; }
.kr-req--lead { display: inline-block; padding: 0 10px; margin-right: 6px; font-weight: 700; line-height: inherit; }
/* フォーム（CMS差し替え前のダミー。見た目は claude-design-output に合わせる） */
.kr-form { display: flex; flex-direction: column; gap: 32px; }
.kr-form__field { display: flex; flex-direction: column; gap: 10px; }
.kr-form__label { display: flex; align-items: center; gap: 10px; font-size: 19px; font-weight: 700; }
.kr-form__input { font-size: 19px; padding: 16px 18px; border: 2px solid #CBBFA8; border-radius: 10px; background: #FFFFFF; color: #3B342B; }
.kr-form__input--area { line-height: 1.8; resize: vertical; }
.kr-form__agree { background: #FAF8F3; border-radius: 14px; padding: 24px 28px; display: flex; flex-direction: column; gap: 10px; }
.kr-form__check { display: flex; align-items: center; gap: 14px; cursor: pointer; font-size: 19px; font-weight: 700; line-height: 1.6; }
.kr-form__check input { width: 28px; height: 28px; accent-color: #27957E; flex: none; margin: 0; }
.kr-form__note { margin: 0; font-size: 17px; line-height: 1.8; }
.kr-form__note a { color: #1F7A68; font-weight: 700; text-decoration: underline; }
.kr-form__submit-wrap { display: flex; justify-content: center; padding-top: 8px; }
.kr-form__submit { display: inline-flex; align-items: center; gap: 10px; padding: 18px 86px; color: #FFFFFF; font-weight: 700; font-size: 21px; border-radius: 999px; border: none; background: #27957E; cursor: pointer; transition: color 0.4s ease, background-color 0.4s ease, border-color 0.4s ease; }
.kr-form__submit .kr-icon { font-size: 28px; }
.kr-form__submit:hover:not(:disabled) { background: #1F7A68; }
.kr-form__submit:disabled { background: #B9C9C3; cursor: not-allowed; }
/* プライバシーポリシー */
.kr-privacy { background: #FFFFFF; border-radius: 20px; padding: clamp(28px, 5vw, 48px); display: flex; flex-direction: column; gap: 28px; font-size: 17px; line-height: 2; }
.kr-privacy p { margin: 0; }
.kr-privacy__ttl { word-break: auto-phrase; text-wrap: balance; margin: 0 0 6px; font-size: 19px; font-weight: 700; color: #7A6A55; }

/* 入力欄は 19px（タッチ端末の入力時ズームが起きる 16px 未満にしない） */

/* ==========================================================
   フォームCMS（#cms-contact-1-1-area）：mail-form.css を上書きして claude-design-output のフォームに合わせる
   CMSの出力：.form-contents.form-pattern-1 > form > dl > dt(span.required / span.optional) / dd
   ========================================================== */
#cms-contact-1-1-area .form-contents { padding: 0; margin: 0; background: transparent; }
#cms-contact-1-1-area form dl { margin: 0; }
/* スパム対策の隠し欄（CMS が inline で高さ0にしているが、行の高さだけ残るので枠の外へ出す） */
#cms-contact-1-1-area input[name="winnie_the_pooh"] { position: absolute; left: -9999px; }
/* 項目名（右に「必須」） */
#cms-contact-1-1-area form dl dt:not(.pattern-exclusion) { float: none; width: auto; margin: 0 0 10px; padding: 0; text-align: left; }
#cms-contact-1-1-area form dl dt:not(.pattern-exclusion) span { display: inline-flex; flex-direction: row-reverse; justify-content: flex-end; align-items: center; gap: 10px; font-size: 19px; font-weight: 700; line-height: 2; color: #3B342B; }
#cms-contact-1-1-area form dl dt:not(.pattern-exclusion) span::before { top: 0; margin: 0; padding: 0 14px; border-radius: 6px; font-size: 16px; font-weight: 500; line-height: 1.7; }
#cms-contact-1-1-area form dl dt:not(.pattern-exclusion) span.required::before { content: "必須"; background: #7A6A55; color: #FFFFFF; }
#cms-contact-1-1-area form dl dt:not(.pattern-exclusion) span.optional::before { display: none; }
/* 入力欄 */
#cms-contact-1-1-area form dl dd:not(.pattern-exclusion) { margin: 0 0 32px; padding: 0; border-bottom: none; line-height: normal; }
#cms-contact-1-1-area dd:not(.pattern-exclusion) .textarea,
#cms-contact-1-1-area dd:not(.pattern-exclusion) .textarea-serect { display: block; width: 100%; height: auto; font-size: 19px; padding: 16px 18px; border: 2px solid #CBBFA8; border-radius: 10px; background-color: #FFFFFF; color: #3B342B; }
#cms-contact-1-1-area dd:not(.pattern-exclusion) .textarea-serect { -webkit-appearance: auto; appearance: auto; }
#cms-contact-1-1-area dd:not(.pattern-exclusion) textarea.textarea { height: calc(19px * 1.8 * 7 + 36px); line-height: 1.8; resize: vertical; }
#cms-contact-1-1-area dd:not(.pattern-exclusion) .textarea:focus,
#cms-contact-1-1-area dd:not(.pattern-exclusion) .textarea-serect:focus { outline: 3px solid rgba(39, 149, 126, 0.35); outline-offset: 1px; border-color: #27957E; }
/* 同意欄（CMS に「個人情報」のチェックボックス項目があるとき、common.js で .kr-cms-agree を付ける） */
#cms-contact-1-1-area form dl dt.kr-cms-agree-dt { display: none; }
#cms-contact-1-1-area form dl dd.kr-cms-agree { margin: 0; background: #FAF8F3; border-radius: 14px; padding: 24px 28px; display: flex; flex-direction: column; gap: 10px; }
#cms-contact-1-1-area dd.kr-cms-agree label { display: flex; align-items: center; gap: 14px; cursor: pointer; font-size: 19px; font-weight: 700; line-height: 1.6; }
#cms-contact-1-1-area dd.kr-cms-agree input[type="checkbox"] { width: 28px; height: 28px; accent-color: #27957E; flex: none; margin: 0; }
#cms-contact-1-1-area dd.kr-cms-agree .kr-req { font-weight: 500; }
/* 同意欄の下の案内文（CMS の「後テキスト」。空の p は詰める） */
#cms-contact-1-1-area dd.kr-cms-agree p { margin: 0; font-size: 17px; line-height: 1.8; }
#cms-contact-1-1-area dd.kr-cms-agree p:empty { display: none; }
#cms-contact-1-1-area dd.kr-cms-agree a { color: #1F7A68; font-weight: 700; text-decoration: underline; }
/* 送信ボタン（緑のピル型。同意にチェックするまで押せない） */
/* mail-form.css の幅300px固定・封筒アイコン（mask）を外す */
#cms-contact-1-1-area .submit-btn { display: flex; align-items: center; gap: 10px; width: auto; max-width: 100%; height: auto; white-space: nowrap; margin: 40px auto 0; padding: 18px 86px; border: none; border-radius: 999px; background: #27957E; color: #FFFFFF; font-size: 21px; font-weight: 700; line-height: normal; cursor: pointer; transition: color 0.4s ease, background-color 0.4s ease, border-color 0.4s ease; }
#cms-contact-1-1-area .submit-btn::before { content: "send"; position: static; display: inline-block; width: auto; height: auto; margin: 0; background: none; -webkit-mask-image: none; mask-image: none; vertical-align: baseline; font-family: 'Material Symbols Rounded'; font-size: 28px; font-weight: 400; line-height: 1; font-feature-settings: 'liga'; }
#cms-contact-1-1-area .submit-btn:hover:not(:disabled) { background: #1F7A68; }
#cms-contact-1-1-area .submit-btn:disabled { background: #B9C9C3; cursor: not-allowed; }
/* エラー・送信完了 */
#cms-contact-1-1-area .form-err-msg { margin: 0 0 32px; padding: 20px 24px; border: none; border-radius: 12px; background: #FBEDEA; color: #B3402F; font-size: 18px; font-weight: 700; line-height: 1.8; }
#cms-contact-1-1-area .form-err-msg ul { list-style: none; margin: 0; padding: 0; }
#cms-contact-1-1-area .form-thanks-msg { padding: 56px 32px; border: none; border-radius: 20px; background: #FAF8F3; text-align: center; }
#cms-contact-1-1-area .form-thanks-msg p { margin: 0; font-size: 18px; line-height: 2; color: #3B342B; }
#cms-contact-1-1-area .form-thanks-msg .back-home-btn { width: auto; margin: 28px 0 0; }
#cms-contact-1-1-area .form-thanks-msg .back-home-btn a { display: inline-block; padding: 12px 44px; border: 2px solid #7A6A55; border-radius: 999px; background: #FFFFFF; color: #7A6A55; font-size: 18px; font-weight: 700; letter-spacing: normal; transition: color 0.4s ease, background-color 0.4s ease; }
#cms-contact-1-1-area .form-thanks-msg .back-home-btn a:hover { background: #7A6A55; color: #FFFFFF; }