/* ==========================================================
   香進 (KOHSHIN) ハウスクリーニング公式サイト スタイルシート
   ========================================================== */

/* ---------- 自前ホスティングフォント(Noto Sans JP サブセット) ----------
   Google Fonts への外部読み込みはユーザーのブラウザ環境(広告/トラッキング
   ブロッカー、社内プロキシ、オフライン等)によって失敗することがあり、
   失敗すると見出し等がブラウザの明朝体(serif)フォールバックで表示されて
   しまう問題があった。サイト内で実際に使用している文字のみを抽出した
   軽量 woff2(各ウェイト約190KB)を自サーバーから配信することで、外部
   ネットワークに依存せず確実にゴシック体で表示されるようにする。 */
@font-face {
  font-family: "Noto Sans JP";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/static/fonts/NotoSansJP-400.woff2") format("woff2");
}
@font-face {
  font-family: "Noto Sans JP";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/static/fonts/NotoSansJP-500.woff2") format("woff2");
}
@font-face {
  font-family: "Noto Sans JP";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/static/fonts/NotoSansJP-700.woff2") format("woff2");
}
@font-face {
  font-family: "Noto Sans JP";
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("/static/fonts/NotoSansJP-800.woff2") format("woff2");
}
@font-face {
  font-family: "Noto Sans JP";
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url("/static/fonts/NotoSansJP-900.woff2") format("woff2");
}
@font-face {
  font-family: "M PLUS Rounded 1c";
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url("/static/fonts/MPlusRounded1c-900.woff2") format("woff2");
}

:root {
  --navy: #0c63a9;
  --navy-light: #1478c9;
  --navy-lighter: #4a9fe0;
  --navy-dark: #003f6c;
  --accent: #f05a24;
  --accent-light: #f57a4d;
  --bg-warm: #f5f6f7;
  --bg-warm-2: #ececec;
  --text-dark: #222222;
  --text-gray: #5c5c5c;
  --line-gray: #dcdcdc;
  --line-earth: #a0989a;
  --font-jp: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", "Meiryo", sans-serif;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 90px;
}

body {
  font-family: var(--font-jp);
  color: var(--text-dark);
  background-color: #ffffff;
  margin: 0;
  line-height: 1.85;
  letter-spacing: 0.02em;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img {
  max-width: 100%;
  display: block;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  font-family: inherit;
  cursor: pointer;
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
}

/* ---------- 共通見出し ---------- */
.section-tag {
  display: block;
  text-align: center;
  font-size: clamp(2.4rem, 5vw, 3.6rem);
  font-weight: 800;
  color: var(--navy);
  letter-spacing: 0.08em;
  font-family: "Times New Roman", serif;
  margin-bottom: 4px;
}

.section-tag-jp {
  display: block;
  text-align: center;
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--text-dark);
  letter-spacing: 0.25em;
  margin-bottom: 40px;
}

.bracket-heading {
  position: relative;
  display: inline-block;
  padding: 10px 24px;
  font-weight: 700;
  font-size: 1.25rem;
  color: var(--navy-dark);
}
.bracket-heading::before,
.bracket-heading::after {
  content: "";
  position: absolute;
  width: 16px;
  height: 16px;
  border: solid var(--navy-light);
}
.bracket-heading::before {
  top: 0;
  left: 0;
  border-width: 2px 0 0 2px;
}
.bracket-heading::after {
  bottom: 0;
  right: 0;
  border-width: 0 2px 2px 0;
}

.navy-panel {
  background: var(--navy-dark);
  color: #fff;
  border-radius: 0;
}

/* 下線付きサブ見出し(SERVICE「お掃除メニュー」/ INFORMATION「概要」等) */
.underline-heading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  margin: 30px 0 10px;
}
.underline-heading::before,
.underline-heading::after {
  content: "";
  flex: 1;
  max-width: 260px;
  height: 1px;
  background: var(--navy-light);
}
.underline-heading span {
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--navy-dark);
  white-space: nowrap;
}

/* ==========================================================
   ヘッダー
   ========================================================== */
#site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  background: rgba(255, 255, 255, 0.97);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
  transition: transform 0.3s ease;
}

/* デスクトップ版: デザインカンプを画像として表示し、
   その上に透明なクリック領域(overlay)を実測%で重ねる方式。
   実測値: design_new_1920.png のヘッダー領域 x0-1920,y0-232 を切り出した
   header_design_hires.png (1920x232) を基準に各要素の位置を% 換算。 */
.header-inner-desktop {
  position: relative;
  width: 100%;
  max-width: 1920px;
  margin: 0 auto;
  line-height: 0;
}
.header-bg-image {
  width: 100%;
  height: auto;
  display: block;
}
.header-hit {
  position: absolute;
  display: block;
}
.header-hit-logo   { left: 9.531%;  top: 9.483%;  width: 10.521%; height: 83.190%; }
.header-hit-nav1   { left: 26.042%; top: 64.655%; width: 9.375%;  height: 19.397%; }
.header-hit-nav2   { left: 35.417%; top: 64.655%; width: 8.073%;  height: 19.397%; }
.header-hit-line   { left: 43.750%; top: 51.724%; width: 11.979%; height: 40.948%; }
.header-hit-tel    { left: 55.990%; top: 53.879%; width: 21.094%; height: 40.948%; }
.header-hit-cta    { left: 77.812%; top: 38.793%; width: 20.365%; height: 51.724%; }

.header-inner {
  max-width: 1600px;
  margin: 0 auto;
  padding: 26px 30px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  min-height: 210px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}
.brand img {
  /* デザイン実測: ロゴ全体(アイコン+KOHSHIN文字)の高さ184px/ヘッダー232px基準 */
  height: 184px;
  width: auto;
}

