/*==================================================================================================================================

  *改行設定

==================================================================================================================================*/
.sp_only {
  display: none;
}

.pc_only {
  display: block;
}

@media (max-width: 768px) {
  .sp_only {
    display: block;
  }

  .pc_only {
    display: none;
  }
}
/* =============================== 基本 =============================== */
html{
		scroll-behavior: smooth;
}

body {
    color: #fff;
    font-size: 16px ;
    font-weight: 400;
    line-height: 1.8;
    letter-spacing: 0.1em;
    margin: 0 auto;
    background: #fff;
    padding:0 0;
	margin:0 0;
    font-family: 'Noto Serif JP', serif;
}

h1 {
    font-size: 11px;
    margin-bottom: 5px;
}

h2 {
    letter-spacing: 3px;
    line-height: normal;
    text-align: center;
    margin: 0 0 2vw;
    font-weight: 500;
	font-size:3rem;
}

h3 {
    letter-spacing: 3px;
    line-height: normal;
    text-align: center;
    margin: 0 0 2vw;
    font-weight: 500;
    font-size: 1.9rem;
}

p{
	font-size:19px;
}

.point-line {
    background-color: #C9A96F;
    padding: 2px 5px;
    margin: 0 2px;
    /* color: #7B5D40; */
}

.sec-en-ttl{
    text-align: center;
    margin-bottom: 5px;
    letter-spacing: 4px;
    font-size: 20px;
    font-weight: 200;
    color: #ffffff;
    top: 0rem;
    right: 0rem;
    z-index: 0;
    color: #C9A96F;
    /* display: list-item; */
}


/* ------------ タブレットサイズ ------------ */
@media only screen and (max-width: 960px) {
h2 {
    letter-spacing: 2px;
    font-size: 2.5rem;
}
	
}

/* ------------ スマホサイズ ------------ */
@media only screen and (max-width: 480px){
h1 {
    display: none;
}

h2 {
    letter-spacing: 1px;
    font-size: 1.7rem;
    font-weight: 600;
}

h3 {
    letter-spacing: 2px;
    font-size: 1.4rem;
    /* font-weight: 600; */
}
p {
    font-size: 18px;
    letter-spacing: 2px;
    line-height: 28px;
    margin: 5px 0;
}
}
/* =============================== HP背景 =============================== */
.chiro-cont{
    background-image: url("../images/S__24059920.jpg");
    background-attachment: fixed;
    background-size: cover;
	 backdrop-filter: none;
	z-index:;
}
.chiro-cont *{
    backdrop-filter: none;
}

/* ------------ スマホサイズ ------------ */
@media only screen and (max-width: 480px){
.chiro-cont {
    background-position: top center;
    background-repeat: no-repeat;
}

.chiro-cont {
    background: none;          /* 直背景は消す */
    position: relative;
    overflow: hidden;          /* ここが“中でクリップ” */
  }

.chiro-cont::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: -1;
    transform: translateZ(0);
    will-change: transform;
    background: url("../images/S__240599162.png") center / cover no-repeat;
}
}

/* =============================== ヘッダー =============================== */
header {
    background: #12100F;
    padding: 5px 0;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 9999;
}

.site-header__inner {
    display: flex;
    align-items: center;
    flex-direction: row;
    width: 95%;
    justify-content: space-between;
    margin: 0 auto;
}


.site-header__logo div {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
}

.site-header__logo {
    font-size: 1.5rem;
    line-height: normal;
}

.site-header_sbtxt {
    font-size: 17px;
    letter-spacing: 3px;
}
/* ヘッダーメニュー */
.site-header__nav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;  /* ナビゲーションを画面全体に広げる */
    z-index: 1000;  /* 他の要素より前面に表示 */
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 20px;
}

.site-header__menu li {
    margin-bottom: 20px; /* メニュー項目の間隔を少し広めに */
    position: relative; /* アニメーションやアイコン用 */
}

.site-header__menu li a {
    text-decoration: none;
    font-size: 18px;
    font-weight: 600;
    color: #2b2b2b;
    padding: 13px 0px;
    border-radius: 8px;
    display: block;
    transition: all 0.3s ease;
    position: relative;
    text-align: center;
}

/* タッチ時の効果 */
.site-header__menu li a:active {
    background-color: #e2967f; /* タッチ時の背景色 */
    color: #fff; /* タッチ時の文字色 */
    transform: translateX(5px); /* 横にスライドする効果 */
}

/* ホバー時の効果 */
.site-header__menu li a:hover {
    background-color: #C9A96F; /* ホバー時の背景色 */
    color: #fff; /* ホバー時の文字色 */
    transform: translateX(5px); /* 横にスライドする効果 */
}

.site-header__menu li a:hover:before, .site-header__menu li a:active:before {
    transform: scaleX(1);
    transform-origin: bottom left;
}

.site-header__toggleLine {
    width: 30px;
    height: 4px;
    background-color: #F9F8F4;
    transition: all 0.3s ease;
    border-radius: 4px;
}

/* メニューが開いた時 */
.site-header__nav.is-open .site-header__menu {
    display: block;
    flex-direction: column;
    position: absolute;
    top: 4vw;
    right: 1vw;
    width: 50%;
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    padding: 15px 30px;
}

.site-header__nav.is-open .site-header__menu li {
    margin: 0px 0;
    border-bottom: 2px dotted #c1c1c1;
}

.site-header__nav.is-open .site-header__menu li:last-of-type{
    border-bottom: none;
}

.site-header__cta {
  padding: 10px 20px;
  background-color: #007bc7;
  color: #fff;
  border-radius: 5px;
  text-decoration: none;
}

/* ハンバーガーメニューは常に表示 */
.site-header__menu {
  display: none;
}

.site-header__cta {
  display: block;
  margin-top: 20px;
  text-align: center;
}

/* トグルボタンを常に表示 */

.site-header__toggle {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
    width: auto;
  height: 24px;
  background: transparent;
  border: none;
  cursor: pointer;
  box-sizing: border-box;
  padding: 0;
  transition: all 0.3s ease;  /* スムーズなアニメーション */
}

/* 初期状態（3本線） */
.site-header__toggleLine:nth-child(1) {
  transform: rotate(0deg);
  position: relative;
}

.site-header__toggleLine:nth-child(2) {
  opacity: 1;
}

.site-header__toggleLine:nth-child(3) {
  transform: rotate(0deg);
  position: relative;
}

/* トグルボタンが開いたとき（×の形に変わる） */
.site-header__toggle.is-active .site-header__toggleLine:nth-child(1) {
  transform: rotate(45deg);
  position: relative;
  top: 8px;  /* 上にずらす */
}

.site-header__toggle.is-active .site-header__toggleLine:nth-child(2) {
  opacity: 0;  /* 中央の線を非表示 */
}

.site-header__toggle.is-active .site-header__toggleLine:nth-child(3) {
  transform: rotate(-45deg);
  position: relative;
  top: -8px;  /* 下にずらす */
}
/* ------------ タブレットサイズ ------------ */
@media only screen and (max-width: 960px) {
.site-header__nav.is-open .site-header__menu {
    top: 8vw;
}
	
/* モバイルでメニューをスクロール可能にする */
.site-header__menu {
    max-height: 510px;
    overflow-y: auto;
}

/* スクロール可能な部分があるとき、スクロールバーを表示 */
.site-header__menu::-webkit-scrollbar {
    width: 8px;  /* スクロールバーの幅 */
}

.site-header__menu::-webkit-scrollbar-thumb {
    background-color: #C9A96F;  /* スクロールバーの色 */
    border-radius: 10px;
}

.site-header__menu::-webkit-scrollbar-track {
    background-color: #f0f0f0;  /* スクロールトラックの色 */
}
}

