@charset "UTF-8";

/* Extracted from the original page-level <style> blocks.
   Values match the source so layout and Instagram feed styling stay the same. */

#sbi_mod_link,
#sbi_mod_error {
  display: block !important;
  width: 100%;
  float: left;
  box-sizing: border-box;
}

iframe.lazyload,
iframe[data-src] {
  border: 0;
}

/* ==========================================================================
   ファーストビュー見出し
   写真の上に文字が乗るため、背景がどう変わっても読めるように
   ぼかした明るいスクリムを敷いたうえで文字を濃くする
   ========================================================================== */

/* 地域名はネイビーのラベルにして、下段のリボンと揃える */
.fvLocal {
  display: block;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  background: #002378;
  color: #fff;
  font-size: 0.4em;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: 0.08em;
  padding: 0.55em 1.1em;
  border-radius: 3px;
  margin-bottom: 0.6em;
  text-shadow: none;
}

@media screen and (min-width: 992px) {
  header .inner h2 {
    color: #16213f;
    text-shadow: 0 1px 2px rgba(255, 255, 255, 0.9);
    /* 地域ラベルを足した分だけ縦に伸びて、下の帯と重なっていたので上げる */
    top: 7%;
    /* 元CSSは top と bottom を both 指定していたため、見出しの箱が
       ヘッダー下端まで縦に伸びていた。スクリムがその全面に広がって
       動画や帯を白く覆う原因になっていたので、内容の高さで止める */
    bottom: auto;
    height: auto;
  }

  /* 文字の下に敷く光のにじみ。
     radial-gradient は箱の端に届く前に色が残るため、左右の中央高さで
     くっきりした境目が出てしまう。単色の角丸をぼかす方式に変えて、
     四辺とも境目が出ないようにする */
  header .inner h2::before {
    content: "";
    position: absolute;
    top: -4px;
    right: -16px;
    bottom: -4px;
    left: -16px;
    background: rgba(255, 255, 255, 0.86);
    border-radius: 40px;
    -webkit-filter: blur(26px);
    filter: blur(26px);
    z-index: -1;
    pointer-events: none;
  }
}

/* --------------------------------------------------------------------------
   ヒーローの重ね順
   上から  キャッチコピー → 動画 → 白いベール → 背景画像
   -------------------------------------------------------------------------- */

header .inner h2 { z-index: 40; }          /* キャッチコピー */
header .inner ul { z-index: 40; }          /* 交通事故対応 / じっくりカウンセリング の帯 */
header .movieplay { z-index: 35; }         /* 「動画を見る」ボタン */
header .inner .fvWrap video.video { z-index: 30; }   /* 動画 */
header .inner .fvWrap .videofillter { z-index: 20; } /* 白いベール */

/* スマホは白抜き文字。明るい写真でも沈まないよう影を戻す */
@media screen and (max-width: 991px) {
  header .inner h2 {
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.55), 0 0 24px rgba(0, 0, 0, 0.4);
  }

  .fvLocal {
    font-size: 3.2vw;
    margin-left: auto;
    margin-right: auto;
  }
}

/* ==========================================================================
   料金一覧
   ========================================================================== */

#priceList {
  padding: 60px 0 50px;
  background: #fbf6e0;
}

#priceList h2 {
  font-size: 40px;
  font-weight: 700;
  letter-spacing: 0.08em;
  line-height: 1.4;
  margin: 0 0 8px;
}

#priceList .priceLead {
  text-align: center;
  margin: 10px auto 30px;
  max-width: 720px;
  line-height: 1.9;
}

#priceList .priceTables {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  margin: 0 -10px;
}

#priceList .priceCard {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  width: 50%;
  padding: 0 10px 20px;
}

#priceList .priceCardInner {
  background: #fff;
  border: 1px solid #dcd6bc;
  border-radius: 5px;
  padding: 20px 22px 18px;
  height: 100%;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

#priceList .priceCard h3 {
  color: #002378;
  font-size: 19px;
  font-weight: 600;
  line-height: 1.5;
  margin: 0 0 4px;
}

#priceList .priceCard .priceNote {
  font-size: 13px;
  color: #666;
  line-height: 1.7;
  margin: 0 0 12px;
}

#priceList .priceCard table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 14px;
}