.header-nav {
  display: flex;
  align-items: center;
  gap: 26px;
  font-size: 1.05rem;
  font-weight: 700;
}
.header-nav a {
  position: relative;
  padding: 4px 0;
  white-space: nowrap;
}
.header-nav a:hover {
  color: var(--navy-light);
}
.line-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #06c755;
}
.line-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 12px;
  background: #06c755;
  color: #fff;
  font-size: 1.3rem;
  flex-shrink: 0;
}
.line-link-text {
  font-size: 1rem;
  line-height: 1.3;
  font-weight: 700;
  text-align: left;
}

.header-right {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-shrink: 0;
}
.header-tel {
  text-align: right;
  line-height: 1.25;
}
.header-tel a {
  font-size: 2.3rem;
  font-weight: 800;
  color: var(--text-dark);
  display: flex;
  align-items: center;
  gap: 10px;
}
.header-tel a i {
  color: var(--text-dark);
  font-size: 1.8rem;
}
.header-tel .hours {
  font-size: 0.82rem;
  color: var(--text-gray);
}

.header-cta {
  background: var(--navy);
  color: #fff;
  border-radius: 50px;
  padding: 16px 34px;
  text-align: center;
  line-height: 1.3;
  transition: background 0.25s;
  box-shadow: 0 4px 10px rgba(12, 99, 169, 0.35);
}
.header-cta:hover {
  background: var(--navy);
  color: #fff;
}
.header-cta .small {
  display: block;
  font-size: 0.72rem;
  font-weight: 700;
  color: #ffe27a;
}
.header-cta .small .slash-l,
.header-cta .small .slash-r {
  font-weight: 400;
  font-size: 0.7rem;
  margin: 0 2px;
}
.header-cta .main {
  display: block;
  font-size: 1rem;
  font-weight: 800;
}
.header-cta .main i {
  margin-right: 6px;
}

.menu-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  padding: 6px;
}
.menu-toggle span {
  width: 26px;
  height: 3px;
  background: var(--navy);
  border-radius: 2px;
}

/* ==========================================================
   サイドスライドメニュー(フローティングカード方式)
   実測値(ユーザー提供リファレンス画像, 787x1024px基準):
   - パネル上端: ヘッダー下から隙間あり(top≈176/1024=17.2%)
   - パネル下端: 画面下端から隙間あり(bottom margin≈9.9%)
   - パネル右端: 画面右端から隙間あり(right margin≈13.6%)
   - パネル幅: ビューポート幅の約46.5%(PC表示時、上限300px程度)
   - パネル背景: 白っぽい半透明(すりガラス調)+ 角丸 + ソフトシャドウ
   - テキスト色: 通常項目はダークグレー(約#4a4a45)、太字ではなく通常〜中太
   - アクティブ項目(トップページ): 赤文字(#ff0000系)+左に小さい赤丸ドット
   - 項目間に罫線なし、余白のみで区切る
   ========================================================== */
#side-menu {
  position: fixed;
  top: 100px;
  right: -100%;
  width: 60%;
  max-width: 172px;
  height: auto;
  max-height: calc(100vh - 140px);
  background: rgba(255, 255, 255, 0.42);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border-radius: 8px 0 0 8px;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.14);
  z-index: 1100;
  transition: right 0.35s ease;
  padding: 10px 0;
  overflow-y: auto;
}
#side-menu.open {
  right: 0;
}
#side-menu ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
#side-menu li {
  position: relative;
}
#side-menu a {
  display: block;
  padding: 11px 14px 11px 20px;
  color: #4a4a45;
  font-weight: 500;
  font-size: 0.75rem;
  letter-spacing: 0.03em;
  transition: color 0.2s;
}
#side-menu a:hover {
  color: var(--navy);
}
#side-menu a.active {
  color: #ff0000;
  font-weight: 700;
}
#side-menu li:has(a.active)::before {
  content: "";
  position: absolute;
  left: 8px;
  top: 50%;
  transform: translateY(-50%);
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #ff0000;
}
#side-menu-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.15);
  z-index: 1090;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s;
}
#side-menu-overlay.open {
  opacity: 1;
  pointer-events: auto;
}
#side-menu-open-btn {
  position: fixed;
  top: 260px;
  right: 0;
  z-index: 1050;
  background: rgba(44, 74, 120, 0.85);
  color: #fff;
  border: none;
  padding: 14px 10px;
  border-radius: 8px 0 0 8px;
  writing-mode: vertical-rl;
  letter-spacing: 0.2em;
  font-weight: 700;
  font-size: 0.85rem;
  box-shadow: -2px 4px 10px rgba(0, 0, 0, 0.2);
  cursor: pointer;
  opacity: 1;
  pointer-events: auto;
  transition: opacity 0.25s ease;
}
/* メニューが開いている間は「取っ手」タブを隠し、閉じたら再表示する */
#side-menu-open-btn.hidden-by-menu {
  opacity: 0;
  pointer-events: none;
}

/* ==========================================================
   ヒーロー
   ========================================================== */