/* ------------ スマホサイズ ------------ */
@media only screen and (max-width: 480px){
.site-header__inner {
    width: 90%;
}

.site-header__logo {
    font-size: 18px;
    line-height: normal;
    letter-spacing: 1px;
}

.site-header__toggleLine {
    width: 30px;
    height: 2px;
}
	
.site-header__nav.is-open .site-header__menu {
    top: 15vw;
    width: 95%;
    right: 0;
    max-height: 500px;
    padding: 10px 10px !important;
}

.site-header__menu li a{
    font-size: 17px;
    letter-spacing: 0px;
}

.site-header__logo div {
    align-items: flex-start;
}

.site-header_sbtxt {
    font-size: 13px;
    letter-spacing: 1px;
}


}


/* =============================== ファーストビュー =============================== */
.fvHero {
    position: relative;
    height: 49vw;
    display: grid;
    place-items: center;
    overflow: hidden;
    color: #f3f6fb;
    padding: 4vw 0 0;
	z-index:10;
	background-color:#000;
}

/* 背景＝メイン画像っぽい雰囲気（後で画像に差し替え可） */
.fvHero__bg{
  position: absolute;
  inset: 0;
  background:
    radial-gradient(900px 520px at 75% 25%, rgba(240,210,122,.18), transparent 60%),
    radial-gradient(720px 480px at 20% 40%, rgba(212,175,55,.12), transparent 58%),
    linear-gradient(90deg, rgba(255,255,255,.06) 1px, transparent 1px) 0 0/140px 140px,
    linear-gradient(0deg, rgba(255,255,255,.04) 1px, transparent 1px) 0 0/140px 140px;
  opacity: .9;
  pointer-events: none;
}

.fvHero__slide::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgb(0 0 0 / 18%);
    z-index: 0;
}

.fvHero__bg * {
    z-index:1;
}


/* 画像に差し替える場合はここを使う */
.fvHero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.fvHero::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgb(0 0 0 / 57%), rgb(0 0 0 / 90%));
}

.fvHero__slide {
  position: absolute;
  inset: 0;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  opacity: 0;
  transform: scale(1);
  animation: fvHeroSlide 18s infinite ease-in-out;
}

.fvHero__inner {
    position: relative;
    z-index: 1;
    width: 90%;
}

/* 画像 */
.fvHero__slide--1 {
  background-image: url("https://miyano-chiro.com/wp-content/themes/template_theme/images/AdobeStock_484682111.jpg");
  animation-delay: 0s;
}

.fvHero__slide--2 {
  background-image: url("https://miyano-chiro.com/wp-content/themes/template_theme/images/AdobeStock_354588090.jpg");
  animation-delay: 6s;
}

.fvHero__slide--3 {
  background-image: url("https://miyano-chiro.com/wp-content/themes/template_theme/images/AdobeStock_440698181.jpg");
  animation-delay: 12s;
}

@keyframes fvHeroSlide {
  0% {
    opacity: 0;
    transform: scale(1);
  }
  8% {
    opacity: 1;
  }
  30% {
    opacity: 1;
    transform: scale(1.05);
  }
  41% {
    opacity: 0;
    transform: scale(1.05);
  }
  100% {
    opacity: 0;
    transform: scale(1.05);
  }
}

.fvHero__tag {
    display: inline-flex;
    /* padding: 10px 20px; */
    border-radius: 50px;
    /* border: 1px solid rgb(255 255 255 / 42%); */
    /* background: rgb(255 255 255 / 23%); */
    color: #C9A96F;
    font-size: 18px;
    letter-spacing: 4px;
    margin: 0 0 40px;
    backdrop-filter: blur(8px);
}

.fvHero__title {
    margin: 0;
    font-weight: 500;
    line-height: 80px;
    font-size: 5rem;
    letter-spacing: 5px;
}

