@charset "utf-8";
/* ==========================================================================
   SSS整骨院 提案用オーバーライド
   style.css のあとに読み込む。既存テンプレートは触らず、ここだけで上書きする。
   ベース配色は style.css / _setting.scss 側で置換済み:
     アクセント(旧グリーン) #2cac8f -> #e8b400
     罫線・サブ(旧ブラウン)  #7e6b5a -> #7a838c
     本文カラー            #362e2b -> #4a4a4a
     背景                 #f6f1ea -> #f5f6f7
   ========================================================================== */

:root {
  --sss-accent: #e8b400;      /* イエロー（面・ボタン用） */
  --sss-accent-txt: #a67c00;  /* イエロー（文字用・可読性確保のため濃いゴールド） */
  --sss-ink: #4a4a4a;         /* 本文 */
  --sss-ink-strong: #3d3d3d;  /* 見出し・イエロー面の上の文字 */
  --sss-gray: #7a838c;        /* サブテキスト・罫線 */
  --sss-bg: #f5f6f7;          /* ページ背景（極薄ライトグレー） */
}


/* --------------------------------------------------------------------------
   1. イエロー面の上の文字を濃色に（白抜きだと可読性が出ないため）
   -------------------------------------------------------------------------- */

#top .top__sec02 > h2 > a,
#lower .about__sec02 > h3 > a,
#lower .about__sec01 > h3 > a,
#lower .access__sec03 > h3 > a,
#lower .access__sec02 > h3 > a,
#lower .access__sec01 > h3 > a,
#lower .recruit__sec02 > h3 > a,
#lower .recruit__sec01 > h3 > a,
#lower .detail__sec01 > h3 > a,
#lower .blog__sec01 > h3 > a,
#lower .syoujyo__sec02 > h3 > a,
#lower .syoujyo__sec01 > h3 > a,
#lower .question__sec01 > h3 > a,
#lower .oushin__sec02 > h3 > a,
#lower .oushin__sec01 > h3 > a,
#lower .sejyutu__sec03 > h3 > a,
#lower .sejyutu__sec02 > h3 > a,
#lower .sejyutu__sec01 > h3 > a,
#lower .staff__sec01 > h3 > a,
#top .top__sec03 > div > a,
#lower .question__sec01 > div > a,
#lower .recruit__sec01 > div > a,
#lower .recruit__sec02 > div > a,
#lower .about__nav > a,
.header > div > dl > dd > ul > li:last-child > a,
main > dl > dd > p {
  color: var(--sss-ink-strong);
}

/* イエローの文字は濃いゴールドへ（薄い黄色の文字は読めないため） */
#top .top__sec02 > h3 > span,
#lower .staff__sec01 > div > h5 > span:last-child,
#lower .detail__sec01 > div > p {
  color: var(--sss-accent-txt);
}


/* --------------------------------------------------------------------------
   2. アイコン類をイエロー／グレーに差し替え（元は緑・茶のwebp画像）
   -------------------------------------------------------------------------- */

/* 見出しの丸アイコン */
#top .top__sec02 > h2:before,
#lower .about__sec02 > h3:before,
#lower .about__sec01 > h3:before,
#lower .access__sec03 > h3:before,
#lower .access__sec02 > h3:before,
#lower .access__sec01 > h3:before,
#lower .recruit__sec02 > h3:before,
#lower .recruit__sec01 > h3:before,
#lower .detail__sec01 > h3:before,
#lower .blog__sec01 > h3:before,
#lower .syoujyo__sec02 > h3:before,
#lower .syoujyo__sec01 > h3:before,
#lower .question__sec01 > h3:before,
#lower .oushin__sec02 > h3:before,
#lower .oushin__sec01 > h3:before,
#lower .sejyutu__sec03 > h3:before,
#lower .sejyutu__sec02 > h3:before,
#lower .sejyutu__sec01 > h3:before,
#lower .staff__sec01 > h3:before,
main > dl > dd .side > ul > li > a:before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cdefs%3E%3Cmask id='m'%3E%3Crect width='100' height='100' fill='white'/%3E%3Ccircle cx='76' cy='24' r='19' fill='black'/%3E%3C/mask%3E%3C/defs%3E%3Ccircle cx='46' cy='54' r='43' fill='%23e8b400' mask='url(%23m)'/%3E%3C/svg%3E");
}

/* サイドメニューの矢印（イエロー） */
main > dl > dd > ul > li:before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M1 0 L9 5 L1 10 Z' fill='%23e8b400'/%3E%3C/svg%3E");
}

/* 症状リストの矢印（グレー） */
main > dl > dd .side > div > ul > li:before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M1 0 L9 5 L1 10 Z' fill='%237a838c'/%3E%3C/svg%3E");
}

/* グローバルナビの区切り（グレーのドット） */
.header > div > ul > li:after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 20'%3E%3Cg fill='%237a838c'%3E%3Ccircle cx='3' cy='17' r='1.5'/%3E%3Ccircle cx='5.6' cy='13.6' r='1.6'/%3E%3Ccircle cx='8.2' cy='10.2' r='1.7'/%3E%3Ccircle cx='10.8' cy='6.8' r='1.8'/%3E%3Ccircle cx='13.4' cy='3.4' r='1.9'/%3E%3C/g%3E%3C/svg%3E");
}


/* --------------------------------------------------------------------------
   3. ヘッダー：ロゴ・電話番号（画像 -> テキスト化）
   -------------------------------------------------------------------------- */

.header {
  background-color: #fff;
  border-bottom: 1px solid #e6e8ea;
  /* 追従ヘッダー: スクロールしても上部に固定し、電話・WEB予約に常にアクセスできるように */
  position: sticky;
  top: 0;
  z-index: 1000;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .06);
}

.header > div > dl > dt > a > img {
  display: block;
}

.header__info {
  text-align: right;
}

.header > div > dl > dd > ul > li:first-child > span.header__hours {
  color: var(--sss-gray);
  letter-spacing: .02em;
}

.header > div > dl > dd > ul > li:first-child > span.header__note {
  margin-top: 4px;
  color: var(--sss-gray);
  font-size: 11px;
  font-size: 1.1rem;
  line-height: 1;
}

/* 電話番号（ヘッダー／フッター共通） */
.sss-tel {
  display: inline-flex;
  align-items: center;
  margin-top: 6px;
  text-decoration: none;
  color: var(--sss-ink-strong);
  line-height: 1;
}

.sss-tel__icon {
  width: 27px;
  height: 27px;
  flex: none;
  fill: var(--sss-accent);
  margin-right: 7px;
}

.sss-tel__num {
  font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", sans-serif;
  font-size: 32px;
  font-size: 3.2rem;
  font-weight: bold;
  line-height: 1;
  letter-spacing: .01em;
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.sss-tel--footer .sss-tel__icon {
  width: 23px;
  height: 23px;
}

.sss-tel--footer .sss-tel__num {
  font-size: 27px;
  font-size: 2.7rem;
}

/* WEB予約ボタン */
.header > div > dl > dd > ul > li:last-child > a {
  box-shadow: 0 4px 10px rgba(232, 180, 0, .35);
}


/* --------------------------------------------------------------------------
   4. メインビジュアル：キャッチコピーをHTMLテキストで重ねる
   -------------------------------------------------------------------------- */

.mainvis {
  position: relative;
  overflow: hidden;
}

.mainvis__img {
  display: block;
  width: 1200px;
  max-width: 100%;
  height: auto;
  margin: 0 auto;
}

/* --- MV下スライダー（参考: hmscrown.com 610px枠・590px画像のセンター表示） --- */
.topslider {
  position: relative;
  overflow: hidden;
  margin-top: 20px;
  margin-bottom: 40px;
}

.topslider__slick .slick-list li {
  width: 610px;
  text-align: center;
}

.topslider__slick .slick-list li img {
  display: block;
  margin: 0 auto;
  width: 590px;
  max-width: 100%;
  height: auto;
}

.topslider .slick-dots {
  position: static;
  margin-top: 12px;
}

.topslider .slick-dots li {
  width: 10px;
  height: 10px;
  margin: 0 5px;
}

.topslider .slick-dots li button {
  width: 10px;
  height: 10px;
}

.topslider .slick-dots li button:before {
  width: 10px;
  height: 10px;
  opacity: 1;
  background-color: #ccc;
  border-radius: 50%;
  color: transparent;
}

.topslider .slick-dots li.slick-active button:before {
  background-color: #7a838c;
}

.mainvis__copy {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 1200px;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-left: 60px;
  box-sizing: border-box;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(90deg,
              rgba(255, 255, 255, .93) 0%,
              rgba(255, 255, 255, .88) 38%,
              rgba(255, 255, 255, .55) 58%,
              rgba(255, 255, 255, 0) 74%);
}

.mainvis__label {
  display: inline-block;
  align-self: flex-start;
  background-color: var(--sss-accent);
  color: var(--sss-ink-strong);
  font-weight: bold;
  font-size: 13px;
  font-size: 1.3rem;
  line-height: 1;
  padding: 8px 18px;
  border-radius: 15px;
  letter-spacing: .04em;
}

.mainvis__copy h2 {
  margin-top: 20px;
  font-family: 游明朝, "Yu Mincho", YuMincho, "Hiragino Mincho ProN", "Hiragino Mincho Pro", HGS明朝E, メイリオ, Meiryo, serif;
  font-weight: bold;
  font-size: 44px;
  font-size: 4.4rem;
  line-height: 1.42;
  color: var(--sss-ink-strong);
}

.mainvis__lead {
  margin-top: 18px;
  font-size: 17px;
  font-size: 1.7rem;
  line-height: 1.6;
  color: var(--sss-ink);
  padding-left: 14px;
  border-left: 4px solid var(--sss-accent);
}


/* --------------------------------------------------------------------------
   5. コンセプト（旧 pic01.webp の1枚画像をHTML化）
   -------------------------------------------------------------------------- */

.sss-concept {
  background-color: #fff;
  border-top: 5px solid var(--sss-accent);
  padding: 32px 34px 30px;
  box-sizing: border-box;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .05);
}

/* style.css の main>dl>dt>section:first-child{padding-top:0} に
   上書きされるため、上余白は inner 側で確保する */
.sss-concept__inner {
  padding-top: 32px;
}


/* --------------------------------------------------------------------------
   施術メニュー（sejyutu.php）の余白調整
   ・ブロック下の padding 45px → 25px
   ・テキスト列675px＋写真165pxで内側840pxちょうど＝隙間0だったため
     テキスト列を645pxに縮めて写真との間に30px確保
   -------------------------------------------------------------------------- */

#lower .sejyutu__sec01 > div {
  padding: 20px;
}