#priceList .priceCard th,
#priceList .priceCard td {
  border-bottom: 1px dotted #ccc;
  padding: 7px 2px;
  font-size: 15px;
  line-height: 1.6;
  text-align: left;
}

#priceList .priceCard td.priceVal {
  text-align: right;
  white-space: nowrap;
  font-weight: 600;
  color: #002378;
}

#priceList .priceCard th {
  font-weight: 400;
  color: #444;
}

#priceList .priceCard .priceFirst td {
  background: #fff8e1;
}

#priceList .priceDetail {
  display: inline-block;
  color: #002378;
  font-size: 14px;
  text-decoration: none;
  border-bottom: 1px solid #002378;
  padding-bottom: 1px;
}

#priceList .priceDetail:hover,
#priceList .priceDetail:focus {
  opacity: 0.7;
}

#priceList .priceFoot {
  margin-top: 18px;
  font-size: 13px;
  color: #666;
  line-height: 1.9;
}

/* 上部からの導線ボタン */
.priceLinkBtn {
  display: block;
  background: #fff;
  border: 2px solid #002378;
  border-radius: 5px;
  color: #002378;
  font-weight: 600;
  text-align: center;
  text-decoration: none;
  padding: 12px 15px;
  margin: 15px 0 0;
}

.priceLinkBtn:hover,
.priceLinkBtn:focus {
  background: #002378;
  color: #fff;
}

/* ==========================================================================
   各施術メニュー末尾の予約ボタン
   ========================================================================== */

.menuCta {
  margin: 40px auto 10px;
  max-width: 640px;
  text-align: center;
  clear: both;
}

.menuCta .menuCtaLead {
  font-size: 16px;
  font-weight: 600;
  color: #002378;
  line-height: 1.7;
  margin-bottom: 14px;
}

.menuCta .menuCtaBtns {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  margin: 0 -6px;
}

.menuCta .menuCtaBtns a {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  margin: 0 6px 12px;
  padding: 14px 10px;
  border-radius: 5px;
  color: #fff;
  font-size: 17px;
  font-weight: 600;
  text-align: center;
  text-decoration: none;
  min-width: 190px;
  line-height: 1.4;

  display: flex;
  align-items: center;
  justify-content: center;
}

.menuCta .menuCtaTel {
  background: #002378;
}

.menuCta .menuCtaWeb {
  background: #f89220;
}

.menuCta .menuCtaLine {
  background: #06c755;
}

.menuCta .menuCtaBtns a:hover,
.menuCta .menuCtaBtns a:focus {
  opacity: 0.85;
}

.menuCta .menuCtaSub {
  font-size: 13px;
  color: #666;
  line-height: 1.8;
}

/* ==========================================================================
   Instagram フィード
   取得済みの画像をローカルから並べるだけなので、
   Smash Balloon の CSS(45KB) と JS(28KB) は不要になり削除した
   ========================================================================== */

.instaHead {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  gap: 12px;
  margin: 0 0 24px;
  text-decoration: none;
  color: #002378;
}

.instaHead__avatar {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  -o-object-fit: cover;
  object-fit: cover;
  display: block;
}

.instaHead__name {
  font-size: 18px;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.instaHead:hover .instaHead__name,
.instaHead:focus .instaHead__name {
  text-decoration: underline;
}

.instaGrid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  list-style: none;
  margin: 0 0 24px;
  padding: 0;
}

/* 投稿が4件に満たないうちは、右端が空いて間延びするので中央に寄せる */
.instaGrid--1 { grid-template-columns: minmax(0, 320px); justify-content: center; }
.instaGrid--2 { grid-template-columns: repeat(2, minmax(0, 300px)); justify-content: center; }
.instaGrid--3 { grid-template-columns: repeat(3, minmax(0, 280px)); justify-content: center; }

.instaGrid__item {
  position: relative;
  list-style: none;
}

.instaGrid__item a {
  display: block;
  position: relative;
  border-radius: 4px;
  overflow: hidden;
}

.instaGrid__item img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  -o-object-fit: cover;
  object-fit: cover;
  transition: opacity 0.25s ease;
}

.instaGrid__item a:hover img,
.instaGrid__item a:focus img {
  opacity: 0.8;
}

/* 動画・リールに付ける再生マーク */
.instaGrid__play {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 7px 0 7px 12px;
  border-color: transparent transparent transparent #fff;
  -webkit-filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.6));
  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.6));
  pointer-events: none;
}