#hero {
  position: relative;
  min-height: 72vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top: 90px;
  background-size: cover;
  background-position: center;
  isolation: isolate;
}
@media (max-width: 820px) {
  #hero {
    min-height: 62vh;
  }
}
#hero::before {
  content: "";
  position: absolute;
  inset: 0;
  /* デザインでは背景写真がそのまま明るく見えている(オーバーレイなし)。
     文字の可読性はh1/pのtext-shadowで担保するため、ここは極薄い着色のみに留める。 */
  background: linear-gradient(180deg, rgba(20, 35, 60, 0.12) 0%, rgba(20, 35, 60, 0.02) 40%, rgba(20, 35, 60, 0.18) 100%);
  z-index: -1;
}
.hero-copy {
  text-align: center;
  color: #fff;
  width: 100%;
  /* 常設サイドメニュー(デスクトップ時は右側最大172px占有)の下に
     見出しテキストが食い込まないよう、中央寄せのままコンテナ幅自体を
     狭めておく。530px程度なら821px~1920pxの実測でメニューと重ならない。 */
  max-width: 530px;
  min-width: 0;
  padding: 0 16px;
  box-sizing: border-box;
}
.hero-copy h1,
.hero-copy p {
  max-width: 100%;
}
.hero-copy h1 {
  font-family: "M PLUS Rounded 1c", var(--font-jp);
  /* デザインカンプ実測: 見出しはサブテキストの約1.53倍のサイズ。
     821px(サイドメニュー常設と衝突するデスクトップ最小幅)での二分探索で
     26px以下なら2行に収まり重なりも発生しないことを確認済み。 */
  font-size: 26px;
  font-weight: 900;
  letter-spacing: -0.05em;
  line-height: 1.4;
  white-space: normal;
  -webkit-text-stroke: 1.2px #222;
  text-shadow:
    0 0 4px rgba(0, 0, 0, 0.5),
    0 2px 6px rgba(0, 0, 0, 0.4);
  margin: 0 0 8px;
}
.hero-line-break {
  display: inline;
}
.hero-copy p {
  font-family: "M PLUS Rounded 1c", var(--font-jp);
  font-size: 17px;
  font-weight: 900;
  letter-spacing: -0.03em;
  -webkit-text-stroke: 0.8px #222;
  text-shadow:
    0 0 3px rgba(0, 0, 0, 0.5),
    0 1px 5px rgba(0, 0, 0, 0.35);
  margin: 0;
}
@media (max-width: 820px) {
  .hero-copy {
    /* モバイルはメニューを初期状態で閉じる(app.js参照)ため、
       常時展開のサイドメニューとの重なりを気にせずビューポート幅を
       フルに使える。狭いコンテナ+小さい文字で縦に間延びするのを防ぐ。 */
    max-width: 100%;
    padding: 0 16px;
  }
  .hero-copy h1 {
    /* メニュー閉状態・padding込みで二分探索した2行収まり上限
       (320px:15.5px 〜 480px:24.5px)を基準に、320px→14.8px,
       480px→23.5pxを通る線形式でclamp化(安全マージンを確保)。
       480px以降はPC版と同じ26pxに収束させる。
       PC版と同じ比率(h1:p=1.53:1)を維持。 */
    font-size: clamp(14.8px, calc(-2.6px + 5.44vw), 26px);
  }
  .hero-copy p {
    font-size: clamp(9.6px, calc(-1.8px + 3.56vw), 17px);
  }
}
.hero-scroll {
  position: absolute;
  bottom: 26px;
  left: 50%;
  transform: translateX(-50%);
  color: #fff;
  font-size: 0.75rem;
  letter-spacing: 0.2em;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}
.hero-scroll::after {
  content: "";
  width: 1px;
  height: 34px;
  background: #fff;
  animation: scrolldown 1.6s infinite;
}
@keyframes scrolldown {
  0% { transform: scaleY(0); transform-origin: top; opacity: 0.4; }
  50% { transform: scaleY(1); transform-origin: top; opacity: 1; }
  51% { transform-origin: bottom; }
  100% { transform: scaleY(0); transform-origin: bottom; opacity: 0.4; }
}

/* ==========================================================
   ABOUT  — デザインカンプ(1920px基準)の実測値で再現
   ステージ実寸: 幅1920 x 高さ1109
     ・コラージュ写真帯      y0-726
     ・見出し白ボックス(L字) x0-657 / narrow部 x0-282
     ・キャッチタグ3本       x85-801 / y666-744,769-846,870-948
     ・紺テキストボックス     x897-1799 / y659-1022
     ・動画リンク            text x970-1468 / icon x1479-1551 / y1036-1087
   ※タグと紺ボックスは写真帯(下端726)に重なる点が重要
   ========================================================== */
#about {
  padding: 0 0 90px;
  background: #fff;
}

/* ---------- ステージ(全要素を実測%で絶対配置) ---------- */
.about-stage {
  position: relative;
  width: 100%;
  /* 1109 / 1920 = 57.76% */
  padding-top: 57.76%;
  background: #fff;
}
.about-stage > * { position: absolute; }

/* ---------- 写真コラージュ(上端0〜下端726 = 65.46%) ---------- */
.about-main-photo {
  left: 14.69%;        /* x282 */
  top: 0;
  width: 52.24%;       /* x282-1285 */
  height: 65.46%;      /* y0-726 */
  overflow: hidden;
  z-index: 1;
}
.about-side-photos {
  left: 66.93%;        /* x1285 */
  top: 0;
  width: 16.35%;       /* x1285-1599 */
  height: 65.46%;
  display: flex;
  flex-direction: column;
  z-index: 1;
}
/* 実測の横継ぎ目: y207 / y421 → 28.5% / 29.5% / 42.0% */
.about-side-photos img:nth-child(1) { flex: 0 0 28.5%; }
.about-side-photos img:nth-child(2) { flex: 0 0 29.5%; }
.about-side-photos img:nth-child(3) { flex: 0 0 42.0%; }
.about-far-photo {
  left: 83.28%;        /* x1599 */
  top: 0;
  width: 16.72%;       /* x1599-1920 */
  height: 65.46%;
  overflow: hidden;
  z-index: 0;
}
.about-stage img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.about-main-photo img { object-position: left center; }
.about-far-photo img  { object-position: right center; }