#lower .sejyutu__sec01 > div > dl > dt {
  width: 645px;
}

/* 施術名ラベル（旧: a タグの丸ボタン → リンク廃止で span 化。
   style.css の li>a 用スタイルと同じ見た目を span に適用・文字は小さめ。
   症状・施術下層ページの「施術方法」リストも同デザイン） */
#lower .syoujyo__sec02 > div > ul > li > span,
#lower .sejyutu__sec01 > div > dl > dt > ul > li > span {
  display: inline-block;
  vertical-align: top;
  font-size: 13px;
  font-size: 1.3rem;
  line-height: 1;
  color: #fff;
  background-color: #7a838c;
  border-radius: 15px;
  padding: 8px 16px;
  box-sizing: border-box;
  box-shadow: 0px 5px 10px #ccc;
}

/* 施術メニューの注意書き（小さめ・控えめ）: 一覧の末尾＋下層の施術方法の下 */
#lower .sejyutu__sec01 > p.sss-menunote,
#lower .syoujyo__sec02 > div > p.sss-menunote {
  margin-top: 15px;
  font-size: 12px;
  font-size: 1.2rem;
  line-height: 1.6;
  color: var(--sss-gray);
}

/* 「施術内容」ラベルとボタン群のグループ化
   ・説明文とラベルの間は広めに区切る（5px→18px）
   ・ラベルとボタン群の間は詰める（25px→10px） */
#lower .sejyutu__sec01 > div > dl > dt > p {
  margin-top: 18px;
}

#lower .sejyutu__sec01 > div > dl > dt > ul {
  margin-top: 0;
}

#lower .sejyutu__sec01 > div > dl > dt > ul > li {
  margin-top: 7px;
}

/* 施術内容ボタン群の下の「詳しく見る」（左詰め）
   ※style.css の #lower .sejyutu__sec01>div>dl>dt>p{margin-top:5px} に
   負けないよう詳細度を上げている */
#lower .sejyutu__sec01 > div > dl > dt > p.sss-more {
  margin-top: 15px;
}

/* 記事リスト等の下・右端に置く一覧リンク */
.sss-more--right {
  margin-top: 14px;
  text-align: right;
}

/* 「詳しく見る」リンク（テキスト＋黄色の丸矢印） */
.sss-morelink {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  font-size: 13px;
  font-size: 1.3rem;
  font-weight: bold;
  line-height: 1;
  color: var(--sss-accent-txt);
}

.sss-morelink::after {
  content: "";
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: var(--sss-accent);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M8 5.5 L13 10 L8 14.5' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-size: 100% 100%;
  transition: transform .15s ease;
}

.sss-morelink:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.sss-morelink:hover::after {
  transform: translateX(4px);
}

/* 施術メニュー下層ページ: 料金のご案内（ホットペッパー掲載メニューの列挙） */
#lower .syoujyo__sec02 > div > h5 {
  margin-top: 15px;
  font-size: 15px;
  font-size: 1.5rem;
  line-height: 2;
  font-weight: normal;
}

#lower .syoujyo__sec02 > div > h5 a {
  font-size: inherit;
  color: var(--sss-accent-txt);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* 予約CTAボックス（初めての方へ等）: スマホイラスト＋LINEボタン */
.sss-reserve {
  position: relative;
  overflow: hidden;
  border: 2px solid #06C755;
  border-radius: 18px;
  background: linear-gradient(135deg, #f2fcf6 0%, #e3f8ea 100%);
  box-shadow: 0 8px 24px rgba(6, 199, 85, .14);
  padding: 26px 30px 30px;
  margin-top: 28px;
  text-align: center;
}

/* 背景の装飾円（左下・右上にうっすら） */
.sss-reserve::before,
.sss-reserve::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  background-color: rgba(6, 199, 85, .07);
  pointer-events: none;
}

.sss-reserve::before {
  width: 180px;
  height: 180px;
  top: -90px;
  right: -50px;
}

.sss-reserve::after {
  width: 140px;
  height: 140px;
  bottom: -70px;
  left: -40px;
}

.sss-reserve__title {
  font-size: 22px;
  font-size: 2.2rem;
  font-weight: bold;
  color: #1f8a45;
  line-height: 1.5;
  letter-spacing: .05em;
  position: relative;
}

.sss-reserve__body {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 32px;
  margin-top: 16px;
  position: relative;
}

.sss-reserve__illust {
  width: 100px;
  height: auto;
  flex-shrink: 0;
}

.sss-reserve__actions {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.sss-reserve__label {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 15px;
  font-size: 1.5rem;
  font-weight: bold;
  line-height: 1.5;
  color: #3a4149;
}

.sss-reserve__label > img {
  display: block;
  border-radius: 6px;
}

.sss-reserve__line {
  display: inline-block;
  margin-top: 12px;
  background: linear-gradient(180deg, #2ed673 0%, #06C755 100%);
  color: #fff;
  font-weight: bold;
  font-size: 19px;
  font-size: 1.9rem;
  line-height: 1.5;
  padding: 15px 46px;
  border-radius: 40px;
  box-shadow: 0 5px 14px rgba(6, 199, 85, .4);
  transition: transform .15s ease, box-shadow .15s ease;
}

.sss-reserve__line:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 18px rgba(6, 199, 85, .5);
}

.sss-reserve__note {
  margin-top: 12px;
  font-size: 13px;
  font-size: 1.3rem;
  line-height: 1.7;
  color: #555;
}

.sss-reserve__telline {
  margin-top: 6px;
  font-size: 13px;
  font-size: 1.3rem;
  line-height: 1.7;
  color: #555;
}

.sss-reserve__tel {
  font-size: 18px;
  font-size: 1.8rem;
  font-weight: bold;
  color: #1f8a45;
  vertical-align: middle;
}


/* 初めての方へ: セクション内ボタン
   style.css の .about__nav は margin-top:90px（ページ末尾用）なので
   セクション内で使う場合は余白を詰める。LINEボタンはLINEブランド色 */
#lower .about__nav--inline {
  margin-top: 25px;
}

/* セクション内ボタンは固定幅220pxを解除し、文字に合わせて1行表示 */
#lower .about__nav--inline > a {
  width: auto;
  white-space: nowrap;
  padding-left: 34px;
  padding-right: 34px;
}

#lower .about__nav > a.about__nav--line {
  background-color: #06C755;
}

/* 当院ご案内: 治療院の概要の写真2枚を縦並びに（2枚目の上に余白） */
.access-gaiyou__img02 {
  display: block;
  margin-top: 15px;
}

/* 注記段落内のテキストリンク（ホットペッパー・交通事故ページ等）
   本文と同じ文字サイズにし、リンクと分かるよう下線＋アクセント色 */
#lower .sejyutu__sec01 > p a {
  font-size: inherit;
  color: var(--sss-accent-txt);
  text-decoration: underline;
  text-underline-offset: 3px;
}

#lower .sejyutu__sec01 > p a:hover {
  opacity: .7;
}

.sss-concept__label {
  font-size: 12px;
  font-size: 1.2rem;
  line-height: 1;
  font-weight: bold;
  letter-spacing: .24em;
  color: var(--sss-accent-txt);
}

.sss-concept__title {
  margin-top: 12px;
  font-family: 游明朝, "Yu Mincho", YuMincho, "Hiragino Mincho ProN", "Hiragino Mincho Pro", HGS明朝E, メイリオ, Meiryo, serif;
  font-weight: bold;
  font-size: 29px;
  font-size: 2.9rem;
  line-height: 1.5;
  color: var(--sss-ink-strong);
}

.sss-concept__lead {
  margin-top: 16px;
  font-size: 15px;
  font-size: 1.5rem;
  line-height: 2;
  color: var(--sss-ink);
}

/* --- 院長あいさつ（本文＋顔写真） --- */
.sss-concept__body {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-top: 20px;
}

.sss-concept__txt {
  width: 510px;
}

.sss-concept__txt > p {
  margin-top: 13px;
  font-size: 15px;
  font-size: 1.5rem;
  line-height: 1.95;
  color: var(--sss-ink);
}

.sss-concept__txt > p:first-child {
  margin-top: 0;
  font-weight: bold;
  color: var(--sss-ink-strong);
}

.sss-concept__sign {
  margin-top: 20px !important;
  text-align: right;
  color: var(--sss-gray) !important;
}

.sss-concept__sign > strong {
  font-size: 18px;
  font-size: 1.8rem;
  font-weight: bold;
  color: var(--sss-ink-strong);
}

.sss-concept__photo {
  width: 270px;
  flex: none;
}

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

.sss-concept__photo > span {
  display: block;
  margin-top: 9px;
  text-align: center;
  font-size: 13px;
  font-size: 1.3rem;
  line-height: 1;
  font-weight: bold;
  color: var(--sss-ink-strong);
  border-top: 2px solid var(--sss-accent);
  padding-top: 9px;
}

/* --- プロフィール表 --- */
.sss-concept__profile {
  display: flex;
  flex-wrap: wrap;
  margin-top: 26px;
  border: 1px solid #e6e8ea;
  border-radius: 6px;
  overflow: hidden;
  background-color: #fff;
}

.sss-concept__profile > dt,
.sss-concept__profile > dd {
  font-size: 14px;
  font-size: 1.4rem;
  line-height: 1.6;
  padding: 12px 16px;
  border-bottom: 1px solid #e6e8ea;
  box-sizing: border-box;
}

.sss-concept__profile > dt {
  width: 24%;
  background-color: #f5f6f7;
  font-weight: bold;
  color: var(--sss-ink-strong);
}

.sss-concept__profile > dd {
  width: 76%;
  color: var(--sss-ink);
}

.sss-concept__profile > dt:nth-last-of-type(1),
.sss-concept__profile > dd:nth-last-of-type(1) {
  border-bottom: none;
}

.sss-concept__pics {
  display: flex;
  justify-content: space-between;
  margin-top: 26px;
}

.sss-concept__pics > li {
  width: 32%;
}

.sss-concept__pics > li > img {
  display: block;
  width: 100%;
  height: auto;
}

.sss-concept__pics > li > span {
  display: block;
  margin-top: 9px;
  text-align: center;
  font-size: 12px;
  font-size: 1.2rem;
  line-height: 1;
  color: var(--sss-gray);
}


/* --------------------------------------------------------------------------
   6. バナー・帯の写真差し替え（旧 bnr07.webp）
   -------------------------------------------------------------------------- */

#top .top__sec03 > div {
  background-image:
    linear-gradient(90deg,
      rgba(255, 255, 255, .90) 0%,
      rgba(255, 255, 255, .78) 50%,
      rgba(255, 255, 255, .42) 100%),
    url(/assets/img/sss/band01.jpg);
  background-size: 100% 100%, auto 100%;
  background-position: top center, top center;
  background-repeat: no-repeat, no-repeat;
}

