/* ============================================================
   おそうじニコッと ブランドデザイン基盤
   ブランドカラー: ピンク(#FF7BA9) / ネイビー(#1B3A6B) / イエロー(#FFC845)
   ============================================================ */

:root {
  --color-pink: #ff6b9d;
  --color-pink-dark: #e8477f;
  --color-navy: #1b3a6b;
  --color-navy-light: #2d5599;
  --color-yellow: #ffc845;
  --color-yellow-dark: #f5a623;
  --color-bg: #fef8fa;
  --color-text: #2b2b2b;
  --shadow-soft: 0 4px 20px rgba(27, 58, 107, 0.08);
  --shadow-card: 0 6px 24px rgba(27, 58, 107, 0.12);
  --radius-lg: 20px;
  --radius-md: 14px;
  --radius-sm: 8px;
}

* { box-sizing: border-box; }

body {
  font-family: "Hiragino Sans", "Noto Sans JP", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--color-text);
  background: var(--color-bg);
  margin: 0;
  padding: 0;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }

/* ---------- レイアウト共通 ---------- */
.container { max-width: 1120px; margin: 0 auto; padding: 0 20px; }
.section { padding: 56px 0; }
.section-sm { padding: 32px 0; }

/* ---------- ヘッダー ---------- */
.site-header {
  background: #fff;
  box-shadow: var(--shadow-soft);
  position: sticky;
  top: 0;
  z-index: 100;
}
.site-header-inner {
  max-width: 1120px;
  margin: 0 auto;
  padding: 10px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.site-logo { display: flex; align-items: center; gap: 8px; }
.site-logo-mark { height: 40px; width: 40px; object-fit: contain; flex-shrink: 0; }
.site-logo-text { font-weight: 800; color: var(--color-navy); font-size: 19px; letter-spacing: 0.02em; white-space: nowrap; }
.site-logo-text-accent { color: var(--color-pink); }
.header-nav { display: none; gap: 20px; font-weight: 700; font-size: 14px; color: var(--color-navy); }
.header-nav a:hover { color: var(--color-pink); }
.header-phone-btn {
  background: var(--color-pink);
  color: #fff;
  padding: 10px 18px;
  border-radius: 30px;
  font-weight: 800;
  font-size: 13px;
  display: flex;
  align-items: center;
  gap: 6px;
  box-shadow: 0 4px 12px rgba(255, 107, 157, 0.35);
  white-space: nowrap;
}
.header-line-btn {
  background: #06c755;
  color: #fff;
  padding: 10px 18px;
  border-radius: 30px;
  font-weight: 800;
  font-size: 13px;
  display: flex;
  align-items: center;
  gap: 6px;
  box-shadow: 0 4px 12px rgba(6, 199, 85, 0.35);
  white-space: nowrap;
}
@media (min-width: 900px) {
  .header-nav { display: flex; }
}

/* ---------- ヒーロー(画像+クリック可能オーバーレイ) ---------- */
/* 参考デザイン画像をそのまま表示し、その上にリンク領域だけを透明オーバーレイで重ねる方式。
   座標はすべて画像に対する%指定なので、画像がどの表示幅でもリンク位置は自動追従する。 */
.hero-image-section {
  display: flex;
  flex-direction: column;
}
.hero-image-wrap {
  position: relative;
  width: 100%;
  line-height: 0;
}
.hero-image-wrap img {
  width: 100%;
  height: auto;
  display: block;
}
.hero-hotspot {
  position: absolute;
  display: block;
  background: transparent;
  /* デバッグ時は下の outline を有効化して位置確認できます */
  /* outline: 2px solid red; */
}
/* PC用/スマホ用画像の表示切替(767px以下はスマホ専用の縦長レイアウト画像を表示) */
.hero-image-wrap--mobile { display: none; }
.hero-image-wrap--desktop { display: block; }
@media (max-width: 767px) {
  .hero-image-wrap--mobile { display: block; }
  .hero-image-wrap--desktop { display: none; }
}
.hero-cta-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 8px; }
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 26px;
  border-radius: 40px;
  font-weight: 800;
  font-size: 15px;
  cursor: pointer;
  border: none;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.btn:hover { transform: translateY(-2px); }