/* ---------- 見出し白ボックス(L字 / 写真の上に乗る) ----------
   x0-657(34.22%) y0-726(65.46%) を clip-path で階段状に切り抜く。
   narrow部の右端 x282 = ボックス幅657の42.92%
   wide部の上端 y91 = ボックス高726の12.53% / 下端 y273 = 37.60% */
.about-heading-box {
  left: 0;
  top: 0;
  width: 34.22%;
  height: 65.46%;
  background: #fff;
  z-index: 3;
  clip-path: polygon(
    0 0, 42.92% 0, 42.92% 12.53%,
    100% 12.53%, 100% 37.60%,
    42.92% 37.60%, 42.92% 100%, 0 100%
  );
}
/* ABOUT: 実測 x113-440 / cap y125-190(高さ64px) */
.about-heading-en {
  left: 5.885%;        /* x113 */
  top: 10.19%;         /* y113(ベース調整込み) */
  font-family: "Noto Sans JP", "Helvetica Neue", Arial, sans-serif;
  font-weight: 900;
  color: var(--navy-dark);
  font-size: 4.63vw;   /* cap64px ≒ font-size89px / 1920 */
  line-height: 1;
  letter-spacing: 0.115em;  /* 字送り実測 約70px */
  white-space: nowrap;
  z-index: 4;
}
/* 斜め線: 実測 (499,157) → (420,246)。垂直線を時計回り41.6度回転 */
.about-heading-line {
  left: 25.99%;        /* x499 */
  top: 14.16%;         /* y157 */
  width: 0.156%;       /* 3px */
  height: 10.73%;      /* 119px */
  background: var(--navy-dark);
  transform: rotate(41.6deg);
  transform-origin: top center;
  z-index: 4;
}
/* 当事務所について: 実測 x480-647 / y206-223 */
.about-heading-jp {
  left: 25.00%;        /* x480 */
  top: 17.85%;         /* y198 */
  font-size: 1.04vw;   /* 約20px */
  font-weight: 700;
  color: var(--navy-dark);
  letter-spacing: 0.17em;
  white-space: nowrap;
  z-index: 4;
}

/* ---------- キャッチタグ3本(写真帯に重なる) ---------- */
.about-catch-tag {
  left: 4.43%;         /* x85 */
  height: 6.94%;       /* 77px */
  background: var(--navy-dark);
  color: #fff;
  font-size: 2.45vw;   /* 約47px */
  font-weight: 800;
  line-height: 1;
  display: flex;
  align-items: center;
  padding: 0 0 0 1.09%;  /* 左内側 約21px */
  z-index: 4;
  white-space: nowrap;
  letter-spacing: 0.02em;
}
.about-catch-tag.tag-1 { top: 60.05%; width: 37.29%; } /* y666 / x85-801 */
.about-catch-tag.tag-2 { top: 69.34%; width: 37.29%; } /* y769 */
.about-catch-tag.tag-3 { top: 78.45%; width: 20.83%; } /* y870 / x85-485 */

/* ---------- 紺色テキストボックス(写真帯に67px重なる) ---------- */
.about-text-block {
  left: 46.72%;        /* x897 */
  top: 59.42%;         /* y659 */
  width: 46.98%;       /* x897-1799 */
  min-height: 32.82%;  /* y659-1022 を基準の高さとし、文章がはみ出す幅帯でのみ自動で伸ばす */
  height: auto;
  background: var(--navy);
  color: #fff;
  padding: 1.2% 3.9%;
  font-size: 1.20vw;   /* 約23px */
  line-height: 2.0;    /* 行送り実測46px */
  letter-spacing: 0.02em;
  z-index: 4;
  box-sizing: border-box;
}

/* ---------- 動画リンク(紺ボックス直下) ---------- */
.video-link {
  left: 50.52%;        /* x970 */
  top: 93.42%;         /* y1036 */
  display: flex;
  align-items: center;
  gap: 0.58%;
  font-weight: 800;
  font-size: 1.77vw;   /* 約34px */
  color: var(--navy);
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  z-index: 4;
  white-space: nowrap;
  letter-spacing: 0.02em;
}
/* フィルムコマ型アイコン: 実測 72x51px */
.video-play-icon {
  width: 3.75vw;
  height: 2.66vw;
  flex-shrink: 0;
  display: block;
  margin-left: 0.6vw;
}
.video-link:hover { opacity: 0.78; }

/* ---------- モバイル(820px以下): 絶対配置をやめて縦積み ---------- */
@media (max-width: 820px) {
  .about-stage {
    padding-top: 0;
    display: block;
  }
  .about-stage > * { position: static; }
  .about-heading-box {
    width: 100%;
    height: auto;
    clip-path: none;
    padding: 26px 20px 10px;
  }
  .about-heading-en {
    display: block;
    font-size: 13vw;
    letter-spacing: 0.1em;
  }
  .about-heading-jp {
    display: block;
    font-size: 3.4vw;
    margin: 4px 0 0 2px;
  }
  .about-heading-line { display: none; }
  .about-main-photo,
  .about-side-photos,
  .about-far-photo { width: 100%; height: auto; }
  .about-main-photo { height: 46vw; }
  .about-side-photos {
    flex-direction: row;
    height: 24vw;
    margin-top: 2px;
  }
  .about-side-photos img:nth-child(1),
  .about-side-photos img:nth-child(2),
  .about-side-photos img:nth-child(3) { flex: 1 1 33.333%; }
  .about-far-photo { display: none; }
  .about-catch-tag {
    width: auto !important;
    max-width: 94%;
    height: auto;
    font-size: 4.6vw;
    padding: 0.42em 0.6em;
    margin: 10px 0 0 3%;
    display: inline-flex;
    white-space: normal;
  }
  .about-text-block {
    width: 94%;
    height: auto;
    margin: 16px auto 0;
    padding: 22px 18px;
    font-size: 3.5vw;
    line-height: 1.95;
  }
  .video-link {
    margin: 18px auto 0;
    font-size: 4.2vw;
    justify-content: center;
    width: 100%;
  }
  .video-play-icon { width: 9vw; height: 6.4vw; margin-left: 2vw; }
}