/* バナータイルの白ベール: a の背景を白にし、写真側を半透明にする（疑似要素方式は描画されなかったため） */
#top .top__sec03 > ul > li > a {
  background-color: #fff;
}

#top .top__sec03 > ul > li > a > img {
  opacity: .55;
}

/* 下層ページのページヘッダー（旧 main.webp は北療のロゴ透かし入りのため差し替え） */
#lower .mainvis {
  background-image:
    linear-gradient(90deg,
      rgba(255, 255, 255, .55) 0%,
      rgba(255, 255, 255, .30) 40%,
      rgba(255, 255, 255, .30) 60%,
      rgba(255, 255, 255, .55) 100%),
    url(/assets/img/sss/pagehead.jpg);
  background-size: 100% 100%, cover;
  background-position: top center, center center;
  background-repeat: no-repeat, no-repeat;
}

/* ページタイトルは写真の上に出るので、白フチで抜けを確保 */
#lower .mainvis > h2 {
  color: #3d3d3d;
  text-shadow: 0 0 12px rgba(255, 255, 255, .95), 0 0 24px rgba(255, 255, 255, .9), 0 1px 2px rgba(255, 255, 255, .9);
}

#lower .mainvis__bread > ul > li,
#lower .mainvis__bread > ul > li > a {
  color: #3d3d3d;
  text-shadow: 0 0 10px rgba(255, 255, 255, .95), 0 0 18px rgba(255, 255, 255, .9);
}

/* 院内写真が白基調で眠くなりがちなので、わずかに締める */
#top .top__sec03 > ul > li > a > img,
.sss-concept__pics > li > img {
  filter: saturate(1.06) contrast(1.06);
}

#top .top__sec03 > ul > li > a > h5 {
  z-index: 1;
}


/* --------------------------------------------------------------------------
   7. 2カラムの左右入れ替え
      main > dl は dt（本文880px）と dd（サイド290px）の2カラム。
      HTMLの並び順は触らず、表示順だけを反転して
      「サイドメニュー = 左 ／ コンテンツ = 右」にする。
      ※SP（737px以下）は dd が display:none のため影響なし
   -------------------------------------------------------------------------- */

@media screen and (min-width: 738px) {
  main > dl {
    flex-direction: row-reverse;
  }
}


/* --------------------------------------------------------------------------
   8. サイドメニュー（菅原整骨院 https://sugawaraseikotu.com/ の #side を参考）
      ・単独リンク  = 白地＋アクセント枠のボタン（.sss-side__link）
      ・カテゴリ    = アクセント色の見出し帯＋薄グレーのリスト（.sss-side__nav）
      配色だけSSSのイエロー／グレーに置き換えている。
   -------------------------------------------------------------------------- */

.sss-side {
  font-family: 'Noto Sans Japanese', 'メイリオ', Meiryo, 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', sans-serif;
}

/* --- バナー --- */
.sss-side__bnr {
  margin-bottom: 14px;
}

.sss-side__bnr > li {
  margin-bottom: 10px;
}

.sss-side__bnr > li > a {
  display: block;
}

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

/* --- 単独リンクボタン --- */
.sss-side__link {
  margin-bottom: 8px;
}

.sss-side__link > a {
  display: block;
  position: relative;
  font-size: 16px;
  font-size: 1.6rem;
  line-height: 1.4;
  font-weight: bold;
  color: var(--sss-ink-strong);
  text-align: center;
  text-decoration: none;
  padding: 15px 30px 15px 34px;
  border: 2px solid var(--sss-accent);
  border-radius: 6px;
  background-color: #fff;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cdefs%3E%3Cmask id='m'%3E%3Crect width='100' height='100' fill='white'/%3E%3Ccircle cx='76' cy='24' r='19' fill='black'/%3E%3C/mask%3E%3C/defs%3E%3Ccircle cx='46' cy='54' r='43' fill='%23e8b400' mask='url(%23m)'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: 14px center;
  background-size: 17px 17px;
  transition: background-color .2s, border-color .2s;
}

.sss-side__link > a:hover {
  background-color: #fffaea;
  border-color: #d3a400;
  opacity: 1;
}

/* --- カテゴリ別ナビ --- */
.sss-side__nav {
  margin-top: 18px;
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .07);
}

.sss-side__nav > h2 {
  background-color: var(--sss-accent);
  color: var(--sss-ink-strong);
  font-size: 16px;
  font-size: 1.6rem;
  line-height: 1.4;
  font-weight: bold;
  padding: 13px 16px;
}

.sss-side__nav > ul {
  background-color: #fafafa;
  border: 1px solid #e6e8ea;
  border-top: none;
  border-radius: 0 0 6px 6px;
}

.sss-side__nav > ul > li {
  border-bottom: 1px dotted #c3c8cd;
}

.sss-side__nav > ul > li:last-child {
  border-bottom: none;
}

.sss-side__nav > ul > li > a {
  display: block;
  position: relative;
  font-size: 14px;
  font-size: 1.4rem;
  line-height: 1.5;
  color: var(--sss-ink);
  text-decoration: none;
  padding: 12px 14px 12px 28px;
  transition: background-color .2s, color .2s;
}

.sss-side__nav > ul > li > a:before {
  content: "";
  position: absolute;
  top: 17px;
  left: 13px;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 4px 0 4px 6px;
  border-color: transparent transparent transparent var(--sss-accent);
}

.sss-side__nav > ul > li > a:hover {
  background-color: #fffaea;
  color: var(--sss-accent-txt);
  opacity: 1;
}

/* --- 下層ページの「ページ内メニュー」もカテゴリナビと同じ見た目に揃える --- */
main > dl > dd > p {
  background-color: var(--sss-accent);
  color: var(--sss-ink-strong);
  font-weight: bold;
  font-size: 16px;
  font-size: 1.6rem;
  line-height: 1.4;
  padding: 13px 16px;
  border-radius: 6px 6px 0 0;
}

main > dl > dd > ul {
  background-color: #fafafa;
  border: 1px solid #e6e8ea;
  border-top: none;
  border-radius: 0 0 6px 6px;
  padding: 0;
  margin-top: 0;
  margin-bottom: 18px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .07);
}

main > dl > dd > ul > li {
  margin-top: 0;
  border-bottom: 1px dotted #c3c8cd;
}

main > dl > dd > ul > li:last-child {
  border-bottom: none;
}

main > dl > dd > ul > li:before {
  display: none;
}

main > dl > dd > ul > li > a {
  display: block;
  position: relative;
  font-size: 14px;
  font-size: 1.4rem;
  line-height: 1.5;
  color: var(--sss-ink);
  text-decoration: none;
  padding: 12px 14px 12px 28px;
  transition: background-color .2s, color .2s;
}

main > dl > dd > ul > li > a:before {
  content: "";
  position: absolute;
  top: 17px;
  left: 13px;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 4px 0 4px 6px;
  border-color: transparent transparent transparent var(--sss-accent);
}

main > dl > dd > ul > li > a:hover {
  background-color: #fffaea;
  color: var(--sss-accent-txt);
  opacity: 1;
}


/* --------------------------------------------------------------------------
   9. 補助
   -------------------------------------------------------------------------- */

/* トップ帯バナー（交通事故治療・求人募集中）:
   見出しを左詰めにし、本文との間を空ける */
#top .top__sec03 > div {
  padding-top: 94px;
}

#top .top__sec03 > div > h2 {
  left: 35px;
  top: 42px;
}

/* 帯バナー（交通事故治療・求人募集中）: 背景写真にドロップシャドウ */
#top .top__sec03 > div {
  box-shadow: 0 8px 20px rgba(0, 0, 0, .2);
  border-radius: 6px;
}

/* トップ求人バナー: ボタン2つを右側に縦並び・リッチな見た目に */
#top .top__sec03 > div > a,
#top .top__sec03 > div > a:first-of-type {
  position: absolute;
  right: 40px;
  margin-left: 0;
  width: 260px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 15px 20px;
  border-radius: 28px;
  background: linear-gradient(180deg, #f6c81e 0%, #e8b400 100%);
  box-shadow: 0 5px 12px rgba(0, 0, 0, .22);
  font-weight: bold;
  line-height: 1.4;
  text-align: center;
  transition: transform .15s ease, box-shadow .15s ease;
}

/* ボタン内で改行する場合のspan（リセットCSSのfont-size:62.5%・font-weight:normal対策で明示指定） */
#top .top__sec03 > div > a > span {
  font-size: 16px;
  font-size: 1.6rem;
  line-height: 1.4;
  font-weight: bold;
}

#top .top__sec03 > div > a:first-of-type {
  top: 40px;
}

#top .top__sec03 > div > a:last-of-type {
  top: 108px;
}

#top .top__sec03 > div > a::after {
  content: "";
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background-color: #3d3d3d;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M8 5.5 L13 10 L8 14.5' fill='none' stroke='%23f6c81e' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-size: 100% 100%;
  transition: transform .15s ease;
}

#top .top__sec03 > div > a:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 16px rgba(0, 0, 0, .28);
}

#top .top__sec03 > div > a:hover::after {
  transform: translateX(3px);
}


/* トップ: お客様レビュー（帯付き見出し＋本文） */
.sss-review {
  margin-top: 18px;
}

.sss-review__head {
  padding: 9px 14px;
  background-color: #fffbe8;
  border-left: 3px solid var(--sss-accent);
  font-size: 15px;
  font-size: 1.5rem;
  font-weight: bold;
  line-height: 1.6;
  color: var(--sss-ink-strong);
}

/* spanはリセットCSSのfont-size:62.5%を受けるため明示指定が必須 */
.sss-review__head > .sss-review__sym {
  margin-left: 12px;
  font-weight: normal;
  font-size: 15px;
  font-size: 1.5rem;
}

.sss-review__body {
  margin-top: 8px;
  font-size: 15px;
  font-size: 1.5rem;
  line-height: 1.9;
  color: var(--sss-ink);
}

.sss-note {
  margin-bottom: 14px;
  padding: 9px 14px;
  background-color: #f5f6f7;
  border: 1px dashed #b9c0c7;
  border-radius: 6px;
  font-size: 12px;
  font-size: 1.2rem;
  line-height: 1.7;
  color: var(--sss-gray);
}

.footer {
  border-top-width: 5px;
}


/* --------------------------------------------------------------------------
   フッター: 受付時間・定休日の行間
   -------------------------------------------------------------------------- */
.footer > div > dl > dt > div > p {
  line-height: 2;
}


