@font-face {
  font-family: "Material Icons";
  font-style: normal;
  font-weight: 400;
  src: url(https://example.com/MaterialIcons-Regular.eot);
  /* For IE6-8 */
  src: local("Material Icons"), local("MaterialIcons-Regular"),
    url(https://example.com/MaterialIcons-Regular.woff2) format("woff2"),
    url(https://example.com/MaterialIcons-Regular.woff) format("woff"),
    url(https://example.com/MaterialIcons-Regular.ttf) format("truetype");
}
body {
  font-family: "Zen Kaku Gothic New", "Noto Sans JP", system-ui, sans-serif;
  /*コピペ禁止*/
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -khtml-user-select: none;
  -webkit-user-drag: none;
  -khtml-user-drag: none;
}
/* スクリーンサイズが992px以上の場合にページ全体に適用*/
@media screen and (min-width: 960px) {
  .home {
    margin: 0 25% 0 25%;
  }
}
.home {
  padding-bottom: 50px;
}
.material-icons {
  font-family: "Material Icons";
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  /* Preferred icon size */
  line-height: 1;
  text-transform: none;
  letter-spacing: normal;
  word-wrap: normal;
  white-space: nowrap;
  direction: ltr;
  display: inline-flex;
  vertical-align: middle;

  /* Support for all WebKit browsers. */
  -webkit-font-smoothing: antialiased;
  /* Support for Safari and Chrome. */
  text-rendering: optimizeLegibility;

  /* Support for Firefox. */
  -moz-osx-font-smoothing: grayscale;

  /* Support for IE. */
  font-feature-settings: "liga";
}

/* Rules for sizing the icon. */

.material-icons.md-36 {
  font-size: 36px;
}

.table > :not(caption) > * > * {
  vertical-align: middle;
}

/* TOPに戻るアイコン */

#content {
  position: relative;
}

#topBtn {
  /*font-weight: bold;
  border-radius: 50%;*/
  /*-----必須-----*/
  position: fixed;
  bottom: 10px;
  right: 10px;

  /*-----装飾-----*/
  /* width: 64px;
  height: 64px;
  line-height: 64px;
  text-align: center;
  background-color: #f4e410;
  color: #000;*/
}
/* youtube */

.movie-wrap {
  width: 100%;
  aspect-ratio: 16 / 9;
}
.movie-wrap iframe {
  width: 100%;
  height: 100%;
}

/*目次*/
.moku ol {
  counter-reset: number; /*数字をリセット*/
  list-style-type: none !important; /*数字を一旦消す*/
  padding: 18px 0 18px 25px;
  background: #ecf3f796;
}
.moku ol li {
  position: relative;
  padding-left: 30px;
  line-height: 1.5em;
  padding: 0.5em 0.5em 0.5em 30px;
}

.moku ol li:before {
  /* 以下数字をつける */
  position: absolute;
  counter-increment: number;
  content: counter(number);
  /*以下数字のデザイン変える*/
  display: inline-block;
  background: #007bbb;
  color: white;
  font-family: "Avenir", "Arial Black", "Arial", sans-serif;
  font-weight: bold;
  font-size: 10px;
  border-radius: 50%;
  left: -1px;
  width: 25px;
  height: 25px;
  line-height: 25px;
  text-align: center;
  padding-left: 2px;
  /*以下 上下中央寄せのため*/
  top: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
}

/*目次ここまで*/

/*パンくずリストここから*/

.breadcrumb-item.active {
  color: #000;
}
/*見出し*/

/*ホーム見出しh2の装飾*/

.home-top {
  letter-spacing: 0.07rem;
}

.home-heading {
  margin-top: 45px;
  letter-spacing: 0.08em;
  color: #000;
  font-size: 31px;
}
.home-heading font {
  letter-spacing: 0.08em;
  color: #22a3dd;
}
/*prf見出しh3の装飾*/

/*ホーム見出しh4の装飾*/
.home-heading-h4:first-letter {
  font-size: 150%;
  color: #007bbb;
}

/*症状見出しの装飾*/
.b1 {
  color: #fff;
  letter-spacing: 0.1rem;
}

.b2 {
  letter-spacing: 0.1rem;
  color: #fff;
  border-radius: 4px;
  margin: 80px 0 40px 0;
  position: relative;
  padding: 0.9em;
  background: #007bbb;
}

.b2 :after {
  position: absolute;
  content: "";
  top: 100%;
  left: 30px;
  border: 15px solid transparent;
  border-top: 15px solid #007bbb;
  width: 0;
  height: 0;
}

.b3 {
  margin-bottom: 30px;
  letter-spacing: 0.1rem;
  margin-top: 55px;

  border-left: 3px solid #007bbb;
  border-bottom: 2px dashed #b4b4b4;
  padding: 0.25em 0 0.3em 0.5em;
}

.b4 {
  margin: 55px 0 0 0;
  display: flex;
  align-items: center;
  gap: 0 7px;
  color: #333333;
}

.b4::before {
  width: 29px;
  height: 29px;
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20fill%3D%22%23007bbb%22%20d%3D%22M8.2%2C20.6l-7.8-7.8c-0.5-0.5-0.5-1.2%2C0-1.7L2%2C9.4c0.5-0.5%2C1.2-0.5%2C1.7%2C0L9%2C14.7L20.3%2C3.4c0.5-0.5%2C1.2-0.5%2C1.7%2C0l1.7%2C1.7%20c0.5%2C0.5%2C0.5%2C1.2%2C0%2C1.7L9.8%2C20.6C9.4%2C21.1%2C8.6%2C21.1%2C8.2%2C20.6L8.2%2C20.6z%22%2F%3E%3C%2Fsvg%3E");
  content: "";
}

/*料金の文章*/
.price {
  margin-bottom: 74px;
}

/*レスポンシブナビ*/
.navbar-toggler:after {
  display: block;
  content: "MENU";
  width: 50px;
  font-size: 17px;
  color: #000;
}

/*snsロゴ*/

.sns-btn {
  padding-left: 0;
  justify-content: center;
  list-style: none;
  display: flex;
  margin-top: 20px;
}
.sns-btn li {
  margin-left: 10px;
  margin-right: 10px;
}
/*料金、頻度の目安のバックの色*/
.home-bg {
  padding: 40px;
  background-color: #f2f4f5;
}

/*フッターのバックの色*/
.bottom {
  padding-top: 50px;
  border-top-right-radius: 40px;

  padding: 76px 0 0 0;
}

/*aリンクの設定*/
a {
  text-decoration: none;
  color: #065fd4;
}

.link {
  text-decoration: underline;
}
.moku a {
  text-decoration: underline;
}
.breadcrumb a {
  text-decoration: underline;
}

/*ページトップ見出しの色*/
.title {
  background-color: #007bbb;
}

/*pointの囲い*/
.box27 {
  position: relative;
  margin: 4em 0;
  padding: 0.5em 1em;
  border: solid 3px #007bbb;
}
.box-title {
  position: absolute;
  display: inline-block;
  top: -27px;
  left: -3px;
  padding: 0 9px;
  height: 25px;
  line-height: 25px;
  font-size: 17px;
  background: #007bbb;
  color: #ffffff;
  font-weight: bold;
  border-radius: 5px 5px 0 0;
}

/*小画像*/
.igazo {
  text-align: center;
  margin: 30px 0 30px 0;
}
.bloggazo {
  margin-bottom: 30px;
}
.img-shadow {
  padding: 0 !important;
}
.img-shadow img {
  border: none;
}

/*画像*/

img {
  border-radius: 15px;
}

/*文章*/
p {
  margin-top: 2.3rem;
  margin-bottom: 2.3rem;
  letter-spacing: 0.07rem;
  line-height: 1.95;
  font-size: 17px;
}

.list {
  margin: 0px 0 50px 0;
  border-radius: 4px;
  list-style-type: disc;
  padding: 1em 1em 1em 2.5em;
  border: 1px solid #007bbb;
}

.list li {
  padding: 0.3em 0.3em 0.3em 0;
}

.list li::marker {
  color: #007bbb;
  font-size: 0.9em;
}
li {
  letter-spacing: 0.12rem;
  line-height: 2rem;
}

/*引用*/
.quote {
  position: relative;
  padding: 3em 2.5em 2em 3.5em;
  color: #333333;
  background-color: #f6f6f6;
}

.quote::before {
  display: inline-block;
  position: absolute;
  top: 1em;
  left: 1.5em;
  width: 1.5em;
  height: 1.5em;
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20fill%3D%22%23007bbb%22%20d%3D%22M21.8%2012H18V9c0-1.7%201.3-3%203-3h.4c.6%200%201.1-.5%201.1-1.1V2.6c0-.6-.5-1.1-1.1-1.1H21c-4.1%200-7.5%203.4-7.5%207.5v11.2c0%201.2%201%202.2%202.2%202.2h6c1.2%200%202.2-1%202.2-2.2v-6C24%2013%2023%2012%2021.8%2012zM8.2%2012H4.5V9c0-1.7%201.3-3%203-3h.4C8.5%206%209%205.5%209%204.9V2.6c0-.6-.5-1.1-1.1-1.1h-.4C3.4%201.5%200%204.9%200%209v11.2c0%201.2%201%202.2%202.2%202.2h6c1.2%200%202.2-1%202.2-2.2v-6c.1-1.2-.9-2.2-2.2-2.2z%22%2F%3E%3C%2Fsvg%3E");
  background-repeat: no-repeat;
  content: "";
}

.quote p {
  margin-top: 0;
}

.quote cite {
  display: block;
  color: #737373;
  font-size: 0.8em;
  text-align: right;
}
.quote a {
  font-size: 15px;
}

/*予約ボタン*/

.button-014 {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  margin: 0 auto;
  padding: 0.9em 2em;
  border: none;
  border-radius: 5px;
  background-color: #f4e410;
  color: #000;
  font-weight: 600;
  font-size: 1em;
}
.button-014 a {
  color: #fff;
}
.button-014:hover {
  animation: anima-button-041 2s linear infinite;
}

/*strong装飾*/
strong {
  font-weight: 500;
  text-decoration: underline; /* 下線 */
  text-decoration-thickness: 0.3em; /* 線の太さ */
  text-decoration-color: #f7e488; /* 線の色 */
  text-underline-offset: -0.1em; /* 線の位置。テキストに重なるようにやや上部にする */
  text-decoration-skip-ink: none; /* 下線と文字列が重なる部分でも下線が省略されない（線が途切れない） */
}

/*b装飾*/

/*topナビゲーションの色*/

.navbar-light .navbar-nav .nav-link {
  color: #000;
  font-size: 17px;
  font-weight: bold;
}

.nav-link:hover:hover {
  animation: anima-button-041 2s linear infinite;
}
.navbar-light .navbar-nav .nav-link:hover {
  color: #000;
}
@keyframes anima-nav-link {
  7% {
    transform: translateY(-15px);
  }
  15% {
    transform: translateY(0);
  }
  20% {
    transform: translateY(-7px);
  }
  25% {
    transform: translateY(0);
  }
}
/*トップロゴとトグル*/
.navbar-brand {
  margin: 0 0 6px 0;
}

.navbar-light .navbar-toggler {
  padding: 5px 6px;
}
/*フッター*/
.bg {
  background-color: #fff;
}

.footer02 {
  border-top-left-radius: 40px;
  color: #808080;
  background: #000000;
  text-align: center;
  padding: 30px;
}
.footer02 a {
  color: #fff;
  text-decoration: none;
}
.footer02 a:hover {
  text-decoration: underline;
}
.footer02 .menu {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
.footer02 .menu li {
  font-size: 19px;
  margin: 0;
  padding: 10px 20px;
}
.footer02 .copyright {
  font-size: 13px;
  color: #fff;
  margin: 24px 0 40px 0;
  padding: 20px 0 0 0;
}

@media screen and (max-width: 933px) {
  .menu {
    flex-direction: column; /* 縦並び */
    align-items: center; /* 中央寄せ */
  }
}

/*ナビドロップダウンの矢印の色*/
.my-skyblue {
  color: #007bbb;
}

.dropdown-menu {
  border: 2px solid rgba(0, 0, 0, 0.917);
}
/*吹き出し*/
.balloon5 {
  width: 100%;
  margin: 1.5em 0;
  overflow: hidden;
}

.balloon5 .faceicon {
  float: left;
  margin-right: -90px;
  width: 80px;
}

.balloon5 .faceicon img {
  width: 100%;
  height: auto;
  border: solid 3px #d7ebfe;
  border-radius: 50%;
}

.balloon5 .chatting {
  width: 100%;
}

.says {
  display: inline-block;
  position: relative;
  margin: 5px 0 0 105px;
  padding: 17px 13px;
  border-radius: 12px;
  background: #d7ebfe;
}

.says:after {
  content: "";
  display: inline-block;
  position: absolute;
  top: 18px;
  left: -22px;
  border: 12px solid transparent;
  border-right: 12px solid #d7ebfe;
}

.says p {
  margin: 0;
  padding: 0;
}

/*google map*/
.gmap {
  margin: 30px 0;
  height: 0;
  overflow: hidden;
  padding-bottom: 56.25%;
  position: relative;
}
.gmap iframe {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
}

/*Q&Aアコーディオン*/
.accordion .inner {
  display: none;
}

.accordion p {
  position: relative;
  cursor: pointer;
}

.accordion p:after {
  position: absolute;
  top: -50%;
  right: 0;
  content: "+";
  width: 50px;
  height: 50px;
  line-height: 50px;
  background: #007bbb;
  color: #fff;
  text-align: center;
  transition: all 0.4s;
}

.accordion p.xmark:after {
  content: "×";
}
.inner li {
  line-height: 2.7rem;
}

/*院内ブログ*/
.card-custom {
  overflow: hidden;
  min-height: 450px;
  box-shadow: 0 0 15px rgba(10, 10, 10, 0.3);
}

.card-custom-img {
  height: 200px;
  min-height: 200px;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  border-color: inherit;
}

/* First border-left-width setting is a fallback */
.card-custom-img::after {
  position: absolute;
  content: "";
  top: 161px;
  left: 0;
  width: 0;
  height: 0;
  border-style: solid;
  border-top-width: 40px;
  border-right-width: 0;
  border-bottom-width: 0;
  border-left-width: 545px;
  border-left-width: calc(575px - 5vw);
  border-top-color: transparent;
  border-right-color: transparent;
  border-bottom-color: transparent;
  border-left-color: inherit;
}

.card-custom-avatar img {
  border-radius: 50%;
  box-shadow: 0 0 15px rgba(10, 10, 10, 0.3);
  position: absolute;
  top: 100px;
  left: 1.25rem;
  width: 100px;
  height: 100px;
}
/*院内ブログ終わり*/

/*お知らせボタン*/

.notice .btn {
  margin-right: 84px;
}
.notice .a {
  text-decoration: underline;
}
/*詳しくはこちらボタン*/

/*ブログの背景*/
.blog-bg {
  background-color: #fff;
}
/*院長紹介の背景*/
#staff {
  background-color: #fff;
}

#message {
  padding: 0 4%;
}

/*料金の背景*/

#price-bg {
  background-color: #f7fcff;
  background-image: url(../img/blue3.jpg);
  border-top-right-radius: 40px;
}
#price {
  padding: 0 4%;
}
.nedan font {
  color: #fff;
}
.price-botom-bg {
  background-color: #f5f5f5;
}
/*各セクションfw-500*/
#staff {
  font-weight: 400;
}
.onegai {
  font-weight: 400;
}