/* 代表挨拶
   実測値(design_new_1920.png, 1920px幅基準):
   - 写真: x281-921,y2237-2875 → 640x638(ほぼ1:1)
   - 名前タグ: 写真左下にオーバーレイ、左端x342(写真基準9.53%)、下端は写真下端から16.93%
   - バッジ3個(左列、写真より左に少しはみ出す): 左端x85共通、右端は各492/633/530(幅407/548/445px)
     幅はテキスト量に応じて自然に変わるため fit-content で近似
*/
#president {
  padding: 90px 0;
  background: var(--bg-warm);
}
.president-grid {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 50px;
  align-items: center;
}
.president-left {
  /* バッジが写真より少し左にはみ出す実測比率を再現するための余白 */
  padding-left: 3.6%;
}
.president-photo {
  position: relative;
  border-radius: 0;
  overflow: hidden;
  box-shadow: none;
  margin-left: -3.6%;
}
.president-photo img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  display: block;
}
.president-photo .name-tag {
  position: absolute;
  left: 9.5%;
  bottom: 17%;
  display: flex;
  flex-direction: column;
  gap: 6px;
  color: #fff;
  font-size: clamp(1rem, 1.6vw, 1.3rem);
  font-weight: 700;
  line-height: 1.3;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
}
.president-badges {
  margin-top: 22px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.president-badge {
  background: var(--navy-dark);
  color: #fff;
  display: inline-flex;
  width: fit-content;
  padding: 10px 22px;
  font-size: clamp(1.15rem, 1.9vw, 1.55rem);
  font-weight: 800;
  border-radius: 0;
  line-height: 1.3;
}
.president-text {
  font-size: 0.98rem;
  color: #fff;
  background: var(--navy);
  padding: 26px 28px;
  border-radius: 0;
  align-self: center;
}
.president-text strong {
  color: #ffe27a;
  font-weight: 800;
}
.president-text p + p {
  margin-top: 18px;
}

/* 理念 */
#philosophy {
  padding: 70px 0;
  background: #fff;
  text-align: center;
}
.philosophy-message {
  max-width: 900px;
  margin: 30px auto 0;
  font-size: 1.3rem;
  font-weight: 800;
  color: #fff;
  line-height: 2.1;
  background: var(--navy-dark);
  padding: 34px 30px;
  border-radius: 0;
}

/* ==========================================================
   SERVICE
   ========================================================== */
#service {
  padding: 100px 0;
  background: var(--bg-warm);
}
.service-lead {
  text-align: center;
  max-width: 720px;
  margin: 0 auto 50px;
}
.service-lead h3 {
  font-size: 1.8rem;
  font-weight: 800;
  color: var(--navy);
  margin: 0 0 12px;
}
.service-lead p {
  color: var(--text-gray);
  font-size: 0.98rem;
}
.service-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}
.service-card {
  background: #fff;
  border-radius: 0;
  overflow: hidden;
  box-shadow: none;
  border: 1px solid var(--line-gray);
  display: flex;
  flex-direction: column;
  transition: transform 0.2s;
}
.service-card:hover {
  transform: translateY(-4px);
}
.service-card .thumb {
  aspect-ratio: 800/339;
  overflow: hidden;
}
.service-card .thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.service-card .body {
  padding: 20px 22px 22px;
  flex: 1;
  display: flex;
  flex-direction: column;
  background: #fafafa;
}
.service-card .desc {
  font-size: 0.88rem;
  color: var(--text-dark);
  margin: 0 0 14px;
  flex: 1;
}
.service-card .prices {
  font-size: 0.85rem;
  color: var(--navy);
  font-weight: 700;
  margin-bottom: 14px;
  line-height: 1.8;
}
.service-card .prices span {
  display: block;
}
.service-more {
  color: var(--accent);
  font-weight: 800;
  font-size: 0.9rem;
  align-self: flex-start;
  background: none;
  border: none;
  padding: 0;
}
.service-more:hover {
  text-decoration: underline;
}

/* ==========================================================
   サービスの流れ
   ========================================================== */
#flow {
  padding: 100px 0;
  background: #fff;
}
.flow-grid {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: 50px;
  align-items: flex-start;
}
.flow-intro {
  background: var(--navy-dark);
  color: #fff;
  padding: 38px 32px;
  border-radius: 0;
}
.flow-intro .tag {
  font-size: 0.85rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  opacity: 0.85;
  margin-bottom: 6px;
  display: block;
}
.flow-intro h3 {
  font-size: 1.5rem;
  font-weight: 900;
  margin: 0 0 20px;
}
.flow-intro p {
  font-size: 0.92rem;
  font-weight: 500;
  line-height: 2;
}
.flow-steps {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 26px;
}
.flow-step {
  display: flex;
  flex-direction: column;
}
.flow-step-banner {
  position: relative;
  margin-bottom: 14px;
}
.flow-step-banner img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 8px;
}
.flow-step .num {
  position: absolute;
  top: -14px;
  right: -14px;
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--navy);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 1.05rem;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.25);
  border: 2px solid #fff;
}
.flow-step p {
  font-size: 0.86rem;
  font-weight: 700;
  color: var(--text-gray);
  margin: 0;
  line-height: 1.9;
}