/* ==========================================================================
   料金表（ryokin.php）: クライアント支給の料金表（2026-08）を再現
   ※このテンプレートはリセットCSSで全要素に font-size:62.5% / font-weight:normal が
     かかるため、strong/small/em/span/li/i には必ずサイズ・太さを明示する
   ========================================================================== */

.sss-price__lead {
  font-size: 15px;
  font-size: 1.5rem;
  line-height: 1.9;
  color: var(--sss-ink);
}

.sss-price__badge {
  display: inline-block;
  margin: 0 6px;
  padding: 3px 12px;
  border-radius: 12px;
  background-color: #fdeef2;
  color: #c9455f;
  font-size: 13px;
  font-size: 1.3rem;
  font-weight: bold;
  line-height: 1.5;
}

.sss-price__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
  margin-top: 20px;
}

/* ---- カード ---- */
.sss-price__card {
  position: relative;
  background-color: #fff;
  border: 1px solid #e6e6e6;
  border-radius: 14px;
  padding: 18px 20px 20px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .07);
}

/* カード見出し（色帯＋丸アイコン） */
.sss-price__head {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin: -18px -20px 16px;
  padding: 13px 16px;
  border-radius: 14px 14px 0 0;
  color: #fff;
  font-size: 18px;
  font-size: 1.8rem;
  font-weight: bold;
  line-height: 1.4;
  letter-spacing: .04em;
}

.sss-price__head > small {
  font-size: 12px;
  font-size: 1.2rem;
  font-weight: normal;
  opacity: .9;
}

.sss-price__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, .22);
  border: 1.5px solid rgba(255, 255, 255, .7);
  font-style: normal;
  font-size: 15px;
  font-size: 1.5rem;
  font-weight: bold;
  line-height: 1;
  flex-shrink: 0;
}