@media screen and (max-width: 991px) {
  .instaGrid,
  .instaGrid--1,
  .instaGrid--2,
  .instaGrid--3 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    justify-content: stretch;
  }

  .instaGrid--1 {
    grid-template-columns: minmax(0, 1fr);
  }

  .instaHead__avatar { width: 48px; height: 48px; }
  .instaHead__name { font-size: 16px; }
}

/* ==========================================================================
   下層ページ（ブログ一覧・記事）のヘッダー
   トップの header は 800px の背景画像＋その下端にナビを重ねる作りだが、
   下層では画像を出さず、ロゴ帯のすぐ下にナビを置く
   ========================================================================== */

.subPage header {
  background: none;
  height: auto;
  min-height: 0;
  padding-bottom: 0;
}

/* スマホでは body::before が画面全面に固定背景（パララックス用の写真）を敷いている。
   下層ページには使う場所がなく、ヘッダーを透過にした分そこから覗いてしまうため消す */
.subPage::before {
  display: none !important;
  content: none !important;
}

.subPage {
  background: #fff;
}

/* トップページのロゴは .headerDescBg h1 で幅450pxに収めている。
   下層は見出しの意味が変わるため h1 ではなく div にしてあるので、
   同じ見た目になるよう同等の指定を当てる */
.headerDescBg .siteLogo {
  margin-top: 5px;
  width: 450px;
  display: block;
  float: left;
}

.headerDescBg .siteLogo img {
  max-width: 450px;
  width: 100%;
}

/* ヒーローを消した分、グローバルナビを通常の流れに戻す。
   スマホの引き出しメニューは position:fixed のままでないと壊れるので、PCのみに限定する */
@media screen and (min-width: 992px) {
  .subPage header nav.globalMenuSp {
    position: relative;
    left: auto;
    right: auto;
    margin-top: 0;
  }
}

.subPage .blogHead,
.subPage .blogList,
.subPage .blogPost {
  background: #fff;
}

/* ★重要
   theme.css の `nav { background: rgba(11,11,11,.8); padding: 9px 0; margin-top: -75px; }`
   は要素セレクタなので、ページ内のすべての <nav> に効いてしまう。
   パンくずと「前後の記事」も <nav>（意味的に正しい）なので、
   黒い背景と -75px の引き上げを受け継いでいた。ここで打ち消す。 */
.breadcrumb,
.blogNav {
  background: none;
  margin-top: 0;
  padding: 0;
}

/* ==========================================================================
   ブログ（一覧・記事）
   ========================================================================== */

.breadcrumb {
  font-size: 13px;
  color: #666;
  padding: 24px 0 0;
  line-height: 1.8;
}

.breadcrumb a {
  color: #002378;
  text-decoration: none;
}

.breadcrumb a:hover,
.breadcrumb a:focus {
  text-decoration: underline;
}

.breadcrumb span {
  margin: 0 6px;
}

.breadcrumb span:last-child {
  margin: 0;
  color: #666;
}

.blogHead {
  padding: 0 0 30px;
}

.blogHead__title {
  font-size: 34px;
  font-weight: 600;
  margin: 20px 0 10px;
  line-height: 1.4;
}

.blogHead__lead {
  font-size: 16px;
  line-height: 1.9;
  color: #444;
}

/* 一覧 */
.blogList {
  padding: 10px 0 80px;
}

.blogList__cards {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  margin: 0 -12px;
}

.blogList__card {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  width: 33.3333%;
  padding: 0 12px 28px;
}

.blogList__link {
  display: block;
  height: 100%;
  border: 1px solid #e0e4ea;
  border-radius: 6px;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  background: #fff;
}

.blogList__link:hover,
.blogList__link:focus {
  border-color: #002378;
}

.blogList__image img,
.latestBlog__image img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 8 / 5;
  -o-object-fit: cover;
  object-fit: cover;
}

.blogList__body {
  padding: 16px 18px 20px;
}

.blogList__date,
.latestBlog__date {
  display: block;
  font-size: 13px;
  color: #7c8996;
  letter-spacing: 0.04em;
  margin-bottom: 6px;
}

.blogList__title {
  font-size: 18px;
  font-weight: 600;
  line-height: 1.55;
  color: #002378;
  margin: 0 0 8px;
}