.ryoukin p {
  font-weight: 400;
}
.omise p {
  font-weight: 400;
}
#blog p {
  font-weight: 400;
}
#access p {
  font-weight: 400;
}

.top-map li {
  font-weight: 400;
}
address {
  font-weight: 400;
}
.bottom p {
  font-size: 17px;
  margin-top: 0;
  margin-bottom: 0;
  letter-spacing: 0;
  font-weight: 700;
}
/*料金の小枠*/
.price-inner-bg p {
  padding: 0 20px;
}

/*料金の価格背景*/
.price-inner-bg {
  padding: 30px 25px;
  border-top-right-radius: 40px;
  background-color: #fff;
}
/*キャッシュレス説明*/
.price-botom {
  border-radius: 10px;
  padding: 20px 25px;
  background-color: #fff;
  font-size: 15px;
}
/*学割料金の価格見出し*/
.price-inner {
  color: #084298;
}
/*料金クレジットリスト*/
.credit {
  border-radius: 10px;
  text-align: left;
  padding: 32px 32px 28px;
  color: #000;
  display: inline-block;
  background-color: #fff;
  list-style: none;
}

/*ブログの内ブログ（ブートストラップカード）*/
.card-body {
  background-image: linear-gradient(0deg, transparent 19px, #ccc 20px),
    linear-gradient(90deg, transparent 19px, #ccc 20px);
  background-size: 20px 20px;
  padding: 35px;
  border: 3px solid #000;
  border-radius: 10px;
}
/*整体の効果の背景*/
.effect {
  background-color: #f5f5f5;
}
.effect-img {
  background-color: #fff;
  padding: 20px 0;
}
/*お願い*/

.onegai span {
  font-weight: 600;
  color: #0067ff;
}
.onegai img {
  border-radius: 0%;
}
.onegai {
  padding: 70px 0;
  background-color: #f5f5f5;
}
/*お店の雰囲気の背景*/
.omise {
  background-color: #f5f5f5;
  z-index: 0;
  position: relative;
}

/*幾何学模様*/
.wrap {
  width: 100%;
  height: 700px;
  position: relative; /*基準要素、子の基準となる*/
}
/*アニメーション描画用*/
canvas {
  position: absolute; /*親のブロックを基準にして相対位置に配置する*/
  /*位置指定*/
  top: 0;
  right: 0;
  z-index: 1; /*重ね順を-1に　※1以上だとほかのコンテンツの上に被さってしまいます*/
}
/*アクセス*/

.map-inner.border {
  background-color: #fff;
  border-radius: 10px;
  border: 3px solid #0d0d0d !important;
}
.blog-body {
  padding: 20px;
}
/*お知らせのその他ボタン*/
.cta {
  padding-top: 15px;
  border: none;
  background: none;
}
.cta a {
  font-weight: 700;
  color: #000;
}
.cta span {
  padding-bottom: 7px;
  letter-spacing: 4px;
  font-size: 18px;
  padding-right: 15px;
  text-transform: uppercase;
}

.cta svg {
  transform: translateX(-8px);
  transition: all 0.3s ease;
}

.cta:hover svg {
  transform: translateX(0);
}

.cta:active svg {
  transform: scale(0.9);
}

.hover-underline-animation {
  position: relative;
  color: black;
  padding-bottom: 20px;
}

.hover-underline-animation:after {
  content: "";
  position: absolute;
  width: 100%;
  transform: scaleX(0);
  height: 2px;
  bottom: 0;
  left: 0;
  background-color: #000000;
  transform-origin: bottom right;
  transition: transform 0.25s ease-out;
}

.cta:hover .hover-underline-animation:after {
  transform: scaleX(1);
  transform-origin: bottom left;
}
/*黒ボタン*/

.top-map {
  margin-bottom: 20px;
}
.button-041 {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  margin: 0 auto;
  padding: 0.9em 2em;
  border: none;
  border-radius: 5px;
  background-color: #000;
  color: #fff;
  font-weight: 600;
  font-size: 1em;
}
.button-041 a {
  color: #fff;
}
.button-041:hover {
  animation: anima-button-041 2s linear infinite;
}

@keyframes anima-button-041 {
  7% {
    transform: translateY(-15px);
  }
  15% {
    transform: translateY(0);
  }
  20% {
    transform: translateY(-7px);
  }
  25% {
    transform: translateY(0);
  }
}
/*web予約ボタン*/
.cta_btn02 {
  width: 100%;
  max-width: 350px; /* ボタン幅 */
  font-weight: bold; /* 文字の太さ */
  line-height: 1.5;
  position: relative;
  display: inline-block;
  transition: all 0.3s;
  text-align: center;
  vertical-align: middle;
  text-decoration: none;
  letter-spacing: 0.1em;
  color: #000; /* 文字色 */
  border-radius: 0.5rem;
  margin-bottom: 0.5rem;
  padding: 0;
}

.cta_btn02:before {
  position: absolute;
  top: -5px;
  right: 0;
  bottom: 0;
  left: 0;
  height: 100%;
  content: "";
  transition: all 0.3s;
  transform: translate3d(0, 0.75rem, -1rem);
  border: 2px solid #000;
  border-radius: inherit;
  background: #59f2f3; /* ボタン下色 */
  box-shadow: 0 0.6rem 0 0 rgba(0, 0, 0, 0.2);
}

.cta_btn02-front {
  position: relative;
  display: block;
  padding: 0.7em 2em;
  transition: all 0.3s;
  border: 2px solid #000;
  border-radius: inherit;
  background: #59f2f3; /* ボタン上色 */
}

/* マウスオーバーした際のデザイン */
.cta_btn02:hover {
  color: #000;
  -webkit-transform: translate(0, 0.25rem);
  transform: translate(0, 0.25rem);
  background: #ff4f5a;
}

.cta_btn02:hover:before {
  transform: translate3d(0, 0.5rem, -1rem);
  box-shadow: 0 0.35rem 0 0 rgba(0, 0, 0, 0.2);
}

/*お知らせリスト*/
.list-unstyled li {
  font-size: 18px;
}
/*適応症状のリンクホバー*/
#list a:hover {
  opacity: 0.7;
}

/*アクセスの背景*/
.map {
  background-color: #f5f5f5;
  background-image: url(../img/);
}
.map-home-heading {
  position: relative;
  display: inline-block;
  padding: 0 45px;
}
.map-home-heading:before,
.map-home-heading:after {
  content: "";
  position: absolute;
  top: 50%;
  display: inline-block;
  width: 44px;
  height: 2px;
  background-color: #000;
  -webkit-transform: rotate(-60deg);
  transform: rotate(-60deg);
}
.map-home-heading:before {
  left: 0;
}
.map-home-heading:after {
  right: 0;
}
/*ナビドロップダウン*/
.dropdown-item {
  font-weight: 500;
}
.dropdown-item {
  position: relative;
  padding-left: 30px;
}

.dropdown-item::before {
  /* 背景の表示設定 */
  content: "";
  position: absolute;
  margin: auto;
  top: 0;
  bottom: 0;
  left: 6px;
  width: 20px; /* 横幅 */
  height: 20px; /* 高さ */
  border-radius: 50%; /* 角の丸み */
  background: #22a3dd;
}

.dropdown-item::after {
  /* くの字の表示設定 */
  content: "";
  position: absolute;
  margin: auto;
  top: 0;
  bottom: 0;
  left: 12px;
  width: 7px;
  height: 7px;
  border-top: 3px solid #fff;
  border-right: 3px solid #fff;
  transform: rotate(45deg);
}
/*top予約*/
.yoyaku {
  margin: 40px 0;
  position: relative;
  text-align: center;
}

.cta_btn01 {
  width: 100%;
  max-width: 350px; /* ボタン幅 */
  font-weight: bold; /* 文字の太さ */
  line-height: 1.5;
  position: relative;
  display: inline-block;
  transition: all 0.3s;
  text-align: center;
  vertical-align: middle;
  text-decoration: none;
  letter-spacing: 0.1em;
  color: #000; /* 文字色 */
  border-radius: 0.5rem;
  margin-bottom: 0.5rem;
  padding: 0;
}

.cta_btn01:before {
  position: absolute;
  top: -5px;
  right: 0;
  bottom: 0;
  left: 0;
  height: 100%;
  content: "";
  transition: all 0.3s;
  transform: translate3d(0, 0.75rem, -1rem);
  border: 2px solid #000;
  border-radius: inherit;
  background: #f4e410; /* ボタン下色 */
  box-shadow: 0 0.6rem 0 0 rgba(0, 0, 0, 0.2);
}

.cta_btn01-front {
  position: relative;
  display: block;
  padding: 0.7em 2em;
  transition: all 0.3s;
  border: 2px solid #000;
  border-radius: inherit;
  background: #f4e410; /* ボタン上色 */
}

/* マウスオーバーした際のデザイン */
.cta_btn01:hover {
  color: #000;
  -webkit-transform: translate(0, 0.25rem);
  transform: translate(0, 0.25rem);
  background: #f4e410;
}

.cta_btn01:hover:before {
  transform: translate3d(0, 0.5rem, -1rem);
  box-shadow: 0 0.35rem 0 0 rgba(0, 0, 0, 0.2);
}

/* スクリーンサイズが992px以上の場合にページ全体に適用*/
@media screen and (min-width: 960px) {
  .home {
    margin: 0 25% 0 25%;
  }
}
/*topナビの背景*/
.navbar-expand-lg .navbar-collapse {
  border-bottom: 1px solid #e5e7eb; /* ごく薄い下線 */
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05); /* ほんのり影 */
  background-color: #f7f7f7;
}
/*フッターの背景*/
.footer-bg {
  background-color: #ffffff;
}