.btn-primary { background: var(--color-pink); color: #fff; box-shadow: 0 6px 16px rgba(255, 107, 157, 0.4); }
.btn-secondary { background: var(--color-navy); color: #fff; box-shadow: 0 6px 16px rgba(27, 58, 107, 0.3); }
.btn-outline { background: #fff; color: var(--color-navy); border: 2px solid var(--color-navy); }
.btn-yellow { background: var(--color-yellow); color: var(--color-navy); box-shadow: 0 6px 16px rgba(255, 200, 69, 0.5); }
.btn-block { width: 100%; justify-content: center; }

/* ---------- セクション見出し ---------- */
.section-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--color-pink);
  color: #fff;
  font-weight: 800;
  font-size: 12px;
  padding: 5px 14px;
  border-radius: 20px;
  margin-bottom: 10px;
}
.section-title {
  font-size: 24px;
  font-weight: 900;
  color: var(--color-navy);
  text-align: center;
  margin: 0 0 8px;
}
.section-sub {
  text-align: center;
  color: #666;
  font-size: 14px;
  margin-bottom: 32px;
}

/* ---------- サービスカード ---------- */
.grid { display: grid; gap: 20px; }
.grid-2 { grid-template-columns: 1fr; }
.grid-3 { grid-template-columns: 1fr; }
.grid-4 { grid-template-columns: repeat(2, 1fr); }
@media (min-width: 640px) {
  .grid-2 { grid-template-columns: repeat(2, 1fr); }
  .grid-3 { grid-template-columns: repeat(3, 1fr); }
  .grid-4 { grid-template-columns: repeat(4, 1fr); }
}
@media (min-width: 960px) {
  .grid-4 { grid-template-columns: repeat(4, 1fr); }
}

.card {
  background: #fff;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  overflow: hidden;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.card:hover { transform: translateY(-4px); box-shadow: 0 10px 30px rgba(27,58,107,0.16); }
.service-card { padding: 24px 20px; text-align: center; }
.service-icon {
  width: 56px; height: 56px; margin: 0 auto 12px;
  background: linear-gradient(135deg, var(--color-pink), var(--color-yellow));
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 22px;
}
.service-card h3 { font-size: 16px; color: var(--color-navy); margin: 0 0 6px; font-weight: 800; }
.service-card p { font-size: 13px; color: #666; margin: 0 0 10px; line-height: 1.6; }
.service-price { color: var(--color-pink-dark); font-weight: 800; font-size: 15px; }
.service-card.has-photo { padding: 0 0 20px; }
.service-photo { position: relative; height: 140px; overflow: hidden; margin-bottom: 14px; }
.service-photo img { width: 100%; height: 100%; object-fit: cover; }
.service-icon-overlay {
  position: absolute; left: 14px; bottom: -18px; margin: 0;
  width: 44px; height: 44px; font-size: 18px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.25); border: 3px solid #fff;
}
.service-card.has-photo h3 { margin-top: 10px; padding: 0 20px; }
.service-card.has-photo p,
.service-card.has-photo .service-price { padding: 0 20px; }


/* ---------- SNS(Instagram / TikTok) ---------- */
.social-frame {
  background: #fff; border-radius: var(--radius-lg); box-shadow: var(--shadow-card);
  padding: 20px; margin-bottom: 24px; position: relative; overflow: hidden;
}
.social-frame-instagram {
  border: 3px solid transparent;
  background-image: linear-gradient(#fff,#fff), radial-gradient(circle at 30% 110%, #ffdb8c 0%, #f4693b 25%, #cc2366 50%, #bc1888 75%, #6a1b9a 100%);
  background-origin: border-box; background-clip: padding-box, border-box;
}
.social-frame-tiktok {
  border: 3px solid transparent;
  background-image: linear-gradient(#fff,#fff), linear-gradient(135deg, #25f4ee 0%, #1b3a6b 50%, #fe2c55 100%);
  background-origin: border-box; background-clip: padding-box, border-box;
}
.social-frame-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.social-frame-icon {
  width: 48px; height: 48px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center; color: #fff; font-size: 22px;
}
.social-frame-icon-instagram { background: radial-gradient(circle at 30% 110%, #ffdb8c 0%, #f4693b 25%, #cc2366 50%, #bc1888 75%, #6a1b9a 100%); }
.social-frame-icon-tiktok { background: linear-gradient(135deg, #25f4ee, #1b3a6b, #fe2c55); }
.social-frame-head-text { flex: 1; min-width: 120px; }
.social-frame-title { font-weight: 900; color: var(--color-navy); font-size: 15px; margin: 0; display: flex; align-items: center; gap: 6px; }
.social-frame-title::before { content: '●'; color: #4ade80; font-size: 8px; animation: social-pulse 1.6s infinite; }
@keyframes social-pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.25; } }
.social-frame-handle { font-size: 13px; color: #888; margin: 2px 0 0; }
.social-follow-btn { padding: 9px 16px; font-size: 13px; box-shadow: none; color: #fff; }
.social-follow-btn-instagram { background: radial-gradient(circle at 30% 110%, #ffdb8c 0%, #f4693b 25%, #cc2366 50%, #bc1888 75%, #6a1b9a 100%); }
.social-follow-btn-tiktok { background: linear-gradient(135deg, #25f4ee, #1b3a6b, #fe2c55); }
.social-embed-grid { display: grid; grid-template-columns: 1fr; gap: 16px; }
@media (min-width: 640px) { .social-embed-grid { grid-template-columns: repeat(2, 1fr); } }
.social-embed-item { border-radius: var(--radius-md); overflow: hidden; background: #fafafa; min-height: 200px; }
.social-embed-single { display: flex; justify-content: center; }
.social-embed-grid-tiktok { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); justify-content: center; }
.social-embed-grid-tiktok .social-embed-item { min-height: 460px; display: flex; align-items: center; justify-content: center; }

/* ---------- Before/After ---------- */
.before-after { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; border-radius: var(--radius-md); overflow: hidden; }
.before-after > div { position: relative; }
/* アップロードした写真(多くが縦長)をそのまま全体表示するため object-fit は contain に統一。
   箱の高さは確保しつつ、余白は背景色で埋めることで上下トリミングによる「ズーム」を防ぐ */
.before-after img { width: 100%; height: 260px; object-fit: contain; background: #f3f4f8; display: block; }
.ba-label {
  position: absolute; top: 8px; left: 8px;
  background: rgba(27,58,107,0.85); color: #fff;
  font-size: 11px; font-weight: 800; padding: 3px 10px; border-radius: 12px;
}
.ba-label.after { background: rgba(255,107,157,0.9); }

/* ---------- 実況レポート形式記事(本文内Before/After差し込み) ---------- */
.story-body h2 { font-size: 16px; color: var(--color-navy); font-weight: 800; margin: 22px 0 10px; }
.story-body p { font-size: 14px; line-height: 1.85; color: #444; margin: 0 0 14px; }
.story-image { position: relative; margin: 16px 0; border-radius: var(--radius-md); overflow: hidden; background: #f3f4f8; }
.story-image img { width: 100%; max-height: 480px; object-fit: contain; display: block; margin: 0 auto; }
.story-image .ba-label { position: absolute; top: 10px; left: 10px; }

/* ---------- LP専用ヒーロー(記事LP/キャンペーンLP) ---------- */
.lp-hero {
  background: linear-gradient(135deg, var(--color-pink) 0%, var(--color-pink-dark) 55%, var(--color-navy) 120%);
  color: #fff; padding: 44px 0 40px; text-align: center;
}
.lp-hero-badge {
  display: inline-flex; align-items: center; gap: 6px; margin: 0 0 14px;
  background: rgba(255,255,255,0.18); border: 1px solid rgba(255,255,255,0.4);
  border-radius: 30px; padding: 6px 18px; font-size: 12.5px; font-weight: 800; letter-spacing: 0.02em;
}
.lp-hero h1 { font-size: 25px; font-weight: 900; margin: 0; line-height: 1.55; text-shadow: 0 2px 12px rgba(0,0,0,0.15); }
.lp-hero-image { width: 100%; border-radius: var(--radius-lg); box-shadow: var(--shadow-card); object-fit: cover; max-height: 420px; margin-bottom: 28px; }

/* ---------- LP本文(受注に繋げるCRO重視デザイン) ---------- */
.lp-body { font-size: 15.5px; line-height: 1.95; color: #3a3a3a; }
.lp-body h2 {
  font-size: 19px; font-weight: 900; color: var(--color-navy);
  margin: 40px 0 18px; padding: 14px 18px;
  background: linear-gradient(100deg, #fff0f5 0%, #fff7e8 100%);
  border-left: 6px solid var(--color-pink);
  border-radius: 0 12px 12px 0;
  line-height: 1.5;
}
.lp-body h2:first-child { margin-top: 0; }
.lp-body h3 {
  font-size: 16px; font-weight: 800; color: var(--color-pink-dark);
  margin: 26px 0 12px; padding-left: 12px;
  border-left: 4px solid var(--color-yellow);
  line-height: 1.5;
}
.lp-body p { margin: 0 0 16px; }
.lp-body ul, .lp-body ol { margin: 0 0 18px; padding-left: 4px; list-style: none; }
.lp-body ul li, .lp-body ol li { position: relative; padding: 6px 0 6px 26px; margin-bottom: 4px; line-height: 1.75; }
.lp-body ul li::before {
  content: "\f00c"; font-family: "Font Awesome 6 Free"; font-weight: 900;
  position: absolute; left: 2px; top: 8px; color: var(--color-pink); font-size: 12px;
}
.lp-body strong { color: var(--color-pink-dark); font-weight: 800; }
.lp-section-image { margin: 20px 0; border-radius: var(--radius-md); overflow: hidden; }
.lp-section-image img { width: 100%; max-height: 380px; object-fit: cover; display: block; }

/* ---------- LP: LINE追加CTAブロック([LINE_CTA_1]/[LINE_CTA_2]) ---------- */
.lp-line-cta {
  position: relative; text-align: center; color: #fff; margin: 32px 0; padding: 30px 22px;
  background: linear-gradient(135deg, #06c755, #00a341);
  border-radius: var(--radius-lg); box-shadow: 0 10px 30px rgba(6,199,85,0.28);
  overflow: hidden;
}
.lp-line-cta-badge {
  display: inline-block; background: rgba(255,255,255,0.22); border-radius: 20px;
  padding: 4px 14px; font-size: 11.5px; font-weight: 800; margin: 0 0 10px;
}
.lp-line-cta-heading { font-weight: 900; font-size: 18px; margin: 0 0 8px; }
.lp-line-cta-body { font-size: 13.5px; margin: 0 0 18px; opacity: 0.96; line-height: 1.7; }
.lp-line-cta-btn {
  display: inline-flex; align-items: center; gap: 8px;
  background: #fff; color: #06c755; font-weight: 900; font-size: 15.5px;
  padding: 14px 36px; border-radius: 40px; box-shadow: 0 6px 16px rgba(0,0,0,0.15);
  animation: lp-cta-pulse 2.2s ease-in-out infinite;
}
@keyframes lp-cta-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.045); } }

/* ---------- LP: 施工イメージギャラリー([GALLERY_BLOCK]) ---------- */
.lp-gallery-block { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin: 28px 0; }
.lp-gallery-block img { width: 100%; height: 170px; object-fit: cover; border-radius: var(--radius-md); box-shadow: var(--shadow-soft); }

/* ---------- LP: 選ばれる理由カード([REASONS_BLOCK]) ---------- */
.lp-reasons-block { margin: 36px 0; }
.lp-reasons-heading {
  text-align: center; font-size: 18px; font-weight: 900; color: var(--color-navy);
  margin: 0 0 20px;
}
.lp-reasons-heading i { color: var(--color-yellow-dark); margin-right: 6px; }
.lp-reasons-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; }
.lp-reason-card {
  background: #fff; border: 1px solid #f5e2ea; border-radius: var(--radius-md);
  padding: 22px 18px; text-align: center; box-shadow: var(--shadow-soft);
  transition: transform 0.2s;
}
.lp-reason-card:hover { transform: translateY(-3px); }
.lp-reason-icon {
  width: 52px; height: 52px; margin: 0 auto 12px; border-radius: 50%;
  background: linear-gradient(135deg, #fff0f5, #fff7e8);
  display: flex; align-items: center; justify-content: center;
  color: var(--color-pink); font-size: 20px;
}
.lp-reason-title { font-weight: 900; color: var(--color-navy); font-size: 14.5px; margin-bottom: 8px; }
.lp-reason-text { font-size: 12.5px; color: #666; line-height: 1.7; }

/* ---------- LP: FAQアコーディオン([FAQ_BLOCK]) ---------- */
.lp-faq-block { margin: 36px 0; }
.lp-faq-heading { text-align: center; font-size: 18px; font-weight: 900; color: var(--color-navy); margin: 0 0 16px; }
.lp-faq-heading i { color: var(--color-pink); margin-right: 6px; }
.lp-faq-item {
  background: #fff; border: 1px solid #f0e4e9; border-radius: var(--radius-sm);
  margin-bottom: 10px; padding: 4px 4px;
}
.lp-faq-item summary {
  cursor: pointer; font-weight: 800; color: var(--color-navy); font-size: 14px;
  padding: 14px 16px; display: flex; align-items: center; gap: 10px; list-style: none;
}
.lp-faq-item summary::-webkit-details-marker { display: none; }
.lp-faq-item summary::after { content: "\f078"; font-family: "Font Awesome 6 Free"; font-weight: 900; margin-left: auto; color: #ccc; font-size: 12px; }
.lp-faq-item[open] summary::after { content: "\f077"; color: var(--color-pink); }
.lp-faq-q-mark {
  flex-shrink: 0; width: 24px; height: 24px; border-radius: 50%; background: var(--color-pink);
  color: #fff; font-size: 12px; font-weight: 900; display: flex; align-items: center; justify-content: center;
}
.lp-faq-a { padding: 4px 16px 16px 50px; font-size: 13px; color: #555; line-height: 1.8; display: flex; gap: 8px; }
.lp-faq-a-mark { flex-shrink: 0; font-weight: 900; color: var(--color-yellow-dark); }

/* ---------- お役立ち記事本文(AI生成コラム) LP風に目を引くスタイル ---------- */
.article-body { font-size: 15.5px; line-height: 1.95; color: #3a3a3a; }
.article-body h2 {
  font-size: 20px; font-weight: 900; color: var(--color-navy);
  margin: 40px 0 18px; padding: 14px 18px;
  background: linear-gradient(100deg, #fff0f5 0%, #fff7e8 100%);
  border-left: 6px solid var(--color-pink);
  border-radius: 0 12px 12px 0;
  line-height: 1.5;
}
.article-body h2:first-child { margin-top: 0; }
.article-body h3 {
  font-size: 16.5px; font-weight: 800; color: var(--color-pink-dark);
  margin: 26px 0 12px; padding-left: 12px;
  border-left: 4px solid var(--color-yellow);
  line-height: 1.5;
}
.article-body p { margin: 0 0 16px; }
.article-body ul, .article-body ol { margin: 0 0 18px; padding-left: 4px; list-style: none; }
.article-body ul li, .article-body ol li {
  position: relative; padding: 6px 0 6px 26px; margin-bottom: 4px; line-height: 1.75;
}
.article-body ul li::before {
  content: "\f00c"; font-family: "Font Awesome 6 Free"; font-weight: 900;
  position: absolute; left: 2px; top: 8px; color: var(--color-pink); font-size: 12px;
}
.article-body ol { counter-reset: article-ol; }
.article-body ol li { counter-increment: article-ol; }
.article-body ol li::before {
  content: counter(article-ol); position: absolute; left: 0; top: 4px;
  width: 20px; height: 20px; border-radius: 50%; background: var(--color-navy); color: #fff;
  font-size: 11px; font-weight: 800; display: flex; align-items: center; justify-content: center;
}
.article-body strong { color: var(--color-pink-dark); font-weight: 800; }
.article-body blockquote {
  margin: 20px 0; padding: 16px 18px; background: #f4f6fb; border-radius: var(--radius-md);
  color: #555; font-size: 14.5px; border: none;
}
.article-body .article-inline-image {
  margin: 28px 0; border-radius: var(--radius-lg); overflow: hidden;
  box-shadow: var(--shadow-card);
}
.article-body .article-inline-image img { width: 100%; object-fit: cover; margin: 0; border-radius: var(--radius-lg); box-shadow: none; }
.article-body .article-inline-image p { margin: 8px 0 0; }

/* ---------- 施工事例カード ---------- */
.case-card { display: flex; flex-direction: column; height: 100%; }
.case-card .ba-thumb { height: 160px; overflow: hidden; background: #f3f4f8; }
.case-card .ba-thumb img { width: 100%; height: 100%; object-fit: contain; }
.case-card-body { padding: 16px; flex: 1; display: flex; flex-direction: column; }
.case-tags { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 8px; }
.tag { font-size: 11px; font-weight: 700; padding: 3px 10px; border-radius: 12px; }
.tag-city { background: #fff0f5; color: var(--color-pink-dark); }
.tag-service { background: #eef4ff; color: var(--color-navy); }
.case-card h3 { font-size: 15px; color: var(--color-navy); margin: 0 0 8px; line-height: 1.5; font-weight: 800; }
.case-card .case-meta { font-size: 12px; color: #999; margin-top: auto; }

/* ---------- 支店カード ---------- */
.shop-card { padding: 20px; }
.shop-card h3 { color: var(--color-navy); font-size: 17px; margin: 0 0 4px; }
.shop-card .shop-area { font-size: 13px; color: #666; margin-bottom: 10px; }
.shop-card-cover { width: 100%; height: 140px; border-radius: 12px; overflow: hidden; margin-bottom: 12px; background: #f4f6fb; }
.shop-card-cover img { width: 100%; height: 100%; object-fit: cover; }
.shop-line-badge { display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; padding: 4px 10px; border-radius: 10px; background: #e7fbef; color: #06c755; font-size: 12px; font-weight: 700; }
.shop-google-rating { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 13px; margin-top: 8px; }
.shop-google-rating .fa-google { color: #4285f4; }
.shop-google-rating-score { font-weight: 800; color: var(--color-navy); }
.shop-google-stars { color: #ffb703; font-size: 12px; }
.shop-google-count { color: #888; font-size: 12px; }
.shop-google-link { margin-left: 4px; font-size: 12px; color: var(--color-navy-light); text-decoration: underline; }

/* ---------- 加盟店限定クーポン ---------- */
.coupon-card { padding: 0 0 18px; overflow: hidden; border: 2px dashed var(--color-pink); }
.coupon-card-photo { width: 100%; height: 140px; background: #f4f6fb; }
.coupon-card-photo img { width: 100%; height: 100%; object-fit: cover; }
.coupon-card-icon { width: 100%; height: 90px; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, #fff0f5, #eef4ff); color: var(--color-pink); font-size: 32px; }
.coupon-card-body { padding: 16px 18px 0; }
.coupon-card-body h3 { color: var(--color-navy); font-size: 15px; margin: 0 0 6px; font-weight: 800; }
.coupon-card-body p { font-size: 13px; color: #666; line-height: 1.6; margin: 0 0 8px; }
.coupon-card-expires { color: #d1478b !important; font-weight: 700; font-size: 12px !important; }

/* ---------- パンくず ---------- */
.breadcrumb { font-size: 12px; color: #888; padding: 12px 0; }
.breadcrumb a { color: var(--color-navy-light); }
.breadcrumb span { margin: 0 6px; }

/* ---------- FAQ ---------- */
.faq-item { border-bottom: 1px solid #f0e4e9; padding: 16px 0; }
.faq-q { font-weight: 800; color: var(--color-navy); display: flex; gap: 10px; font-size: 14px; }
.faq-q .q-mark { color: var(--color-pink); font-size: 18px; }
.faq-a { margin-top: 8px; font-size: 13px; color: #555; line-height: 1.7; padding-left: 26px; }

/* ---------- フォーム ---------- */
.inquiry-form { background: #fff; border-radius: var(--radius-lg); box-shadow: var(--shadow-card); padding: 28px 20px; }
.form-group { margin-bottom: 16px; }
.form-group label { display: block; font-weight: 700; font-size: 13px; color: var(--color-navy); margin-bottom: 6px; }
.form-group input, .form-group select, .form-group textarea {
  width: 100%; padding: 12px 14px; border: 2px solid #f0e4e9; border-radius: var(--radius-sm);
  font-size: 14px; font-family: inherit;
}
.form-group input:focus, .form-group select:focus, .form-group textarea:focus {
  outline: none; border-color: var(--color-pink);
}
.form-consent {
  display: flex; align-items: flex-start; gap: 10px; background: #fff8fa;
  border: 1.5px solid #ffd7e2; border-radius: var(--radius-sm); padding: 14px 16px; margin: 4px 0 18px;
}
.form-consent input[type="checkbox"] {
  width: 18px; height: 18px; flex-shrink: 0; margin-top: 2px; accent-color: var(--color-pink);
}
.form-consent label { font-size: 13px; line-height: 1.7; color: #555; font-weight: 500; }
.form-consent a { color: var(--color-pink-dark, #e94057); font-weight: 700; text-decoration: underline; }

/* ---------- モバイル固定CTA ---------- */
.fixed-cta {
  position: fixed; bottom: 0; left: 0; right: 0;
  display: flex; z-index: 200;
  box-shadow: 0 -4px 16px rgba(0,0,0,0.15);
}
.fixed-cta a {
  flex: 1; display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: 14px 8px; font-weight: 800; font-size: 14px; color: #fff;
}
.fixed-cta .fc-phone { background: var(--color-pink); }
.fixed-cta .fc-line { background: #06c755; }
.fixed-cta .fc-form { background: var(--color-navy); }
body { padding-bottom: 62px; }
@media (min-width: 900px) {
  .fixed-cta { display: none; }
  body { padding-bottom: 0; }
}

/* ---------- フッター ---------- */
.site-footer { background: var(--color-navy); color: #fff; padding: 40px 0 20px; margin-top: 40px; }
.footer-grid { display: grid; gap: 24px; grid-template-columns: 1fr; margin-bottom: 24px; }
@media (min-width: 700px) { .footer-grid { grid-template-columns: repeat(3, 1fr); } }
.site-footer h4 { font-size: 14px; margin: 0 0 12px; color: var(--color-yellow); }
.site-footer a { display: block; font-size: 13px; color: #cfd9ec; padding: 4px 0; }
.footer-bottom { text-align: center; font-size: 12px; color: #7f92b8; border-top: 1px solid rgba(255,255,255,0.1); padding-top: 16px; }
.footer-bottom a { display: inline; color: #cfd9ec; padding: 0; }
.footer-bottom a:hover { text-decoration: underline; }

/* ---------- 法的文書ページ(プライバシーポリシー/特商法表記) ---------- */
.legal-doc { font-size: 14px; line-height: 1.85; color: #555; }
.legal-doc h2 { font-size: 16px; color: var(--color-navy); font-weight: 800; margin: 28px 0 10px; }
.legal-doc p { margin: 0 0 14px; }
.legal-doc ul { margin: 0 0 14px; padding-left: 1.4em; }
.legal-doc li { margin-bottom: 6px; }
.legal-doc table.price-table th { white-space: nowrap; vertical-align: top; }
.legal-doc table.price-table td { vertical-align: top; }
.legal-doc a { color: var(--color-pink-dark); text-decoration: underline; }

/* ---------- ページヒーロー(下層ページ用) ---------- */
.page-hero { background: linear-gradient(135deg, var(--color-navy), var(--color-navy-light)); color: #fff; padding: 32px 0; text-align: center; }
.page-hero h1 { font-size: 22px; font-weight: 900; margin: 0 0 8px; line-height: 1.5; }
.page-hero p { font-size: 13px; opacity: 0.9; margin: 0; }

/* ---------- サービス詳細ページ: 上部の大きな実写サムネイル ---------- */
.service-detail-hero-photo {
  margin: 20px auto 0; max-width: 860px; border-radius: var(--radius-lg);
  overflow: hidden; box-shadow: var(--shadow-card); aspect-ratio: 16/9;
}
.service-detail-hero-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 640px) { .service-detail-hero-photo { aspect-ratio: 4/3; margin-top: 16px; } }

/* ---------- 料金テーブル ---------- */
.price-table { width: 100%; border-collapse: collapse; font-size: 13px; background: #fff; border-radius: var(--radius-md); overflow: hidden; box-shadow: var(--shadow-soft); }
.price-table th, .price-table td { padding: 12px; border-bottom: 1px solid #f5eaef; text-align: left; }
.price-table th { background: #fff0f5; color: var(--color-navy); font-weight: 800; }

/* ---------- サービス詳細ページ: お悩み訴求ボックス ---------- */
.service-pain-box {
  background: #fff8f0; border: 1px solid #ffe3c2; border-radius: var(--radius-lg);
  padding: 20px; margin: 0 0 28px;
}
.service-pain-title {
  font-weight: 900; color: #d9822b; font-size: 15px; margin: 0 0 10px;
  display: flex; align-items: center; gap: 6px;
}
.service-pain-body { font-size: 13px; color: #555; line-height: 1.8; margin: 0; }

/* ---------- サービス詳細ページ: お掃除箇所チェックリスト ---------- */
.service-checklist-title { font-weight: 900; color: var(--color-navy); font-size: 16px; margin: 0 0 14px; text-align: center; }
.service-checklist { list-style: none; margin: 0 0 28px; padding: 0; display: grid; gap: 10px; grid-template-columns: 1fr; }
@media (min-width: 560px) { .service-checklist { grid-template-columns: 1fr 1fr; } }
.service-checklist li {
  background: #fff; border-radius: var(--radius-md); box-shadow: var(--shadow-soft);
  padding: 12px 14px; font-size: 13px; color: var(--color-navy); font-weight: 700;
  display: flex; align-items: center; gap: 8px;
}
.service-checklist li i { color: #2ecc71; font-size: 15px; flex-shrink: 0; }

/* ---------- サービス詳細ページ: タイプ別カード(業務用エアコン等) ---------- */
.service-type-grid { display: grid; gap: 16px; grid-template-columns: 1fr; }
@media (min-width: 700px) { .service-type-grid { grid-template-columns: repeat(3, 1fr); } }
.service-type-card {
  background: #fff; border-radius: var(--radius-lg); box-shadow: var(--shadow-card);
  overflow: hidden; text-align: center; padding-bottom: 16px;
}
.service-type-photo { aspect-ratio: 4/3; overflow: hidden; margin-bottom: 12px; }
.service-type-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.service-type-card h4 { font-size: 14px; color: var(--color-navy); margin: 0 12px 6px; font-weight: 800; }
.service-type-card p { font-size: 12px; color: #666; margin: 0 12px 10px; line-height: 1.6; }
.service-type-price { color: #ff6b9d; font-weight: 900; font-size: 18px; }
.service-type-price span { font-size: 11px; font-weight: 700; margin-left: 2px; }

/* ---------- バッジ / チップ ---------- */
.badge-row { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin: 16px 0; }
.badge { display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: 11px; color: var(--color-navy); font-weight: 700; }
.badge i { font-size: 20px; color: var(--color-pink); }

/* ---------- スタッフカード ---------- */
.staff-card { text-align: center; padding: 16px; }
.staff-photo { width: 80px; height: 80px; border-radius: 50%; background: #ffe4ee; margin: 0 auto 10px; display: flex; align-items: center; justify-content: center; color: var(--color-pink); font-size: 30px; overflow: hidden; }
.staff-photo img { width: 100%; height: 100%; object-fit: cover; }
.staff-rating { margin-top: 6px; font-size: 12px; }
.staff-rating-stars { color: #ffb703; margin-right: 4px; }
.staff-rating-num { font-weight: 800; color: #1b3a6b; }
.staff-rating-count { font-weight: 400; color: #999; margin-left: 2px; }
.staff-strengths, .staff-liked-points { font-size: 11.5px; color: #666; margin-top: 6px; text-align: left; line-height: 1.5; }
.staff-strengths i, .staff-liked-points i { color: var(--color-pink); margin-right: 3px; }

/* ---------- クチコミ ---------- */
.review-card { background: #fff; border-radius: var(--radius-md); padding: 16px; box-shadow: var(--shadow-soft); }
.stars { color: var(--color-yellow-dark); font-size: 13px; margin-bottom: 6px; }

/* ---------- YouTube埋め込み ---------- */
.video-embed { position: relative; width: 100%; padding-top: 56.25%; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-card); }
.video-embed iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0; }

/* ---------- プラン比較(ニコッとプラン/サンキュープラン) ---------- */
.plan-cards-row { display: grid; gap: 20px; grid-template-columns: 1fr; margin-bottom: 32px; }
@media (min-width: 780px) { .plan-cards-row { grid-template-columns: 1fr 1fr; } }
.plan-card-image-link {
  display: block; border-radius: var(--radius-lg); overflow: hidden;
  box-shadow: var(--shadow-card); line-height: 0; transition: transform 0.15s ease;
}
.plan-card-image-link:hover { transform: translateY(-2px); }
.plan-card-image-link img { width: 100%; height: auto; display: block; }

.plan-card {
  background: #fff;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: 24px 20px 20px;
  text-align: center;
  border: 2px solid transparent;
}
.plan-card-pink { border-color: #ffd6e6; }
.plan-card-navy { border-color: #cfe0ff; }

.plan-card-head { margin-bottom: 10px; }
.plan-card-lead { font-size: 14px; font-weight: 700; color: var(--color-navy); margin: 0; }
.plan-card-count {
  font-size: 42px; font-weight: 900; margin: 2px 0; line-height: 1;
}
.plan-card-pink .plan-card-count { color: var(--color-pink-dark); }
.plan-card-navy .plan-card-count { color: var(--color-navy); }
.plan-card-count span { font-size: 18px; font-weight: 800; margin-left: 2px; }
.plan-card-headline { font-size: 15px; font-weight: 800; color: var(--color-navy); margin: 0 0 12px; }

.plan-card-flag {
  display: inline-block; font-size: 12px; font-weight: 800; color: #fff;
  padding: 5px 16px; border-radius: 20px; margin-bottom: 12px;
}
.plan-card-pink .plan-card-flag { background: var(--color-pink); }
.plan-card-navy .plan-card-flag { background: var(--color-navy); }

.plan-card-price { font-size: 32px; font-weight: 900; line-height: 1.1; }
.plan-card-pink .plan-card-price { color: var(--color-pink-dark); }
.plan-card-navy .plan-card-price { color: var(--color-navy); }
.plan-card-price-suffix { font-size: 14px; font-weight: 700; margin-left: 4px; }
.plan-card-price-sub { font-size: 13px; color: #777; font-weight: 700; margin: 2px 0 16px; }

.plan-card-badges { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-bottom: 20px; }
.plan-badge {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  border: 1.5px solid #eee; border-radius: var(--radius-sm); padding: 8px 2px;
  font-size: 10px; font-weight: 700; color: var(--color-navy); line-height: 1.3;
}
.plan-card-pink .plan-badge { border-color: #ffe0ec; }
.plan-card-navy .plan-badge { border-color: #dde8ff; }
.plan-badge i { font-size: 16px; }
.plan-card-pink .plan-badge i { color: var(--color-pink); }
.plan-card-navy .plan-badge i { color: var(--color-navy-light); }

.plan-card-examples-title {
  font-size: 13px; font-weight: 800; color: var(--color-navy);
  position: relative; margin: 0 0 12px;
}
.plan-card-examples { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.plan-example { position: relative; border-radius: var(--radius-sm); overflow: hidden; aspect-ratio: 4/3; }
.plan-example img { width: 100%; height: 100%; object-fit: cover; }
.plan-example-label {
  position: absolute; bottom: 0; left: 0; right: 0; text-align: center;
  font-size: 11px; font-weight: 800; color: #fff; padding: 4px 2px;
}
.plan-example-label-pink { background: rgba(232, 71, 127, 0.85); }
.plan-example-label-navy { background: rgba(27, 58, 107, 0.85); }

/* 比較表 */
.plan-compare-table-wrap { max-width: 760px; margin: 0 auto 32px; }
.plan-compare-table-title {
  text-align: center; font-size: 18px; font-weight: 900; color: var(--color-navy);
  margin: 0 0 16px;
}
.plan-compare-table-title::before,
.plan-compare-table-title::after { content: none; }
.plan-compare-table {
  width: 100%; border-collapse: collapse; background: #fff; border-radius: var(--radius-md);
  overflow: hidden; box-shadow: var(--shadow-card); font-size: 13px;
}
.plan-compare-table th, .plan-compare-table td {
  padding: 12px 10px; text-align: center; border-bottom: 1px solid #f0eef2;
}
.plan-compare-table thead th { font-size: 13px; font-weight: 800; color: #fff; }
.plan-compare-table thead th:first-child { background: var(--color-navy); }
.plan-compare-table thead th.th-pink { background: var(--color-pink); }
.plan-compare-table thead th.th-navy { background: var(--color-navy); }
.plan-compare-table tbody th {
  background: #fafafa; color: var(--color-navy); font-weight: 700; font-size: 12px; text-align: left;
}
.plan-compare-table td.td-pink { color: var(--color-pink-dark); font-weight: 800; }
.plan-compare-table td.td-navy { color: var(--color-navy); font-weight: 800; }
.plan-compare-table tbody tr:last-child td,
.plan-compare-table tbody tr:last-child th { border-bottom: none; font-weight: 700; font-size: 12px; }

/* 保証バナー */
.plan-guarantee-banner {
  max-width: 760px; margin: 0 auto; background: linear-gradient(135deg, #fff8e0, #fff3d1);
  border: 1.5px solid #ffe8a8; border-radius: var(--radius-lg); box-shadow: var(--shadow-soft);
  padding: 20px; display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
}
.plan-guarantee-body { flex: 1; min-width: 200px; }
.plan-guarantee-heading { font-size: 15px; font-weight: 800; color: var(--color-navy); margin: 0 0 8px; line-height: 1.5; }
.plan-guarantee-heading span { color: var(--color-pink-dark); }
.plan-guarantee-text { font-size: 12px; color: #666; margin: 0; line-height: 1.7; }
.plan-guarantee-yen {
  width: 56px; height: 56px; border-radius: 50%; background: #e94057; color: #fff;
  display: flex; align-items: center; justify-content: center; font-weight: 900; font-size: 16px;
  flex-shrink: 0; box-shadow: 0 4px 10px rgba(233,64,87,0.35);
}
@media (max-width: 480px) {
  .plan-guarantee-banner { flex-direction: column; text-align: center; }
  .plan-guarantee-yen { order: -1; }
}

/* ---------- utility ---------- */
.text-center { text-align: center; }
.mt-0 { margin-top: 0; }
.mb-0 { margin-bottom: 0; }
.flex { display: flex; }
.flex-wrap { flex-wrap: wrap; }
.gap-2 { gap: 8px; }
.gap-3 { gap: 12px; }
.small-note { font-size: 12px; color: #999; }

/* ---------- 管理画面用 ---------- */
.admin-shell { display: flex; min-height: 100vh; position: relative; }
.admin-sidebar { width: 220px; background: var(--color-navy); color: #fff; padding: 20px 0; flex-shrink: 0; }
.admin-sidebar a { display: block; padding: 12px 20px; color: #cfd9ec; font-size: 14px; font-weight: 700; }
.admin-sidebar a:hover, .admin-sidebar a.active { background: rgba(255,255,255,0.1); color: #fff; }
.admin-sidebar-close { display: none; background: none; border: none; color: #fff; font-size: 18px; padding: 6px; line-height: 1; }
.admin-sidebar-backdrop { display: none; }
.admin-menu-btn { display: none; background: none; border: none; color: var(--color-navy); font-size: 20px; padding: 4px 6px; line-height: 1; flex-shrink: 0; }
.admin-main { flex: 1; padding: 24px; background: #f7f8fb; min-width: 0; }
.admin-topbar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; gap: 10px; }
.admin-table { width: 100%; background: #fff; border-radius: 12px; overflow: hidden; box-shadow: var(--shadow-soft); border-collapse: collapse; }
.admin-table th, .admin-table td { padding: 10px 14px; border-bottom: 1px solid #eef0f4; font-size: 13px; text-align: left; }
.admin-table th { background: #f4f6fb; color: var(--color-navy); }
.status-pill { display: inline-block; padding: 3px 10px; border-radius: 10px; font-size: 11px; font-weight: 700; }
.status-published { background: #dff5e3; color: #1e8a4c; }
.status-draft { background: #f0f0f0; color: #777; }
.status-pending { background: #fff3d6; color: #b5810a; }
.status-rejected { background: #fde3e3; color: #c0392b; }
.login-shell { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: linear-gradient(160deg, #fff0f5, #fff9ec); }
.login-box { background: #fff; border-radius: 20px; box-shadow: var(--shadow-card); padding: 36px 30px; width: 100%; max-width: 380px; }
.admin-form-group { margin-bottom: 14px; }
.admin-form-group label { display: block; font-size: 13px; font-weight: 700; color: var(--color-navy); margin-bottom: 6px; }
.admin-form-group input, .admin-form-group select, .admin-form-group textarea {
  width: 100%; padding: 10px 12px; border: 1.5px solid #e2e6ee; border-radius: 8px; font-size: 14px; font-family: inherit;
}
.alert { padding: 12px 16px; border-radius: 10px; font-size: 13px; margin-bottom: 16px; }
.alert-error { background: #fde3e3; color: #c0392b; }
.alert-success { background: #dff5e3; color: #1e8a4c; }
.alert-warning { background: #fff3cd; color: #8a6d1a; }

/* ---------- 管理画面 スマホ対応(ハンバーガーメニュー + カード表示) ---------- */
@media (max-width: 900px) {
  .admin-menu-btn { display: inline-flex; align-items: center; justify-content: center; }
  .admin-sidebar-close { display: inline-flex; align-items: center; justify-content: center; }
  .admin-user-label { display: none; }
  .admin-main { padding: 16px 12px; }
  .admin-topbar { margin-bottom: 14px; }

  .admin-sidebar {
    position: fixed;
    top: 0; left: 0; bottom: 0;
    width: 78vw;
    max-width: 280px;
    z-index: 210;
    transform: translateX(-100%);
    transition: transform 0.22s ease;
    box-shadow: 4px 0 24px rgba(0,0,0,0.2);
    overflow-y: auto;
  }
  .admin-sidebar-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(20, 30, 55, 0.45);
    z-index: 200;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.22s ease;
  }
  .admin-shell.sidebar-open .admin-sidebar { transform: translateX(0); }
  .admin-shell.sidebar-open .admin-sidebar-backdrop { opacity: 1; pointer-events: auto; }

  /* テーブルをカード風の縦積みレイアウトに変換(横スクロール不要) */
  .admin-table.admin-table-responsive { border-collapse: collapse; box-shadow: none; background: none; }
  .admin-table.admin-table-responsive thead { display: none; }
  .admin-table.admin-table-responsive tr {
    display: block;
    background: #fff;
    border-radius: 12px;
    box-shadow: var(--shadow-soft);
    margin-bottom: 12px;
    padding: 10px 4px;
  }
  .admin-table.admin-table-responsive td {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    border-bottom: 1px solid #f3f4f8;
    padding: 8px 10px;
    text-align: right;
  }
  .admin-table.admin-table-responsive td:last-child { border-bottom: none; }
  .admin-table.admin-table-responsive td::before {
    content: attr(data-label);
    font-weight: 700;
    color: var(--color-navy);
    font-size: 12px;
    text-align: left;
    flex-shrink: 0;
  }
  .admin-table.admin-table-responsive td:empty::before { content: none; }
  /* data-label が無いテーブルは横スクロールできるように */
  .admin-table-scroll-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
}

/* ---------- 予約カレンダー ---------- */
.calendar-nav { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; }
.calendar-nav .calendar-title { font-size: 16px; font-weight: 800; color: var(--color-navy); }
.calendar-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; background: #fff; border-radius: 12px; padding: 10px; box-shadow: var(--shadow-soft); }
.calendar-weekday { text-align: center; font-size: 12px; font-weight: 700; color: var(--color-navy); padding: 6px 0; }
.calendar-weekday.calendar-sun { color: #c0392b; }
.calendar-weekday.calendar-sat { color: #2b6cb0; }
.calendar-cell { min-height: 84px; border: 1px solid #eef0f4; border-radius: 8px; padding: 4px; font-size: 11px; overflow: hidden; }
.calendar-cell-empty { background: #fafafa; border: none; }
.calendar-date { font-size: 12px; font-weight: 700; color: #555; margin-bottom: 4px; }
.calendar-date-btn {
  display: flex; align-items: center; gap: 3px; font-size: 12px; font-weight: 700; color: #555;
  margin-bottom: 4px; background: none; border: none; padding: 1px 3px; border-radius: 5px; cursor: pointer; font-family: inherit;
}
.calendar-date-btn:hover { background: #f0f3fb; color: var(--color-navy); }
.calendar-item { display: block; background: #fff3d6; color: #b5810a; border-radius: 5px; padding: 2px 5px; margin-bottom: 2px; font-size: 10.5px; line-height: 1.4; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-decoration: none; }
.calendar-item.calendar-item-done { background: #dff5e3; color: #1e8a4c; }
.calendar-item.calendar-item-staff { background: #e6eefc; color: #2b5cad; cursor: default; }

/* ---------- カレンダー日付詳細モーダル(TimeTree風・その場で予定確認/追加) ---------- */
dialog.day-modal { border: none; border-radius: 16px; padding: 0; width: min(480px, 92vw); max-height: 86vh; box-shadow: 0 12px 40px rgba(0,0,0,0.25); }
dialog.day-modal::backdrop { background: rgba(20,26,46,0.55); }
.day-modal-content { display: flex; flex-direction: column; max-height: 86vh; }
.day-modal-header { display: flex; justify-content: space-between; align-items: center; padding: 16px 18px; border-bottom: 1px solid #eef0f4; flex-shrink: 0; }
.day-modal-header h3 { margin: 0; font-size: 15px; font-weight: 800; color: var(--color-navy); }
.day-modal-close { background: none; border: none; font-size: 18px; color: #888; cursor: pointer; padding: 4px 8px; }
.day-modal-close:hover { color: #333; }
.day-modal-body { padding: 16px 18px; overflow-y: auto; }
.day-modal-section { margin-bottom: 20px; }
.day-modal-section:last-child { margin-bottom: 0; }
.day-modal-section h4 { font-size: 12.5px; font-weight: 800; color: var(--color-navy); margin: 0 0 8px; display: flex; align-items: center; gap: 6px; }
.day-modal-inquiry-card { background: #fff8ea; border-radius: 10px; padding: 10px 12px; margin-bottom: 8px; border-left: 3px solid #ffb703; }
.day-modal-inquiry-card.is-done { background: #eefaf1; border-left-color: #1e8a4c; }
.day-modal-staff-row { display: flex; justify-content: space-between; align-items: center; background: #eef3fc; border-radius: 8px; padding: 7px 10px; margin-bottom: 6px; font-size: 12.5px; color: #2b5cad; }

/* ---------- クーポン ---------- */
.coupon-card { background: #fff; border-radius: 14px; box-shadow: var(--shadow-soft); padding: 16px; position: relative; border: 2px dashed #ff9fbf; }
.coupon-card .coupon-title { font-size: 15px; font-weight: 800; color: var(--color-navy); margin-bottom: 6px; }
.coupon-card .coupon-desc { font-size: 12.5px; color: #666; line-height: 1.6; }
.coupon-card .coupon-period { font-size: 11px; color: #999; margin-top: 8px; }
.coupon-inactive { opacity: 0.5; }

/* ---------- Instagram埋め込み(加盟店ページ) ---------- */
.shop-instagram-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; }

/* ---------- お悩み解決セクション ---------- */
.pain-point-grid { margin-top: 8px; }
.pain-point-card {
  display: block; padding: 24px 20px; text-align: center;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.pain-point-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-card); }
.pain-point-icon {
  width: 56px; height: 56px; border-radius: 50%; margin: 0 auto 14px;
  background: linear-gradient(135deg, var(--color-pink), var(--color-yellow));
  display: flex; align-items: center; justify-content: center; color: #fff; font-size: 22px;
}
.pain-point-problem {
  font-size: 13.5px; font-weight: 700; color: var(--color-navy); line-height: 1.6; margin: 0 0 10px;
}
.pain-point-problem i { color: var(--color-pink); font-size: 11px; margin-right: 4px; }
.pain-point-arrow { color: var(--color-yellow-dark); font-size: 14px; margin: 6px 0; }
.pain-point-solution { font-size: 13px; color: #555; line-height: 1.7; margin: 0; }

/* ---------- 会社理念 ---------- */
.philosophy-section .container { max-width: 720px; text-align: center; }
.philosophy-catchcopy { margin-bottom: 20px; }
.philosophy-line {
  font-size: 24px; font-weight: 900; color: var(--color-navy); margin: 4px 0; line-height: 1.4;
}
.philosophy-line span { color: var(--color-pink-dark); }
.philosophy-body {
  font-size: 14px; line-height: 1.9; color: #555; max-width: 620px; margin: 0 auto 24px;
}
.philosophy-mascot-row {
  display: flex; align-items: center; gap: 18px; justify-content: center; flex-wrap: wrap;
  background: linear-gradient(135deg, #fff0f5, #fff8e0); border-radius: var(--radius-lg);
  padding: 20px; max-width: 620px; margin: 0 auto;
}
.philosophy-mascot-row p { font-size: 13px; color: var(--color-navy); font-weight: 700; line-height: 1.8; margin: 0; text-align: center; }

.philosophy-photo-row {
  display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; margin-top: 24px;
}
.philosophy-photo-card {
  margin: 0; width: 260px; border-radius: var(--radius-lg); overflow: hidden;
  box-shadow: 0 4px 16px rgba(0,0,0,0.08); background: #fff;
}
.philosophy-photo-card img { display: block; width: 100%; height: 180px; object-fit: cover; }
.philosophy-photo-card figcaption {
  font-size: 12px; color: #666; padding: 10px 12px; text-align: left; line-height: 1.6;
}

/* ---------- 沿革 ---------- */
.history-timeline { display: flex; flex-direction: column; gap: 24px; }
.history-item { display: flex; gap: 16px; align-items: flex-start; }
.history-badge {
  flex-shrink: 0; display: inline-block; padding: 6px 14px; border-radius: 20px;
  font-size: 12px; font-weight: 800; color: #fff; background: var(--color-pink); white-space: nowrap;
}
.history-badge-navy { background: var(--color-navy); }
.history-body h3 { font-size: 15px; font-weight: 800; color: var(--color-navy); margin: 0 0 8px; }
.history-body p { font-size: 13.5px; line-height: 1.9; color: #555; margin: 0; }

/* ---------- 代表紹介 ---------- */
.representative-grid { display: flex; gap: 32px; align-items: flex-start; flex-wrap: wrap; }
.representative-photo { flex: 0 0 220px; text-align: center; }
.representative-photo img {
  width: 220px; height: 220px; object-fit: cover; border-radius: var(--radius-lg);
  box-shadow: var(--shadow-soft);
}
.representative-name {
  margin: 12px 0 0; font-size: 14px; font-weight: 800; color: var(--color-navy);
}
.representative-nickname { color: var(--color-pink-dark); font-weight: 700; }
.representative-meta { margin: 6px 0 0; font-size: 12px; color: #888; line-height: 1.6; }
.representative-body { flex: 1; min-width: 260px; }
.representative-body p { font-size: 13.5px; line-height: 1.9; color: #555; margin: 0 0 16px; }
.representative-note {
  background: #fff7f9; border: 1px solid var(--color-pink-light, #ffd7e2); border-radius: var(--radius-lg);
  padding: 16px 18px; margin: 0 0 16px;
}
.representative-note h4 {
  font-size: 13.5px; font-weight: 800; color: var(--color-navy); margin: 0 0 8px;
  display: flex; align-items: center; gap: 6px;
}
.representative-note h4 i { color: var(--color-pink); }
.representative-note p { font-size: 13px; line-height: 1.85; color: #555; margin: 0; }
.representative-video-wrap { margin-top: 20px; max-width: 320px; }
.representative-video {
  width: 100%; max-width: 320px; aspect-ratio: 9 / 16; border-radius: var(--radius-lg);
  background: #000; display: block; box-shadow: var(--shadow-soft);
}
.representative-video-caption { font-size: 12px; color: #777; margin-top: 8px; text-align: center; }
@media (max-width: 640px) {
  .representative-grid { flex-direction: column; align-items: center; text-align: center; }
  .representative-video-wrap { margin-left: auto; margin-right: auto; }
}

/* ---------- 未来ビジョン ---------- */
.vision-list { display: flex; flex-direction: column; gap: 20px; }
.vision-item {
  display: flex; gap: 16px; align-items: flex-start; background: #fff; border-radius: var(--radius-md);
  box-shadow: var(--shadow-soft); padding: 18px 20px;
}
.vision-num { font-size: 26px; font-weight: 900; color: var(--color-pink); flex-shrink: 0; line-height: 1; }
.vision-text h3 { font-size: 14.5px; font-weight: 800; color: var(--color-navy); margin: 0 0 6px; }
.vision-text p { font-size: 13px; line-height: 1.8; color: #555; margin: 0; }
h3 { font-size: 14.5px; font-weight: 800; color: var(--color-navy); margin: 0 0 6px; }
.vision-text p { font-size: 13px; line-height: 1.8; color: #555; margin: 0; }
}
h3 { font-size: 14.5px; font-weight: 800; color: var(--color-navy); margin: 0 0 6px; }
.vision-text p { font-size: 13px; line-height: 1.8; color: #555; margin: 0; }

/* ============================================================
   サービス利用後アンケート(完全匿名、/survey/)
   A4一枚に収まるシンプルな構成。印刷時(QRコード経由での手書き回答用途等)も
   崩れないよう、印刷用スタイルも合わせて用意する。
   ============================================================ */
.survey-page { background: #fdf6f8; margin: 0; }
.survey-wrap {
  max-width: 640px; margin: 0 auto; padding: 32px 20px 60px;
}
.survey-header {
  display: flex; align-items: center; gap: 14px; margin-bottom: 18px;
}
.survey-logo { border-radius: 10px; flex-shrink: 0; }
.survey-brand { font-size: 12px; font-weight: 700; color: var(--color-pink); margin: 0 0 2px; }
.survey-header h1 { font-size: 20px; font-weight: 900; color: var(--color-navy); margin: 0; }
.survey-lead {
  font-size: 13px; line-height: 1.9; color: #555; background: #fff; border-radius: var(--radius-md);
  padding: 16px 18px; box-shadow: var(--shadow-soft); margin-bottom: 24px;
}
.survey-lead strong { color: var(--color-pink-dark); }

.survey-form { display: flex; flex-direction: column; gap: 18px; }
.survey-question {
  background: #fff; border-radius: var(--radius-md); box-shadow: var(--shadow-soft);
  padding: 16px 18px;
}
.survey-question-label { font-size: 14px; font-weight: 800; color: var(--color-navy); margin: 0 0 10px; }
.survey-question textarea {
  width: 100%; box-sizing: border-box; border: 1px solid #e3d7dc; border-radius: 10px;
  padding: 10px 12px; font-size: 13px; font-family: inherit; resize: vertical; color: #333;
}
.survey-question textarea:focus { outline: 2px solid var(--color-pink); outline-offset: 1px; }

/* 星評価(ラジオボタン+CSSのみ。JS不要・印刷時も見た目が保持される) */
.survey-star-group {
  display: flex; flex-direction: row-reverse; justify-content: flex-end; gap: 4px;
  border: none; margin: 0; padding: 0;
}
.survey-star-group input { position: absolute; opacity: 0; width: 0; height: 0; }
.survey-star-group label {
  font-size: 32px; line-height: 1; color: #e3d7dc; cursor: pointer; transition: color 0.15s;
}
.survey-star-group input:checked ~ label,
.survey-star-group label:hover,
.survey-star-group label:hover ~ label {
  color: #ffc845;
}

.survey-submit-btn {
  background: var(--color-pink); color: #fff; border: none; border-radius: 999px;
  font-size: 16px; font-weight: 800; padding: 14px 20px; cursor: pointer;
  box-shadow: var(--shadow-soft); margin-top: 4px;
}
.survey-submit-btn:hover { background: var(--color-pink-dark); }

.survey-thanks {
  background: #fff; border-radius: var(--radius-md); box-shadow: var(--shadow-soft);
  padding: 40px 20px; text-align: center;
}
.survey-thanks i { font-size: 48px; color: #2ecc71; margin-bottom: 14px; }
.survey-thanks.is-closed i { color: #9aa3ab; }
.survey-thanks p { font-size: 16px; font-weight: 800; color: var(--color-navy); margin: 0 0 8px; }
.survey-thanks-sub { font-size: 13px !important; font-weight: 400 !important; color: #777 !important; }

/* 印刷時(A4一枚想定): 背景色を消して余白を詰める */
@media print {
  .survey-page { background: #fff; }
  .survey-wrap { max-width: 100%; padding: 0; }
  .survey-lead, .survey-question, .survey-thanks { box-shadow: none; border: 1px solid #ddd; }
  .survey-submit-btn { display: none; }
}