.blogList__excerpt {
  font-size: 14px;
  line-height: 1.8;
  color: #555;
  margin: 0 0 10px;
}

.blogList__more,
.latestBlog__more {
  font-size: 13px;
  color: #002378;
  font-weight: 600;
}

.blogList__empty,
.latestBlog__empty {
  text-align: center;
  color: #666;
  padding: 40px 0;
}

/* 記事が3件に満たないとき、左端だけ埋まって間延びしないよう中央に寄せる */
.latestBlog__cards--1 {
  grid-template-columns: minmax(0, 380px);
  justify-content: center;
}

.latestBlog__cards--2 {
  grid-template-columns: repeat(2, minmax(0, 380px));
  justify-content: center;
}

.latestBlog__all {
  text-align: center;
  margin-top: 20px;
}

.latestBlog__all a {
  color: #002378;
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid #002378;
}

/* ページ送り */
.pager {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  margin-top: 20px;
}

.pager__link,
.pager__current {
  min-width: 42px;
  margin: 0 4px 8px;
  padding: 9px 8px;
  text-align: center;
  border-radius: 4px;
  font-size: 15px;
  text-decoration: none;
  line-height: 1.4;
}

.pager__link {
  border: 1px solid #002378;
  color: #002378;
}

.pager__link:hover,
.pager__link:focus {
  background: #002378;
  color: #fff;
}

.pager__current {
  background: #002378;
  color: #fff;
  font-weight: 600;
}

/* 記事本文 */
.blogPost {
  padding: 0 0 70px;
}

.blogPost .inner {
  max-width: 820px;
}

.blogPost__head {
  margin: 22px 0 24px;
}

.blogPost__date {
  display: block;
  font-size: 14px;
  color: #7c8996;
  letter-spacing: 0.04em;
  margin-bottom: 8px;
}

.blogPost__title {
  font-size: 30px;
  font-weight: 600;
  line-height: 1.5;
  color: #002378;
  margin: 0;
}

.blogPost__hero {
  margin-bottom: 30px;
}

.blogPost__hero img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 6px;
}

/* CMSから入ってくる本文の見た目はここで決める */
.blogPost__body {
  font-size: 16px;
  line-height: 2;
  color: #333;
}

.blogPost__body h2 {
  font-size: 24px;
  font-weight: 600;
  color: #002378;
  line-height: 1.5;
  margin: 48px 0 16px;
  padding-left: 14px;
  border-left: 5px solid #fec701;
}

.blogPost__body h3 {
  font-size: 20px;
  font-weight: 600;
  color: #002378;
  line-height: 1.6;
  margin: 36px 0 12px;
}

.blogPost__body p {
  margin: 0 0 1.6em;
}

.blogPost__body ul,
.blogPost__body ol {
  margin: 0 0 1.6em;
  padding-left: 1.5em;
}

.blogPost__body ul li {
  list-style: disc;
  margin-bottom: 6px;
}

.blogPost__body ol li {
  list-style: decimal;
  margin-bottom: 6px;
}

.blogPost__body img {
  max-width: 100%;
  height: auto;
  border-radius: 4px;
  margin: 10px 0 1.6em;
}

.blogPost__body a {
  color: #002378;
  border-bottom: 1px solid #002378;
  text-decoration: none;
}

.blogPost__body blockquote {
  margin: 0 0 1.6em;
  padding: 16px 20px;
  background: #f4f6f8;
  border-left: 4px solid #cbd3e3;
  color: #444;
}

.blogPost__body table {
  width: 100%;
  border-collapse: collapse;
  margin: 0 0 1.6em;
}

.blogPost__body th,
.blogPost__body td {
  border: 1px solid #dfe4ea;
  padding: 8px 12px;
  font-size: 15px;
}

.blogPost__cta {
  margin-top: 50px;
}

.blogNav {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  margin-top: 40px;
  padding-top: 24px;
  border-top: 1px solid #e0e4ea;
}

.blogNav a {
  max-width: 46%;
  font-size: 14px;
  line-height: 1.7;
  color: #002378;
  text-decoration: none;
}

.blogNav a:hover,
.blogNav a:focus {
  text-decoration: underline;
}

.blogNav__next {
  text-align: right;
}

.blogPost__back {
  margin-top: 30px;
  text-align: center;
}