/*境界線*/
.custom-shape-divider-top-1704591515 {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  overflow: hidden;
  line-height: 0;
}

.custom-shape-divider-top-1704591515 svg {
  position: relative;
  display: block;
  width: calc(148% + 1.3px);
  height: 150px;
}

.custom-shape-divider-top-1704591515 .shape-fill {
  fill: #ffffff;
}

/** For mobile devices **/
@media (max-width: 767px) {
  .custom-shape-divider-top-1704591515 svg {
    width: calc(148% + 1.3px);
    height: 70px;
  }
}
.line {
  position: relative;
}
/*通常のホバー*/

/*お知らせホバー*/
.list-unstyled a {
  opacity: 1;
  position: relative;
  display: inline-block;
  text-decoration: none;
}

.list-unstyled a::after {
  position: absolute;
  bottom: -3px;
  left: 0;
  content: "";
  width: 100%;
  height: 2px;
  background: #065fd4;
  transform: scale(0, 1);
  transform-origin: left top;
  transition: transform 0.3s;
}
.list-unstyled a:hover::after {
  transform: scale(1, 1);
  opacity: 1;
}

/*prf見出し*/
.ttl_center3 {
  font-weight: 500;
  padding-bottom: 0.7em;
  text-align: center;
  position: relative;
}
.ttl_center3::after {
  content: "";
  position: absolute;
  border-bottom: 10px dotted #22a3dd;
  width: 50px;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
}
.copyright {
  padding: 26px 0;
  background-color: #333333;

  text-align: center;
}
.copyright p {
  color: #ffffff;
  margin: 0;
}