/* ==========================================================
   事業情報
   ========================================================== */
#company {
  padding: 90px 0;
  background: var(--bg-warm);
}
.company-table {
  max-width: 900px;
  margin: 30px auto 0;
  border-collapse: collapse;
  width: 100%;
  background: #fff;
  box-shadow: none;
  border-radius: 0;
  overflow: hidden;
}
.company-table th,
.company-table td {
  padding: 20px 26px;
  text-align: left;
  border-bottom: 1px solid var(--line-gray);
  font-size: 0.95rem;
  vertical-align: top;
  color: var(--navy);
  font-weight: 700;
}
.company-table tr:last-child th,
.company-table tr:last-child td {
  border-bottom: none;
}
.company-table th {
  background: var(--bg-warm-2);
  color: var(--navy);
  font-weight: 700;
  width: 160px;
  white-space: nowrap;
}
.company-table td ul {
  margin: 0;
  padding-left: 1.1em;
  color: var(--navy);
}
.company-table td ul li {
  margin-bottom: 4px;
}

/* ==========================================================
   VOICE
   ========================================================== */
#voice {
  padding: 100px 0;
  background: #fff;
}
.voice-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 30px;
  margin-top: 40px;
}
.voice-card {
  background: #fff;
  border-radius: 0;
  padding: 30px;
  display: flex;
  flex-direction: column;
}
.voice-card .quote-title {
  text-align: center;
  margin-bottom: 20px;
  min-height: 94px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.voice-box {
  background: var(--navy);
  color: #fff;
  border-radius: 0;
  padding: 24px;
  font-size: 0.86rem;
  line-height: 1.9;
  flex: 1;
}
.voice-box .who {
  font-weight: 800;
  margin-bottom: 10px;
  font-size: 0.95rem;
}

/* ==========================================================
   FAQ
   ========================================================== */
#faq {
  padding: 100px 0;
  background: var(--bg-warm);
}
.faq-list {
  max-width: 860px;
  margin: 40px auto 0;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.faq-item {
  background: #fff;
  border-radius: 0;
  overflow: hidden;
  box-shadow: none;
}
.faq-q {
  text-align: center;
  padding: 22px 24px 0;
}
.faq-a {
  background: var(--navy);
  color: #fff;
  margin: 20px;
  border-radius: 0;
  padding: 22px 24px;
  font-size: 0.9rem;
  line-height: 1.9;
}
.faq-a p {
  margin: 0 0 8px;
}
.faq-a p:last-child {
  margin-bottom: 0;
}

/* ==========================================================
   BLOG
   ========================================================== */
#blog {
  padding: 100px 0;
  background: #fff;
}
.blog-list {
  max-width: 900px;
  margin: 40px auto 0;
  border-top: 1px solid var(--navy);
}
.blog-item {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 20px 6px;
  border-bottom: 1px solid var(--line-gray);
  transition: background 0.2s;
}
.blog-item:hover {
  background: var(--bg-warm);
}
.blog-item .thumb {
  width: 84px;
  height: 84px;
  border-radius: 6px;
  overflow: hidden;
  flex-shrink: 0;
}
.blog-item .thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.blog-item .date {
  color: var(--navy);
  font-weight: 700;
  font-size: 0.85rem;
  width: 110px;
  flex-shrink: 0;
}
.blog-item .title {
  flex: 1;
  font-size: 0.92rem;
  color: var(--text-dark);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.blog-item .arrow {
  color: var(--navy);
  font-size: 1rem;
}
.blog-more {
  text-align: right;
  max-width: 900px;
  margin: 24px auto 0;
}
.blog-more a {
  font-weight: 700;
  text-decoration: underline;
  color: var(--text-dark);
}

/* ==========================================================
   CONTACT
   ========================================================== */
#contact {
  padding: 100px 0 120px;
  background: var(--bg-warm);
}
.contact-lead {
  text-align: center;
  max-width: 620px;
  margin: 0 auto 50px;
  font-size: 0.92rem;
  color: var(--text-dark);
}
.contact-lead .note {
  display: block;
  margin-top: 14px;
  font-size: 0.8rem;
  color: var(--text-gray);
}
.contact-form-wrap {
  max-width: 720px;
  margin: 0 auto;
  background: #ebebeb;
  border-radius: 0;
  padding: 44px;
  box-shadow: none;
}
/* ハニーポット欄: 画面上は完全に非表示にしつつ、
   display:none にはしない(一部のボットはdisplay:noneを検出して
   スキップするため、画面外配置+視覚的に隠す方式にする)。 */