.sss-price__head--brown { background: linear-gradient(135deg, #7a5a43 0%, #5e4430 100%); }
.sss-price__head--navy  { background: linear-gradient(135deg, #3b587c 0%, #263d5c 100%); }
.sss-price__head--olive { background: linear-gradient(135deg, #6a7f46 0%, #4f6132 100%); }
.sss-price__head--gold  { background: linear-gradient(135deg, #c29a45 0%, #a37f30 100%); }

.sss-price__desc {
  font-size: 13px;
  font-size: 1.3rem;
  line-height: 1.8;
  color: var(--sss-ink);
  margin-bottom: 10px;
}

/* ---- 料金リスト（項目名 … 価格） ---- */
.sss-price__list > div {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 12px 4px;
  border-bottom: 1px dashed #d9dde2;
}

.sss-price__list > div:last-child {
  border-bottom: 0;
}

.sss-price__list dt {
  font-size: 16px;
  font-size: 1.6rem;
  font-weight: bold;
  line-height: 1.4;
  color: var(--sss-ink-strong);
}

.sss-price__list dt > small {
  display: block;
  font-size: 11px;
  font-size: 1.1rem;
  font-weight: normal;
  color: var(--sss-gray);
  margin-top: 3px;
}

.sss-price__list dd {
  font-family: "Helvetica Neue", Arial, sans-serif;
  font-size: 32px;
  font-size: 3.2rem;
  font-weight: bold;
  line-height: 1;
  color: #e0473f;
  white-space: nowrap;
  letter-spacing: .01em;
}

.sss-price__list dd > span {
  font-size: 14px;
  font-size: 1.4rem;
  margin-left: 2px;
}

.sss-price__list--option > div {
  padding: 9px 4px;
}

.sss-price__list--option dt {
  font-size: 14px;
  font-size: 1.4rem;
}

.sss-price__list--option dd {
  font-size: 22px;
  font-size: 2.2rem;
}

/* オプション欄の補足（電気刺激機器 等）は改行せず横並び */
.sss-price__list--option dt > small {
  display: inline;
  margin-left: 4px;
  margin-top: 0;
}

/* ---- 都度利用料（¥アイコン付きの帯） ---- */
.sss-price__sub {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 14px;
  padding: 10px 14px;
  border-radius: 10px;
  background-color: #f5f6f7;
}

.sss-price__yen {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background-color: #fff;
  border: 1.5px solid #b9c0c7;
  color: var(--sss-ink-strong);
  font-style: normal;
  font-size: 15px;
  font-size: 1.5rem;
  font-weight: bold;
  line-height: 1;
  flex-shrink: 0;
}

.sss-price__sublabel {
  flex: 1;
  font-size: 14px;
  font-size: 1.4rem;
  line-height: 1.4;
}

.sss-price__sublabel > strong {
  font-size: 14px;
  font-size: 1.4rem;
  font-weight: bold;
  color: var(--sss-ink-strong);
}

.sss-price__sublabel > small {
  display: block;
  font-size: 11px;
  font-size: 1.1rem;
  color: var(--sss-gray);
  margin-top: 2px;
}

.sss-price__subval {
  font-size: 13px;
  font-size: 1.3rem;
  color: var(--sss-ink);
  white-space: nowrap;
}

.sss-price__subval > em,
.sss-price__point > em {
  font-style: normal;
  font-weight: bold;
  color: #e0473f;
  font-size: 19px;
  font-size: 1.9rem;
}

.sss-price__point {
  margin-top: 14px;
  padding: 8px 12px;
  border-radius: 8px;
  background-color: #fffbe8;
  text-align: center;
  font-size: 15px;
  font-size: 1.5rem;
  font-weight: bold;
  line-height: 1.6;
  color: var(--sss-ink-strong);
}

.sss-price__note {
  margin-top: 12px;
  font-size: 11px;
  font-size: 1.1rem;
  line-height: 1.7;
  color: var(--sss-gray);
}

/* ---- 特化型メニュー ---- */
.sss-price__subtitle {
  margin-top: 110px;
  padding: 10px 16px;
  border-left: 6px solid var(--sss-accent);
  background: linear-gradient(90deg, #fff6d6 0%, rgba(255, 246, 214, 0) 100%);
  font-size: 20px;
  font-size: 2rem;
  font-weight: bold;
  line-height: 1.4;
  color: var(--sss-ink-strong);
}

.sss-price__subtitle + .sss-price__desc {
  margin-top: 10px;
}

.sss-price__card--pink,
.sss-price__card--purple {
  padding-left: 150px;
  min-height: 160px;
}

.sss-price__card--pink   { background: linear-gradient(135deg, #fff7f9 0%, #fdeef2 100%); border-color: #f3cdd8; }
.sss-price__card--purple { background: linear-gradient(135deg, #faf6fd 0%, #f1e8f8 100%); border-color: #dccbe9; }

/* 左の丸イラスト（支給の線画アイコン） */
.sss-price__mark {
  position: absolute;
  left: 20px;
  top: 24px;
  width: 110px;
  height: 110px;
  border-radius: 50%;
  object-fit: cover;
  background-color: #fff;
  box-shadow: 0 4px 12px rgba(0, 0, 0, .08);
}

.sss-price__card--pink   .sss-price__mark { border: 3px solid #f6c3d0; }
.sss-price__card--purple .sss-price__mark { border: 3px solid #dcc6ec; }

.sss-price__course {
  font-size: 20px;
  font-size: 2rem;
  font-weight: bold;
  line-height: 1.4;
}

.sss-price__card--pink .sss-price__course   { color: #c9455f; }
.sss-price__card--purple .sss-price__course { color: #7c4fa8; }

.sss-price__big {
  margin: 6px 0 10px;
  font-family: "Helvetica Neue", Arial, sans-serif;
  font-size: 36px;
  font-size: 3.6rem;
  font-weight: bold;
  line-height: 1;
  color: #e0473f;
}

.sss-price__big > span {
  font-size: 15px;
  font-size: 1.5rem;
  margin-left: 2px;
}

.sss-price__rec {
  display: inline-block;
  margin-top: 4px;
  padding: 4px 12px;
  border-radius: 14px;
  background-color: #fff;
  font-size: 12px;
  font-size: 1.2rem;
  font-weight: bold;
  color: var(--sss-ink-strong);
}

.sss-price__check {
  margin-top: 8px;
}

.sss-price__check > li {
  position: relative;
  padding-left: 24px;
  font-size: 13px;
  font-size: 1.3rem;
  line-height: 1.9;
  color: var(--sss-ink);
}

.sss-price__check > li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 8px;
  width: 9px;
  height: 5px;
  border-left: 2px solid #c9455f;
  border-bottom: 2px solid #c9455f;
  transform: rotate(-45deg);
}

.sss-price__card--purple .sss-price__check > li::before {
  border-color: #7c4fa8;
}

/* ---- ご案内・キャンセル（2ボックス） ---- */
.sss-price__notes {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  margin-top: 28px;
}

.sss-price__notebox {
  padding: 16px 20px 18px;
  border-radius: 12px;
  background-color: #f5f0e8;
}

.sss-price__notebox > h4 {
  padding-bottom: 8px;
  margin-bottom: 10px;
  border-bottom: 2px solid #e2d6c3;
  font-size: 15px;
  font-size: 1.5rem;
  font-weight: bold;
  line-height: 1.4;
  color: var(--sss-ink-strong);
}

.sss-price__notebox > ul > li {
  position: relative;
  padding-left: 14px;
  font-size: 13px;
  font-size: 1.3rem;
  line-height: 1.9;
  color: var(--sss-ink);
}

.sss-price__notebox > ul > li::before {
  content: "・";
  position: absolute;
  left: 0;
}

.sss-price__notebox > p {
  font-size: 13px;
  font-size: 1.3rem;
  line-height: 1.9;
  color: var(--sss-ink);
}

/* ---- 予約CTA（LINE＋ホットペッパー） ---- */
.sss-price__cta {
  margin-top: 28px;
  padding: 24px 20px 22px;
  border: 2px solid var(--sss-accent);
  border-radius: 16px;
  background: linear-gradient(135deg, #fffdf3 0%, #fff6d6 100%);
  text-align: center;
  box-shadow: 0 6px 18px rgba(232, 180, 0, .15);
}

.sss-price__cta-title {
  font-size: 19px;
  font-size: 1.9rem;
  font-weight: bold;
  line-height: 1.4;
  color: var(--sss-ink-strong);
}

.sss-price__cta-btns {
  display: flex;
  justify-content: center;
  gap: 14px;
  margin-top: 16px;
}

.sss-price__btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 28px;
  border-radius: 32px;
  font-size: 15px;
  font-size: 1.5rem;
  font-weight: bold;
  line-height: 1.4;
  color: #fff;
  box-shadow: 0 5px 12px rgba(0, 0, 0, .16);
  transition: transform .15s ease;
}

.sss-price__btn:hover {
  transform: translateY(-2px);
}

.sss-price__btn > img {
  display: block;
  border-radius: 5px;
}

.sss-price__btn--line { background-color: #06C755; }
.sss-price__btn--hpb  { background-color: #e8562a; }

.sss-price__cta-note {
  margin-top: 14px;
  font-size: 12px;
  font-size: 1.2rem;
  line-height: 1.8;
  color: var(--sss-gray);
}

.sss-price__tel {
  font-size: 17px;
  font-size: 1.7rem;
  font-weight: bold;
  color: var(--sss-ink-strong);
}


/* トップ 交通事故バナー: 「自己負担額0円」を強調（span はリセット対策でサイズ・太さ明示） */
.sss-zero {
  display: inline-block;
  padding: 0 6px;
  font-size: 20px;
  font-size: 2rem;
  font-weight: bold;
  line-height: 1.3;
  color: #e0473f;
  background: linear-gradient(transparent 55%, #fff3a3 55%);
}

/* トップ バナータイル5枚（取り扱い商品・症状一覧・アクセス・お客様の声・FAQ）
   控えめな影＋右端の小さな丸矢印でリンクと分かるように。ホバーで写真だけ軽くズーム */
#top .top__sec03 > ul > li {
  width: 47.5%;
}

#top .top__sec03 > ul > li > a {
  display: block;
  overflow: hidden;
  border-radius: 8px;
  box-shadow: 0 3px 10px rgba(0, 0, 0, .12);
  transition: box-shadow .2s ease;
}

#top .top__sec03 > ul > li > a > img {
  display: block;
  width: 100%;
  height: auto;
  transition: transform .4s ease;
}

#top .top__sec03 > ul > li > a:hover {
  box-shadow: 0 6px 14px rgba(0, 0, 0, .18);
}

#top .top__sec03 > ul > li > a:hover > img {
  transform: scale(1.05);
}

#top .top__sec03 > ul > li > a > h5 {
  left: 34px;
  font-size: 16px;
  font-size: 1.6rem;
  line-height: 1.4;
  margin-top: -11px;
  z-index: 2;
}

/* 右端の小さな丸矢印（リンクの目印・控えめ） */
#top .top__sec03 > ul > li > a::after {
  content: "";
  position: absolute;
  right: 22px;
  left: auto;
  bottom: auto;
  top: 50%;
  width: 22px;
  height: 22px;
  margin-top: -11px;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, .9);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M8 5.5 L13 10 L8 14.5' fill='none' stroke='%237a838c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-size: 100% 100%;
  z-index: 2;
  transition: transform .2s ease;
}

#top .top__sec03 > ul > li > a:hover::after {
  transform: translateX(3px);
}


/* 施術メニュー一覧: 各メニューの見出し（骨格矯正・背骨矯正 等）を大きく・黄色の左アクセント付きに */
#lower .sejyutu__sec01 > div > h4 {
  position: relative;
  font-size: 20px;
  font-size: 2rem;
  line-height: 1.4;
  padding-left: 16px;
  color: var(--sss-ink-strong);
}

/* 黄色バーは疑似要素で文字行の上下中央に（border-leftだと下線の余白まで伸びるため） */
#lower .sejyutu__sec01 > div > h4::before {
  content: "";
  position: absolute;
  left: 0;
  top: 4px;
  width: 5px;
  height: 20px;
  border-radius: 2px;
  background-color: var(--sss-accent);
}


/* ヘッダー: 予約ボタンを WEB予約＋LINE予約 の横並びに（見出し文はボタン2本の幅に中央揃え） */
.header__reserve {
  width: 308px;
}

.header__reserve > p {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-size: 1.2rem;
  line-height: 1;
  text-align: center;
  color: var(--sss-gray);
}

/* 文字の両脇に短い罫線を伸ばして2本のボタンにまたがる見た目に */
.header__reserve > p::before,
.header__reserve > p::after {
  content: "";
  flex: 1;
  height: 1px;
  background-color: #d9dde2;
}

.header__btns {
  display: flex;
  gap: 8px;
  margin-top: 10px;
}

.header__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 150px;
  height: 48px;
  border-radius: 24px;
  font-size: 16px;
  font-size: 1.6rem;
  font-weight: bold;
  line-height: 1;
  text-align: center;
  transition: transform .15s ease;
}

.header__btn:hover {
  transform: translateY(-2px);
}

.header__btn--web {
  background-color: var(--sss-accent);
  color: var(--sss-ink-strong);
  box-shadow: 0 4px 10px rgba(232, 180, 0, .35);
}

.header__btn--line {
  background-color: #06C755;
  color: #fff;
  box-shadow: 0 4px 10px rgba(6, 199, 85, .35);
}

/* フッター: 定休日の下に「24時間受付」見出し＋予約ボタン2本 */
.footer__reserve {
  width: 308px;
  margin: 16px 0 18px;
}

.footer__reserve-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-size: 1.2rem;
  line-height: 1;
  color: var(--sss-gray);
  white-space: nowrap;
}

.footer__reserve-label::before,
.footer__reserve-label::after {
  content: "";
  flex: 1;
  height: 1px;
  background-color: #d9dde2;
}

.footer__btns {
  display: flex;
  gap: 8px;
  margin-top: 10px;
}

/* フッターの外観写真: ロゴと同じ幅（330px）に揃える */
.footer > div > dl > dt > div > img {
  display: block;
  width: 330px;
  max-width: 100%;
  height: auto;
  margin: 14px 0 0;
}


/* ==========================================================================
   スマホ対応（737px以下）  ※PC側の既存 style.css は .header と main>dl>dd を非表示にする
   参考: sugawaraseikotu.com（上部6ボタンナビ＋下部固定LINE/TELボタン）
   ========================================================================== */

/* PCではスマホ用パーツを出さない */
.sp-header,
.sp-fixbar {
  display: none;
}

@media screen and (max-width: 737px) {

  /* ---- スマホヘッダー（上部固定） ---- */
  .sp-header {
    display: block;
    position: sticky;
    top: 0;
    z-index: 1000;
    background-color: #fff;
    box-shadow: 0 2px 10px rgba(0, 0, 0, .08);
  }

  .sp-header__bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px;
    border-bottom: 1px solid #eceef0;
  }

  .sp-header__logo > img {
    display: block;
    width: 150px;
    height: auto;
  }

  .sp-header__hours {
    font-size: 10px;
    font-size: 1rem;
    line-height: 1.4;
    color: var(--sss-gray);
    text-align: right;
  }

  /* 6ボタンナビ */
  .sp-nav {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    background-color: #fff;
  }

  .sp-nav > li > a,
  .sp-nav > li > .sp-nav__btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 8px 2px 7px;
    border-right: 1px solid #eceef0;
    background: none;
    border-top: 0;
    border-bottom: 0;
    border-left: 0;
    width: 100%;
    color: var(--sss-ink-strong);
    text-decoration: none;
    -webkit-appearance: none;
    appearance: none;
    cursor: pointer;
  }

  .sp-nav > li:last-child > .sp-nav__btn {
    border-right: 0;
  }

  /* 仮アイコン（〇）: 本番はここを画像に差し替え */
  .sp-nav__icon {
    display: block;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 2px solid var(--sss-accent);
    background-color: #fffbe8;
    box-sizing: border-box;
  }

  .sp-nav__label {
    display: block;
    font-size: 9px;
    font-size: .9rem;
    line-height: 1.2;
    font-weight: bold;
    text-align: center;
    white-space: nowrap;
  }

  /* ドロワー（メニューボタンで開閉） */
  .sp-drawer {
    display: none;
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    max-height: calc(100vh - 120px);
    overflow-y: auto;
    background-color: #fff;
    border-top: 3px solid var(--sss-accent);
    box-shadow: 0 10px 20px rgba(0, 0, 0, .15);
  }

  .sp-drawer.is-open {
    display: block;
  }

  .sp-drawer__list > li > a {
    display: block;
    padding: 13px 16px;
    border-bottom: 1px solid #eceef0;
    font-size: 14px;
    font-size: 1.4rem;
    line-height: 1.4;
    font-weight: bold;
    color: var(--sss-ink-strong);
  }

  .sp-drawer__ttl {
    padding: 10px 16px;
    background-color: var(--sss-accent);
    font-size: 13px;
    font-size: 1.3rem;
    line-height: 1.4;
    font-weight: bold;
    color: var(--sss-ink-strong);
  }

  .sp-drawer__list--sub > li > a {
    padding-left: 28px;
    font-weight: normal;
    font-size: 13px;
    font-size: 1.3rem;
  }

  /* ---- 下部固定ボタン（LINE予約／電話） ---- */
  .sp-fixbar {
    display: flex;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1000;
    gap: 6px;
    padding: 6px 8px;
    background-color: rgba(255, 255, 255, .95);
    box-shadow: 0 -2px 10px rgba(0, 0, 0, .12);
  }

  .sp-fixbar__btn {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 48px;
    border-radius: 8px;
    text-decoration: none;
    line-height: 1.2;
  }

  .sp-fixbar__small {
    font-size: 10px;
    font-size: 1rem;
    line-height: 1.2;
  }

  .sp-fixbar__main {
    font-size: 15px;
    font-size: 1.5rem;
    line-height: 1.2;
    font-weight: bold;
  }

  .sp-fixbar__btn--line {
    background-color: #06C755;
    color: #fff;
  }

  .sp-fixbar__btn--tel {
    background-color: var(--sss-accent);
    color: var(--sss-ink-strong);
  }

  /* 固定ボタン分の余白 */
  body {
    padding-bottom: 66px;
  }

  /* ---- メインビジュアル ---- */
  .mainvis__img {
    width: 100%;
  }

  /* ---- MV下スライダー → 縦並び ---- */
  .topslider {
    margin: 12px 3% 20px;
  }

  .topslider__slick > li {
    margin-top: 10px;
  }

  .topslider__slick > li:first-child {
    margin-top: 0;
  }

  .topslider__slick > li > img {
    display: block;
    width: 100%;
    height: auto;
  }

  /* ---- 以下、PC向けに追加した独自パーツのスマホ調整 ---- */

  /* 施術メニュー一覧: 写真と文章を縦積み */
  #lower .sejyutu__sec01 > div > dl {
    flex-direction: column;
  }

  #lower .sejyutu__sec01 > div > dl > dt {
    width: auto;
  }

  #lower .sejyutu__sec01 > div > dl > dd {
    margin-top: 12px;
  }

  /* 料金表: カード1列 */
  .sss-price__grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .sss-price__card--pink,
  .sss-price__card--purple {
    padding-left: 20px;
    padding-top: 120px;
  }

  .sss-price__mark {
    left: 50%;
    top: 16px;
    margin-left: -45px;
    width: 90px;
    height: 90px;
  }

  .sss-price__cta-btns {
    flex-direction: column;
    align-items: center;
  }

  /* 予約CTA（初めての方へ）: 縦積み */
  .sss-reserve__body {
    flex-direction: column;
    gap: 14px;
  }

  /* トップ 帯バナー（交通事故・求人）: ボタンを通常フローに */
  #top .top__sec03 > div {
    height: auto;
    padding: 20px 16px 20px;
    background-size: cover;
  }

  #top .top__sec03 > div > h2 {
    position: static;
    font-size: 22px;
    font-size: 2.2rem;
  }

  #top .top__sec03 > div > h3 {
    margin-top: 10px;
  }

  #top .top__sec03 > div > a,
  #top .top__sec03 > div > a:first-of-type,
  #top .top__sec03 > div > a:last-of-type {
    position: static;
    width: 100%;
    margin-top: 10px;
  }

  /* トップ バナータイル: 1列 */
  #top .top__sec03 > ul > li {
    width: 100%;
  }

  /* 当院ご案内の写真2枚 */
  .access-gaiyou__img02 {
    margin-top: 10px;
  }
}