.fvHero__title span {
    background: linear-gradient(90deg, #C9A96F, #fdbf4f 55%, #C9A96F);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.fvHero__sub {
    margin: 16px 0;
    font-size: 28px;
    line-height: 1.5;
    max-width: 46em;
}


.fvHero__cta {
    margin-top: 80px;
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.fvHero__btn {
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 14px 18px;
    border-radius: 50px;
    font-weight: 700;
    transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}

.fvHero__btn:focus-visible{
  outline: 3px solid rgba(212,175,55,.35);
  outline-offset: 3px;
}

.fvHero__btn--primary {
    background: #7B5D40;
    color: #fff;
    box-shadow: 0 16px 42px rgba(212,175,55,.22);
    width: 30%;
    font-size: 19px;
}

.fvHero__btn--primary:hover{
  transform: translateY(-2px);
  box-shadow: 0 22px 64px rgba(212,175,55,.28);
}

.fvHero__btn--ghost{
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.18);
  color: #fff;
}
.fvHero__btn--ghost:hover{
  transform: translateY(-2px);
  border-color: rgba(212,175,55,.45);
}

.fvHero__mini {
    margin: 0 0;
    font-size: 18px;
    letter-spacing: .02em;
}

.fvHero__scroll{
  position: absolute;
  left: 50%;
  bottom: 18px;
  transform: translateX(-50%);
  text-decoration: none;
  color: rgba(255,255,255,.72);
  font-size: 12px;
  letter-spacing: .18em;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.fvHero__scroll::after{
  content: "";
  width: 26px;
  height: 1px;
  background: rgba(212,175,55,.55);
  transform-origin: left center;
  animation: fvLine 1.4s ease-in-out infinite alternate;
}
@keyframes fvLine{
  from{ transform: scaleX(.65); opacity:.65; }
  to{ transform: scaleX(1.15); opacity: 1; }
}

/* ------------ タブレットサイズ ------------ */
@media only screen and (max-width: 960px) {
.fvHero {
    height: 87vw;
    padding: 13vw 0 17vw;
}
	
.fvHero__title {
    line-height: 51px;
    font-size: 3.2rem;
}
}

/* ------------ スマホサイズ ------------ */
@media only screen and (max-width: 480px){
.fvHero {
    height: 220vw;
    padding: 0px 0;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
	color:#fff;
}
	
.fvHero__tag {
    letter-spacing: 1.5px;
    font-size: 16px;
    margin: 0 auto 15px;
    text-align: center;
    display: block;
    padding: 0 0;
}
	
.fvHero__title {
    line-height: 45px;
    font-size: 2.7rem;
    letter-spacing: 3px;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* padding-left: 0; */
}

.fvHero__sub {
    margin: 27px 0 50px;
    font-size: 21px;
    line-height: normal;
    max-width: 100%;
    letter-spacing: normal;
    text-align: center;
}

.fvHero__cta {
    margin-top: 30px;
    margin-bottom: 30px;
}

.fvHero__mini {
    font-size: 16px;
    text-align: center;
}

	.fvHero__btn--primary{
    width: 90%;
    margin: 0 auto;
    font-size: 19px;
    padding: 10px 0;
}
	
.fvHero__inner {
    width: 90%;
    top: 0;
    box-sizing: border-box;
}

.fvHero__scroll {
    bottom: 20px;
}
}



/* =============================== あなたの自然治癒力が動き出す =============================== */
.healing-sec {
    position: relative;
    padding: 12vw 0;
    background: url(https://miyano-chiro.com/wp-content/themes/template_theme/images/IMG_03792.JPG) center / cover no-repeat;
	background-attachment: fixed;
}

.healing-sec::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgb(0 0 0 / 46%);
    z-index: 0;
}


.healing-sec > * {
  z-index: 1;
    position: relative;
}


.healing-sec p {
    color: #fff;
    font-size: 23px;
    font-weight: 300;
width: 76%;
    margin: 0 auto;
    text-align: left;
}



/* ------------ タブレットサイズ ------------ */
@media only screen and (max-width: 960px) {
.healing-sec p {
    font-size: 20px;
    width: 85%;
}
}

/* ------------ スマホサイズ ------------ */
@media only screen and (max-width: 480px){
.healing-sec {
    padding: 15vw 5vw;
	background: url(https://miyano-chiro.com/wp-content/themes/template_theme/images/IMG_0379.JPG) center / cover no-repeat;
}

.healing-sec h2 {
    margin: 0 0 4vw;
}

.healing-sec p {
    font-size: 18px;
    text-align: left;
    width: 100%;
    margin: 10px 0;
}

.healing-sec::before {
    background: rgb(0 0 0 / 48%);
}
}


/* =============================== なぜ、上部頚椎なのか =============================== */
.neglect-sec {
    position: relative;
    padding: 12vw 0;
    /* background: url(http://miyano-chiro.com.testrs.jp/test/wp-content/themes/template_theme/images/Chiro0210_00064.jpg) center / cover no-repeat; */
    /* background: #2b2b2b; */
    backdrop-filter: none;
}

.neglect-sec::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgb(0 0 0 / 46%);
    z-index: 0;
}

.neglect-sec div {
    z-index: 2;
    position: relative;
}


.neglect-sec p {
    color: #fff;
    font-size: 23px;
    font-weight: 300;
width: 76%;
    margin: 0 auto;
    text-align: left;
}


/* ------------ タブレットサイズ ------------ */
@media only screen and (max-width: 960px) {
.neglect-sec p {
    font-size: 20px;
    width: 85%;
}
}

/* ------------ スマホサイズ ------------ */
@media only screen and (max-width: 480px){
.neglect-sec {
    padding: 15vw 5vw;
}

.neglect-sec h2 {
    margin: 0 0 4vw;
}

.neglect-sec p {
    font-size: 18px;
    text-align: left;
    width: 100%;
    margin: 10px 0;
}

.neglect-sec::before {
    background: rgb(0 0 0 / 48%);
}
}
/* =============================== 噛み合わせと頚椎の関係メカニズム =============================== */
.mechanism-sec {
    padding: 7vw 0;
    background: #F9F8F4;
    color: #12100F;
}

.mechanism-cont {
    display: flex;
    align-items: flex-end;
    flex-direction: row;
    gap: 20px;
    margin: 70px auto 0;
    width: 95%;
    justify-content: center;
}

.mechanism-group {
    width: auto;
    background: #EDE6D9;
    padding: 2rem 1rem;
}

.mechanism-block {
    display: flex;
    align-items: center;
    flex-direction: row;
    width: auto;
    gap: 1rem;
    justify-content: center;
}

.mechanism-group-ttl {
    text-align: center;
    font-size: 2rem;
    margin-bottom: 2rem;
    color: #593e0e;
    line-height: normal;
    font-weight: 500;
}

.mechanism-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    background: #e7d6b587;
    padding: 20px 0.3rem;
    aspect-ratio: 1 / 1;
    justify-content: center;
    gap: 20px;
    width: 20vw;
}

.mechanism-cont .last-box{
	margin-bottom:2rem;
}

.mechanism-cont-ttl {
    font-size: 1.3rem;
    font-weight: 700;
    letter-spacing: 1px;
}

.mechanism-box p{
	font-size:16px;
}

.mechanism-arrow {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    flex-direction: column;
    font-size: 17px;
    font-weight: 600;
    letter-spacing: 1px;
    line-height: normal;
    color: #593e0e;
}

.mechanism-arrow > span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1em;
    height: 1em;
}


.mechanism-arrow > span::before {
  font-family: 'Material Icons';
  content: '\e8d4';
  font-size: 20px;
  line-height: 1;
  display: inline-block;
}

.mechanism-cont-two {
    gap: 30px;
    margin: 6vw auto 0;
    width: 90%;
    display: grid;
    grid-template-columns: 2fr 1.5fr;
    align-items: center;
}

.mechanism-cont-two section {

}
.mechanism-cont-two div {
    display: flex;
    flex-direction: column;
    gap: 70px;
    margin: 10px 0;
}

.mechanism-sec h3 {
    margin: 0;
    text-align: left;
    position: relative;
    color: #8b775c;
}

.mechanism-pic{
display: inline;
    overflow: hidden; 
    width: 100%;
    height: 100%;
}


.mechanism-pic img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.mechanism-sec h3::after {
    content: "";
    display: block;
    width: 20%;
    height: 2px;
    background: #C9A96F;
    margin: 1vw 0;
}

/* 角＋数字の共通デザイン */
.mechanism-box[data-step] {
    position: relative;
    border: 2px solid #434343;
    /* box-shadow: -4px -4px 5px 0px #ffffff, 2px 2px 5px 1px #000000; */
    /* box-shadow: 0px 0px 10px -1px #12100f73; */
}

.mechanism-box[data-step]::before {
    content: "";
    position: absolute;
    top: 0px;
    left: 0px;
    width: 0;
    height: 0;
    border-top: 6rem solid #434343;
    border-right: 6rem solid transparent;
}

.mechanism-box[data-step]::after {
    content: attr(data-step);
    position: absolute;
    top: 20px;
    left: 25px;
    z-index: 1;
    color: #F9F8F4;
    font-weight: 700;
    font-size: 23px;
    line-height: 1;
}