.blogPost__back a {
  color: #002378;
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid #002378;
}

/* 下層ページのロゴ。トップ以外は h1 ではなく div で出している */
.siteLogo {
  margin: 0;
}

@media screen and (max-width: 991px) {
  .blogList__card {
    width: 100%;
  }

  .blogHead__title {
    font-size: 26px;
  }

  .blogPost__title {
    font-size: 23px;
  }

  .blogPost__body {
    font-size: 15px;
  }

  .blogPost__body h2 {
    font-size: 20px;
    margin-top: 36px;
  }

  .blogPost__body h3 {
    font-size: 17px;
  }

  .blogNav {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
  }

  .blogNav a {
    max-width: 100%;
    margin-bottom: 10px;
  }

  .blogNav__next {
    text-align: left;
  }
}

/* ==========================================================================
   ページ内リンクの着地位置
   URLに #question などを直接入力された場合、固定ナビの下に潜らないようにする
   ========================================================================== */

#selection,
#message,
#menu,
#priceList,
#question,
#footerDesc {
  scroll-margin-top: 80px;
}

@media screen and (max-width: 991px) {
  #selection,
  #message,
  #menu,
  #priceList,
  #question,
  #footerDesc {
    scroll-margin-top: 20px;
  }
}

/* ==========================================================================
   ヒーローの動画レイヤー
   dotted.png は 600x338（動画と同寸）の白いベール（平均アルファ約128 ≒ 50%）。
   重ね順で動画の下に回したので、濃さは元のまま。クリックは動画に通す
   ========================================================================== */

.videofillter {
  pointer-events: none;
}

/* ==========================================================================
   PCグローバルナビ
   項目が8つになり 1100px に収まらず折り返していたため、
   折り返しを禁止したうえで余白と文字サイズを詰めて1行に収める
   ========================================================================== */

@media screen and (min-width: 992px) {
  nav ul {
    max-width: 1200px;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
  }

  nav ul li {
    -ms-flex-negative: 0;
    flex-shrink: 0;
  }

  nav ul a {
    white-space: nowrap;
    font-size: 15px;
    padding: 15px 12px;
  }

  nav ul .navStaff {
    padding: 15px 20px;
  }
}

/* 992〜1200px はさらに詰める */
@media screen and (min-width: 992px) and (max-width: 1200px) {
  nav ul a {
    font-size: 14px;
    padding: 14px 9px;
  }

  nav ul .navStaff {
    padding: 14px 14px;
  }
}

/* ==========================================================================
   整骨院案内の院内写真
   元素材の縦横比が揃っていなくても3枚の高さが崩れないよう、3:2に整えて表示する
   ========================================================================== */

#guide ul li img {
  display: block;
  width: 375px;
  height: auto;
  aspect-ratio: 375 / 257;
  -o-object-fit: cover;
  object-fit: cover;
}

@media screen and (max-width: 991px) {
  #guide ul li img {
    width: 100%;
  }
}

/* ==========================================================================
   よくあるご質問
   ========================================================================== */

#question .questionLead {
  text-align: center;
  max-width: 760px;
  margin: 0 auto 40px;
  font-size: 17px;
  line-height: 1.9;
  color: #333;
}

#question .questionCat {
  font-size: 22px;
  font-weight: 600;
  color: #002378;
  line-height: 1.5;
  margin: 50px 0 18px;
  padding-left: 14px;
  border-left: 5px solid #fec701;
}

#question .questionCat:first-of-type {
  margin-top: 0;
}

/* 回答の補足行。既存の .questionML を読みやすい大きさに整える */
#question .questionInner p .questionML {
  font-size: 17px;
  line-height: 1.9;
  color: #3d3d3d;
  text-indent: 0;
  margin-top: 8px;
}

#question .questionInner p a {
  color: #002378;
  font-weight: 600;
  border-bottom: 1px solid #002378;
  text-decoration: none;
}

#question .questionInner p a:hover,
#question .questionInner p a:focus {
  opacity: 0.7;
}

/* ==========================================================================
   スマホ固定CTAバー（電話 / WEB予約 / LINE）
   ========================================================================== */

.fixedCta {
  display: none;
}