/* スマホヘッダー: メニューボタンの〇の中に三本線 */
@media screen and (max-width: 737px) {
  .sp-nav__icon--menu {
    position: relative;
  }

  .sp-nav__icon--menu::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 16px;
    height: 2px;
    margin: -1px 0 0 -8px;
    border-radius: 1px;
    background-color: var(--sss-ink-strong);
    box-shadow: 0 -5px 0 var(--sss-ink-strong), 0 5px 0 var(--sss-ink-strong);
  }

  /* 全ページ共通の安全策: 画像は枠からはみ出させない */
  main img,
  .footer img {
    max-width: 100%;
    height: auto;
  }
}

/* トップ CONCEPT ブロック（PC: 文章510px＋写真270pxの横並び）→ スマホは縦積み */
@media screen and (max-width: 737px) {
  .sss-concept {
    padding: 20px 16px 22px;
  }

  .sss-concept__inner {
    padding-top: 12px;
  }

  .sss-concept__title {
    font-size: 22px;
    font-size: 2.2rem;
  }

  .sss-concept__body {
    flex-direction: column;
    gap: 16px;
  }

  .sss-concept__txt,
  .sss-concept__photo {
    width: 100%;
  }

  .sss-concept__photo > img {
    width: 200px;
    margin: 0 auto;
  }

  .sss-concept__profile > dt {
    width: 32%;
  }

  .sss-concept__profile > dd {
    width: 68%;
  }
}

/* ---- style.css がメディアクエリ外で持つPC固定幅をスマホで解除 ---- */
@media screen and (max-width: 737px) {
  html,
  body {
    overflow-x: hidden;
  }

  main > dl {
    display: block;
  }

  main > dl > dt {
    width: 100%;
  }

  /* 症状・施術・求人・トップ: 文章600px前後の固定幅 → 自動幅、写真は下に */
  #lower .syoujyo__sec01 > dl,
  #lower .sejyutu__sec03 > div > dl,
  #lower .oushin__sec01 > dl,
  #lower .recruit__sec02 > dl,
  #top .top__sec02 > dl {
    display: block;
  }

  #lower .syoujyo__sec01 > dl > dt,
  #lower .sejyutu__sec03 > div > dl > dt,
  #lower .oushin__sec01 > dl > dt,
  #lower .recruit__sec02 > dl > dt,
  #top .top__sec02 > dl > dt {
    width: auto;
  }

  #lower .syoujyo__sec01 > dl > dd,
  #lower .sejyutu__sec03 > div > dl > dd,
  #lower .recruit__sec02 > dl > dd,
  #top .top__sec02 > dl > dd {
    margin-top: 14px;
    text-align: center;
  }

  #lower .syoujyo__sec01 > dl > dd > img,
  #top .top__sec02 > dl > dd > img {
    width: 220px;
    max-width: 100%;
  }

  /* 症状ページ: 見出し・本文サイズ */
  #lower .syoujyo__sec01 > dl > dt > h4 {
    font-size: 14px;
    font-size: 1.4rem;
    line-height: 1.9;
  }

  /* スマホヘッダー: 受付時間は折り返しOK・はみ出さない */
  .sp-header__hours {
    flex: 1;
    min-width: 0;
    margin-left: 10px;
  }

  /* 施術メニュー下層・料金ページのカード内リンクボタン（幅固定・nowrap）を解除 */
  #lower .about__nav--inline > a {
    white-space: normal;
    max-width: 100%;
    line-height: 1.4;
  }

  /* 帯バナー・見出しh3のnowrap解除（トップ） */
  #top .top__sec03 > div > h3 {
    white-space: normal;
  }
}

/* 下層ページのページヘッダー: パンくずが横並びの要素として見出しを右に押していたので
   パンくずを左上に絶対配置し、見出しを中央に */
@media screen and (max-width: 737px) {
  #lower .mainvis__bread {
    position: absolute;
    top: 0;
    left: 0;
  }

  #lower .mainvis > h2 {
    width: 100%;
    padding: 0 3%;
    box-sizing: border-box;
    text-align: center;
  }
}

/* スマホヘッダー: 本番アイコン（白抜きPNG）を黄色の丸に載せる */
@media screen and (max-width: 737px) {
  .sp-nav__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: 0;
    background-color: var(--sss-accent);
  }

  .sp-nav__icon > img {
    display: block;
    width: 22px;
    height: 22px;
  }

  .sp-nav__icon--menu::before {
    background-color: #fff;
    box-shadow: 0 -5px 0 #fff, 0 5px 0 #fff;
  }
}

/* スマホヘッダー: メニュー展開中は三本線→×印に */
@media screen and (max-width: 737px) {
  .sp-nav__icon--menu::before {
    transition: transform .2s ease, box-shadow .15s ease;
  }

  .sp-nav__icon--menu::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 16px;
    height: 2px;
    margin: -1px 0 0 -8px;
    border-radius: 1px;
    background-color: #fff;
    opacity: 0;
    transition: transform .2s ease, opacity .15s ease;
  }

  .js-sp-drawer[aria-expanded="true"] .sp-nav__icon--menu::before {
    box-shadow: none;
    transform: rotate(45deg);
  }

  .js-sp-drawer[aria-expanded="true"] .sp-nav__icon--menu::after {
    opacity: 1;
    transform: rotate(-45deg);
  }
}

/* スマホ: バナー（縦並び）とCONCEPTの間を詰める */
@media screen and (max-width: 737px) {
  .topslider {
    margin-bottom: 0;
  }

  #top main {
    padding-top: 22px;
  }
}

/* スマホだけ改行させる br（PCでは無効） */
.sss-br-sp {
  display: none;
}

@media screen and (max-width: 737px) {
  .sss-br-sp {
    display: inline;
  }
}

/* スマホ: 本文の文字サイズを引き上げ（テンプレートは13px → 15px／行間1.9） */
@media screen and (max-width: 737px) {
  #lower .about__sec01 > dl > dt > h5,
  #lower .about__sec02__box > h5,
  #lower .access__sec01 > dl > dt > h5,
  #lower .access__sec03 > h5,
  #lower .access__sec03 > h5 > span,
  #lower .access__sec02 > ul > li > p,
  #lower .syoujyo__sec01 > dl > dt > h4,
  #lower .syoujyo__sec02 > div > h5,
  #lower .question__sec01__box > li > h5,
  #lower .question__sec01__link > li > a,
  #lower .sejyutu__sec01 > div > dl > dt > h5,
  #lower .sejyutu__sec01 > div > dl > dt > p,
  #lower .sejyutu__sec01 > div > dl > dt > p > span,
  #lower .sejyutu__sec02 > p,
  #lower .sejyutu__sec01 > p,
  #lower .recruit__sec02 > dl > dt > h4,
  #lower .recruit__sec01 > ul > li > p,
  #lower .staff__sec01 > div > dl > dt > ul > li,
  #lower .blog__sec01 > ul > li > p,
  #lower .blog__sec01 > ul > li > a,
  #lower .detail__sec01__post p,
  #lower .detail__sec01 > div > p,
  #lower .about__sec02 > ul > li > p,
  #top .top__sec02 > h4,
  #top .top__sec02 > dl > dt > h4,
  #top .top__sec02 > ul > li > a,
  #top .top__sec03 > div > h3,
  .sss-concept__txt > p,
  .sss-concept__profile > dt,
  .sss-concept__profile > dd,
  .sss-review__body,
  .sss-price__lead,
  .sss-price__desc,
  .sss-price__notebox > ul > li,
  .sss-price__notebox > p,
  .sss-reserve__note,
  .sss-reserve__telline {
    font-size: 15px;
    font-size: 1.5rem;
    line-height: 1.9;
  }

  /* 囲み内の小見出し（Q.／STEP／番号付き見出し） */
  #lower .about__sec02__box > h4,
  #lower .question__sec01__box > li > h4,
  #lower .question__sec01__box > li > h4 > span,
  #lower .staff__sec01 > div > h5,
  #lower .about__sec01 > dl > dt > h4,
  #lower .access__sec03 > h4,
  .sss-review__head,
  .sss-review__head > .sss-review__sym {
    font-size: 16px;
    font-size: 1.6rem;
    line-height: 1.6;
  }

  /* 目立たせたい注記系は小さいまま維持 */
  .sss-menunote,
  .sss-note,
  .sss-price__note {
    font-size: 12px;
    font-size: 1.2rem;
  }
}

/* スマホ: お知らせ・ブログ一覧は日付で改行してタイトルを次行に */
@media screen and (max-width: 737px) {
  #top .top__sec02 > ul > li > a > span,
  #lower .blog__sec01 > ul > li > a > span,
  #lower .blog__sec01 > ul > li > p > span {
    display: block;
    margin-bottom: 2px;
    font-size: 13px;
    font-size: 1.3rem;
    line-height: 1.5;
    color: var(--sss-gray);
  }
}