/* ------------ タブレットサイズ ------------ */
@media only screen and (max-width: 1300px) {
.mechanism-cont {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.mechanism-block {
    display: flex;
    flex-direction: column;
}

.mechanism-group {
    width: 100%;
    padding: 2rem 0;
}

.mechanism-box {
    aspect-ratio: auto;
    width: 80%;
}
	
.mechanism-cont-two{
    display: flex;
    flex-direction: column-reverse;
}

.mechanism-arrow {
    display: inline-flex;
    flex-direction: row;
}

.mechanism-arrow > span::before {
   transform: rotate(90deg);
}

}

/* ------------ スマホサイズ ------------ */
@media only screen and (max-width: 480px){
	
.mechanism-sec {
    padding: 12vw 0;
}

.mechanism-cont {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    margin: 40px auto;
    width: 100%;
}

.mechanism-group {
    padding: 1rem 0;
}

	.mechanism-group-ttl {
    margin-bottom: 1rem;
}

.mechanism-block {
    gap: 10px;
}

.mechanism-box {
    aspect-ratio: auto;
    justify-content: center;
    gap: 1px;
    width: 85%;
}

.mechanism-box p {
    font-size: 1rem;
    text-align: center;
}

.mechanism-arrow{
    display: inline-flex;
    flex-direction: row;
    align-items: center;
}

.mechanism-cont-two section {
    margin: 30px 0;
}

.mechanism-cont-two {
    gap: 10px;
}

.mechanism-sec h3 {
    margin: 0 0 2vw;
	text-align: left; 
	color: #8b775c;
}
	
.mechanism-cont-two section p {
    text-align: justify;
    margin: 5px auto;
    width: 96%;
}

.mechanism-box[data-step]::before {
    border-top: 80px solid #434343;
    border-right: 80px solid transparent;
}

.mechanism-box[data-step]::after {
    top: 15px;
    left: 18px;
}

}
/* =============================== こんな症状ありませんか =============================== */
.symptoms-sec {
    padding: 5vw 0 9vw;
    background: #F9F8F4;
    color: #12100F;
}

.symptoms-cont {
    margin: 0 auto;
    width: 90%;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

.symptoms-block {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.symptoms-ttl {
    background: #434343;
    border-radius: 35px;
    text-align: center;
    font-size: 19px;
    display: inline;
    padding: 6px 25px;
    top: 2.4vw;
    position: relative;
    color: #fff;
}

.symptoms-box{
    background: #e7d6b587;
    color: #12100F;
    padding: 40px 20px 20px;
    border: 5px solid #434343;
    box-shadow: 0 0 6px 5px rgb(0 0 0 / 0%);
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
}

.symptoms-icon {
    width: 30%;
    height: 100%;
    color: #007bc7;
    margin: 0.7rem auto;
    overflow: hidden;
    background: #c9a96f;
    padding: 13px;
    border-radius: 50px;
}

.symptoms-icon img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}


.symptoms-box ul {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    width: 100%;
}

.symptoms-box li {
    border-bottom: dotted 2px #c9a96f;
    padding-bottom: 1px;
}

.symptoms-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.symptoms-list li {
  position: relative;
  padding-left: 32px;
  margin-bottom: 12px;
  line-height: 1.7;
}

.symptoms-list li::before {
  content: "check_circle";
  font-family: "Material Symbols Outlined";
  font-weight: normal;
  font-style: normal;
  font-size: 20px;
  line-height: 1;
  color: #007bc7;
  position: absolute;
  left: 0;
  top: 0.15em;
}

/* ------------ タブレットサイズ ------------ */
@media only screen and (max-width: 960px) {

.symptoms-cont {
    align-items: center;
    grid-template-columns: repeat(2, 1fr);
    justify-items: center;
}

}

/* ------------ スマホサイズ ------------ */
@media only screen and (max-width: 480px){

.symptoms-cont {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 80%;
    gap: 0;
}
.symptoms-box {
    padding: 30px 10px 10px;
}
.symptoms-ttl {
    background: #434343;
    border-radius: 35px;
    text-align: center;
    font-size: 17px;
    display: inline;
    padding: 6px 25px;
    top: 8.7vw;
    position: relative;
    color: #fff;
}

.symptoms-icon {
    margin: 0 auto 0.4rem;
}
}
/* =============================== こんな症状ありませんか？（旧） =============================== */
.worries-sec {
    background: #2b2b2b;
    padding: 5vw 0;
 background: url(../images/AdobeStock_549595432.jpg) center / cover no-repeat;
}

.worries-cont {
    display: flex;
    justify-content: center;
    position: relative;
    width: 90%;
    margin: 0 auto;
}

.worries-cont .worries-pic {
    width: 50%;
    overflow: hidden;
}

.worries-cont .worries-txt {
    flex: 1;
    margin-top: 60px;
    margin-right: -143px;
    background: #212121eb;
    color: #fff;
    padding: 60px;
    box-shadow: 0 3px 5px rgba(0, 0, 0, 0.1);
    position: relative;
    z-index: 1;
}

.worries-cont h2 {

}

.worries-txt li {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 20px;
}

.worries-txt li span {
    color: #e2967f;
    font-size: 30px;
}

/* ------------ タブレットサイズ ------------ */
@media only screen and (max-width: 960px) {
.worries-cont {
    display: flex;
    width: 100%;
    margin: 0 auto;
    flex-direction: column-reverse;
    align-items: center;
}
	
.worries-cont .worries-pic {
    width: 80%;
}

.worries-cont .worries-txt {
    margin-top: 0;
    margin-right: 0;
top: -60px;
}
}

/* ------------ スマホサイズ ------------ */
@media only screen and (max-width: 480px){
.worries-sec {
    padding: 15vw 5vw 0;
}

.worries-cont .worries-pic {
    width: 100%;
}

.worries-cont .worries-txt {
    padding: 20px;
    width: 95%;
}
	
	.worries-txt ul {
    gap: 12px;
    display: flex;
    flex-direction: column;
    margin-top: 20px;
}

.worries-txt li {
    align-items: flex-start;
    gap: 5px;
    font-size: 18px;
    letter-spacing: normal;
}

.worries-txt li span {
    margin-top: 5px;
}

}



/* =============================== 体調不良の原因を根本から解決！ =============================== */
.solution-sec {
    background-color:#2b2b2b;
    padding: 5vw 0;
/* 	background-image: url(http://miyano-chiro.com.testrs.jp/test/wp-content/themes/template_theme/images/AdobeStock_723784135.png); */
	 background-size: cover; /* 画像を画面全体に合わせる */
      background-position: center;
      background-repeat: no-repeat;
}

.solution-cont {
    display: flex;
    justify-content: center;
    position: relative;
    width: 90%;
    margin: 0 auto;
}

.solution-cont .solution-pic {
    width: 47%;
    overflow: hidden;
}

.solution-cont .solution-txt {
    flex: 1;
    margin-top: 60px;
    margin-left: -143px;
    background: #212121f2;
    color: #fff;
    padding: 60px;
    box-shadow: 0 3px 5px rgba(0, 0, 0, 0.1);
    position: relative;
    z-index: 1;
}

.solution-cont h2 {

}

/* ------------ タブレットサイズ ------------ */
@media only screen and (max-width: 960px) {
.solution-cont {
    display: flex;
    width: 100%;
    margin: 0 auto;
    align-items: center;
    flex-direction: column;
}
	
.solution-cont .solution-pic {
    width: 80%;
}

.solution-cont .solution-txt {
    top: -60px;
    width: 75%;
    margin: 0 auto;
}
}

/* ------------ スマホサイズ ------------ */
@media only screen and (max-width: 480px){
	
.solution-sec {
    padding: 15vw 5vw 0;
    background-size: auto;
}

.solution-cont .solution-pic {
    width: 100%;
}

.solution-cont .solution-txt {
    padding: 20px;
    width: 95%;
}
	
	.solution-txt ul {
    gap: 12px;
    display: flex;
    flex-direction: column;
    margin-top: 20px;
}

.solution-txt li {
    align-items: flex-start;
    gap: 5px;
    font-size: 18px;
    letter-spacing: normal;
}

.solution-txt li span {
    margin-top: 5px;
}
}


/* =============================== 歯身一体 =============================== */
.nature-sec {
    text-align: center;
    /* background: url(http://miyano-chiro.com.testrs.jp/test/wp-content/themes/template_theme/images/Chiro0209_00007.jpg)      center center / cover no-repeat; */
    position: relative;
    /* text-shadow: 0px 0px 6px #000000b8; */
    padding: 5vw 0;
/*     color: #12100F; */
    background: #F9F8F4;
    color: #fff;
}

.nature-sec::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #ede6d987;
    z-index: 0;
    background: #12100F;
}

.nature-sec * {
    z-index: 1;
    position: relative;
}

.nature-sec h2 {
    z-index: 1;
    position: relative;
    margin: 0 0 4vw;
}

.nature-txt {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 50px;
    margin: 0 auto;
    width: 90%;
}

.nature-sec p {
    text-align: left;
    margin: 12px 0;
}

.nature-dc{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.nature-dc-img {
    overflow: hidden;
    width: 100%;
    height: 100%;
    margin: 0 auto;
}

.nature-dc-img img{
   width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.nature-dc-name {
    font-size: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.nature-dc-name span {
    background: #C9A96F;
    color: #fff;
    padding: 0px 20px;
    font-size: 22px;
    font-weight: 600;
    text-shadow: 0 0px 3px #3f2308;
}

.nature-txt section {
/*     padding: 5vw 0 0; */
}

.nature-txt section h3 {
    letter-spacing: 3px;
    line-height: normal;
    text-align: center;
    margin: 0 0 2vw;
    font-weight: 500;
    font-size: 3rem;
    color: #dfc4a0;
}

.nature-txt section div{
/* 	    width: 80%; */
    margin: 0 auto;
}

/* ------------ タブレットサイズ ------------ */
@media only screen and (max-width: 960px) {
	.nature-sec{
		background-position:center;
	}

.nature-txt {
    display: flex;
    flex-direction: column;
}
	
}

/* ------------ スマホサイズ ------------ */
@media only screen and (max-width: 480px){
.nature-sec {
    padding: 13vw 0 18vw;
}

	.nature-sec h2{
		    margin-bottom: 6vw;
	}

.nature-dc-name {
    font-size: 1.4rem;
}

.nature-dc-name span {
    font-size: 18px;
}

.staff_bio {
    display: flex;
    gap: 20px;
    width: 85%;
    margin: 0 auto;
    flex-direction: column;
}

.bio-box {
    padding: 15px 10px;
}

.career-item {
    grid-template-columns: 1fr 2fr;
}

.qualifications li {
    padding: 0 10px;
}

.nature-dc-img {
    width: 100%;
}

.nature-txt {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
}





/* =============================== CVセクション =============================== */
.cv-sec {
    display: block;
    background-color: #EDE6D9;
    padding: 5vw 0;
    text-align: center;
    color: #12100F;
}

.cv-sec p{
    margin-bottom: 3rem;
}

.cv-btn {
    width: 85%;
    display: flex;
    margin: 0 auto;
    gap: 3rem;
    justify-content: center;
}

.cv-btn a {
    width: 70%;
    padding: 1.5vw 0;
    border-radius: 50px;
    display: inline-block;
    color: #fff;
    font-size: 2.4rem;
    font-weight: 600;
    line-height: normal;
    letter-spacing: 11px;
    /* text-shadow: 0px 0px 4px #811e00; */
    background-color: #7B5D40;
    border-bottom: 6px solid #413122;
    box-shadow: 0 3px 5px rgba(0, 0, 0, .3);
    transition: transform .15s ease, box-shadow .15s ease, border-bottom-width .15s ease, background-color .15s ease;
    will-change: transform;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
}

.tel-btn {
    display: flex !important;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}

.tel-btn span {
    font-size: 2rem;
    letter-spacing: 2px;
    font-weight: 700;
}

/* hover（PC） */
.cv-btn a:hover{
  color:#fff;
  background:#c79462;

  /* margin-topは使わない */
  transform: translateY(3px);

  /* 底の厚みを減らす＝へこみ感 */
  border-bottom-width:2px;

  /* 影も弱めると押し込み感が出る */
  box-shadow:0 1px 2px rgba(0,0,0,.25);
}

/* 押している間（スマホ/PC共通） */
.cv-btn a:active{
  transform: translateY(4px);
  border-bottom-width:1px;
  box-shadow:0 0 0 rgba(0,0,0,0);
}

/* ------------ タブレットサイズ ------------ */
@media only screen and (max-width: 960px) {
.cv-sec {
    padding: 9vw 0;
}

.cv-sec p {
    margin: 0 auto 3rem;
    width: 90%;
    text-align: left;
}

	.cv-btn a{
		    border-radius: 70px;
	}
	
.cv-btn {
    gap: 2rem;
}
	
.tel-btn {
    display: flex !important;
    flex-direction: column;
    line-height: 40px !important;
}

}

/* ------------ スマホサイズ ------------ */
@media only screen and (max-width: 480px){
.cv-sec {
    padding: 13vw 0 18vw;
}

	.cv-sec h2{
margin: 0 0 5vw;
	}

.cv-sec p {
    width: 95%;
    margin: 10px auto;
    letter-spacing: normal;
    font-size: 16px;
    text-align: center;
}

.cv-btn {
    width: 100%;
    margin: 30px auto 0;
    gap: 1rem;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.cv-btn a {
    font-size: 1.5rem;
    letter-spacing: 5px;
    padding: 3vw;
    width: 90%;
}

.tel-btn span {
    display: none;
}
}

/* =============================== カイロプラクティックとは =============================== */
.chiro-sec {
    padding: 10vw 0;
    text-align: center;
    background: url(../images/Chiro0210_00064.jpg)      center -60px / cover no-repeat;
    position: relative;
}

.chiro-sec::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgb(0 0 0 / 56%);
    z-index: 0;
}

.chiro-sec *{
    backdrop-filter: blur(6px);
}
.chiro-sec h2 {
    z-index: 1;
    position: relative;
}

.chiro-sec-txt{
	width:80%;
	margin:0 auto;
	text-align:left;
	z-index:1;
    position: relative;
}
/* ------------ タブレットサイズ ------------ */
@media only screen and (max-width: 960px) {
	.chiro-sec{
		background-position:center;
	}
	
}

/* ------------ スマホサイズ ------------ */
@media only screen and (max-width: 480px){
.chiro-sec {
    padding: 13vw 0 18vw;
    background-position: -150vw center;
}

	.chiro-sec h2{
		    margin-bottom: 6vw;
	}
}

.chiro-sec-txt {
    width: 85%;
    text-align: justify;
}


/* =============================== 当オフィスが選ばれる理由 =============================== */
.reason-sec {
    padding: 5vw 0 0;
    text-align: center;
    background: url(../images/AdobeStock_489451931.jpg) center / cover no-repeat;
    position: relative;
    background: #12100F;
    color: #F9F8F4;
}

.reason-sec h2 {
    position: relative;
    margin: 0 0 3vw;
    padding-bottom: 19px;
}

.reason-sec h2 span{
color: #C9A96F;
    font-size: 3.5rem;
}

.reason-sec h2::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    width: 9vw;
    height: 1px;
    background: #d9a961;
}

.reason-cont {
    width: 100%;
    margin: 0 auto;
    gap: 0;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
}

.reason-cont section {
    display: flex;
    flex-direction: column;
    gap: 10px;
    position: relative;
    align-items: center;
    justify-content: center;
    color: #fff;
    text-shadow: 0 0px 3px #000000ba;
    width: 100%;
    height: 29vw;
    padding: 0 20px;
}

.reason-cont section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #0000009c;
    z-index: 0;
}

.reason-cont section > * {
  z-index: 1;
    position: relative;
}

.reason-box01 {
    background: url(https://miyano-chiro.com/wp-content/uploads/2026/03/S__24559622.jpg) center center / cover no-repeat;
}
.reason-box02{
    background: url(../images/Chiro0210_00064.jpg) center center / cover no-repeat;
}
.reason-box03{
    background: url(https://miyano-chiro.com/wp-content/uploads/2026/03/IMG_0398.jpg) center center / cover no-repeat;
}
.reason-box04{
    background: url(../images/Chiro0210_00012.jpg) center center / cover no-repeat;
}

.reason-ttl {
    display: flex;
    align-items: baseline;
    flex-direction: row;
    gap: 10px;
}

.reason-ttl .nm {
    font-size: 3rem;
    line-height: 1rem;
    color: #C9A96F;
    font-weight: 100;
}

.reason-sec h3 {
    font-size: 2rem;
    margin: 0 0;
    letter-spacing: 3px;
    font-weight: 600;
}

.reason-txt {
    text-align: center;
}

.reason-txt .attention {
    font-size: 16px;
    margin-top: 17px;
}

/* ------------ タブレットサイズ ------------ */
@media only screen and (max-width: 960px) {
.reason-cont {
    width: 100%;
    gap: 0;
}

.reason-cont section {
    height: 35vw;
    padding: 0 2rem;
}
}

/* ------------ スマホサイズ ------------ */
@media only screen and (max-width: 480px){
  .reason-sec {
    padding: 13vw 0 0;
  }

  .reason-sec h2 {
    margin-bottom: 30px;
  }

  .reason-sec h2 span {
    font-size: 2.3rem;
    letter-spacing: 3px;
  }

  .reason-sec h3 {
    font-size: 30px;
    padding: 0;
    line-height: normal;
    text-align: left;
    width: auto;
  }

  .reason-cont {
    display: flex;
    flex-direction: column;
    height: auto;
    overflow: visible;
    scroll-snap-type: none;
    padding: 0;
    margin: 0;
    align-items: stretch;
  }

  .reason-cont > section {
    min-height: auto;
    height: auto;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 60px 10px;
    gap: 15px;
    scroll-snap-align: none;
    scroll-snap-stop: normal;
  }

  .reason-cont section::before {
    background: #000000a8;
  }

  .reason-ttl .nm {
    font-size: 2.5rem;
    line-height: normal;
  }

  .reason-ttl {
    gap: 5px;
    font-size: 51px;
    margin: 0 auto;
    width: 90%;
    justify-content: center;
  }

  .reason-txt p {
    text-align: center;
    letter-spacing: normal;
  }

  .reason-txt .attention {
    font-size: 15px;
    margin-top: 17px;
  }

  .reason-cont::-webkit-scrollbar {
    display: none;
  }
}




/* =============================== 放っておくとどうなる =============================== */
.leave-sec {
    padding: 5vw 0;
    background: url(../images/Chiro0209_00038.jpg) center / cover no-repeat;
    position: relative;
}

.leave-sec::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgb(0 0 0 / 56%);
    z-index: 0;
}

.leave-sec :where(*) {
  position: relative;
  z-index: 1;
backdrop-filter: blur(6px);
}

.leave-cont {
    display: flex;
    gap: 40px;
    flex-direction: column;
}

.leave-cont section {
    margin: 0 auto;
    width: 80%;
    display: flex;
    flex-direction: column;
}

.leave-box{
    display: flex;
    align-items: center;
    flex-direction: row;
    gap: 10px;
    margin-bottom: 10px;
}

.leave-sec h3 {
    text-align: left;
    margin: 0 0;
}

.leave-cont section .checkbox-icon::before {
    content: "check_box_outline_blank";
    font-family: "Material Icons";
    font-size: 28px;
    line-height: 1;
    display: inline-block;
	color:#e2967f;
}

/* PC：セクションにホバーしたらチェック */
.leave-cont section:hover .checkbox-icon::before {
  content: "check_box";
}

/* スマホ：画面に入ったらチェック（JSで in-view を付与） */
.leave-cont section.in-view .checkbox-icon::before {
    content: "check_box";
}



/* ------------ タブレットサイズ ------------ */
@media only screen and (max-width: 960px) {

.leave-sec h2 {
    margin-bottom: 30px;
}
	
}

/* ------------ スマホサイズ ------------ */
@media only screen and (max-width: 480px){
.leave-sec {
    padding: 13vw 0 18vw;
    background-position: top left -40rem;
}

	.leave-sec h2{
		    margin-bottom: 30px;
	}

.leave-cont section {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0px;
    width: 88%;
}

.leave-box {
    gap: 6px;
    margin-bottom: 7px;
    width: 100%;
}

.leave-sec h3 {
    text-align: left;
    font-size: 1.3rem;
    letter-spacing: normal;
}

	.chiro-sec-txt{
		    text-shadow: 0px 0px 6px #000000b8;
	}

}


/* =============================== 施術の流れ =============================== */
.flow-pic {
    padding: 5vw 0;
    background: #EDE6D9;
    color: #12100F;
    /* background: url(http://miyano-chiro.com.testrs.jp/test/wp-content/themes/template_theme/images/AdobeStock_357140492.jpg) center / cover no-repeat; */
}

/* ------  flow ------  */
.flow {
  position: relative;
  z-index: 1;
  padding: 30px;
  background: var(--bg-color);
}

.flow_box {
    display: flex;
    gap: 30px;
    padding: 30px 0;
    width: 80%;
    margin: 0 auto;
}

.flow_box:first-of-type {
  padding-top: 0;
}

.flow_box:last-child {
  padding-bottom: 0;
}

.flow_number {
  position: relative;
}

.flow_number::before {
    content: "";
    position: absolute;
    top: 55px;
    left: calc(50%);
    z-index: -1;
    width: auto;
    height: 100%;
    border-right: #757473 dashed 2px;
    transform: translateX(-50%);
}

.flow_box:last-of-type .flow_number::before {
  display: none;
}

.flow_number > * {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 50px;
    height: 50px;
    padding: 0 0 0px 2px;
    background: #C9A96F;
    color: #ffffff;
    font-size: 120%;
    border-radius: 50px;
}

.flow_inner {
  width: calc(100% - 80px);
}

.flow_inner > *:not(:last-child) {
  margin-bottom: 1em;
}

.flow_inner .flow_title {
    margin-bottom: 15px;
    padding: 5px 20px;
    background: #ffffff;
    font-size: 120%;
    color: #91653a;
    font-weight: 600;
}

.flow_inner .flow_sub_title {
  width: fit-content;
  margin-bottom: 15px;
  padding: 5px 20px;
  background: var(--main-color);
  color: #ffffff;
}

.imgtxt {
  margin-top: 5px;
  font-weight: bold;
  text-align: center;
}

/* ------ flexbox01（改行せずに等間隔で配置） ------ */
.flexbox01 {
  display: flex;
  flex-flow: wrap;
  gap: 10px;
}

.flexbox01 > * {
  flex: 1;
}

/* ------ flexbox02 ------ */
.flexbox02 {
  display: flex;
  flex-flow: wrap;
  gap: 10px;
}

.flexbox02 > * {
  width: calc(50% - 5px);
}

/* ------ flexbox03 ------ */
.flexbox03 {
  display: flex;
  flex-flow: wrap;
  gap: 10px;
}

.flexbox03 > * {
  width: calc((100% / 3) - (20px / 3));
}

/* ------ flexbox04 ------ */
.flexbox04 {
  display: flex;
  flex-flow: wrap;
  gap: 10px;
}

.flexbox04 > * {
  width: calc((100% / 4) - (30px / 4));
}

/* ------ 枠 ------ */
:is(.frame01, .frame02) > *:not(h1, h2, h3, h4, h5) {
  margin-bottom: 2em;
}

:is(.frame01, .frame02) > *:last-child {
  margin-bottom: 0;
}

:is(.frame01, .frame02) > :is(h3, h4, h5) {
  margin-bottom: 12px;
}

.frame01 {
  position: relative;
  z-index: 1;
  padding: 40px 30px;
  background: var(--bg-color);
}

.frame01::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: -1;
  display: block;
  width: calc(100% - 20px);
  height: calc(100% - 20px);
  border: 1px solid #ffffff;
  transform: translate(-50%, -50%);
}

.frame01 p {
  font-size: 120%;
  text-align: center;
}

.frame02 {
  padding: 20px 25px;
  background: var(--bg-color);
}

.img_center {
  text-align: center;
}

.img_fl,
.img_fr {
  position: relative;
  z-index: 2;
  display: block;
  margin-bottom: 20px;
}

.img_fl {
  float: left;
  margin-right: 30px;
  text-align: center;
}

.img_fr {
  float: right;
  margin-left: 30px;
  text-align: center;
}

.img_fl img,
.img_fr img {
  width: auto;
  max-width: 400px;
  height: auto;
  max-height: 400px;
}

.float_clear {
  float: none !important;
}
.flow_flex {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    justify-content: center;
}

.flow_text{
	width:100%;
}

.flow_a1 {
    width: 80%;
}

.flow_flex .flow_a1 img {
    width: 100%;
    height: auto;
}

/* スマホ対応 */
@media screen and (max-width: 768px) {
  .flow_flex {
	  flex-direction: column;
	  gap:0;
  }
  
  .flow_flex .flow_a1 img {
    width: 100%;
  }
}

.flow_in_flow{
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.flow_in_flow li {
    display: grid;
    gap: 20px;
    grid-template-columns: 1.5fr 1fr;
    width: 95%;
    margin: 0 auto;
    background: #e7d6b5;
    padding: 30px 30px;
}

.flow_in_flow .flow_a1{
	width:100%;
}

.flow_sbttl {
    background: #C9A96F;
    color: #ffffff;
    text-shadow: 0 0px 3px #00000091;
    padding: 3px 10px;
    margin-bottom: 10px;
    font-weight: 600;
}

/*==============================================
  *SP レイアウト
==============================================*/
@media screen and (max-width: 640px) {
  /* ------ layout01 ------ */
  .layout01 .layout_box {
    gap: 15px;
  }

  .layout01 .layout_img,
  .layout01 .layout_text {
    width: 100%;
  }

  /* ------ layout02 ------ */
  .layout02 .layout_left,
  .layout02 .layout_right {
    width: 100%;
  }

  /* ------ flow ------ */
  .flow {
    padding: 20px;
  }
	
.flow_box {
    width: 100%;
    /* display: flex; */
    gap: 20px;
    /* padding: 30px 0; */
    /* margin: 0 auto; */
}

.flow_a1 {
    width: 100%;
}

  .flow_number::before {
    top: 40px;
  }

  .flow_number span {
    width: 40px;
    height: 40px;
    padding-top: 2px;
  }

  .flow_inner {
    width: calc(100% - 60px);
  }

  .flow_inner .flow_title {
    padding: 4px 15px;
  }

  /* ------ flexbox01（改行せずに等間隔で配置） ------ */
  .flexbox01 > * {
    flex: none;
    width: 100%;
  }

  /* ------  flexbox02 ------ */
  .flexbox02 > * {
    width: 100%;
  }

  /* ------  flexbox03 ------ */
  .flexbox03 > * {
    width: 100%;
  }

  /* ------  flexbox04 ------ */
  .flexbox04 > * {
    width: 100%;
  }

  .img_fl,
  .img_fr {
    float: none;
    margin: 0 auto 2.25em;
    text-align: center;
  }

  .img_fl img,
  .img_fr img {
    width: auto;
    max-width: 100%;
    height: auto;
    max-height: none;
  }

.flow_in_flow li {
    display: flex;
    flex-direction: column;
    padding: 15px 10px;
    width: 100%;
    gap: 10px;
}

.flow_sbttl {
    text-align: center;
    padding: 5px 0;
}

}


/* =============================== 料金 =============================== */
/* 料金 */
.cost-sec {
    padding: 5vw 0;
    background: url(../images/Chiro0209_00001.jpg) center -60px / cover no-repeat;
    position: relative;
}

.cost-sec::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #7d6f568a;
    z-index: 0;
}

.cost-sec * {
  position: relative;
/*   z-index: 1;
    backdrop-filter: blur(6px); */
}

.cost-sec h2 {
    margin-bottom: 12px;
    text-shadow: 0px 0px 6px #000000d1;
}

.cost-txt {
    margin: 0 0 18px;
    line-height: 1.8;
    text-align: center;
    text-shadow: 0px 0px 6px #000000cf;
}

.cost-cont {
    border: 1px solid #C9A96F;
    border-radius: 12px;
    padding: 30px 60px;
    background: #fbf7ef;
    width: 70%;
    margin: 0 auto;
    color: #12100F;
}

/* アジャストメント料のブロック */
.cost-group {
  margin-top: 18px;
  padding-top: 18px;
}

.cost-sec h3 {
    margin: 2rem 0 0;
}

/* dl */
.cost-block {
  margin: 0;
}

/* 1行（dt/ddのペア） */
.cost-box {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 16px;
    padding: 12px 0;
    border-bottom: 1px dashed #877d78;
}

/* 最終行のボーダーを消す */
.cost-group .cost-block .cost-box:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.cost-ttl {
    font-weight: 600;
    margin: 0;
    font-size: 19px;
}

.cost-price {
    margin: 0;
    font-weight: 700;
    letter-spacing: 0.02em;
    white-space: nowrap;
    font-size: 19px;
}

.cost-tax {
    font-weight: 500;
}

.cost-note {
    margin-top: 10px;
    font-size: 16px;
    text-align: center;
}



/* ------------ タブレットサイズ ------------ */
@media only screen and (max-width: 960px) {
	
.cost-sec {
    background-position: center;
}
	
.cost-cont {
    padding: 20px 40px;
    width: 80%;
}
}

/* ------------ スマホサイズ ------------ */
@media only screen and (max-width: 480px){
.cost-sec {
    padding: 18vw 0vw;
}

.cost-txt {
    width: 90%;
    margin: 0 auto 15px;
    letter-spacing: 1px;
    text-align: left;
    font-size: 17px;
    line-height: 24px;
}

.cost-cont {
    padding: 11px 17px;
    margin: 20px auto;
    width: 90%;
}

.cost-box {
    flex-direction: row;
    align-items: center;
    gap: 0px;
    padding: 0 0;
}

  .cost-price {
    font-size: 1.05rem;
  }

.cost-group {
    margin-top: 0;
    padding-top: 0;
}

.cost-sec h3 {
    margin: 2rem 0 1rem;
    font-size: 20px;
    line-height: normal;
    letter-spacing: normal;
}

.cost-note {
    font-size: 15px;
    line-height: normal;
}

.cost-ttl {
    margin: 0;
    font-size: 19px;
}
}


/* =============================== まずはご相談ください =============================== */
.ask-sec {
    background-color: #EDE6D9;
    padding: 5vw 0;
    /* background-image: url(http://miyano-chiro.com.testrs.jp/test/wp-content/themes/template_theme/images/AdobeStock_723784135.png); */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    position: relative;
}

.ask-sec::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    /* background: rgb(0 0 0 / 59%); */
    z-index: 0;
}

.ask-sec * {
  position: relative;
  z-index: 1;
}

.ask-cont {
    /* background: #000000d1; */
    padding: 3rem 0;
    margin: 0 auto;
    width: 80%;
    text-align: center;
    color: #12100F;
}

.ask-sec .cv-btn{
	margin-top: 40px;
}





/* ------------ タブレットサイズ ------------ */
@media only screen and (max-width: 960px) {

.ask-cont {
    padding: 3rem 1rem;
    width: 90%;
}
}

/* ------------ スマホサイズ ------------ */
@media only screen and (max-width: 480px){
	
	.ask-sec{
		    padding: 14vw 0;
	}

	.ask-sec h2{
    margin: 20px 0;
	}

.ask-cont {
    padding: 20px 10px;
    width: 95%;
    text-align: left;
}

.ask-txt p {
    letter-spacing: 1px;
    font-size: 16px;
    text-align: center;
}


}


/* =============================== アクセス =============================== */
.access-sec {
    display: grid;
    grid-template-columns: 1fr 1.3fr;
    align-items: center;
    gap: 2rem;
    padding: 8% 4%;
    background: url(../images/gaikan_naikan0210_00025.jpg) center center / cover no-repeat;
    position: relative;
    background-size: cover;
}

.access-sec::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgb(0 0 0 / 56%);
    z-index: 0;
}

.access-sec * {
  position: relative;
  z-index: 1;
}

.access-map{
    overflow: hidden;
    width: 100%;
    height: 100%;
}

.access-map iframe{
    width: 100%;
    height: 100%;
}

.access-cont {

}

.access-sec h2{
	text-align:left;
}

.access-address p {
    font-size: 25px;
    line-height: normal;
    letter-spacing: 2px;
}

.access-rsv-ttl {
    background-color: #c9a96fd6;
    padding: 10px;
    margin: 20px auto 9px;
    width: 100%;
    font-size: 25px;
    line-height: normal;
    letter-spacing: 4px;
    font-weight: 600;
    text-shadow: 0px 0px 4px #4d3406cf;
}

.access-rsv-time {
    font-size: 25px;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
}

.access-rsv-time span {
    background-color: #c9a96fd6;
    padding: 2px 9px;
    font-size: 18px;
    font-weight: 600;
    text-shadow: 0px 0px 4px #4d3406cf;
}

.access-sec .cv-btn {
    width: 100%;
    gap: 1.5rem;
    margin-top: 2rem;
}

.access-sec .cv-btn a {
    font-size: 30px;
    letter-spacing: 5px;
    padding: 11px 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.access-sec .cv-btn .tel-btn{
    display: flex !important;
    flex-direction: column;
    align-items: center;
    line-height: 35px;
	}


.access-sec .cv-btn .tel-btn span {
    font-size: 1.6rem;
}

/* ------------ タブレットサイズ ------------ */
@media only screen and (max-width: 960px) {

.access-sec {
    gap: 2rem;
    padding: 7% 4%;
    background-position: center;
    display: flex;
    flex-direction: column-reverse;
}


.access-map {
    height: 50vw;
}
	
.access-sec .cv-btn a {
    font-size: 23px;
    letter-spacing: 3px;
    padding: 11px 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.access-sec .cv-btn .tel-btn span {
    font-size: 1.2rem;
    letter-spacing: normal;
    line-height: normal;
}
}

/* ------------ スマホサイズ ------------ */
@media only screen and (max-width: 480px){
.access-sec {
    gap: 2rem;
    padding: 8% 5%;
    background-size: cover;
    background-position: center;
    display: flex;
    flex-direction: column-reverse;
    align-items: center;
}

.access-cont {
    padding: 0 0;
    width: 100%;
}

.access-sec h2 {
    text-align: center;
}

.access-address p {
    font-size: 19px;
    letter-spacing: 2px;
}

.access-rsv-ttl {
    font-size: 22px;
}

.access-rsv-time {
    font-size: 19px;
}

.access-sec .cv-btn {
    width: 100%;
    gap: 10px;
    margin-top: 1.3rem;
}

.access-sec .cv-btn a {
    font-size: 21px;
    width: 95%;
}



.access-map {
    overflow: hidden;
    width: 100%;
    height: 80vw;
}
}


/* =============================== フッター =============================== */
footer {
    width: 100%;
    height: 25vw;
    background: #12100F;
    text-align: center;
    padding: 4rem 0;
    position: absolute;
}

/* .f-cont{
    display: flex;
    width: 90%;
    margin: 0 auto;
    align-items: center;
    justify-content: center;
} */

footer .copyright {
    bottom: 0;
    font-size: 0.85rem;
    font-weight: 300;
    text-align: center;
    width: 100%;
    position: absolute;
}

footer .lp {
    font-size: 29px;
    display: flex;
    flex-direction: column;
    align-items: center;
    letter-spacing: 6px;
    line-height: normal;
    margin-bottom: 40px;
}

footer .lp span {
    font-size: 27px;
    letter-spacing: 3px;
}

footer .hp {
    width: 100%;
    height: auto;
    overflow: hidden;
    margin-top: 1rem;
}

footer .hp a {
    width: 27%;
    height: auto;
    overflow: hidden;
    display: block;
    margin: 0 auto;
}

.to-top {
    height: 70px;
    width: 70px;
    position: fixed;
    right: 23px;
    bottom: 18px;
    border: solid 2px #C9A96F;
    background: #fff7e85e;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 2;
    box-shadow: 0 0px 4px rgb(0 0 0 / 23%);
    backdrop-filter: blur(8px);
    cursor: pointer;
}

.to-top__arrow {
    height: 10px;
    width: 10px;
    border-top: 2px solid #12100F;
    border-right: 2px solid#12100F;
    transform: translateY(20%) rotate(-45deg);
}

.f-time {
    text-align: center;
    width: 100%;
    margin: 30px auto 0;
}

.time-table {
    width: 100%;
    margin: 0 auto;
    border-collapse: collapse;
    text-align: center;
    border: none;
    color: #2b2b2b;
    border: 1px solid #e2e6ea;
    background: #f6f6f6;
}

/* 時間帯のセルスタイル */
.time-table th:first-child {
/*     border-bottom: 2px solid #fff; */
    border-right: none;
    /* line-height: 26px; */
    width: 23%;
}

.medical-hours {
/*     border-right: 2px solid #fff !important; */
}

.time-table td, .time-table th {
    padding: 10px;
    border: 1px dashed #2c2c2c;
}

/* ヘッダー行のスタイル */
.time-table th {
    font-size: 19px;
    background: #EDE6D9;
    font-weight: 700;
    line-height: normal;
    vertical-align: middle;
}

.time-table td {
    padding: 15px 0px;
    /* aspect-ratio: 1 / 1; */
    width: 5rem;
    vertical-align: middle;
}

/* 丸印（●）のスタイル */
.circle {
    display: contents;
    font-size: 20px;
    color: #7B5D40;
}

/* 休日や診療しない日 */
.time-table td .dash {

}

.dash {
    display: inline-block;
    width: 30%;
    border-bottom: 2px solid #7B5D40;
    margin-bottom: 0.4rem;
}


/* ------------ タブレットサイズ ------------ */
@media only screen and (max-width: 960px) {
footer {
    height: 33vw;
    padding: 2rem 0;
}
	
footer .hp a {
    width: 38%;
}
}

/* ------------ スマホサイズ ------------ */
@media only screen and (max-width: 480px){
footer {
    height: 74vw;
    padding: 2rem 1rem;
    display: block;
    position: relative;
}
	
footer .lp {
    font-size: 18px;
    letter-spacing: 4px;
    line-height: normal;
    margin-bottom: 25px;
}

footer .lp span {
    font-size: 17px;
    letter-spacing: 1.7px;
}

footer .hp a {
    width: 67%;
}

footer .copyright {
    font-size: 11px;
    letter-spacing: 1px;
    width: 90%;
    bottom: 8px;
    line-height: normal;
}

.f-time {
    margin: 20px auto 0;
}

.to-top {
    height: 50px;
    width: 50px;
    right: 7px;
    bottom: 5px;
}

.time-table th {
    font-size: 15px;
    line-height: normal;
    letter-spacing: normal;
}

.time-table thead th, .time-table tbody td {
    font-size: 16px;
    padding: 7px 0px;
    vertical-align: middle;
}

.time-table td {
    width: 2rem;
}
	
.time-table th:first-child {
    width: 20%;
}
}