.hp-field {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.form-row {
  margin-bottom: 26px;
}
.form-label {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
  font-weight: 700;
  font-size: 0.92rem;
}
.badge {
  font-size: 0.7rem;
  padding: 3px 10px;
  border-radius: 3px;
  color: #fff;
  font-weight: 700;
}
.badge.required {
  background: var(--navy);
}
.badge.optional {
  background: #9a9a9a;
}
.form-row input[type="text"],
.form-row input[type="tel"],
.form-row input[type="email"],
.form-row textarea {
  width: 100%;
  padding: 13px 16px;
  border: 1px solid var(--line-gray);
  border-radius: 6px;
  font-size: 0.95rem;
  font-family: inherit;
}
.form-row textarea {
  min-height: 150px;
  resize: vertical;
}
.form-row input:focus,
.form-row textarea:focus {
  outline: none;
  border-color: var(--navy-light);
  box-shadow: 0 0 0 3px rgba(58, 107, 177, 0.15);
}
.form-error {
  color: var(--accent);
  font-size: 0.78rem;
  margin-top: 6px;
  display: none;
}
.privacy-scroll-box {
  background: #fdfdf0;
  border: 1px solid var(--line-gray);
  border-radius: 0;
  padding: 20px 24px;
  font-size: 0.78rem;
  color: var(--text-gray);
  height: 170px;
  overflow-y: auto;
  margin-bottom: 18px;
  line-height: 1.8;
}
.privacy-scroll-box p {
  margin: 0 0 10px;
}
.privacy-scroll-box p:last-child {
  margin-bottom: 0;
}
.privacy-scroll-title {
  text-align: center;
  font-weight: 800;
  font-size: 0.9rem;
  color: var(--text-dark);
}
.privacy-scroll-box a {
  color: var(--navy);
  font-weight: 700;
  text-decoration: underline;
}
.agree-row {
  display: flex;
  align-items: center;
  gap: 10px;
  justify-content: center;
  margin-bottom: 26px;
  font-size: 0.9rem;
}
.agree-row input {
  width: 18px;
  height: 18px;
}
.submit-btn {
  display: block;
  margin: 0 auto;
  background: #fff;
  border: 2px solid var(--navy);
  color: var(--navy);
  font-weight: 800;
  font-size: 1rem;
  padding: 16px 60px;
  border-radius: 0;
  transition: all 0.25s;
}
.submit-btn:hover:not(:disabled) {
  background: var(--navy);
  color: #fff;
}
.submit-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
.form-msg {
  text-align: center;
  margin-top: 20px;
  font-weight: 700;
}
.form-msg.success { color: #1a7a3f; }
.form-msg.error { color: var(--accent); }

/* ==========================================================
   フッター
   ========================================================== */
#site-footer {
  background: var(--navy-dark);
  color: #fff;
  padding: 30px 0;
  text-align: center;
  position: relative;
}
.footer-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  font-size: 0.9rem;
}
.footer-inner .insta {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 1rem;
}
#back-to-top {
  position: fixed;
  right: 24px;
  bottom: 24px;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: #fff;
  color: var(--navy);
  border: none;
  display: none;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.2);
  z-index: 800;
}
#back-to-top.show {
  display: flex;
}

/* ==========================================================
   モーダル
   ========================================================== */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15, 22, 35, 0.8);
  z-index: 2000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.modal-overlay.open {
  display: flex;
}
.modal-box {
  background: #fff;
  border-radius: 12px;
  max-width: 640px;
  width: 100%;
  max-height: 88vh;
  overflow-y: auto;
  position: relative;
  padding: 40px;
}
.modal-close {
  position: absolute;
  top: 14px;
  right: 16px;
  background: none;
  border: none;
  font-size: 1.6rem;
  color: var(--text-gray);
  line-height: 1;
}
.modal-box h3 {
  color: var(--navy);
  font-size: 1.35rem;
  font-weight: 800;
  margin: 0 0 16px;
  padding-right: 20px;
}
.modal-box .modal-img {
  border-radius: 8px;
  margin-bottom: 18px;
  aspect-ratio: 16/9;
  object-fit: cover;
  width: 100%;
}
.modal-box .modal-price {
  background: var(--bg-warm);
  border-radius: 6px;
  padding: 16px 20px;
  margin-bottom: 16px;
  font-weight: 700;
  color: var(--navy);
  line-height: 1.9;
}
.modal-box .modal-desc {
  font-size: 0.92rem;
  color: var(--text-dark);
  line-height: 1.9;
  margin-bottom: 20px;
}
.modal-box .modal-cta {
  display: inline-block;
  background: var(--navy);
  color: #fff;
  padding: 12px 30px;
  border-radius: 6px;
  font-weight: 700;
  font-size: 0.92rem;
}

.video-modal-box {
  max-width: 900px;
  padding: 16px;
  background: #000;
}
.video-modal-box video {
  width: 100%;
  border-radius: 6px;
  display: block;
}
.video-modal-box .modal-close {
  color: #fff;
  z-index: 5;
}

/* ==========================================================
   サービス詳細モーダル(デザインカンプ画像をそのまま使用)
   ヘッダーと同じ手法: デザイン画像を<img>でそのまま表示し、
   動画がある箇所だけ実際の<video>を、ボタンが画像に
   焼き込まれている箇所だけ透明なクリック領域を、
   ピクセル実測の%座標でピタリと重ねる。
   ========================================================== */
.service-modal-box-img {
  max-width: 900px;
  padding: 0;
  background: #fff;
  border-radius: 14px;
  overflow: hidden;
  line-height: 0;
}
.service-modal-img-wrap {
  position: relative;
  width: 100%;
  line-height: 0;
}
.service-modal-bg {
  width: 100%;
  height: auto;
  display: block;
}
.service-modal-hit {
  position: absolute;
  display: block;
}

/* ---- 閉じるボタン(デザイン画像に焼き込み済み・透明クリック領域) ---- */
.service-modal-close-hit-1 { left: 93.56%; top: 0%;  width: 6.44%; height: 9.43%; }
.service-modal-close-hit-2 { left: 92.73%; top: 0%;  width: 7.27%; height: 9.71%; }

/* ---- 閉じるボタン(画像に存在しない4モーダル用・実際に見えるボタン) ---- */
.service-modal-close-hit-plain {
  position: absolute;
  top: 12px;
  right: 14px;
  width: 32px;
  height: 32px;
  border: none;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  line-height: 1;
  color: var(--text-dark);
  z-index: 10;
  cursor: pointer;
}