/* スマホ: セクション見出し（PC30px）を20pxに。1文字だけ折り返す事故を防ぐ */
@media screen and (max-width: 737px) {
  #lower .about__sec02 > h3,
  #lower .about__sec01 > h3,
  #lower .access__sec03 > h3,
  #lower .access__sec02 > h3,
  #lower .access__sec01 > h3,
  #lower .recruit__sec02 > h3,
  #lower .recruit__sec01 > h3,
  #lower .detail__sec01 > h3,
  #lower .blog__sec01 > h3,
  #lower .syoujyo__sec02 > h3,
  #lower .syoujyo__sec01 > h3,
  #lower .question__sec01 > h3,
  #lower .sejyutu__sec02 > h3,
  #lower .sejyutu__sec01 > h3,
  #lower .staff__sec01 > h3,
  #top .top__sec02 > h2 {
    font-size: 20px;
    font-size: 2rem;
    line-height: 1.5;
    padding-left: 34px;
    padding-bottom: 8px;
    margin-bottom: 18px;
    letter-spacing: 0;
  }

  #lower .about__sec02 > h3:before,
  #lower .about__sec01 > h3:before,
  #lower .access__sec03 > h3:before,
  #lower .access__sec02 > h3:before,
  #lower .access__sec01 > h3:before,
  #lower .recruit__sec02 > h3:before,
  #lower .recruit__sec01 > h3:before,
  #lower .detail__sec01 > h3:before,
  #lower .blog__sec01 > h3:before,
  #lower .syoujyo__sec02 > h3:before,
  #lower .syoujyo__sec01 > h3:before,
  #lower .question__sec01 > h3:before,
  #lower .sejyutu__sec02 > h3:before,
  #lower .sejyutu__sec01 > h3:before,
  #lower .staff__sec01 > h3:before,
  #top .top__sec02 > h2:before {
    width: 24px;
    height: 24px;
    top: 3px;
    left: 2px;
  }

  /* トップCONCEPTの見出し・料金の特化型見出し */
  .sss-concept__title {
    font-size: 20px;
    font-size: 2rem;
  }

  .sss-price__subtitle {
    font-size: 18px;
    font-size: 1.8rem;
  }
}

/* スマホ: 小見出し（「原因を突き止めることで〜」等）を本文と同じ15pxに */
@media screen and (max-width: 737px) {
  #top .top__sec02 > h3,
  #top .top__sec02 > h3 > span,
  #top .top__sec02 > dl > dt > h3,
  #top .top__sec02 > dl > dt > ul > li > h5,
  #top .top__sec02 > dl > dt > ul > li > span,
  #lower .sejyutu__sec02 > h4,
  #lower .sejyutu__sec02 > h4 > span,
  #lower .staff__sec01 > h4,
  #lower .syoujyo__sec02 > div > h4,
  #lower .sejyutu__sec01 > div > dl > dt > h4 {
    font-size: 15px;
    font-size: 1.5rem;
    line-height: 1.8;
  }
}

/* スマホ: 一覧の日付は絶対配置（左）→ 通常フローにして日付で改行 */
@media screen and (max-width: 737px) {
  #top .top__sec02 > ul > li > a,
  #lower .blog__sec01 > ul > li > a,
  #lower .blog__sec01 > ul > li > p,
  #lower .about__sec02 > ul > li > a,
  #lower .about__sec02 > ul > li > p,
  #lower .recruit__sec01 > ul > li > a,
  #lower .recruit__sec01 > ul > li > p {
    display: block;
    padding-left: 0;
  }

  #top .top__sec02 > ul > li > a > span,
  #lower .blog__sec01 > ul > li > a > span:first-child,
  #lower .blog__sec01 > ul > li > p > span:first-child,
  #lower .about__sec02 > ul > li > a > span:first-child,
  #lower .about__sec02 > ul > li > p > span:first-child,
  #lower .recruit__sec01 > ul > li > a > span:first-child,
  #lower .recruit__sec01 > ul > li > p > span:first-child {
    position: static;
    display: block;
  }
}

/* スマホ: フッターの予約ボタン枠と外観写真を中央寄せ */
@media screen and (max-width: 737px) {
  .footer__reserve {
    margin-left: auto;
    margin-right: auto;
  }

  .footer > div > dl > dt > div > img {
    margin-left: auto;
    margin-right: auto;
  }
}

/* スマホ: about系セクション（初めての方へ・当院のご案内・交通事故）は 文章 → 写真 の縦積み */
@media screen and (max-width: 737px) {
  #lower .about__sec01 > dl {
    display: flex;
    flex-direction: column;
  }

  #lower .about__sec01 > dl > dt {
    width: auto;
  }

  #lower .about__sec01 > dl > dd {
    margin: 16px 0 0;
    text-align: center;
  }

  #lower .about__sec01 > dl > dd img {
    display: inline-block;
    width: 240px;
    max-width: 100%;
    height: auto;
    margin: 0 auto;
  }

  #lower .about__sec01 > dl > dd img + img {
    margin-top: 10px;
  }
}

/* スマホ: 他ページの「文章＋写真」2カラムも同様に 文章 → 写真 の縦積み */
@media screen and (max-width: 737px) {
  #lower .staff__sec01 > div > dl,
  #lower .access__sec01 > dl {
    display: block;
  }

  #lower .staff__sec01 > div > dl > dt,
  #lower .access__sec01 > dl > dt {
    width: auto;
  }

  #lower .staff__sec01 > div > dl > dd,
  #lower .access__sec01 > dl > dd,
  #lower .recruit__sec02 > dl > dd {
    margin-top: 16px;
    text-align: center;
  }

  #lower .staff__sec01 > div > dl > dd iframe {
    width: 100%;
    max-width: 330px;
  }

  #top .top__sec02 > dl > dd > img,
  #lower .syoujyo__sec01 > dl > dd > img,
  #lower .sejyutu__sec03 > div > dl > dd img,
  #lower .recruit__sec02 > dl > dd img {
    width: 240px;
    max-width: 100%;
    height: auto;
  }
}


/* フッター: ホットペッパービューティー予約リンクを一覧から独立させ、最下部に1行で（PC/SP共通） */
.footer__hpb {
  margin: 10px 0 0;
  text-align: center;
  font-size: 13px;
  font-size: 1.3rem;
  line-height: 1.6;
}

.footer__hpb > a {
  display: inline-block;
  font-size: 13px;
  font-size: 1.3rem;
  font-weight: bold;
  color: #7b4fa0;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.footer__hpb > a:hover {
  opacity: .75;
}

@media screen and (max-width: 737px) {
  .footer__hpb {
    margin: 10px 0 0;
  }

  .footer__hpb > a {
    font-size: 14px;
    font-size: 1.4rem;
  }
}


/* 白い囲み内の最初の小見出し（1. 〜）: 上の点線・余白（35px+25px）を無くして詰める（PC/SP共通） */
#lower .about__sec02__box > h4:first-child {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

@media screen and (max-width: 737px) {
  #lower .about__sec02__box {
    padding: 16px 16px 22px;
  }

  #lower .about__sec02__box > h4 {
    margin-top: 24px;
    padding-top: 18px;
  }

  #lower .about__sec02__box > h4 + h5 {
    margin-top: 12px;
  }
}

/* 予約CTAボックス: LINEの下にWEB予約（ホットペッパー）ボタンを追加 */
.sss-reserve__web {
  display: inline-block;
  margin-top: 10px;
  background-color: var(--sss-accent);
  color: var(--sss-ink-strong);
  font-weight: bold;
  font-size: 15px;
  font-size: 1.5rem;
  line-height: 1.5;
  padding: 12px 30px;
  border-radius: 40px;
  box-shadow: 0 5px 12px rgba(232, 180, 0, .35);
  transition: transform .15s ease;
}

.sss-reserve__web:hover {
  transform: translateY(-2px);
}

@media screen and (max-width: 737px) {
  .sss-reserve__web {
    font-size: 14px;
    font-size: 1.4rem;
    padding: 12px 22px;
  }
}

/* スマホ: 予約CTAボックスの見出し「＼ ご予約・ご相談はこちら ／」が途中で折れないように */
@media screen and (max-width: 737px) {
  .sss-reserve {
    padding: 18px 14px 20px;
  }

  .sss-reserve__title {
    font-size: 18px;
    font-size: 1.8rem;
    white-space: nowrap;
    letter-spacing: 0;
  }

  .sss-reserve__line {
    font-size: 16px;
    font-size: 1.6rem;
    padding: 14px 30px;
  }

  .sss-reserve__note,
  .sss-reserve__telline {
    font-size: 12px;
    font-size: 1.2rem;
    line-height: 1.7;
  }
}

/* 初めての方へ: 料金のご案内をミニ料金表に（.sss-price__list のデザインを流用） */
.sss-pricemini {
  margin-top: 4px;
}

.sss-pricemini > div {
  padding: 12px 6px;
}

.sss-pricemini dt {
  font-size: 15px;
  font-size: 1.5rem;
}

.sss-pricemini dd {
  font-size: 26px;
  font-size: 2.6rem;
}

.sss-pricemini__note {
  margin-top: 12px;
  font-size: 12px;
  font-size: 1.2rem;
  line-height: 1.7;
  color: var(--sss-gray);
}

@media screen and (max-width: 737px) {
  .sss-pricemini dd {
    font-size: 22px;
    font-size: 2.2rem;
  }
}

/* 予約CTA: LINEボタンとWEB予約フォームボタンを同じ大きさに揃える */
.sss-reserve__line,
.sss-reserve__web {
  box-sizing: border-box;
  min-width: 300px;
  text-align: center;
  font-size: 19px;
  font-size: 1.9rem;
  line-height: 1.5;
  padding: 15px 30px;
  border-radius: 40px;
}

@media screen and (max-width: 737px) {
  .sss-reserve__line,
  .sss-reserve__web {
    min-width: 0;
    width: 100%;
    max-width: 300px;
    font-size: 16px;
    font-size: 1.6rem;
    padding: 14px 20px;
  }
}

/* 予約CTA共通: WEB予約フォームボタン（黄）＋ ホットペッパーは下線テキスト（いずれ削除予定） */
.sss-price__btn--web {
  background-color: var(--sss-accent);
  color: var(--sss-ink-strong);
  box-shadow: 0 4px 10px rgba(232, 180, 0, .35);
}

.sss-hpb-link {
  margin-top: 12px;
  text-align: center;
  font-size: 13px;
  font-size: 1.3rem;
  line-height: 1.6;
}

.sss-hpb-link > a {
  font-size: 13px;
  font-size: 1.3rem;
  color: #7b4fa0;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.sss-hpb-link > a:hover {
  opacity: .75;
}

/* 料金ページ 特化型カード: メニュー名と金額を中央揃え（PC/SP共通） */
.sss-price__course,
.sss-price__big {
  text-align: center;
}

/* 料金ページCTA: LINE/WEBボタンを同サイズに・電話番号を目立たせる（初めての方へのCTAも同様に） */
.sss-price__btn {
  box-sizing: border-box;
  min-width: 300px;
  justify-content: center;
  font-size: 17px;
  font-size: 1.7rem;
  padding: 15px 30px;
}

.sss-price__cta-note {
  line-height: 2;
}

.sss-price__tel,
.sss-reserve__tel {
  display: inline-block;
  margin-top: 4px;
  font-size: 22px;
  font-size: 2.2rem;
  font-weight: bold;
  color: var(--sss-ink-strong);
  letter-spacing: .02em;
}