@media screen and (max-width: 991px) {
  .fixedCta {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9999;
    background: #fff;
    -webkit-box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.18);
    box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.18);
    padding-bottom: constant(safe-area-inset-bottom);
    padding-bottom: env(safe-area-inset-bottom);
  }

  .fixedCta a {
    -webkit-box-flex: 1;
    -ms-flex: 1 1 33.3333%;
    flex: 1 1 33.3333%;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    min-width: 0;
    padding: 9px 4px 8px;
    color: #fff;
    text-align: center;
    text-decoration: none;
    line-height: 1.25;
    border-right: 1px solid rgba(255, 255, 255, 0.35);
  }

  .fixedCta a:last-child {
    border-right: 0;
  }

  .fixedCta .fixedCtaTel {
    background: #002378;
  }

  .fixedCta .fixedCtaWeb {
    background: #f89220;
  }

  .fixedCta .fixedCtaLine {
    background: #06c755;
  }

  .fixedCta .fixedCtaIcon {
    display: block;
    font-size: 19px;
    line-height: 1.1;
    margin-bottom: 3px;
  }

  .fixedCta .fixedCtaLabel {
    display: block;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.02em;
  }

  .fixedCta .fixedCtaSub {
    display: block;
    font-size: 10px;
    opacity: 0.9;
    margin-top: 1px;
  }

  /* 固定バーがフッターや最下部コンテンツに重ならないようにする */
  body {
    padding-bottom: 62px;
  }

  /* ハンバーガーメニューを開いている間は、固定バーがメニュー最下段を隠さないよう退避 */
  .navToggle.active ~ .fixedCta {
    display: none;
  }

  #footerDesc .innerRight .innerRight_footerDesc .innerRight_footerDescLeft {
    width: max-content;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
  }

  #footerDesc .innerRight .innerRight_footerDesc .innerRight_footerDescLeft h2 {
    display: block;
    box-sizing: border-box;
    width: 0;
    min-width: 100%;
    margin-left: auto;
    margin-right: auto;
    padding-bottom: 2px;
    white-space: nowrap;
  }

  #footerDesc .innerRight .innerRight_footerDesc .innerRight_footerDescLeft .tel {
    display: block;
    width: max-content;
    max-width: none;
    margin: 6px auto 0;
    padding-top: 4px;
    padding-bottom: 4px;
    font-size: 28px;
    white-space: nowrap;
  }

  /* 料金一覧はスマホでは1列 */
  #priceList {
    padding: 40px 0 30px;
  }

  #priceList h2 {
    font-size: 32px;
  }

  #priceList .priceCard {
    width: 100%;
  }

  .menuCta .menuCtaBtns a {
    min-width: 0;
    -webkit-box-flex: 1;
    -ms-flex: 1 1 100%;
    flex: 1 1 100%;
    font-size: 18px;
    padding: 15px 10px;
  }
}

@media screen and (max-width: 991px) {
  #question .questionLead {
    font-size: 15px;
    margin-bottom: 28px;
    text-align: left;
  }

  #question .questionCat {
    font-size: 19px;
    margin: 36px 0 14px;
    padding-left: 10px;
    border-left-width: 4px;
  }

  #question .questionInner p .questionML {
    font-size: 15px;
    padding-left: 32px;
  }
}

@media screen and (max-width: 575px) {
  #priceList .priceCardInner {
    padding: 16px 15px 14px;
  }

  #priceList .priceCard h3 {
    font-size: 17px;
  }

  .fixedCta .fixedCtaLabel {
    font-size: 12px;
  }
}

/* ==========================================================================
   フッター：電話番号とWEB予約ボタン
   文言が長くなり float で電話番号に重なっていたため、横並び＋余白に変更
   ========================================================================== */

#footerDesc .innerRight .holiday {
  font-size: 16px;
  font-weight: 600;
  color: #002378;
  margin: 12px 0 0;
  line-height: 1.6;
}

#slideL .holiday {
  clear: both;
  font-size: 13px;
  font-weight: 600;
  color: #002378;
  margin: 10px 0 0;
}