/* ---- 動画(デザイン画像のサムネイルはそのまま。クリックすると別ウィンドウ(video-modal)で動画を再生) ---- */
.service-modal-video-bathdoctor,
.service-modal-video-kateiyou,
.service-modal-video-gyomuyo {
  border: none;
  background: transparent;
  padding: 0;
  cursor: pointer;
}
.service-modal-video-bathdoctor { left: 0.20%; top: 0.92%;  width: 45.81%; height: 45.75%; }
.service-modal-video-kateiyou   { left: 1.12%;  top: 3.34%;  width: 43.95%; height: 43.71%; }
.service-modal-video-gyomuyo    { left: 49.9%;  top: 13.76%; width: 27.05%; height: 36.75%; }

/* ---- CTAボタン(デザイン画像に焼き込み済み・透明クリック領域) ---- */
.service-modal-cta-hit-1 { left: 1.53%; top: 88.1%; width: 96.22%;  height: 7.1%; }
.service-modal-cta-hit-2 { left: 6.25%; top: 85.88%;  width: 87.81%; height: 6.38%; }

/* ---- CTAボタン(画像に存在しない4モーダル用・実際に見えるボタン) ---- */
.service-modal-cta-plain {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: #e34252;
  color: #fff;
  font-weight: 800;
  font-size: 1rem;
  padding: 16px 20px;
  margin: 18px;
  border-radius: 8px;
  transition: background 0.2s;
}
.service-modal-cta-plain:hover {
  background: #c7303f;
  color: #fff;
}

/* ---- レスポンシブ(サービス詳細モーダル) ---- */
@media (max-width: 560px) {
  .modal-overlay {
    padding: 10px;
  }
  .service-modal-box-img {
    max-height: 92vh;
    overflow-y: auto;
  }
}
/* ==========================================================
   プライバシーポリシーページ
   ========================================================== */
.policy-page {
  padding: 140px 0 100px;
  max-width: 840px;
  margin: 0 auto;
}
.policy-page h1 {
  color: var(--navy);
  font-size: 1.8rem;
  margin-bottom: 30px;
}
.policy-page h2 {
  color: var(--navy);
  font-size: 1.15rem;
  margin-top: 34px;
  margin-bottom: 12px;
}
.policy-page p, .policy-page li {
  font-size: 0.92rem;
  color: var(--text-dark);
}
.policy-page a.back-link {
  color: var(--navy-light);
  font-weight: 700;
  text-decoration: underline;
}

/* ==========================================================
   レスポンシブ
   ========================================================== */
@media (min-width: 821px) {
  .header-inner { display: none !important; }
}
@media (max-width: 820px) {
  .header-inner-desktop { display: none !important; }
  .menu-toggle { display: flex; }
  /* スマホ/タブレットではスクロール追従させず、通常のバナーとして
     ページ先頭に固定表示する(position: fixedを解除)。
     また縦幅もPC用min-height(210px)を使わず、コンパクトにする。
     方式②: PCヘッダーと同じ要素(ロゴ・ナビ・LINE・電話・CTA)を
     省略せず3段(ロゴ+電話+メニュー / ナビ+LINE / CTAボタン)で
     折り返して全て表示する。 */
  #site-header {
    position: static;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  }
  .header-inner {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    min-height: 0;
    padding: 10px 14px;
    gap: 10px;
  }
  .header-row-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
  }
  .brand-name {
    font-size: 1.15rem;
    font-weight: 800;
    color: #222;
    letter-spacing: 0.05em;
    white-space: nowrap;
  }
  .header-row-top-right {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
  }
  .header-tel-mobile {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--text-dark);
    line-height: 1.2;
  }
  .header-tel-mobile i {
    font-size: 1.3rem;
    color: var(--navy);
  }
  .header-tel-mobile-text {
    display: flex;
    flex-direction: column;
  }
  .header-tel-mobile-text .num {
    font-size: 1rem;
    font-weight: 800;
  }
  .header-tel-mobile-text .hours {
    font-size: 0.62rem;
    color: var(--text-gray);
  }
  .header-nav-mobile {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 10px 20px;
    font-size: 0.85rem;
  }
  .header-nav-mobile .line-link {
    gap: 6px;
  }
  .header-nav-mobile .line-badge {
    width: 32px;
    height: 32px;
    font-size: 0.9rem;
    border-radius: 8px;
  }
  .header-nav-mobile .line-link-text {
    font-size: 0.72rem;
  }
  .header-cta-mobile {
    display: block;
    width: 100%;
    box-sizing: border-box;
  }
  .about-grid,
  .president-grid,
  .flow-grid {
    grid-template-columns: 1fr;
  }
  .service-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .voice-list {
    grid-template-columns: 1fr;
  }
  .flow-steps {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 680px) {
  .header-inner { padding: 8px 14px; }
  .brand img { height: 40px; }
  .header-cta .main { font-size: 0.75rem; }
  .header-cta { padding: 6px 12px; }
  .header-tel-mobile-text .num { font-size: 0.88rem; }
  .header-nav-mobile { font-size: 0.78rem; gap: 8px 12px; }
  .header-nav-mobile .line-badge { width: 28px; height: 28px; font-size: 0.8rem; }
  .service-grid { grid-template-columns: 1fr; }
  .about-photos { grid-template-columns: 1fr 1fr; }
  .company-table th { width: 110px; padding: 14px; font-size: 0.85rem; }
  .company-table td { padding: 14px; font-size: 0.85rem; }
  .contact-form-wrap { padding: 26px 18px; }
  .modal-box { padding: 26px 20px; }
  #side-menu-open-btn { top: auto; bottom: 90px; }
  #side-menu { top: 80px; right: -100%; max-width: 150px; max-height: calc(100vh - 110px); }
  #side-menu.open { right: 0; }
  .blog-item .date { width: 84px; font-size: 0.75rem; }
  .blog-item .title { font-size: 0.82rem; }
}