/*番号付き見出し*/
.heading-24 {
  position: relative;
  padding-top: 1.5em;
  color: #007bbb;
}

.heading-24::before {
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: -1;
  color: #d9f4ff;
  font-size: 3em;
  line-height: 1;
  content: attr(data-number);
  pointer-events: none;
}

/* ちょっとした隙間が欲しいとき */
.spaced {
  margin-bottom: 40px; /* 下に20pxの隙間を追加 */
}

/* Q&A */
.qaContainer dt {
  padding: 10px 10px 10px 35px;
  border-radius: 5px;
  background: #cce6ff;
  text-indent: -25px;
}
.qaContainer dt:before {
  content: "Q.";
  font-weight: bold;
  margin-right: 7px;
}
.qaContainer dd {
  margin: 20px 10px 40px 35px;
  text-indent: -25px;
}
.qaContainer dd:before {
  content: "A.";
  color: #1771c6;
  font-weight: bold;
  margin-right: 7px;
}
/* ブログ強調 */
.px {
  font-size: 23px;
}

/* 自己紹介 */
.ppp {
  font-weight: 500;
}
@media screen and (max-width: 764px) {
  .ppp {
    margin-top: 30px;
  }
}

/* FAQ */
.qa-8 dt {
  font-size: 19px;
  margin-bottom: 1em;
  color: #333333;
  font-weight: 600;
}