@media screen and (min-width: 992px) {
  #footerDesc .innerRight .innerRight_footerDesc {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 16px 20px;
    margin-top: 40px;
  }

  #footerDesc .innerRight .innerRight_footerDesc .innerRight_footerDescLeft {
    float: none;
    margin-top: 0;
    flex: 0 0 auto;
    width: max-content;
    max-width: 100%;
  }

  #footerDesc .innerRight .innerRight_footerDesc .innerRight_footerDescLeft h2 {
    display: block;
    box-sizing: border-box;
    width: 0;
    min-width: 100%;
    max-width: none;
    padding-bottom: 8px;
    white-space: nowrap;
  }

  #footerDesc .innerRight .innerRight_footerDesc .innerRight_footerDescLeft .tel {
    display: block;
    box-sizing: content-box;
    width: max-content;
    max-width: none;
    margin-top: 6px;
    padding-top: 4px;
    padding-bottom: 6px;
    font-size: 38px;
    letter-spacing: 0;
    white-space: nowrap;
    word-break: keep-all;
  }

  #footerDesc .innerRight .innerRight_footerDesc .innerRight_footerDescRight {
    float: none;
    flex: 0 0 auto;
  }

  #footerDesc .innerRight .innerRight_footerDesc .innerRight_footerDescRight .reservation {
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: 248px;
    max-width: none;
    margin-top: 0;
    padding: 18px 12px;
    font-size: 18px;
    line-height: 1.45;
    text-align: center;
    white-space: normal;
  }
}

/* ==========================================================================
   プライバシーポリシー（モーダル）
   ========================================================================== */

footer .footerPrivacy {
  display: inline-block;
  margin-left: 1.4em;
  font-size: 16px;
  font-weight: 600;
  color: #002378;
  text-decoration: underline;
}

footer .footerPrivacy:hover,
footer .footerPrivacy:focus {
  color: #f89220;
}

body.privacyModal-open {
  overflow: hidden;
}

.privacyModal[hidden] {
  display: none;
}

.privacyModal.is-open {
  display: block;
  position: fixed;
  inset: 0;
  z-index: 10050;
}

.privacyModal__overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 35, 120, 0.45);
}

.privacyModal__dialog {
  position: relative;
  z-index: 1;
  box-sizing: border-box;
  width: min(760px, calc(100% - 32px));
  max-height: min(86vh, 820px);
  margin: 7vh auto 0;
  overflow: hidden;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 12px 40px rgba(0, 35, 120, 0.22);
  outline: none;
}

.privacyModal__close {
  position: absolute;
  top: 10px;
  right: 12px;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  background: transparent;
  color: #002378;
  font-size: 32px;
  line-height: 1;
  cursor: pointer;
}

.privacyModal__close:hover,
.privacyModal__close:focus {
  color: #f89220;
}

.privacyModal__body {
  box-sizing: border-box;
  max-height: min(86vh, 820px);
  overflow: auto;
  padding: 36px 40px 40px;
  color: #333;
  font-size: 15px;
  line-height: 1.85;
  -webkit-overflow-scrolling: touch;
}

.privacyModal__body h2 {
  margin: 0 40px 16px 0;
  color: #002378;
  font-size: 26px;
  font-weight: 700;
  letter-spacing: 0.06em;
}

.privacyModal__lead {
  margin: 0 0 22px;
}

.privacyModal__body h3 {
  margin: 22px 0 8px;
  color: #002378;
  font-size: 17px;
  font-weight: 700;
}

.privacyModal__body p,
.privacyModal__body ul {
  margin: 0 0 10px;
}

.privacyModal__body ul {
  padding-left: 1.4em;
}

.privacyModal__body li {
  margin: 0 0 4px;
}

.privacyModal__body a {
  color: #002378;
  text-decoration: underline;
}

.privacyModal__date {
  margin-top: 24px;
  color: #666;
  font-size: 13px;
}

@media screen and (max-width: 991px) {
  footer .footerPrivacy {
    display: block;
    margin: 12px 0 0;
    font-size: 13px;
  }

  .privacyModal__dialog,
  .privacyModal__body {
    max-height: 88vh;
  }

  .privacyModal__dialog {
    margin-top: 6vh;
  }

  .privacyModal__body {
    padding: 32px 20px 28px;
    font-size: 14px;
  }

  .privacyModal__body h2 {
    font-size: 21px;
  }
}

/* ------------------------------------------------------------
   施術2：首肩集中整体&肩甲骨はがしコース
   お悩みのチェック欄と「施術の流れ」（STEP表示）。
   色は施術エリアの紺（#002378）・茶（#42210b）・クリーム（#fbf6e0）に合わせています。
------------------------------------------------------------ */
#sejutu .kataWorry {
  margin: 0 0 24px;
  background: #fbf6e0;
}