@media screen and (max-width: 737px) {
  .sss-price__btn {
    min-width: 0;
    width: 100%;
    max-width: 300px;
    font-size: 16px;
    font-size: 1.6rem;
    padding: 14px 20px;
  }

  .sss-price__tel,
  .sss-reserve__tel {
    font-size: 20px;
    font-size: 2rem;
  }
}


/* よくあるご質問: アコーディオン（質問クリックで回答を開閉） */
#lower .question__sec01__box > li > h4 {
  position: relative;
  padding-right: 34px;
  cursor: pointer;
  user-select: none;
}

#lower .question__sec01__box > li > h4::after {
  content: "";
  position: absolute;
  right: 6px;
  top: 50%;
  width: 22px;
  height: 22px;
  margin-top: -11px;
  border-radius: 50%;
  background-color: var(--sss-accent);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5.5 8 L10 12.5 L14.5 8' fill='none' stroke='%233d3d3d' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-size: 100% 100%;
  transition: transform .2s ease;
}

#lower .question__sec01__box > li.is-open > h4::after {
  transform: rotate(180deg);
}

#lower .question__sec01__box > li > h5 {
  display: none;
}

#lower .question__sec01__box > li.is-open > h5 {
  display: block;
}

/* よくあるご質問: 各質問ボックスの余白を詰める（閉じた状態で間延びしないように） */
#lower .question__sec01__box > li {
  padding: 14px 20px 14px;
  margin-top: 14px;
}

#lower .question__sec01__box > li:first-of-type {
  margin-top: 20px;
}

#lower .question__sec01__box > li > h4 {
  padding-bottom: 0;
  border-bottom: 0;
}

#lower .question__sec01__box > li.is-open > h4 {
  padding-bottom: 12px;
  border-bottom: 2px dotted #7a838c;
}

#lower .question__sec01__box > li.is-open > h5 {
  margin-top: 12px;
}

/* スマホ: 特化型メニュー見出しの上余白 */
@media screen and (max-width: 737px) {
  .sss-price__subtitle {
    margin-top: 44px;
  }
}

/* 白い囲み（当院の特徴・初めての方へ等）の下余白45px → 22px（PC） */
#lower .about__sec02__box {
  padding-bottom: 22px;
}

/* よくあるご質問: Q番号（絶対配置・幅30px）が質問文に重なるのを解消（PC/SP共通） */
#lower .question__sec01__box > li > h4 {
  padding-left: 0;
}

#lower .question__sec01__box > li > h4 > span {
  position: static;
  display: inline-block;
  min-width: 2.6em;
  margin-right: 6px;
  color: var(--sss-accent-txt);
}


/* 求人情報: 募集なしの案内文（p はリセットCSSでサイズが消えるため明示） */
.sss-recruit-none {
  padding: 24px 20px;
  border-radius: 10px;
  background-color: #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .05);
}

.sss-recruit-none > p {
  font-size: 15px;
  font-size: 1.5rem;
  line-height: 2;
  color: var(--sss-ink);
}


/* ==========================================================================
   フォーム（お問い合わせ / WEB予約）: 入力・確認・完了 共通
   ※リセットCSS対策で label/input/select/textarea/button/li は全てサイズ明示
   ========================================================================== */
.sss-form__lead {
  font-size: 15px;
  font-size: 1.5rem;
  line-height: 1.9;
  color: var(--sss-ink);
}

.sss-form__lead a {
  font-size: inherit;
  color: var(--sss-accent-txt);
  text-decoration: underline;
}

.sss-form__lead strong {
  font-size: inherit;
  font-weight: bold;
  color: #e0473f;
}

/* ステップ表示 */
.sss-form__steps {
  display: flex;
  margin: 22px 0 26px;
  counter-reset: step;
}

.sss-form__steps > li {
  flex: 1;
  position: relative;
  padding: 10px 6px;
  text-align: center;
  font-size: 14px;
  font-size: 1.4rem;
  font-weight: bold;
  line-height: 1.4;
  color: var(--sss-gray);
  background-color: #eef0f2;
  border-right: 2px solid #fff;
}

.sss-form__steps > li::before {
  counter-increment: step;
  content: counter(step) ". ";
}

.sss-form__steps > li.is-current {
  background-color: var(--sss-accent);
  color: var(--sss-ink-strong);
}

.sss-form__steps > li.is-done {
  background-color: #d9dde2;
  color: var(--sss-ink);
}

.sss-form__alert {
  margin-bottom: 16px;
  padding: 10px 14px;
  border: 1px solid #e0473f;
  border-radius: 6px;
  background-color: #fff3f2;
  font-size: 14px;
  font-size: 1.4rem;
  line-height: 1.6;
  color: #e0473f;
}

/* 入力行 */
.sss-form__list {
  border-top: 1px solid #e3e6e9;
}

.sss-form__row {
  display: flex;
  padding: 16px 0;
  border-bottom: 1px solid #e3e6e9;
}

.sss-form__row > dt {
  width: 220px;
  flex: none;
  padding-top: 10px;
  font-size: 15px;
  font-size: 1.5rem;
  font-weight: bold;
  line-height: 1.5;
  color: var(--sss-ink-strong);
}

.sss-form__row > dt > label {
  font-size: inherit;
  font-weight: bold;
}

.sss-form__req,
.sss-form__opt {
  display: inline-block;
  margin-left: 8px;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 11px;
  font-size: 1.1rem;
  font-weight: bold;
  line-height: 1.5;
  vertical-align: middle;
}

.sss-form__req { background-color: #e0473f; color: #fff; }
.sss-form__opt { background-color: #d9dde2; color: var(--sss-ink); }

.sss-form__row > dd {
  flex: 1;
  min-width: 0;
}

.sss-form__row input[type="text"],
.sss-form__row input[type="tel"],
.sss-form__row input[type="email"],
.sss-form__row input[type="date"],
.sss-form__row select,
.sss-form__row textarea {
  box-sizing: border-box;
  width: 100%;
  max-width: 520px;
  padding: 11px 12px;
  border: 1px solid #c9cfd5;
  border-radius: 6px;
  background-color: #fff;
  font-size: 16px;
  font-size: 1.6rem;
  line-height: 1.5;
  color: var(--sss-ink);
  font-family: inherit;
}

.sss-form__row textarea {
  max-width: none;
  min-height: 150px;
  resize: vertical;
}

.sss-form__row select {
  max-width: 360px;
}

.sss-form__row input:focus,
.sss-form__row select:focus,
.sss-form__row textarea:focus {
  outline: 2px solid var(--sss-accent);
  outline-offset: 1px;
  border-color: var(--sss-accent);
}

.sss-form__row.is-error input,
.sss-form__row.is-error select,
.sss-form__row.is-error textarea {
  border-color: #e0473f;
  background-color: #fff8f7;
}

.sss-form__radios {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 24px;
  padding-top: 8px;
}

.sss-form__radios > label,
.sss-form__agree {
  display: inline-flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 15px;
  font-size: 1.5rem;
  line-height: 1.7;
  color: var(--sss-ink);
  cursor: pointer;
}

.sss-form__radios input,
.sss-form__agree input {
  width: 18px;
  height: 18px;
  margin-top: 4px;
  flex: none;
  accent-color: #e8b400;
}

.sss-form__agree {
  padding-top: 6px;
}

.sss-form__error {
  margin-top: 6px;
  font-size: 13px;
  font-size: 1.3rem;
  line-height: 1.5;
  color: #e0473f;
}

.sss-form__hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* 確認画面 */
.sss-form__list--confirm .sss-form__row > dd {
  padding-top: 10px;
  font-size: 15px;
  font-size: 1.5rem;
  line-height: 1.8;
  color: var(--sss-ink);
}

.sss-form__none {
  font-size: inherit;
  color: var(--sss-gray);
}

/* ボタン */
.sss-form__btns {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  margin-top: 28px;
}

.sss-form__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  min-width: 300px;
  padding: 16px 30px;
  border: 0;
  border-radius: 40px;
  font-size: 17px;
  font-size: 1.7rem;
  font-weight: bold;
  line-height: 1.4;
  font-family: inherit;
  cursor: pointer;
  text-decoration: none;
  transition: transform .15s ease;
}

.sss-form__btn:hover {
  transform: translateY(-2px);
}

.sss-form__btn--primary {
  background-color: var(--sss-accent);
  color: var(--sss-ink-strong);
  box-shadow: 0 5px 12px rgba(232, 180, 0, .35);
}

.sss-form__btn--back {
  background-color: #eef0f2;
  color: var(--sss-ink);
}

/* 完了 */
.sss-form__thanks {
  padding: 30px 20px;
  border-radius: 12px;
  background-color: #fff;
  text-align: center;
}

.sss-form__thanks-ttl {
  margin-bottom: 14px;
  font-size: 22px;
  font-size: 2.2rem;
  font-weight: bold;
  line-height: 1.4;
  color: var(--sss-ink-strong);
}

.sss-form__thanks > p {
  font-size: 15px;
  font-size: 1.5rem;
  line-height: 1.9;
  color: var(--sss-ink);
}

@media screen and (max-width: 737px) {
  .sss-form__row {
    flex-direction: column;
    padding: 14px 0;
  }

  .sss-form__row > dt {
    width: auto;
    padding-top: 0;
    margin-bottom: 8px;
  }

  .sss-form__row input[type="text"],
  .sss-form__row input[type="tel"],
  .sss-form__row input[type="email"],
  .sss-form__row input[type="date"],
  .sss-form__row select {
    max-width: none;
  }

  .sss-form__btn {
    min-width: 0;
    width: 100%;
    max-width: 320px;
  }

  .sss-form__steps > li {
    font-size: 12px;
    font-size: 1.2rem;
  }
}


/* フッター: 予約ボタンの下に「お問い合わせフォーム」ボタン（PC/SP共通） */
.footer__contact {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  box-sizing: border-box;
  width: 308px;
  height: 46px;
  margin-top: 10px;
  border: 2px solid var(--sss-ink-strong);
  border-radius: 23px;
  background-color: #fff;
  font-size: 15px;
  font-size: 1.5rem;
  font-weight: bold;
  line-height: 1;
  color: var(--sss-ink-strong);
  text-decoration: none;
  transition: background-color .15s ease, color .15s ease;
}

.footer__contact > svg {
  width: 20px;
  height: 20px;
  flex: none;
}

.footer__contact:hover {
  background-color: var(--sss-ink-strong);
  color: #fff;
}

@media screen and (max-width: 737px) {
  .footer__contact {
    margin-left: auto;
    margin-right: auto;
  }
}