.qa-8 dt::before,
.qa-8 dd::before {
  margin-right: 0.4em;
}

.qa-8 dt::before {
  content: "Q.";
}

.qa-8 dd {
  letter-spacing: 0.12rem;
  line-height: 1.8;
  font-size: 17px;
  margin: 0 0 2.5em;
  padding: 1em 1.5em;
  background-color: #f5f5f5;
  color: #333333;
}

.qa-8 dd::before {
  content: "A.";
}

/*お客様の声*/

.nyano-feedback-wrapper {
  display: flex;
  flex-direction: column;
  gap: 20px;
  max-width: 700px;
  margin: auto;
}

/* 画像カラムがなくなったので、カードは中央寄せレイアウトに */
.nyano-feedback-card {
  display: flex;
  justify-content: center; /* 中央寄せ */
  background-color: #fff;
  border-radius: 10px;
  padding: 24px; /* 少しだけ広げて余白感UP */
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  align-items: flex-start;
  flex-wrap: wrap;
}
.nyano-feedback-card:nth-child(odd) {
  background-color: #edf7ff;
}
.nyano-feedback-card:nth-child(even) {
  background-color: #f5f5f5;
}

/* 本文コンテナを「最大幅つきの中央」にして左右余白を均等化 */
.nyano-feedback-content {
  flex: 0 1 620px; /* 伸縮しつつ最大幅の基準を設定 */
  max-width: 620px; /* 行が長くなりすぎないよう制限 */
  width: 100%;
  margin: 0 auto; /* 念のため中央寄せ */
}

.nyano-feedback-content p {
  font-size: 14px;
  line-height: 1.8;
  color: #333;
  text-align: left;
  margin: 0;
}

.nyano-feedback-content p span {
  font-weight: bold;
  color: #007bbb;
}

/* 画像関連は不要になったので削除してOK（残しても影響なし）
.nyano-profile { ... }
.nyano-profile-image { ... }
.nyano-profile-image img { ... }
.nyano-profile-footer { ... }
*/

@media (max-width: 480px) {
  .nyano-feedback-card {
    padding: 18px;
  }
  .nyano-feedback-content {
    max-width: 100%; /* スマホは全幅でOK */
  }
  .nyano-feedback-content p {
    font-size: 15px; /* 少し読みやすく */
    line-height: 1.9;
  }
}

/* TOPキャッチコピー */
/* ---- PC 基本 ---- */
.mv-hero {
  background: #f7f7f7;
  /* 既存の指定はそのまま */
  color: #222;
  padding: clamp(70px, 9vw, 96px) 0;
  font-family: "Zen Kaku Gothic New", "Noto Sans JP", system-ui, sans-serif;

  /* 追加：ビューポートいっぱいに背景を広げる */
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  width: 100vw;
}

.mv-wrap {
  width: min(880px, 88vw);
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  align-items: center; /* PCは中央寄せ */
}

/* 見出し */
.mv-title {
  font-weight: 300;
  font-size: 35px;
  line-height: 1.25;
  letter-spacing: 0.06em;
  color: #1a1a1a;
  margin: 0 0 1.1em;
  text-align: center; /* 本文に対して中央に */
  max-width: 40ch; /* 本文幅にそろえる */
}

/* 本文 */
.mv-lead {
  max-width: 40ch;
  margin: 0 auto;
  font-size: clamp(16px, 2.2vw, 19px);
  line-height: 2.1;
  letter-spacing: 0.02em;
  color: #3a3a3a;
  text-align: left;
}
.mv-lead p {
  font-size: 18px;
  margin: 0 0 1.2em;
}

/* 注意書き */
.mv-note {
  margin-top: 1.2em;
  font-size: clamp(12px, 1.8vw, 14px);
  color: #777;
  text-align: left;
  max-width: 40ch; /* 本文と同じ幅 */
}

/* ---- スマホ表示 (max 767px) ---- */
@media (max-width: 767px) {
  .mv-wrap {
    align-items: flex-start; /* 左寄せ */
    text-align: left;
    padding-left: 1rem;
    padding-right: 3rem;
    width: 100%;
    box-sizing: border-box;
  }
  .mv-title,
  .mv-lead,
  .mv-note {
    max-width: 100%; /* 画面幅に合わせる */
    margin-left: 0; /* 左端そろえ */
    margin-right: 0;
    text-align: left; /* 左揃え */
  }
}
/* 重要語を折り返さない */
.keep {
  white-space: nowrap;
}

/* 日本語の禁則処理を強めて句読点のぶら下がりを整える */
.mv-lead {
  line-break: strict; /* 句読点で変な改行を避ける */
  word-break: keep-all; /* 英単語は切らずにCJKルールで改行 */
}

/* 見出しはブラウザにバランスよく割ってもらう（対応ブラウザのみ） */
.mv-title {
  text-wrap: balance; /* 対応環境で行長を均等化 */
}

/* 既存の .br-sp 制御（PCでは改行を消す） */
.br-sp {
  display: inline;
}
@media (min-width: 768px) {
  .br-sp {
    display: none;
  }
}

/* 整体理念の注意書きボックス */

.cstm-box-bg {
  margin: 0 auto 2em; /* 外側の余白（上下と中央配置） */
  padding: 2em; /* 内側余白 */
  background-color: #f5f5f5; /* 背景の色 */
}
/* ===== 腰痛ページ：本文用（Bootstrap非依存） ===== */
:root {
  --y-bg: #0f172a;
  --y-text: #0b1020;
  --y-muted: #475569;
  --y-brand: #0ea5e9;
  --y-brand-d: #0284c7;
  --y-paper: #fff;
  --y-accent: #f7e488;
  --y-ok: #16a34a;
  --y-warn: #ea580c;
  --y-danger: #dc2626;
}
html {
  scroll-behavior: smooth;
}
body {
  background-color: #ffffff;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, "Noto Sans JP",
    "Hiragino Kaku Gothic ProN", "Meiryo", sans-serif;
  color: #1f2937;
}