#sejutu .kataWorry ul li {
  font-size: 22px;
  line-height: 1.6;
  padding-top: 6px;
  padding-bottom: 6px;
}

#sejutu .kataWorryLead {
  color: #002378;
  font-size: 26px;
  font-weight: 600;
  text-align: center;
  padding-bottom: 24px;
}

#sejutu .sejutuFlow {
  margin: 50px 0 60px;
  padding: 0;
  list-style: none;
}

#sejutu .sejutuFlow li {
  position: relative;
  display: flex;
  border: 2px solid #002378;
  background: #fff;
}

/* STEP 同士をつなぐ下向きの矢印 */
#sejutu .sejutuFlow li + li {
  margin-top: 40px;
}

#sejutu .sejutuFlow li + li::before {
  content: "";
  position: absolute;
  top: -32px;
  left: 50%;
  margin-left: -18px;
  border-top: 18px solid #002378;
  border-left: 18px solid transparent;
  border-right: 18px solid transparent;
}

#sejutu .sejutuFlowStep {
  flex: 0 0 120px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: #002378;
  color: #fff;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.1em;
  line-height: 1.2;
}

#sejutu .sejutuFlowStep span {
  font-size: 44px;
  letter-spacing: 0;
}

#sejutu .sejutuFlowBody {
  flex: 1;
  padding: 22px 28px;
}

#sejutu .sejutuFlowBody h4 {
  color: #002378;
  font-size: 26px;
  font-weight: 600;
  line-height: 1.4;
  margin-bottom: 10px;
}

#sejutu .sejutuFlowBody p {
  font-size: 18px;
  line-height: 1.8;
}

/* 名物の肩甲骨はがしを目立たせる */
#sejutu .sejutuFlow li.isMain {
  border-color: #42210b;
  background: #fbf6e0;
}

#sejutu .sejutuFlow li.isMain .sejutuFlowStep {
  background: #42210b;
}

#sejutu .sejutuFlowBadge {
  display: inline-block;
  margin-right: 8px;
  padding: 4px 10px;
  background: #42210b;
  color: #fff;
  font-size: 15px;
  line-height: 1.3;
  vertical-align: middle;
  border-radius: 3px;
}

@media screen and (max-width: 991px) {
  #sejutu .kataWorry ul li {
    font-size: 16px;
  }

  #sejutu .kataWorryLead {
    font-size: 19px;
    padding-bottom: 16px;
  }

  #sejutu .sejutuFlow {
    margin: 30px 0 40px;
  }

  #sejutu .sejutuFlow li {
    flex-direction: column;
  }

  #sejutu .sejutuFlow li + li {
    margin-top: 32px;
  }

  #sejutu .sejutuFlow li + li::before {
    top: -26px;
    margin-left: -14px;
    border-top-width: 14px;
    border-left-width: 14px;
    border-right-width: 14px;
  }

  #sejutu .sejutuFlowStep {
    flex: none;
    flex-direction: row;
    align-items: baseline;
    gap: 6px;
    padding: 8px 0;
    font-size: 14px;
  }

  #sejutu .sejutuFlowStep span {
    font-size: 24px;
  }

  #sejutu .sejutuFlowBody {
    padding: 14px 16px 16px;
  }

  #sejutu .sejutuFlowBody h4 {
    font-size: 18px;
    margin-bottom: 8px;
  }

  #sejutu .sejutuFlowBody p {
    font-size: 15px;
    line-height: 1.7;
  }

  #sejutu .sejutuFlowBadge {
    display: table;
    margin: 0 0 6px;
    font-size: 12px;
  }
}

/* 施術の流れ：STEP に添える写真（PCは右側、スマホは本文の下） */
#sejutu .sejutuFlowImg {
  flex: 0 0 300px;
  padding: 16px 16px 16px 0;
}

#sejutu .sejutuFlowImg img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 180px;
  object-fit: cover;
}

@media screen and (max-width: 991px) {
  #sejutu .sejutuFlowImg {
    flex: none;
    padding: 0 16px 16px;
  }

  #sejutu .sejutuFlowImg img {
    height: auto;
    min-height: 0;
    aspect-ratio: 4 / 3;
  }
}