/* layout */
.y-container {
  max-width: 980px;
  margin-inline: auto;
  padding: 0 16px;
}
.y-section {
  padding: 72px 0;
}
.y-bg-white {
  background: #fff;
}
.y-title-center {
  font-weight: 800;
  text-align: center;
  margin: 0 0 24px;
}
.y-center {
  text-align: center;
}
.y-mt-3 {
  margin-top: 24px;
}
.y-small {
  font-size: 0.9rem;
}
.y-muted {
  color: #64748b;
}
.y-danger {
  color: var(--y-danger);
}
.y-fw-bold {
  font-weight: 700;
}
.y-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 16px;
}
.y-actions-left {
  margin-top: 8px;
}

/* hero */
.y-hero {
  padding: 48px 0;
  background: radial-gradient(
      1200px 600px at 80% -10%,
      rgba(14, 165, 233, 0.15),
      transparent
    ),
    linear-gradient(180deg, #e6f6fe 0%, #fff 100%);
}
.y-hero__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}
@media (min-width: 992px) {
  .y-hero__grid {
    grid-template-columns: 1.2fr 0.8fr;
  }
}
.y-hero__title {
  font-weight: 800;
  letter-spacing: 0.01em;
  line-height: 1.2;
  font-size: clamp(28px, 3.5vw, 40px);
  margin: 0.4em 0 0.6em;
}
.y-lead {
  font-size: 1.125rem;
}
.y-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 12px;
  background: rgba(14, 165, 233, 0.12);
  color: var(--y-brand);
  border: 1px solid rgba(14, 165, 233, 0.25);
  padding: 0.35rem 0.6rem;
  border-radius: 999px;
  font-weight: 600;
}
.y-marker {
  font-weight: 700;
  text-decoration: underline;
  text-decoration-thickness: 0.35em;
  text-underline-offset: -0.15em;
  text-decoration-color: var(--y-accent);
}
.y-kpis {
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
  margin-top: 12px;
}
.y-kpi {
  display: flex;
  gap: 0.75rem;
  align-items: center;
}
.y-kpi__num {
  font-size: 1.75rem;
  font-weight: 800;
}

/* buttons */
.y-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.7em 1.1em;
  border-radius: 0.6rem;
  border: 1px solid transparent;
  text-decoration: none;
  font-weight: 700;
}
.y-btn--brand {
  background: var(--y-brand);
  color: #fff;
  border-color: var(--y-brand);
}
.y-btn--brand:hover {
  background: var(--y-brand-d);
  color: #fff;
}
.y-btn--outline {
  background: #fff;
  color: #334155;
  border-color: #cbd5e1;
}
.y-btn--outline:hover {
  background: #f8fafc;
}

/* cards */
.y-card {
  border: 1px solid #e5e7eb;
  box-shadow: 0 8px 24px rgba(2, 8, 23, 0.06);
  border-radius: 12px;
  background: #fff;
}
.y-card--pad {
  padding: 24px;
}

/* lists */
.y-checklist {
  list-style: none;
  padding: 0;
  margin: 0;
}
.y-checklist li {
  margin: 0 0 0.5rem 0;
}
.y-checklist i {
  color: var(--y-ok);
  margin-right: 0.5rem;
}
.y-xlist {
  list-style: none;
  padding: 0;
  margin: 0;
}
.y-xlist i {
  color: var(--y-warn);
  margin-right: 0.5rem;
}
.y-list {
  padding-left: 1.1rem;
  margin: 0;
}
.y-list li {
  margin-bottom: 0.6rem;
}
.y-pill {
  display: inline-block;
  border: 1px solid #e5e7eb;
  padding: 0.25rem 0.6rem;
  border-radius: 999px;
  font-size: 0.9rem;
  color: #475569;
}

/* grids */
.y-grid-2 {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}
@media (min-width: 992px) {
  .y-grid-2 {
    grid-template-columns: 1fr 1fr;
  }
}
.y-grid-3 {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}
@media (min-width: 768px) {
  .y-grid-3 {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* flow */
.y-flow {
  position: relative;
  padding-left: 56px;
}
.y-flow::before {
  content: "";
  position: absolute;
  left: 28px;
  top: 8px;
  bottom: 8px;
  width: 2px;
  background: #e2e8f0;
}
.y-flow__num {
  position: absolute;
  left: 16px;
  top: 16px;
  width: 24px;
  height: 24px;
  border-radius: 999px;
  background: #0ea5e9;
  color: #fff;
  display: grid;
  place-items: center;
  font-weight: 800;
}

/* table */
.y-table-wrap {
  overflow: auto;
}
.y-pricetable {
  border-collapse: separate;
  border-spacing: 0;
  width: 100%;
}
.y-pricetable th,
.y-pricetable td {
  padding: 0.9rem 1rem;
  border: 1px solid #e5e7eb;
}
.y-pricetable th {
  background: #f1f5f9;
  font-weight: 700;
}
.y-pricetable td {
  background: #fff;
}
.y-note {
  padding: 12px;
  color: #64748b;
  font-size: 0.9rem;
}

/* CTA */
.y-cta {
  display: grid;
  gap: 24px;
  align-items: center;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  background: linear-gradient(180deg, #ffffff 0%, #f0fbff 100%);
  padding: 24px;
}
@media (min-width: 900px) {
  .y-cta {
    grid-template-columns: 1fr auto;
  }
}
.y-h3 {
  font-size: 1.4rem;
  font-weight: 800;
  margin: 0 0 0.6rem;
}
.y-h5 {
  font-size: 1.05rem;
  font-weight: 700;
  margin: 0 0 0.7rem;
}

/* Map placeholder */
.y-map {
  aspect-ratio: 16/9;
  background: #e2e8f0;
  border-radius: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #64748b;
}

/* accordion (details) */
.y-accordion details {
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  background: #fff;
  margin-bottom: 12px;
  overflow: hidden;
}
.y-accordion summary {
  cursor: pointer;
  font-weight: 700;
  padding: 16px;
  list-style: none;
}
.y-accordion summary::-webkit-details-marker {
  display: none;
}
.y-accordion__body {
  padding: 0 16px 16px;
}

/* utilities */
.y-hero .y-card {
  padding: 16px;
}
/* 既存の footer / cta_btn01 / topBtn のCSSはそのまま流用（このページでは上書きなし） */
/* ====== 腰痛テンプレ（Bootstrap不使用レイアウト）====== */
:root {
  --paper: #fff;
  --ink: #1f2937;
  --muted: #64748b;
  --line: #e5e7eb;
  --shadow: 0 8px 24px rgba(2, 8, 23, 0.06);
  --radius: 16px;
  --gap: 24px;
  --gap-lg: 32px;
  --brand: #0ea5e9;
  --accent: #f7e488;
}

/* ベース */
*,
*::before,
*::after {
  box-sizing: border-box;
}
.mgn-wrap {
  max-width: 980px;
  margin-inline: auto;
  padding-inline: 16px;
}
.mgn-section {
  padding: 72px 0;
}
.mgn-card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

/* ヒーローなど共通 */
.badge-soft {
  background: rgba(14, 165, 233, 0.12);
  color: var(--brand);
  border: 1px solid rgba(14, 165, 233, 0.25);
  padding: 0.35rem 0.6rem;
  border-radius: 999px;
  font-weight: 600;
}
.marker {
  font-weight: 700;
  text-decoration: underline;
  text-decoration-thickness: 0.35em;
  text-underline-offset: -0.15em;
  text-decoration-color: var(--accent);
}
.text-muted-2 {
  color: var(--muted);
}
.kpi {
  display: flex;
  gap: 0.75rem;
  align-items: center;
}
.kpi .num {
  font-size: 1.75rem;
  font-weight: 800;
}

/* ====== Access（2カラム） ====== */
.access {
  background: #f8fafc;
}
.access .grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px; /* 左：可変 右：固定 */
  gap: var(--gap-lg);
  align-items: start;
}
.access .map-embed {
  aspect-ratio: 16/9;
  background: #e2e8f0;
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #75829a;
  padding: 8px;
}
.access .sidebar {
  position: sticky;
  top: 24px; /* ヘッダーにかぶらない高さ */
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 24px;
  padding: 24px;
  box-shadow: var(--shadow);
  max-width: 420px;
  margin-left: auto;
}
.access .sidebar p {
  margin: 0.5rem 0;
  color: var(--ink);
  line-height: 1.8;
}
.access .row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
.access .ico {
  min-width: 1.4em;
  line-height: 1.4em;
}
.access .btn-book {
  display: block;
  width: 100%;
  max-width: 360px;
  margin: 16px auto 0;
  text-align: center;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-decoration: none;
  color: #000;
  background: #f4e410;
  border: 2px solid #000;
  border-radius: 8px;
  padding: 0.9em 1.2em;
  box-shadow: 0 0.6rem 0 0 rgba(0, 0, 0, 0.2);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.access .btn-book:hover {
  transform: translateY(3px);
  box-shadow: 0 0.35rem 0 0 rgba(0, 0, 0, 0.2);
}

/* レスポンシブ */
@media (max-width: 1024px) {
  .access .grid {
    grid-template-columns: 1fr;
  }
  .access .sidebar {
    position: static;
    max-width: none;
  }
}
/* 予約ボタン（強調） */
.access .btn-book {
  display: block;
  width: 100%;
  max-width: 360px;
  margin: 16px auto 0;
  text-align: center;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-decoration: none;
  color: #000;
  background: #f4e410;
  border: 2px solid #000;
  border-radius: 8px;
  padding: 0.9em 1.2em;
  box-shadow: 0 0.6rem 0 0 rgba(0, 0, 0, 0.2);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.access .btn-book:hover {
  transform: translateY(3px);
  box-shadow: 0 0.35rem 0 0 rgba(0, 0, 0, 0.2);
}

/* マップボタン（シンプル版） */
.access .btn-map {
  display: block;
  width: 100%;
  max-width: 360px;
  margin: 12px auto 0;
  text-align: center;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-decoration: none;
  color: var(--ink);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 0.8em 1.1em;
  transition: background 0.2s ease, color 0.2s ease;
}
.access .btn-map:hover {
  background: #f9fafb;
  color: var(--brand);
  border-color: var(--brand);
}
/* ====== Access セクションのレイアウト（グリッド） ====== */
.access-grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: 24px;
  align-items: start;
}
@media (max-width: 1024px) {
  .access-grid {
    grid-template-columns: 1fr;
  }
}
.access-map {
  aspect-ratio: 16/9;
  background: #e2e8f0;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #64748b;
  padding: 8px;
  width: 100%;
}
.access-card {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 16px;
  box-shadow: 0 8px 24px rgba(2, 8, 23, 0.06);
  padding: 24px;
}
.access-card p {
  margin: 0 0 12px;
}

/* 予約（黄の立体）＝既存 .cta_btn01 を継続使用 */

/* ====== マップを開く：シンプルボタン ====== */
.btn-map {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  padding: 0.7em 1.1em;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  background: #fff;
  color: #0f172a;
  text-decoration: none;
  box-shadow: none;
  transition: background 0.2s, border-color 0.2s, transform 0.05s;
}
.btn-map:hover {
  background: #f8fafc;
  border-color: #94a3b8;
}
.btn-map:active {
  transform: translateY(1px);
}
.btn-map .i {
  font-style: normal;
}

/* ボタン行の並び（折り返し対応） */
.btn-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}

/* CTA ボックス（見た目そのまま、はみ出し防止） */
.cta-box {
  background: linear-gradient(180deg, #ffffff 0%, #f0fbff 100%);
  border: 1px solid #e2e8f0;
  border-radius: 16px;
}

/* モバイルでの余白調整（ズレ対策） */
.section {
  padding: 72px 0;
}
@media (max-width: 640px) {
  .section {
    padding: 56px 0;
  }
  .access-card {
    padding: 20px;
  }
}
/* ========= 予約CTAのレイアウト修正（Bootstrap不使用） ========= */
/* セクションの幅とセンタリング（任意。既にあるなら不要） */
.section {
  padding: 72px 0;
}
.container-narrow {
  /* 既存と合わせておくと安全 */
  max-width: 980px;
  margin: 0 auto;
}

/* 問い合わせボックスはそのままでもOK。見た目は既存 .cta-box を使用 */
.cta-box {
  background: linear-gradient(180deg, #ffffff 0%, #f0fbff 100%);
  border: 1px solid #e2e8f0;
  border-radius: 1rem;
  padding: 24px;
}

/* ボタンの整列用ラッパー（重要） */
.cta-actions {
  display: flex;
  justify-content: flex-end; /* PCは右寄せ */
  align-items: center;
  gap: 12px;
  margin-top: 16px;
}

/* 予約ボタン本体（既存 .cta_btn01 を使う想定。横中央ズレ防止） */
.cta-actions .cta_btn01 {
  display: block; /* inline-block由来のズレ防止 */
  margin: 0; /* 右寄せなので余計なautoを消す */
}

/* スマホで中央寄せに切替 */
@media (max-width: 768px) {
  .cta-actions {
    justify-content: center;
  }
  .cta-actions .cta_btn01 {
    margin: 12px auto 0; /* 横中央 */
  }
}

/* ========= マップボタン：シンプル版 ========= */
.btn-map {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.6rem 1rem;
  border: 1px solid #cbd5e1;
  border-radius: 0.5rem;
  background: #fff;
  color: #0f172a;
  text-decoration: none;
  font-weight: 600;
  line-height: 1.2;
  box-shadow: 0 1px 2px rgba(2, 8, 23, 0.05);
  transition: box-shadow 0.2s, transform 0.2s, background-color 0.2s;
}
.btn-map:hover {
  background: #f8fafc;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(2, 8, 23, 0.08);
}
.btn-map:active {
  transform: translateY(0);
  box-shadow: 0 1px 2px rgba(2, 8, 23, 0.05);
}
/* ===== 予約CTA（#booking）スマホだけ中央寄せ ===== */
@media (max-width: 768px) {
  #booking .cta-box {
    display: flex; /* ここだけ一時的にフレックス */
    flex-direction: column;
  }
  #booking .cta_btn01 {
    margin: 12px auto 0; /* 中央寄せ */
    display: block; /* ズレ防止 */
  }
}
/* ===== PCでは横並び・ボタン右端 ===== */
.cta-box {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap; /* 狭い画面で詰まったら折り返し */
}

/* ===== PCのテキスト部分は伸びる、ボタンは右に固定 ===== */
.cta-text {
  flex: 1; /* 余ったスペースを埋める */
  min-width: 200px;
}
.cta-actions {
  flex-shrink: 0; /* ボタンは縮まない */
}

/* ===== スマホでは縦並び・ボタン中央寄せ ===== */
@media (max-width: 768px) {
  .cta-box {
    flex-direction: column;
    align-items: flex-start; /* テキストは左揃えのまま */
  }
  .cta-actions {
    align-self: center; /* ボタンだけ中央に配置 */
    margin-top: 12px;
  }
}
/* --- 予約CTA: PCは横並び、ボタンは右端 --- */
.cta-box {
  display: flex;
  align-items: center;
  gap: 24px;
}
.cta-text {
  flex: 1 1 auto; /* 左のテキストが可変で広がる */
  min-width: 280px;
}
.cta-actions {
  margin-left: auto; /* ★ これで右端に固定 */
  flex-shrink: 0;
}

/* --- SPでは縦並び、ボタン中央（←左にしたいなら下の行をコメント） --- */
@media (max-width: 768px) {
  .cta-box {
    flex-direction: column;
    align-items: flex-start; /* 見出し＆テキストは左寄せ */
  }
  .cta-actions {
    margin-left: 0;
    align-self: center; /* ★ 中央寄せ。左寄せにするなら flex-start に */
  }
}
/* ===== FAQ（details/summary・＋／−アイコン、Bootstrap不要） ===== */
.faq {
  max-width: 980px;
  margin-inline: auto;
}
.faq-item {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  margin: 12px 0;
  overflow: hidden;
  transition: box-shadow 0.2s;
}
.faq-item[open] {
  box-shadow: 0 8px 24px rgba(2, 8, 23, 0.06);
}

.faq-item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  cursor: pointer;
  list-style: none;
  padding: 16px 56px 16px 18px; /* 右にアイコン分の余白 */
  font-weight: 700;
  color: #0f172a;
  position: relative;
  border-radius: 12px; /* :focus可視化と相性良 */
}
.faq-item summary::-webkit-details-marker {
  display: none;
}
.faq-item summary:hover {
  background: #f8fafc;
}
.faq-item summary:focus-visible {
  outline: 3px solid #cde0ff;
  outline-offset: 2px;
}

.faq-q {
  line-height: 1.6;
}

/* 右端の＋／−ボタン（タッチしやすい大きさ） */
.faq-icon {
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  width: 28px;
  height: 28px;
  border: 1px solid #94a3b8;
  border-radius: 6px;
  display: grid;
  place-items: center;
  color: #1d4ed8; /* 青系 */
  background: #fff;
  pointer-events: none; /* クリック領域はsummary全体 */
}
.faq-icon::before {
  content: "+";
  font-size: 18px;
  line-height: 1;
}
.faq-item[open] .faq-icon::before {
  content: "−";
}

/* 展開部 */
.faq-a {
  padding: 0 18px 18px 18px;
  color: #334155;
  line-height: 1.9;
  letter-spacing: 0.02em;
}

/* レスポンシブ：狭い時に行間を保ちつつアイコンの位置を確保 */
@media (max-width: 640px) {
  .faq-item summary {
    padding: 16px 52px 16px 16px;
  }
  .faq-icon {
    right: 12px;
    width: 26px;
    height: 26px;
  }
}
/* ===== パンくずセクション ===== */
.breadcrumb-sec {
  background: #f8fafc; /* ナビと本文を区切る淡いグレー */
  padding: 8px 0;
  border-bottom: 1px solid #e5e7eb;
}

.breadcrumbs ol {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 14px;
  color: #475569;
}
.breadcrumbs li {
  display: flex;
  align-items: center;
}
.breadcrumbs li + li::before {
  content: "›";
  margin: 0 6px;
  color: #94a3b8;
}
.breadcrumbs a {
  color: #0a66c2;
  text-decoration: none;
}
.breadcrumbs a:hover {
  text-decoration: underline;
}
/* 症状別ページだけナビ背景を白に */
.page-symptom .navbar-expand-lg .navbar-collapse {
  background-color: #f8fafc;
  border-bottom: none;
  box-shadow: none;
}

/* 症状別ページのQA */
#faq {
  background-color: #ffffff;
}

/* 症状別ページのbody*/
body.page-symptom {
  background-color: #f8fafc;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, "Noto Sans JP",
    "Hiragino Kaku Gothic ProN", "Meiryo", sans-serif;
  color: #1f2937;
}
/* ご予約のｐ*/
.container-narrow p {
  margin-top: 0px;
}
/* ブログフッターバックグラウンドカラー*/
.bottom-vlo {
  background-color: #f7f7f7;
  padding-top: 50px;
  border-top-right-radius: 40px;
  padding: 76px 0 0 0;
}

/* ブログのページャー  */
.pager .pagination {
  display: flex; /* 念のため明示 */
  justify-content: center; /* これで中央寄せ */
  padding-left: 0; /* 左の余白対策 */
  margin: 2rem auto; /* お好みで縦の余白 */
}

.pager .pagination li {
  display: inline;
  margin: 0 2px;
  padding: 0;
  display: inline-block;
  width: 50px;
  height: 50px;
  text-align: center;
  position: relative;
  border-radius: 10px;
}

.pager .pagination li a {
  vertical-align: middle;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  text-align: center;
  display: table;
  text-decoration: none;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
}

.pager .pagination li a span {
  display: table-cell;
  vertical-align: middle;
}

.pager .pagination li a:hover,
.pager .pagination li a.active {
  color: #fff;
  background: #007bbb;
}

@media only screen and (max-width: 767px) {
  .pager .pagination li {
    display: none;
  }

  .pager .pagination li.pre,
  .pager .pagination li.next {
    display: inline-block;
    width: 40%;
    height: 50px;
    text-align: center;
  }

  .pager .pagination li.pre a,
  .pager .pagination li.next a {
    width: 100%;
    text-align: center;
  }

  .pager .pagination li.pre span::after {
    content: "　前へ";
  }

  .pager .pagination li.next span::before {
    content: "次へ　";
  }
}