@charset "UTF-8";
/* リキッドレイアウト対応のための設定 */
body {
  color: #363636;
  background-color: #FCFAF3;
}

body {
  font-family: "Noto Sans JP", sans-serif;
}

/*  PCとSPの表示非表示の切り替え */
/*(md)px以上で表示*/
.pc-only {
  display: none;
}
@media screen and (min-width: 768px) {
  .pc-only {
    display: block;
  }
}

/*モバイルのみ表示*/
@media screen and (min-width: 768px) {
  .sp-only {
    display: none;
  }
}

/*画像の縦横比設定*/
img {
  width: 100%;
  height: auto;
  display: block;
}

/* aタグのスタイルリセット*/
a {
  text-decoration: none;
  -webkit-transition: opacity 0.3s ease;
  transition: opacity 0.3s ease;
  color: inherit;
}

@media (any-hover: hover) {
  a:hover {
    opacity: 0.8;
  }
}
input {
  font-size: 16px;
}
html,
body {
  overflow-x: clip;
  position: relative;
}

html {
  /* ベースのフォントサイズ */
  font-size: 16px;
  /* スマートフォン 375px以下 */
}
@media (max-width: 375px) {
  html {
    font-size: 4.2666666667vw;
  }
}

@media screen and (min-width: 768px) {
  html {
    font-size: 1.5384615385vw;
  }
}

@media (min-width: 1040px) {
  html {
    font-size: 16px;
  }
}

*,
*::before,
*::after {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

/* Remove default padding */
ul,
ol {
  padding: 0;
}

/* Remove default margin */
body,
h1,
h2,
h3,
h4,
p,
ul,
ol,
figure,
blockquote,
dl,
dd {
  margin: 0;
  padding: 0;
}

/* Set core html defaults */
html {
  scroll-behavior: smooth;
}

/* Set core body defaults */
body {
  min-height: 100vh;
  text-rendering: optimizeSpeed;
  line-height: 1.5;
}

/* Remove list styles on ul, ol elements with a class attribute */
ul,
ol {
  list-style: none;
}

/* A elements that don't have a class get default styles */
a:not([class]) {
  -webkit-text-decoration-skip: ink;
          text-decoration-skip-ink: auto;
}

/* Make images easier to work with */
img {
  max-width: 100%;
  display: block;
  width: 100%;
  height: auto;
}

/* Natural flow and rhythm in articles by default */
article > * + * {
  margin-top: 1em;
}

/* Inherit fonts for inputs and buttons */
input,
button,
textarea,
select {
  font: inherit;
}

/* Blur images when they have no alt attribute */
img:not([alt]) {
  -webkit-filter: blur(10px);
          filter: blur(10px);
}

/* フォームリセット */
input,
button,
select,
textarea {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background: transparent;
  border: none;
  border-radius: 0;
  font: inherit;
  outline: none;
}

textarea {
  resize: vertical;
}

input[type=checkbox],
input[type=radio] {
  position: absolute;
  opacity: 0;
}

input[type=submit],
input[type=button],
label,
button,
select {
  cursor: pointer;
}

select::-ms-expand {
  display: none;
}

/*addressタグのフォントリセット*/
address {
  font-style: normal;
}

.inner {
  max-width: 37.5rem;
  padding-inline: 15px;
  margin-inline: auto;
}
@media screen and (min-width: 768px) {
  .inner {
    max-width: 1090px;
    padding-inline: 25px;
  }
}

.header {
  position: fixed;
  width: 100%;
  top: 0;
  left: 0;
  height: 5.625rem;
  z-index: 9998;
  overflow: clip;
  background-color: #FCFAF3;
}
@media screen and (min-width: 768px) {
  .header {
    height: 9.625rem;
  }
}

.header__inner,
.header__nav,
.header__nav-items,
.header__nav-item {
  height: inherit;
}

.header__inner {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  width: 100%;
  max-width: none;
  margin-inline: auto;
  padding-inline: 15px;
}
@media screen and (min-width: 768px) {
  .header__inner {
    max-width: 83.125rem;
    padding-inline: 25px;
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: flex-start;
    padding-top: 2.75rem;
  }
}

.header__logo {
  z-index: 9999;
}
@media screen and (min-width: 768px) {
  .header__logo {
    margin-top: -1.25rem;
  }
}

@media screen and (min-width: 768px) {
  .header__nav-items {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: stretch;
        -ms-flex-align: stretch;
            align-items: stretch;
    gap: 2.375rem;
    padding: 1.125rem 3.125rem;
    padding-block: 0;
    max-width: 39.125rem;
    height: 3.8125rem;
    -ms-flex-negative: 0;
        flex-shrink: 0;
    background: rgba(255, 255, 255, 0.6);
    border: 2px solid #E1B33F;
    border-radius: 2.5rem;
    list-style: none;
    white-space: nowrap;
  }
}

.header__nav-item {
  position: relative;
  height: 100%;
}

.header__nav-link {
  display: -ms-grid;
  display: grid;
  place-content: center;
  height: 100%;
  text-decoration: none;
  color: #363636;
  font-size: 1rem;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
}

@media screen and (min-width: 768px) {
  .header__drawer {
    display: none;
  }
}

.header__nav-item::before {
  content: "";
  position: absolute;
  display: block;
  top: 0.9375rem;
  left: -0.3125rem;
  width: 0.5rem;
  height: 0.5rem;
  background-color: #E1B33F;
  border-radius: 50%;
  -ms-flex-negative: 0;
      flex-shrink: 0;
}

/*ハンバーガーメニュー*/
.hamburger {
  z-index: 9999;
  width: 2.375rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column; /* 縦並び */
  -webkit-box-align: end;
      -ms-flex-align: end;
          align-items: flex-end;
}
@media screen and (min-width: 768px) {
  .hamburger {
    display: none;
  }
}

.hamburger span {
  display: block;
  position: relative;
  background-color: #E1B33F;
  width: 100%;
  height: 0.125rem;
  -webkit-transition: width 0.3s ease, background-color 0.3s ease, opacity 0.3s ease, -webkit-transform 0.3s ease;
  transition: width 0.3s ease, background-color 0.3s ease, opacity 0.3s ease, -webkit-transform 0.3s ease;
  transition: width 0.3s ease, transform 0.3s ease, background-color 0.3s ease, opacity 0.3s ease;
  transition: width 0.3s ease, transform 0.3s ease, background-color 0.3s ease, opacity 0.3s ease, -webkit-transform 0.3s ease;
}

/* 1本目：一番長い */
.hamburger span:nth-child(1) {
  width: 2.375rem;
}

/* 2本目：少し短い */
.hamburger span:nth-child(2) {
  width: 1.875rem;
  margin-block: 0.5rem 0.5625rem;
}

/* 3本目：一番短い */
.hamburger span:nth-child(3) {
  width: 1.375rem;
}

/* --- 以下、開いた時のスタイルの調整 --- */
.hamburger.is-open-sp span {
  background-color: #fff;
  margin-top: 0;
}

.hamburger.is-open-sp span:nth-child(1) {
  width: 2.655625rem;
  -webkit-transform: translateY(0.4375rem) rotate(26.57deg);
          transform: translateY(0.4375rem) rotate(26.57deg);
}

/* 2本目：透明にして消す */
.hamburger.is-open-sp span:nth-child(2) {
  opacity: 0;
}

.hamburger.is-open-sp span:nth-child(3) {
  width: 2.655625rem;
  -webkit-transform: translateY(-0.4375rem) rotate(-26.57deg);
          transform: translateY(-0.4375rem) rotate(-26.57deg);
}

body.js-fixed {
  width: 100%;
  height: 100%;
  position: fixed;
}

.sp-nav {
  background-color: #E1B33F;
  width: 100%;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9998;
  -webkit-transform: translateX(100%);
          transform: translateX(100%);
  -webkit-transition: -webkit-transform 0.3s 0s;
  transition: -webkit-transform 0.3s 0s;
  transition: transform 0.3s 0s;
  transition: transform 0.3s 0s, -webkit-transform 0.3s 0s;
  visibility: hidden;
  overflow-y: auto;
}
@media screen and (min-width: 768px) {
  .sp-nav {
    display: none;
  }
}

.sp-nav__inner {
  padding-inline: 0;
}

/* メニューリスト部分 */
.sp-nav__items {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 2.8125rem;
  margin: 0 auto auto; /* 左右中央、下方向はautoでボタンを押し下げる */
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content; /* コンテンツ幅に合わせて中央寄せ */
  padding-top: 0; /* 元のpaddingをリセット */
  margin-top: 11.25rem;
}

.sp-nav__item {
  position: relative;
  padding-left: 0.625rem; /* ドット分のスペース確保 */
  text-align: left;
}

.sp-nav__item::before {
  content: "";
  display: block;
  width: 0.5rem;
  height: 0.5rem;
  background-color: #fff;
  border-radius: 50%;
  position: absolute;
  top: -0.625rem;
  left: 0;
  border-radius: 50%;
}

.sp-nav__item a {
  display: block;
  color: #FAF3E0;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1;
  text-decoration: none;
}

.sp-nav__footer {
  margin-top: 3.75rem;
  text-align: center;
}

.fv {
  position: relative;
  z-index: 10;
  width: 100%;
}

.fv__inner {
  position: relative;
  width: 100%;
  padding-left: 0.9375rem;
  padding-right: 0;
}
@media screen and (min-width: 768px) {
  .fv__inner {
    max-width: 75rem;
    margin-inline: auto;
    padding-inline: 0;
  }
}

.fv__image {
  aspect-ratio: 360/452;
  width: 100%;
  display: block;
}
@media screen and (min-width: 768px) {
  .fv__image {
    aspect-ratio: 1320/614;
    height: auto;
  }
}

.fv__image img {
  -o-object-fit: cover;
     object-fit: cover;
  width: 100%;
  height: 100%;
  -webkit-transition: -webkit-transform 4s ease-in-out;
  transition: -webkit-transform 4s ease-in-out;
  transition: transform 4s ease-in-out;
  transition: transform 4s ease-in-out, -webkit-transform 4s ease-in-out;
  border-radius: 0 0 0 30px;
}
@media screen and (min-width: 768px) {
  .fv__image img {
    border-radius: 0 0 0 60px;
  }
}

.fv__catch {
  position: absolute;
  top: 45%;
  left: 52%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  display: inline-block;
  text-align: center;
  z-index: 1;
  color: #E1B33F;
  font-family: "Lato", sans-serif;
  font-size: 2rem;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
  white-space: nowrap;
}
@media screen and (min-width: 768px) {
  .fv__catch {
    font-size: 3rem;
    left: 36%;
    top: 38%;
    -webkit-transform: none;
            transform: none;
  }
}

.fv__slider-wrapper {
  width: 100%;
  overflow: hidden;
}
@media screen and (min-width: 768px) {
  .fv__slider-wrapper {
    margin-top: 3.125rem;
  }
}

.fv__slider {
  width: auto;
  margin-right: calc(50% - 50vw);
}


.section-fv {
  width: 100%;
  margin-top: 5.625rem;
  padding-bottom: 2.5rem;
  position: relative;
}
@media screen and (min-width: 768px) {
  .section-fv {
    margin-top: 9.6875rem;
    padding-bottom: 0;
  }
}

.top-news {
  position: static;
  z-index: 20;
  min-width: 21.5625rem;
  margin-inline: auto;
  background-color: #E1B33F;
  border-radius: 0.5rem;
  -webkit-box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.1);
          box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.1);
  margin-top: 2.5rem;
  padding: 2rem 1.5rem 2.5rem;
}
@media screen and (min-width: 768px) {
  .top-news {
    position: absolute;
    max-width: 49.1875rem;
    width: calc(100% - 30px);
    padding: 0 2.5rem;
    bottom: -6.25rem;
    right: 7.5rem;
    left: auto;
    height: auto;
    margin-top: 2.375rem;
  }
}

@media screen and (min-width: 768px) {
  .top-news__fv {
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: 9.3125rem 2.5rem minmax(0, 1fr);
    grid-template-columns: 9.3125rem minmax(0, 1fr);
        grid-template-areas: "head list";
    -webkit-column-gap: 2.5rem;
       -moz-column-gap: 2.5rem;
            column-gap: 2.5rem;
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: start;
  }
}

/* タイトルとボタンの横並び(SP) / 縦並び(PC) */
.top-news__head {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding-bottom: 1.4375rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.4);
}
@media screen and (min-width: 768px) {
  .top-news__head {
    grid-area: head;
    display: block;
    padding-top: 2rem;
    padding-bottom: 0;
    border-bottom: none;
  }
}

.top-news__btn {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  text-decoration: none;
}
@media screen and (min-width: 768px) {
  .top-news__btn {
    width: 9.3125rem;
    margin-top: 0.875rem;
  }
}

.top-news__list {
  list-style: none;
  padding: 0;
}
@media screen and (min-width: 768px) {
  .top-news__list {
    grid-area: list;
    padding-block: 2rem;
  }
}
@media screen and (min-width: 768px){
  .top-news__head {
    -ms-grid-row: 1;
    -ms-grid-column: 1;
  }
  .top-news__list {
    -ms-grid-row: 1;
    -ms-grid-column: 3;
  }
}

/* ニュース項目：SPは縦、PCは横 */
.top-news__item {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 0.5rem;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.4);
  min-width: 0;
}
@media screen and (min-width: 768px) {
  .top-news__item {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    padding: 0.625rem 0 0.75rem 0;
  }
}

@media screen and (min-width: 768px) {
  .top-news__item:first-child {
    border-top: 1px solid rgba(255, 255, 255, 0.5);
  }
}

/* 日付とラベルのセット */
.top-news__meta {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  gap: 0.625rem;
  padding-top: 1.5rem;
}
@media screen and (min-width: 768px) {
  .top-news__meta {
    gap: 0.5625rem;
    -ms-flex-negative: 0;
        flex-shrink: 0;
    width: 5rem;
    padding-top: 0.625rem;
  }
}

.top-news__date {
  font-size: 0.75rem;
  color: #fff;
  font-family: "Lato", sans-serif;
  line-height: 1;
}
@media screen and (min-width: 768px) {
  .top-news__date {
    margin-bottom: 0;
    margin-right: 0;
  }
}

.top-news__label {
  background-color: #fff;
  color: #E1B33F;
  font-family: "Lato", sans-serif;
  font-size: 0.625rem;
  font-style: normal;
  font-weight: 400;
  padding: 0 0.5rem;
  border-radius: 1.25rem;
  color: var(--yellow, #E1B33F);
}

/* 本文テキスト */
.top-news__text {
  color: #fff;
  font-weight: 700;
  line-height: normal;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
}
@media screen and (min-width: 768px) {
  .top-news__text {
    padding-top: 0.8125rem;
    padding-left: 0.8125rem;
  }
}


/* セクション全体 */
.section-greeting {
  background-color: #FCFAF3;
  padding-bottom: 2.375rem;
}

@media screen and (min-width: 768px) {
  .section-greeting {
    padding: 5rem 0;
  }
}
/* コンテナ */
.greeting__container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: reverse;
      -ms-flex-direction: column-reverse;
          flex-direction: column-reverse;
  width: 100%;
  margin-inline: auto;
  padding: 3.125rem 15px 0;
  gap: 1.5rem;
}

@media screen and (min-width: 768px) {
  .greeting__container {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    max-width: 68.125rem;
    padding: 0 25px;
    gap: 3.75rem;
  }
}
/* 1. コンテンツエリア (SPでは上) */
.greeting__content {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
}

@media screen and (min-width: 768px) {
  .greeting__content {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 28.75rem;
            flex: 0 0 28.75rem;
    -webkit-box-ordinal-group: 3;
        -ms-flex-order: 2;
            order: 2;
  }
}
.greeting__image-container {
  width: 100%;
}

@media screen and (min-width: 768px) {
  .greeting__image-container {
    margin-top: -0.3125rem;
    -webkit-box-flex: 1;
        -ms-flex: 1;
            flex: 1;
  }
}
/* キャッチフレーズ */
.greeting__catchphrase {
  margin-top: 1.125rem;
  font-size: 1.5rem;
  font-weight: 700;
  color: #363636;
  line-height: 1.3333333333;
}

@media screen and (min-width: 768px) {
  .greeting__catchphrase {
    margin-top: 2.5rem;
  }
}
/* 本文テキスト */
.greeting__text-block {
  display: -ms-grid;
  display: grid;
  gap: 1.5rem;
  font-size: 1rem;
  color: #363636;
  line-height: 1.5;
  font-weight: 400;
  margin-top: 1.5rem;
}

.greeting__text-block p:last-child {
  margin-bottom: 0;
}

/* 院長情報 */
.greeting__clinic-info {
  display: -ms-grid;
  display: grid;
  gap: 0.25rem;
  font-family: "Lato", sans-serif;
  font-size: 0.875rem;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  margin-top: 2.5rem;
}

@media screen and (min-width: 768px) {
  .greeting__clinic-info {
    gap: 0.375rem;
    margin-top: 1.5rem;
  }
}
.greeting__doctor-title {
  font-size: 1rem;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
  margin-right: 1.25rem;
}

@media screen and (min-width: 768px) {
  .greeting__doctor-title {
    margin-right: 2.5rem;
  }
}
.greeting__doctor-name {
  font-size: 1rem;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
}

.greeting__btn {
  margin-top: 2.5rem;
}

@media screen and (min-width: 768px) {
  .greeting__btn {
    margin-top: 1.25rem;
  }
}
/* 背景色が白のボタン */
.btn {
  position: relative;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  gap: 0.5rem;
  padding: 0.5rem 1.5rem;
  width: auto;
  text-decoration: none;
  white-space: nowrap;
  font-family: "Lato", sans-serif;
  font-size: 1rem;
  font-weight: bold;
  line-height: normal;
  font-style: normal;
  color: #E1B33F;
  background: #fff;
  border-radius: 2.5rem;
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
  border: 1px solid #fff;
}

/* ボタン内の矢印アイコン (円形の装飾) */
.btn::after {
  content: "";
  display: block;
  width: 1rem;
  height: 1rem;
  background-image: url(../images/btn-icon1.svg);
  background-size: contain;
  background-repeat: no-repeat;
  -webkit-transition: -webkit-filter 0.3s ease;
  transition: -webkit-filter 0.3s ease;
  transition: filter 0.3s ease;
  transition: filter 0.3s ease, -webkit-filter 0.3s ease;
}

.btn:hover {
  background: #E1B33F;
  color: #fff;
}

/* ホバー時のアイコンスタイル（白くする）*/
.btn:hover::after {
  background-image: url(../images/btn-icon2.svg);
}

/* サイズ違い */
.btn.btn--big {
  padding: 0.875rem 2rem;
}

/* 背景色が黄色のボタン */
.btn.btn--yellow {
  color: #fff;
  background: #E1B33F;
  border: 1px solid #E1B33F;
}

.btn.btn--yellow::after {
  background-image: url(../images/btn-icon2.svg);
}

.btn.btn--yellow:hover {
  background: #fff;
  color: #E1B33F;
}

.btn.btn--yellow:hover::after {
  background-image: url(../images/btn-icon1.svg);
}

/* 背景色が黄色のbigボタン */
.btn.btn--yellow.btn--yellow-big {
  padding: 0.875rem 2rem;
}

/* フォントがlatoのボタン */
.btn.btn--yellow.btn--yellow-column {
  padding: 0.75rem 2rem;
  font-family: "lato", sans-serif;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  -ms-flex-item-align: start;
      align-self: flex-start;
}
/* お問い合わせ✉付 */
.btn.btn--yellow.btn--yellow-column.btn--yellow-column-contact::before {
  background-image: url(../images/btn-icon_mail.svg);
}

.btn.btn--yellow.btn--yellow-top {
  font-family: "Noto Sans JP", sans-serif;
  border: 1px solid #fff;
  box-shadow: 4px 4px 10px 0 rgba(0, 0, 0, 0.13);
  opacity: 1;
}

.section-title {
  position: relative;
  padding-left: 0.4375rem;
  /* 日本語メインタイトルのスタイル */
  font-family: "Noto Sans JP", sans-serif;
  font-size: 1.5rem;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
  color: #E1B33F;
  line-height: 1;
  text-align: left; /* デフォルトは左揃え */
}
@media screen and (min-width: 768px) {
  .section-title {
    font-size: 2rem;
  }
}

/* --- 1. 左上の黄色い丸 (::before) --- */
.section-title::before {
  content: "";
  display: block;
  position: absolute;
  /* 位置調整: 文字の左上へ */
  top: -0.625rem;
  left: 0;
  /* 丸のサイズと形 */
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background-color: #E1B33F;
}

.section-title::after {
  content: attr(data-en);
  /* 英語サブタイトルのスタイル */
  display: block; /* ブロック要素にして改行させる */
  font-family: "Lato", sans-serif;
  font-size: 0.75rem;
  font-weight: 400;
  color: #E1B33F;
  margin-top: 0.5rem; /* 日本語との距離 */
}
@media screen and (min-width: 768px) {
  .section-title::after {
    margin-top: 0.625rem;
  }
}

/* --- Modifier: white (白文字＆白〇用) --- */
.section-title.section-title--white {
  color: #fff;
}

.section-title.section-title--white::before {
  background-color: #fff;
}

.section-title.section-title--white::after {
  color: #fff;
}

.section-title.section-title--white.section-title--white-news {
  font-size: 1rem;
  font-weight: 400;
}

.section-title.section-title--white.section-title--white-news::after {
  font-size: 0.75rem;
}

/* --- Modifier フォントサイズ24px --- */
.section-title.section-title--small {
  font-size: 1.5rem;
}

.top-medical {
  position: relative;
  width: 100%;
  overflow: hidden;
}

/* 背景の黄色いボックス */
.top-medical__bg {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 16.8125rem;
  top: 17.4375rem;
  background-color: #E1B33F;
  border-radius: 0.625rem 0.625rem 0 0;
  z-index: 0;
  overflow: hidden;
}
@media screen and (min-width: 768px) {
  .top-medical__bg {
    width: calc(100% - 25px * 2);
    max-width: 75rem;
    height: 20.375rem;
    top: 25.8rem;
    left: 50%;
    -webkit-transform: translateX(-50%);
            transform: translateX(-50%);
  }
}

/* 背景装飾（大きなiroロゴ） */
.top-medical__deco {
  position: absolute;
  z-index: 1;
  pointer-events: none;
  bottom: 2rem;
  left: 0.9375rem;
  width: 11.375rem;
}
@media screen and (min-width: 768px) {
  .top-medical__deco {
    left: 50%;
    margin-left: -32.5rem;
    bottom: 0.625rem;
    width: 21rem;
    -webkit-transform: none;
            transform: none;
  }
}

.top-medical__deco img {
  width: 100%;
  height: auto;
  display: block;
}

.top-medical .inner {
  position: relative;
  z-index: 2;
  width: 100%;
  margin-inline: auto;
  padding-inline: 15px;
}
@media screen and (min-width: 768px) {
  .top-medical .inner {
    max-width: 68.125rem;
    padding-inline: 25px;
  }
}

/* リスト部分 */
.top-medical__list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: nowrap;
      flex-wrap: nowrap;
  overflow-x: auto;
  gap: 1rem;
  margin-top: 1.5rem;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  margin-right: calc(50% - 50vi);
}
@media screen and (min-width: 768px) {
  .top-medical__list {
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    width: 100%;
    margin-top: 2.5rem;
    margin-inline: 0;
    margin-right: 0;
    overflow: visible;
  }
}

.top-medical__list .medical-item {
  -webkit-box-flex: 0;
      -ms-flex: 0 0 15.25rem;
          flex: 0 0 15.25rem;
  width: 15.25rem;
  height: 15.5rem;
  padding-top: 0.5rem;
}
@media screen and (min-width: 768px) {
  .top-medical__list .medical-item {
    -webkit-box-flex: 0;
        -ms-flex: 0 1 15.375rem;
            flex: 0 1 15.375rem;
    width: 100%;
    max-width: 15.375rem;
    height: 15.5rem;
    padding-top: 1rem;
  }
}

/* 画像エリア */
.top-medical__list .medical-item__image {
  width: 10.25rem;
  height: 10.25rem;
  aspect-ratio: 164/164;
  margin-bottom: 0.625rem;
  margin-inline: auto;
}

.top-medical__list .medical-item__image img {
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
}

/* ボタンエリア */
.top-medical__btn-area {
  text-align: center;
  margin-top: 2.5rem;
  position: relative;
  z-index: 3;
}
@media screen and (min-width: 768px) {
  .top-medical__btn-area {
    margin-top: 5rem;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
  }
}

.top-column {
  position: relative;
}

/* 背景エリアのラッパー */
.top-column__bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
}

/* 背景装飾（右上のロゴ画像） */
.top-column__deco {
  position: absolute;
  z-index: 1;
  opacity: 0.3;
}

@media screen and (min-width: 768px) {
  .top-column__deco {
    width: 21rem;
    top: -5.625rem;
    right: 5rem;
  }
}
.top-column__deco img {
  width: 100%;
  height: auto;
  display: block;
}

.top-column__inner {
  position: relative;
  z-index: 1;
  width: 100%;
  margin-inline: auto;
  padding-inline: 15px; /* 15px */
}

@media screen and (min-width: 768px) {
  .top-column__inner {
    max-width: 68.125rem;
    padding-inline: 25px; /* 25px */
  }
}
.top-column__body {
  max-width: 37.5rem;
  margin-inline: auto;
}

@media screen and (min-width: 768px) {
  .top-column__body {
    max-width: none;
  }
}
/* ==========================================================================
   Grid & Subgrid 実装（カンプのデザイン順に修正）
   ========================================================================== */
.top-column__list {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 1fr;
  grid-template-columns: 1fr; /* SPは1列 */
  /* 1アイテムにつき5行（画像, 日付, タイトル, カテゴリ, ボタン） */
  -ms-grid-rows: auto 2.5rem auto 2.5rem auto 2.5rem auto 2.5rem auto 2.5rem auto 2.5rem auto 2.5rem auto 2.5rem auto 2.5rem auto 2.5rem auto 2.5rem auto 2.5rem auto 2.5rem auto 2.5rem auto;
  grid-template-rows: repeat(3, auto auto auto auto auto);
  row-gap: 2.5rem;
  width: 100%;
  margin-top: 2.5rem;
  margin-inline: auto;
  padding: 0;
  list-style: none;
}
.top-column__list > *:nth-child(1) {
  -ms-grid-row: 1;
  -ms-grid-column: 1;
}
.top-column__list > *:nth-child(2) {
  -ms-grid-row: 3;
  -ms-grid-column: 1;
}
.top-column__list > *:nth-child(3) {
  -ms-grid-row: 5;
  -ms-grid-column: 1;
}

@media screen and (min-width: 768px) {
  .top-column__list {
    -ms-grid-columns: 1fr 4.375rem 1fr 4.375rem 1fr;
    grid-template-columns: repeat(3, 1fr); /* PCは3列 */
    /* 各カードで縦方向の5行を完全に同期させる */
    -ms-grid-rows: auto 0 auto 0 auto 0 auto 0 auto;
    grid-template-rows: auto auto auto auto auto;
    -webkit-column-gap: 4.375rem;
       -moz-column-gap: 4.375rem;
            column-gap: 4.375rem;
    row-gap: 0;
    margin-top: 2.375rem;
  }
  .top-column__list > *:nth-child(1) {
    -ms-grid-row: 1;
    -ms-grid-column: 1;
  }
  .top-column__list > *:nth-child(2) {
    -ms-grid-row: 1;
    -ms-grid-column: 3;
  }
  .top-column__list > *:nth-child(3) {
    -ms-grid-row: 1;
    -ms-grid-column: 5;
  }
  .top-column__list > *:nth-child(4) {
    -ms-grid-row: 3;
    -ms-grid-column: 1;
  }
  .top-column__list > *:nth-child(5) {
    -ms-grid-row: 3;
    -ms-grid-column: 3;
  }
  .top-column__list > *:nth-child(6) {
    -ms-grid-row: 3;
    -ms-grid-column: 5;
  }
  .top-column__list > *:nth-child(7) {
    -ms-grid-row: 5;
    -ms-grid-column: 1;
  }
  .top-column__list > *:nth-child(8) {
    -ms-grid-row: 5;
    -ms-grid-column: 3;
  }
  .top-column__list > *:nth-child(9) {
    -ms-grid-row: 5;
    -ms-grid-column: 5;
  }
  .top-column__list > *:nth-child(10) {
    -ms-grid-row: 7;
    -ms-grid-column: 1;
  }
  .top-column__list > *:nth-child(11) {
    -ms-grid-row: 7;
    -ms-grid-column: 3;
  }
  .top-column__list > *:nth-child(12) {
    -ms-grid-row: 7;
    -ms-grid-column: 5;
  }
  .top-column__list > *:nth-child(13) {
    -ms-grid-row: 9;
    -ms-grid-column: 1;
  }
  .top-column__list > *:nth-child(14) {
    -ms-grid-row: 9;
    -ms-grid-column: 3;
  }
  .top-column__list > *:nth-child(15) {
    -ms-grid-row: 9;
    -ms-grid-column: 5;
  }
}
.top-column__item {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: subgrid;
  grid-template-columns: subgrid;
  -ms-grid-row-span: 5;
  grid-row: span 5; /* 5行分の高さを占有 */
  row-gap: 0;
}

@media screen and (min-width: 768px) {
  .top-column__item {
    -ms-grid-column-span: 1;
    grid-column: span 1;
    -ms-grid-row-span: 5;
    grid-row: span 5;
  }
}
/* --- 各パーツの配置指定（grid-rowで順番を制御） --- */
.top-column__image {
  -ms-grid-row: 1;
  grid-row: 1; /* 1行目: 画像 */
  width: 100%;
  border-radius: 0.3125rem;
  overflow: hidden;
}

.top-column__image img {
  width: 100%;
  aspect-ratio: 300/200;
  -o-object-fit: cover;
     object-fit: cover;
  vertical-align: top;
}

.top-column__date {
  -ms-grid-row: 2;
  grid-row: 2; /* 2行目: 日付 */
  margin-top: 0.9375rem;
  font-size: 0.875rem;
}

.top-column__title {
  -ms-grid-row: 3;
  grid-row: 3; /* 3行目: タイトル（日付の下に配置） */
  font-weight: bold;
  font-size: 1rem;
  line-height: 1.5;
  margin-top: 0.625rem;
}

.top-column__categories {
  -ms-grid-row: 4;
  grid-row: 4; /* 4行目: カテゴリ */
  margin-top: 0.75rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  gap: 0.5rem;
}

.btn.top-column__button {
  -ms-grid-row: 5;
  grid-row: 5; /* 5行目: ボタン */
  margin-top: 1.25rem;
  -ms-grid-column-align: start;
      justify-self: start;
}

.top-column__btn-wrapper {
  text-align: center;
  margin-top: 3.125rem;
}

@media screen and (min-width: 768px) {
  .top-column__btn-wrapper {
    margin-top: 5.625rem;
    margin-left: 0;
  }
}

.footer {
  position: relative;
  background-color: #E1B33F;
  color: #fff;
  z-index: 10;
  padding-top: 12rem;
}
@media screen and (min-width: 768px) {
  .footer {
    padding-top: 9.375rem;
  }
}

.footer__inner {
  position: relative;
  z-index: 2;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
@media screen and (min-width: 768px) {
  .footer__inner {
    max-width: 65rem;
  }
}

.footer__container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  width: 100%;
}
@media screen and (min-width: 768px) {
  .footer__container {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: reverse;
        -ms-flex-direction: row-reverse;
            flex-direction: row-reverse;
    gap: 12rem;
  }
}

.footer__inner::before {
  content: "";
  position: absolute;
  top: -18rem;
  left: -4.375rem;
  width: 150%;
  height: 18rem;
  background-image: url("../images/teeth.svg");
  background-repeat: no-repeat;
  background-size: contain;
  background-position: left center;
  z-index: -1; /* コンテンツの背後に配置 */
  pointer-events: none;
}
@media screen and (min-width: 768px) {
  .footer__inner::before {
    top: -18rem;
    left: -16.25rem;
    width: 50rem;
    height: 31.25rem;
  }
}

.footer__inner::after {
  content: "";
  position: absolute;
  top: -13.5rem;
  left: 0.9375rem;
  width: 6.1875rem;
  height: 5.6875rem;
  background-image: url("../images/common/logo-pc.svg");
  background-repeat: no-repeat;
  background-size: contain;
  background-position: left center;
  z-index: -1; /* コンテンツの背後に配置 */
  pointer-events: none;
}
@media screen and (min-width: 768px) {
  .footer__inner::after {
    top: -8rem;
  }
}

.footer__btn-contact,
.footer__copyright {
  margin-top: 2.5rem;
  font-size: 0.75rem;
}
@media screen and (min-width: 768px) {
  .footer__btn-contact,
  .footer__copyright {
    margin-top: 5rem;
  }
}

.footer__info {
  margin-top: 2.5rem;
}
.footer__info-list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 0.3125rem;
  width: 100%;
  margin-top: 0.3125rem;
  font-size: 0.875rem;
  font-weight: 400;
  line-height: normal;
}

.footer__info-list a {
  color: inherit; /* 親要素の色（$white）を継承 */
  text-decoration: none; /* 下線を消す */
}
@media screen and (min-width: 768px) {
  .footer-tel {
    pointer-events: none;
  }
}
.footer__title {
  font-family: "Lato", sans-serif;
  font-weight: 700;
  font-size: 1.5rem;
}

/* 診療時間カード（白枠） */
.footer__time-box {
  background-color: #fff;
  color: #E1B33F;
  border-radius: 0.625rem;
  width: 100%;
  min-height: 13rem;
  padding: 1.5rem 1.375rem;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}
@media screen and (min-width: 768px) {
  .footer__time-box {
    width: 32.5rem;
    height: 15.625rem;
    padding: 2.1875rem 3.375rem 2.8125rem 2.5rem;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    margin: 0;
  }
}

/* 各行をGridで制御 */
.footer__row {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 3rem 1rem 1fr 1rem 1fr 1rem 1fr 1rem 1fr 1rem 1fr 1rem 1fr 1rem 1fr 1rem 1fr;
  grid-template-columns: 3rem repeat(8, 1fr);
  -webkit-column-gap: 1rem;
     -moz-column-gap: 1rem;
          column-gap: 1rem;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  border-bottom: 1px solid #E1B33F;
  padding-block: 0.5rem 0.5rem;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: start;
  align-items: center;
  font-size: 0.75rem;
  font-weight: 700;
  line-height: normal;
}
.footer__row dt {
  text-align: left;
  white-space: nowrap;
}
.footer__row dd {
  margin: 0;
  text-align: center;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  white-space: nowrap;
  min-width: 0;
}
@media screen and (min-width: 768px) {
  .footer__row {
    -ms-grid-columns: 5rem 1.1875rem 1fr 1.1875rem 1fr 1.1875rem 1fr 1.1875rem 1fr 1.1875rem 1fr 1.1875rem 1fr 1.1875rem 1fr 1.1875rem 3rem;
    grid-template-columns: 5rem repeat(7, 1fr) 3rem;
    -webkit-column-gap: 1.1875rem;
       -moz-column-gap: 1.1875rem;
            column-gap: 1.1875rem;
    font-size: 0.875rem;
  }
  .footer__row dt br {
    display: none;
  }
  .footer__row dt {
    margin-right: -0.5625rem;
    padding-left: 0.5rem;
    white-space: nowrap;
  }
  .footer__row dd {
    /* すべての列（最後も含む）を中央揃えにすることで縦のラインが揃う */
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
  }
}

/* ヘッダー行 (営業時間 / 月〜日) */
.footer__row--head {
  border-bottom: 1px solid #E1B33F;
  padding-bottom: 0.5rem;
}
@media screen and (min-width: 768px) {
  .footer__row--head {
    height: auto;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
  }
}
.footer__row--head dd:last-child {
  overflow: visible;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}
.footer__row--head dt, .footer__row--head dd {
  font-size: 0.75rem;
}
@media screen and (min-width: 768px) {
  .footer__row--head dt, .footer__row--head dd {
    font-size: 0.875rem;
  }
}

/* ボディ行 (9:00- / 14:30-) */
@media screen and (min-width: 768px) {
  .footer__row:not(.footer__row--head) {
    padding-block: 1rem 0.5rem;
  }
}
.footer__row:not(.footer__row--head) dt {
  font-size: 0.75rem;
  font-weight: 700;
}

.symbol-dash {
  display: inline-block;
  -webkit-transform: scaleX(1.5);
          transform: scaleX(1.5); /* 横に少し伸ばしたい場合 */
}

/* 注意書き */
.footer__note {
  font-size: 0.875rem;
  font-weight: normal;
  margin-top: 0.9375rem;
  padding-left: 0.125rem;
}
@media screen and (min-width: 768px) {
  .footer__note {
    margin-top: auto;
    padding-left: 0.5rem;
  }
}

/* ========================
   共通 / PCのスタイル（ベース）
======================== */
.footer__pagetop {
  position: fixed;
  right: 1.25rem;
  bottom: 1.25rem;
  width: 3rem;
  height: 3rem;
  z-index: 100;
  opacity: 0;
  visibility: hidden;
  /* 【超重要】transitionにbottomを含めない（カクつき防止） */
  -webkit-transition: opacity 0.3s ease, visibility 0.3s ease;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}
@media screen and (min-width: 768px) {
  .footer__pagetop {
    right: 7.5rem;
    bottom: 3rem;
  }
}

/* 表示用クラス */
.footer__pagetop.is-show {
  opacity: 1;
  visibility: visible;
}

/* フッター到達時のストップ用クラス */
.footer__pagetop.is-stop {
  position: absolute;
  bottom: 11rem; /* PC時の止まる位置（カンプに合わせて調整） */
}
@media screen and (min-width: 768px) {
  .footer__pagetop.is-stop {
    bottom: 3rem; /* カンプ指示の止まる位置！ */
  }
}

.footer__pagetop img {
  width: 100%;
  height: auto;
  vertical-align: bottom;
}


.footer__btn-contact {
  display: block;
  margin-top: 1.5rem;
}
@media screen and (min-width: 768px) {
  .footer__btn-contact {
    display: none;
  }
}

.footer__copyright {
  margin-top: 2.5rem;
  margin-bottom: 3rem;
}

.top-gallery {
  width: 100%;
  margin-top: 1.5rem;
}
@media screen and (min-width: 768px) {
  .top-gallery {
    margin-top: 4.5rem;
  }
}

/* ========================================================
   iPhone対策：親要素（li）にスマホ・PCそれぞれのサイズを明示する
   ======================================================== */
.top-gallery__item {
  /* スマホサイズ（デザイン通りのサイズを固定） */
  width: 174px; /* Splideのインライン指定と競合を避ける */
  height: 116px;
  overflow: hidden;
}

@media screen and (min-width: 768px) {
  .top-gallery__item {
    /* PCサイズ */
    width: 420px;
    height: 280px;
  }
}

/* 中の画像は親の枠（174x116 や 420x280）いっぱいに綺麗に収めるだけ */
.top-gallery__item img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  display: block;
}

.top-gallery.splide {
  width: 100%;
  height: auto;
  padding: 0;
}

.top-cta {
  background-color: #fff;
  -webkit-box-shadow: 4px 4px 8px 0 rgba(236, 201, 107, 0.3);
          box-shadow: 4px 4px 8px 0 rgba(236, 201, 107, 0.3);
  border-radius: 0.75rem;
  text-align: center;
  margin-inline: auto;
  width: 100%;
  max-width: 21.5625rem;
  height: auto;
  padding: 0.9375rem 1.75rem 0.625rem;
}
@media screen and (min-width: 768px) {
  .top-cta {
    max-width: 51.25rem;
    margin-inline: auto;
    padding: 0.75rem 1.5rem 0.5625rem 0.75rem;
  }
}

.top-cta__inner {
  padding: 0;
}
@media screen and (min-width: 768px) {
  .top-cta__inner {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    gap: 1.5rem;
  }
}

.top-cta__image {
  display: none;
}
@media screen and (min-width: 768px) {
  .top-cta__image {
    display: block;
    width: 100%;
    max-width: 18.75rem;
  }
}

@media screen and (min-width: 768px) {
  .top-cta__image img {
    width: 100%;
    -o-object-fit: cover;
       object-fit: cover;
    border-radius: 0.75rem;
    aspect-ratio: 300/136;
  }
}

@media screen and (min-width: 768px) {
  .top-cta__body {
    -webkit-box-flex: 1;
        -ms-flex: 1;
            flex: 1;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
  }
}

.top-cta__text {
  font-size: 1rem;
  font-family: "Noto Sans JP";
  font-weight: 700;
  line-height: 1.3333333333;
  color: #363636;
}
@media screen and (min-width: 768px) {
  .top-cta__text {
    font-size: 1.5rem;
    margin-left: -1.5625rem;
  }
}

.top-cta__tel-block {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  gap: 0.25rem;
  margin-top: 0.625rem;
}
@media screen and (min-width: 768px) {
  .top-cta__tel-block {
    -webkit-box-pack: start;
        -ms-flex-pack: start;
            justify-content: flex-start;
    gap: 1rem;
    margin-top: 0;
  }
}

.icon-tel {
  width: 1.75rem;
  height: 1.75rem;
}
@media screen and (min-width: 768px) {
  .icon-tel {
    width: 2.5rem;
    height: 2.5rem;
  }
}

.top-cta__tel {
  font-family: "Lato", sans-serif;
  font-size: 1.5rem;
  font-weight: 400;
  color: #363636;
  text-decoration: none;
  
}
@media screen and (min-width: 768px) {
  .top-cta__tel {
    font-size: 2.5rem;
    pointer-events: none;
  }
}

@media screen and (min-width: 768px) {
  .top-cta__btn {
    margin-top: 0.625rem;
    margin-right: 2.8125rem;
  }
}

.section-greeting {
  background-color: #fff;
  border-radius: 15px 15px 0 0;
}
@media screen and (min-width: 768px) {
  .section-greeting {
    margin-top: 25rem;
    padding-block: 11.5625rem 5rem;
    border-radius: 60px 60px 0 0;
    margin-top: 0;
  }
}

.btn-white {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  height: 0.875rem;
  padding: 0.0625rem 0.5rem;
  width: auto;
  text-decoration: none;
  font-size: 0.625rem;
  font-weight: 400;
  font-family: "Noto Sans JP", sans-serif;
  line-height: normal;
  /* 色と線の設定 */
  color: #E1B33F;
  background: #fff;
  border-radius: 1.25rem;
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
  border: 1px solid #E1B33F;
  text-decoration: none;
}
@media screen and (min-width: 768px) {
  .btn-white {
    height: 1.4375rem;
    font-size: 0.875rem;
    padding: 0.1875rem 1.5rem;
    border-radius: 2.5rem;
  }
}

.btn-white:hover {
  background: #E1B33F;
  color: #fff;
}

.btn-contact-tel {
  position: relative;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  gap: 0.5rem;
  padding: 0.875rem 2.5rem;
  margin-inline: auto;
  width: auto;
  text-decoration: none;
  font-size: 1rem;
  font-weight: 700;
  font-family: "Lato", sans-serif;
  line-height: normal;
  /* 色と線の設定 */
  color: #fff;
  background: #F08873;
  border: 1px solid #F08873;
  border-radius: 2.5rem;
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
  grid-area: btn;
    -webkit-box-shadow: 0.25rem 0.25rem 0.625rem 0 rgba(0, 0, 0, 0.13);
          box-shadow: 0.25rem 0.25rem 0.625rem 0 rgba(0, 0, 0, 0.13);
}
@media screen and (min-width: 768px) {
  .btn-contact-tel {
    display: none;
    pointer-events: none; /* クリックを無効化 */
    cursor: default;      /* ポインター（手のひらマーク）を出さない */
  }
}

.btn-contact-tel::after {
  content: "";
  display: block;
  width: 1rem;
  height: 1rem;
  background-image: url(../images/btn-red.svg);
  background-size: contain;
  background-repeat: no-repeat;
  -webkit-transition: -webkit-filter 0.3s ease;
  transition: -webkit-filter 0.3s ease;
  transition: filter 0.3s ease;
  transition: filter 0.3s ease, -webkit-filter 0.3s ease;
}

.btn-contact-tel:hover {
  background: #fff;
  color: #F08873;
}

/* 追加: ホバー時のアイコンスタイル */
.btn-contact-tel:hover::after {
  background-image: url(../images/btn-red2.svg);
}

.btn-contact {
  position: relative;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  gap: 0.5rem;
  padding: 0.5rem 1.5rem;
  width: auto;
  text-decoration: none;
  font-size: 1rem;
  font-weight: bold;
  color: #fff;
  font-family: "Noto Sans JP", sans-serif;
  background: #E1B33F;
  border-radius: 2.5rem;
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
  border: 1px solid #E1B33F;
}

/* 左側のアイコン (メール) */
.btn-contact::before {
  content: "";
  display: block;
  width: 1.3125rem;
  height: 1.125rem;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  /* background-image の代わりに mask を使用 */
  -webkit-mask-image: url(../images/btn-mail.svg);
  mask-image: url(../images/btn-mail.svg);
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  /* 初期のアイコンの色を白に設定 */
  background-color: #fff;
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
}

/* 右側のアイコン (〇) */
.btn-contact::after {
  content: "";
  display: block;
  width: 1rem;
  height: 1rem;
  border-radius: 50%;
  background-color: #E1B33F;
  background-image: url(../images/btn-maru.svg);
  background-size: 1rem;
  background-repeat: no-repeat;
  background-position: center;
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
}

/* --- ホバー時のスタイル --- */
.btn-contact:hover {
  background: #fff;
  color: #E1B33F;
}

.btn-contact:hover::after {
  background-image: url(../images/btn-icon1.svg);
}

/* ホバー時に左側アイコンの色を黄色に変更 */
.btn-contact:hover::before {
  background-color: #E1B33F;
}

.section-top-cta {
  margin-top: 2.5rem;
}
@media screen and (min-width: 768px) {
  .section-top-cta {
    margin-top: 7.5rem;
  }
}

.section-footer {
  margin-top: 7.875rem;
}
@media screen and (min-width: 768px) {
  .section-footer {
    margin-top: 8.75rem;
  }
}

.section-top-medical {
  position: relative;
  width: 100%;
  overflow: hidden; /* はみ出した装飾文字を隠す */
  padding-block: 3.125rem 2rem;
}
@media screen and (min-width: 768px) {
  .section-top-medical {
    padding: 8.0625rem 0 7.5rem;
  }
}

.section-top-column {
  margin-top: 4rem;
}
@media screen and (min-width: 768px) {
  .section-top-column {
    margin-top: 1rem;
  }
}

.medical-item {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  width: 10.125rem;
  min-height: 9.875rem;
  height: auto;
  padding-top: 0.5rem;
  background-color: #fff;
  border-radius: 0.625rem;
  -webkit-box-shadow: 0 0.625rem 1.25rem rgba(0, 0, 0, 0.05);
          box-shadow: 0 0.625rem 1.25rem rgba(0, 0, 0, 0.05);
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  width: 100%;
  margin-inline: auto;
}
@media screen and (min-width: 768px) {
  .medical-item {
    max-width: 15.25rem;
    height: 15.5rem;
    padding-top: 1rem;
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
  }
}

.medical-item a {
  /* display: block; から以下の3行に変更 */
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;

  width: 100%;
  height: 100%; /* 親要素(.medical-item)の高さいっぱいにクリック範囲を広げる */
  
  text-decoration: none; /* 下線を消す */
  color: inherit; /* 文字色を親要素から引き継ぐ */
  
  /* ホバー時の動きを滑らかに */
  -webkit-transition: opacity 0.3s, -webkit-transform 0.3s;
  transition: opacity 0.3s, -webkit-transform 0.3s;
  transition: opacity 0.3s, transform 0.3s;
  transition: opacity 0.3s, transform 0.3s, -webkit-transform 0.3s; 
}
/* ホバーした時の演出（少し薄くして浮かせるとクリック感がでます） */
.medical-item a:hover {
  opacity: 0.8;
  -webkit-transform: translateY(-5px);
          transform: translateY(-5px);
}

.medical-item__image {
  width: 65%;
  height: auto;
  aspect-ratio: 1/1;
  min-width: 6.5rem;
  max-width: 10rem;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  margin-inline: auto;
  margin-bottom: 0.375rem;
}
@media screen and (min-width: 768px) {
  .medical-item__image {
    width: 10.25rem;
    height: 10.25rem;
    margin-bottom: 0.8125rem;
    max-width: none;
  }
}

.medical-item__image img {
  /* サイズ固定を解除し、元の画像サイズを使用 */
  width: 80%;
  height: 80%;
  -o-object-fit: contain;
     object-fit: contain;
}

.medical-item__image.is-cavity {
  padding: 0.9375rem;
}

.medical-item__label {
  display: inline-block;
  background-color: #E1B33F;
  color: #fff;
  font-size: 1rem;
  font-weight: bold;
  padding: 0.25rem 0.75rem;
  border-radius: 0.25rem;
  white-space: nowrap;
  margin-top: auto;
  margin-bottom: 0.5rem;
}
@media screen and (min-width: 768px) {
  .medical-item__label {
    margin-bottom: 1.375rem;
  }
}

.medical-item__label.is-whitening,
.medical-item__label.is-child {
  font-size: 0.875rem;
}
@media screen and (min-width: 768px) {
  .medical-item__label.is-whitening,
  .medical-item__label.is-child {
    font-size: 1rem;
  }
}

/*パンくずリスト*/
.pankuzu {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  margin-top: 0.625rem;
}

.pankuzu span {
  font-family: "Noto Sans JP", sans-serif;
  position: relative;
  color: #A5A5A5;
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.7142857143;
}
@media screen and (min-width: 768px) {
  .pankuzu span {
    font-size: 1rem;
  }
}

.pankuzu__item:not(:last-child) {
  margin-right: 1.25rem;
}
@media screen and (min-width: 768px) {
  .pankuzu__item:not(:last-child) {
    margin-right: 1.375rem;
  }
}

.pankuzu__item::before {
  content: "";
  display: inline-block;
  position: absolute;
  background-image: url(../images/common/icon-arrow.svg);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  top: 50%;
  right: -0.9375rem;
  translate: 0 -50%;
  width: 0.5625rem;
  height: 0.9375rem;
}
@media screen and (min-width: 768px) {
  .pankuzu__item:not(:last-child) span::after {
    right: -0.75rem;
  }
}

.pankuzu .current-item,
.pankuzu .current-item span {
  color: #363636;
  pointer-events: none; /* 💡クリック反応を無効化 */
  cursor: default;       /* 💡マウスカーソルを通常の矢印にする */
}

/* 最後の項目に矢印が表示されないように設定（もし必要であれば） */
.pankuzu__item:last-child span::after {
  display: none;
}

/* 「送信」の文字色を個別に指定 */
/* 送信ページでは breadcrumb_confirm クラスが使われているため、これを優先させます */
.pankuzu .breadcrumb_confirm span {
  color: #363636;
}
.logo {
  width: 4.375rem;
}
@media screen and (min-width: 768px) {
  .logo {
    width: 7.5rem;
  }
}

.logo__header {
  position: relative;
  display: block;
}

.logo__header:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  background-image: url(../images/common/logo-white_sp.svg);
  background-size: contain;
  background-repeat: no-repeat;
  width: 100%;
  height: 100%;
  z-index: -1;
}

body.js-fixed .logo__header:before {
  z-index: 1;
}

.is-open-sp {
  -webkit-transform: translateX(0);
          transform: translateX(0);
  visibility: visible;
}

.about-page__first {
  overflow: hidden;
  font-family: "Noto Sans JP", sans-serif;
  padding-block: 3.125rem 3.75rem;
}
@media screen and (min-width: 768px) {
  .about-page__first {
    margin-top: 1.875rem;
    padding-block: 4.375rem 6.875rem;
  }
}

.about-page__first-inner {
  position: relative;
  padding-top: 2.5rem;
}
@media screen and (min-width: 768px) {
  .about-page__first-inner {
    max-width: 68.125rem;
    padding-top: 3.125rem;
  }
}

.about-page__first-container {
  width: 100%;
  margin-inline: auto;
  margin-top: 1.5625rem;
}
@media screen and (min-width: 768px) {
  .about-page__first-container {
    max-width: 65rem;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: flex-start;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    gap: 3rem;
    padding-inline: 0;
    margin-top: 0;
  }
}

/* 2. 歯のシルエット（左側：::before） */
.about-page__first-inner::before {
  content: "";
  position: absolute;
  z-index: -2;
  background-image: url(../images/about/dental-icon.svg);
  background-repeat: no-repeat;
  background-size: contain;
  pointer-events: none;
  top: 0;
  left: 20%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  width: 80%;
  height: 90%;
}
@media screen and (min-width: 768px) {
  .about-page__first-inner::before {
    top: -4.375rem;
    left: -0.625rem;
    width: 43.75rem;
    height: 48.125rem;
  }
}

/* 3. テキスト画像（右側：::after） */
.about-page__first-inner::after {
  content: "";
  position: absolute;
  z-index: -2;
  background-image: url(../images/iro-dental-clinic..svg);
  background-repeat: no-repeat;
  background-size: contain;
  pointer-events: none;
  top: -1.25rem;
  left: 0;
  width: 100%;
  height: 100%;
}
@media screen and (min-width: 768px) {
  .about-page__first-inner::after {
    top: -0.625rem;
    left: 18.125rem;
    max-width: 61.125rem;
  }
}

.about-page__first-content {
  width: 100%;
}
@media screen and (min-width: 768px) {
  .about-page__first-content {
    width: 25rem;
    -ms-flex-negative: 0;
        flex-shrink: 0;
  }
}

.about-page__first-catchphrase {
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.3333333333;
  margin-top: 0.9375rem;
}
@media screen and (min-width: 768px) {
  .about-page__first-catchphrase {
    margin-top: 2.1875rem;
    margin-bottom: 2.5rem;
  }
}

.about-page__first-text {
  display: -ms-grid;
  display: grid;
  gap: 1.25rem;
  font-size: 1rem;
  font-weight: 400;
  line-height: normal;
  margin-top: 1.25rem;
}
@media screen and (min-width: 768px) {
  .about-page__first-text {
    gap: 1.375rem;
    line-height: 1.5;
  }
}

.about-page__first-image-container {
  width: 100%;
  margin-top: 2.5rem;
}
@media screen and (min-width: 768px) {
  .about-page__first-image-container {
    width: 36.25rem;
    margin-top: 9.375rem;
  }
}
.about-page__first-image-container .about-page__first-image-wrapper {
  display: block;
  width: 100%;
  aspect-ratio: 345/230;
}
@media screen and (min-width: 768px) {
  .about-page__first-image-container .about-page__first-image-wrapper {
    aspect-ratio: 580/400;
  }
}
.about-page__first-image-container .about-page__first-image {
  width: 100%;
  height: 100%;
  border-radius: 1.25rem;
  display: block;
  -o-object-fit: cover;
     object-fit: cover;
}

.about-page__second {
  position: relative;
  margin-top: 1.875rem;
}
@media screen and (min-width: 768px) {
  .about-page__second {
    margin-top: 1.5625rem;
  }
}

.about-page__second-inner {
  padding-inline: 1.875rem;
}

.about-page__second-title {
  text-align: center;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content; /* 横幅を文字数に合わせる */
  margin-left: auto; /* 左右マージンautoで要素自体を中央寄せ */
  margin-right: auto;
}

.about-page__three {
  margin-top: 1.25rem;
  padding-top: 3.75rem;
}
@media screen and (min-width: 768px) {
  .about-page__three {
    margin-top: 0.9375rem;
    padding-top: 6.25rem;
  }
}

/*下層ページトップ画像*/
.under-page__top {
  width: 100%;
  margin-top: 5.625rem;
}
@media screen and (min-width: 768px) {
  .under-page__top {
    margin-top: 9.625rem;
  }
}

.under-page__image {
  display: block; /* pictureはデフォルトがインライン要素なのでブロック化 */
  width: 100%;
  aspect-ratio: 360/452; /* SP時の比率 */
}
@media screen and (min-width: 768px) {
  .under-page__image {
    aspect-ratio: 1320/514; /* PC時の比率 */
    height: 32.125rem;
  }
}

.under-page__image img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: 0 0 0 20px;
  vertical-align: bottom;
}

.under-page__inner {
  position: relative;
  width: 100%;
  
  padding-left: 0.9375rem;
  padding-right: 0;
}
@media screen and (min-width: 768px) {
  .under-page__inner {
    margin-left: auto;
    padding-inline: 0;
    width: calc(50vw + 37.5rem);
    max-width: calc(100% - 2.5rem);
  }
}

.under-page__title {
  position: absolute;
  top: 43%;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  display: inline-block;
  text-align: center;
  z-index: 1;
  color: #E1B33F;
  font-family: "Lato", sans-serif;
  font-size: 2rem;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
}
@media screen and (min-width: 768px) {
  .under-page__title {
    font-size: 3rem;
    left: 32rem;
    top: 47%;
    -webkit-transform: translateY(-50%);
            transform: translateY(-50%);
    -webkit-transform: none;
            transform: none;
  }
}

/*下層ページパンくず*/
.under-page__pankuzu {
  color: #fff;
  margin-top: 0.5rem;
}
@media screen and (min-width: 768px) {
  .under-page__pankuzu {
    margin-top: 0.625rem;
    padding-left: 3.125rem;
  }
}



.policy {
  width: 100%;
  margin-inline: auto;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 2.5rem;
  margin-top: 2.5rem;
}
@media screen and (min-width: 768px) {
  .policy {
    max-width: 65rem;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    -webkit-box-align: stretch;
        -ms-flex-align: stretch;
            align-items: stretch;
    gap: 3rem;
  }
}

@media screen and (min-width: 768px) {
  .policy__item {
    -webkit-box-flex: 1;
        -ms-flex: 1;
            flex: 1;
  }
}

.policy__box {
  background-color: #fff;
  border-radius: 0.625rem;
  padding: 2.25rem 3.875rem;
  text-align: center;
  -webkit-box-shadow: 4px 4px 8px 0 rgba(236, 201, 107, 0.3);
          box-shadow: 4px 4px 8px 0 rgba(236, 201, 107, 0.3);
}
@media screen and (min-width: 768px) {
  .policy__box {
    padding: 2.25rem 3.875rem;
  }
}

.policy__area {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 1.25rem;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  margin-inline: auto;
}

.policy__image {
  width: 100%;
  aspect-ratio: 1/1;
  border-radius: 50%;
  display: block;
  overflow: hidden;
}

.policy__image img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.policy__label {
  z-index: 1;
  background-color: #E1B33F;
  color: #fff;
  font-weight: bold;
  font-size: 1rem;
  white-space: nowrap;
  padding-block: 0.25rem;
  border-radius: 0.25rem;
  width: 10.125rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.policy__text {
  font-size: 1rem;
  line-height: normal;
  text-align: center;
  margin-top: 1.5rem;
}
@media screen and (min-width: 768px) {
  .policy__text {
    text-align: center;
  }
}

.access {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 2.5rem;
}
@media screen and (min-width: 768px) {
  .access {
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: 52.6875rem 0 1fr;
    grid-template-columns: 52.6875rem 1fr;
    gap: 0;
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: start;
    position: relative;
    max-width: 65rem;
    margin: 0 auto;
  }
}

.access__image-box {
  width: 100%;
  border-radius: 1.25rem;
  overflow: hidden;
  aspect-ratio: 344/239;
}
@media screen and (min-width: 768px) {
  .access__image-box {
    -ms-grid-column: 1;
    -ms-grid-column-span: 1;
    grid-column: 1/2;
    -ms-grid-row: 1;
    -ms-grid-row-span: 1;
    grid-row: 1/2;
    width: 52.6875rem;
    height: 22.25rem;
    z-index: 1;
  }
}

.access__image-box img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  vertical-align: bottom;
}

.access__map-box {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  aspect-ratio: 375/241;
  border-radius: 0;
  overflow: hidden;
}
@media screen and (min-width: 768px) {
  .access__map-box {
    -ms-grid-column: 1;
    -ms-grid-column-span: 2;
    grid-column: 1/3;
    -ms-grid-row: 1;
    -ms-grid-row-span: 2;
    grid-row: 1/3;
    -ms-grid-column-align: end;
        justify-self: end;
    width: 37.5rem;
    height: 24.125rem;
    margin-top: 9.1875rem;
    margin-left: 0;
    margin-right: 0;
    border-radius: 1.25rem;
    overflow: hidden;
    position: relative;
    z-index: 2;
  }
}
.access__map-box iframe {
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  border: none;
}

.access__text-body {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 0.5rem;
  height: 6.5625rem;
}
@media screen and (min-width: 768px) {
  .access__text-body {
    -ms-grid-column: 1;
    -ms-grid-column-span: 1;
    grid-column: 1/2;
    -ms-grid-row: 2;
    -ms-grid-row-span: 1;
    grid-row: 2/3;
    gap: 0.3125rem;
    margin-top: 0.625rem;
    max-width: 27.5rem;
    height: auto;
  }
}

.access__name {
  font-family: "Lato", sans-serif;
  font-size: 1.5rem;
  font-weight: bold;
  line-height: normal;
}

.access__address {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 0.25rem;
  font-size: 0.875rem;
  color: #363636;
  line-height: normal;
}
@media screen and (min-width: 768px) {
  .access__address {
    height: 4.25rem;
  }
}

.about-medical__container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 4.6875rem;
  width: 100%;
  margin-inline: auto;
  margin-top: 3rem;
}
@media screen and (min-width: 768px) {
  .about-medical__container {
    gap: 5.03125rem;
    max-width: 65rem;
    padding-inline: 0;
  }
}

.about-medical__item {
  width: 100%;
  scroll-margin-top: 7.5rem;
}
@media screen and (min-width: 768px) {
  .about-medical__item {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: flex-start;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    gap: 3rem;
  }
}

.about-medical__content {
  width: 100%;
}
@media screen and (min-width: 768px) {
  .about-medical__content {
    width: 25.75rem;
    -ms-flex-negative: 0;
        flex-shrink: 0;
  }
}

.about-medical__number {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 400;
  color: #dcb666;
  border: 1px solid #dcb666;
  border-radius: 3.125rem;
  padding: 0.0625rem 1.5rem;
}

.about-medical__title {
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.3333333333;
}
.about-medical__text-block {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 1.625rem;
  font-size: 1rem;
  line-height: 1.5;
  margin-top: 1.49rem;
}
@media screen and (min-width: 768px) {
  .about-medical__text-block {
    margin-top: 2.5rem;
  }
}

.about-medical__image-container {
  width: 100%;
  margin-top: 1.5625rem;
}
@media screen and (min-width: 768px) {
  .about-medical__image-container {
    width: 58%;
    margin-top: 0;
  }
}

.about-medical__image-wrapper {
  aspect-ratio: 345/230;
  border-radius: 10px;
  display: block;
  width: 100%;
}
@media screen and (min-width: 768px) {
  .about-medical__image-wrapper {
    aspect-ratio: 580/386;
  }
}

.about-medical__image-wrapper img {
  width: 100%;
  height: 100%;
  border-radius: 1.25rem;
  display: block;
  -o-object-fit: cover;
     object-fit: cover;
}

.medical-page__first {
  padding-top: 6.25rem;
  background-image: url(../images/iro-dental-clinic..svg);
  background-repeat: no-repeat;
  background-position: right top 3%;
  background-size: 23.125rem auto;
}
@media screen and (min-width: 768px) {
  .medical-page__first {
    padding-top: 3.75rem;
    margin-top: 5.625rem;
    background-position: right top;
    background-size: 61.125rem auto;
  }
}

@media screen and (min-width: 768px) {
  .medical-page__second {
    margin-top: 3.4375rem;
  }
}

.medical-page__list {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 1fr 1.125rem 1fr;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.125rem;
  padding-top: 1.75rem;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
@media screen and (min-width: 768px) {
  .medical-page__list {
    -ms-grid-columns: 1fr 1.1875rem 1fr 1.1875rem 1fr 1.1875rem 1fr;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.1875rem;
    width: 100%;
    margin-inline: 0;
    overflow: visible;
    padding-top: 2.1875rem;
    padding-bottom: 1.875rem;
  }
}


.medical-page__third {
  margin-top: 1.875rem;
}
@media screen and (min-width: 768px) {
  .medical-page__third {
    margin-top: 6.875rem;
  }
}

.news-item {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  background-color: #fff;
  border-radius: 0.3125rem;
  overflow: hidden;
  text-decoration: none;
  -webkit-transition: opacity 0.3s;
  transition: opacity 0.3s;
}

.news-item:hover {
  opacity: 0.7;
}

/* カードホバー時に、その中の画像を1.2倍に拡大 */
.news-item:hover .news-item__image img {
  -webkit-transform: scale(1.2);
          transform: scale(1.2);
}

/* 画像エリア */
.news-item__image {
  aspect-ratio: 320/208;
  width: 100%;
  margin: 0;
  overflow: hidden;
}
@media screen and (min-width: 768px) {
  .news-item__image {
    aspect-ratio: 284/185;
  }
}

.news-item__picture {
  display: block; /* 必須：隙間をなくし、サイズを有効にする */
  width: 100%;
  height: 100%;
}

.news-item__image img {
  width: 100%;
  height: 100%;
  vertical-align: bottom;
  -o-object-fit: cover;
     object-fit: cover;
  -webkit-transform: scale(1);
          transform: scale(1);
  -webkit-transition: -webkit-transform 0.6s cubic-bezier(0.25, 1, 0.5, 1);
  transition: -webkit-transform 0.6s cubic-bezier(0.25, 1, 0.5, 1);
  transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1);
  transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1), -webkit-transform 0.6s cubic-bezier(0.25, 1, 0.5, 1);
  will-change: transform;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
}

/* テキストエリア全体 */
.news-item__body {
  padding: 1rem 1rem 1.5rem;
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}
@media screen and (min-width: 768px) {
  .news-item__body {
    padding: 1rem 1rem 1.25rem;
  }
}

/* 日付・タグの横並びエリア */
.news-item__meta {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  gap: 0.5rem 0.75rem; /* 縦の隙間 / 横の隙間 */
}

.news-item__date {
  font-family: "Lato", sans-serif;
  font-size: 0.875rem;
  color: #363636;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
}

/* タグ共通スタイル */
/* タグをまとめるul */
.news-item__tags {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap; /* タグ同士が増えても改行する */
  gap: 0.25rem; /* タグ間の隙間 */
  padding: 0;
  margin: 0;
  list-style: none;
}

.news-item__tag {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  height: 0.75rem;
  font-size: 0.625rem;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  padding: 0.0625rem 0.5rem;
  border-radius: 1.25rem;
  white-space: nowrap;
}

/* 黄色いタグ (NEW) */
.news-item__tag.news-item__tag--new {
  font-family: "Lato", sans-serif;
  background-color: #E1B33F;
  color: #fff;
}

/* 枠線のタグ (お知らせ) */
.news-item__tag.news-item__tag--cat {
  background-color: #fff;
  color: #E1B33F;
  border: 1px solid #E1B33F;
}

/* タイトル */
.news-item__title {
  display: -webkit-box;                  /* 特殊な箱モデルを使う */
  -webkit-line-clamp: 2;                /* 表示する行数（ここを変えればOK） */
  -webkit-box-orient: vertical;         /* 縦方向に並べる */
  overflow: hidden;                     /* はみ出しカット */
  text-overflow: ellipsis;             /* 通常は無効だが、保険で書いてもOK */
  font-size: 1rem;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
  color: #363636;
  margin-top: 0.5rem;
}

/* 本文 */
.news-item__text {
  display: -webkit-box;                  /* 特殊な箱モデルを使う */
  -webkit-line-clamp: 2;                /* 表示する行数（ここを変えればOK） */
  -webkit-box-orient: vertical;         /* 縦方向に並べる */
  overflow: hidden;                     /* はみ出しカット */
  text-overflow: ellipsis;             /* 通常は無効だが、保険で書いてもOK */
  font-size: 0.875rem;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  color: #363636;
  margin: 0;
  margin-top: 0.5rem;
}

.info-page__first {
  padding-top: 6.25rem;
}
@media screen and (min-width: 768px) {
  .info-page__first {
    padding-top: 9.375rem;
  }
}

.info-page__columns {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 7.3125rem;
  margin-top: 3.25rem;
}
@media screen and (min-width: 768px) {
  .info-page__columns {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row; /* PCは横並び */
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: flex-start;
    gap: 0;
  }
}

/* メインコンテンツエリア */
.info-page__main {
  width: 100%;
}
@media screen and (min-width: 768px) {
  .info-page__main {
    width: 43.75rem;
    -ms-flex-negative: 0;
        flex-shrink: 0; /* 幅を維持 */
    min-width: 0; /* 文字省略対策（念のため） */
  }
}

.info-page__main-image {
  width: 100%;
  display: block;
  overflow: hidden;
  aspect-ratio: 345/222;
}
@media screen and (min-width: 768px) {
  .info-page__main-image {
    aspect-ratio: 700/450;
  }
}

.info-page__main-image img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  vertical-align: bottom;
  border-radius: 0.3125rem;
}

.info-page__main h2 {
  margin-top: 2.875rem;
}

.info-page__main-body {
  display: block;
}
@media screen and (min-width: 768px) {
  .info-page__main-body {
    margin-top: 2.5rem;
  }
}

.info-page__main-body h3 {
  position: relative;
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.2;
  padding-left: 1rem;
  margin-top: 2.625rem;
}
@media screen and (min-width: 768px) {
  .info-page__main-body h3 {
    font-size: 1.5rem;
    line-height: 1;
    margin-top: 2.375rem;
  }
}

.info-page__main-body h3::before {
  content: "";
  display: inline-block;
  position: absolute;
  left: 0;
  width: 0.5rem; /* バーの太さ */
  height: 1.75rem; /* バーの高さ（文字の高さに合わせる） */
  background-color: #E1B33F; /* 画像に近い黄色（ゴールド） */
  border-radius: 10px;
}
@media screen and (min-width: 768px) {
  .info-page__main-body h3::before {
    width: 0.625rem;
    height: 2rem;
  }
}

.info-page__main-body h4 {
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1.3333333333;
  margin-top: 2.625rem;
}
@media screen and (min-width: 768px) {
  .info-page__main-body h4 {
    font-size: 1.25rem;
    line-height: 1.2;
    margin-top: 3rem;
  }
}

.info-page__main-body h4 + p {
  margin-top: 2.75rem;
}

.info-page__main-body p {
  font-size: 1rem;
  line-height: 1.5;
}
/* 2つ目以降の段落の上に余白を作る（これで「塊」ができる） */
.info-page__main-body p + p {
  margin-top: 1.875rem;
}

/* Shift + Enter で入れた改行も反映させるおまじない */
.info-page__main-body p {
  white-space: pre-wrap;
}

.info-page__main-body a {
  text-decoration: underline;
  color: #007bff
}

.info-page__main-body a:hover {
  opacity: 0.7;
  text-decoration: none;
}
.info-page__main-body ol {
  counter-reset: my-counter;
  margin-top: 2.5rem;
}
@media screen and (min-width: 768px) {
  .info-page__main-body ol {
    margin-top: 2.75rem;
  }
}

.info-page__main-body li {
  font-size: 1rem;
  font-style: normal;
  font-weight: 400;
  line-height: 1.5;
}

/* --- 各リスト項目(li)の設定 --- */
.info-page__main-body ol li {
  position: relative;
  padding-left: 1rem; /* 「1) 」が表示されるスペースを確保 */
  margin-top: 0.5rem;
  display: block; /* list-itemではなくblockにする */
}

/* --- 疑似要素で「1) 」を作成 --- */
.info-page__main-body ol li::before {
  /* カウンターを1ずつ増やす */
  counter-increment: my-counter;
  /* 数字の後に「)」を付けて表示 */
  content: counter(my-counter) ") ";
  /* 配置の調整 */
  position: absolute;
  left: 0;
  top: 0;
  /* フォントや色の指定（必要に応じて） */
  font-weight: 400;
  color: #333;
}

.info-page__main-meta {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.25rem;
}

.info-page__main-date {
  font-family: "Lato", sans-serif;
  font-size: 0.75rem;
  font-weight: 400;
  color: #E1B33F;
}
@media screen and (min-width: 768px) {
  .info-page__main-date {
    font-size: 0.875rem;
  }
}

/* サイドバーエリア */
.info-page__side {
  width: 100%;
}
@media screen and (min-width: 768px) {
  .info-page__side {
    width: 15rem;
    -ms-flex-negative: 0;
        flex-shrink: 0;
    position: sticky;
    top: 1.25rem;
    margin-left: 11.25rem;
  }
}


.column-page__section {
  padding-top: 7.5rem;
  background-image: url(../images/iro-dental-clinic..svg);
  background-repeat: no-repeat;
  background-position: right top 2%;
  background-size: 23.125rem auto;
}
@media screen and (min-width: 768px) {
  .column-page__section {
    padding-top: 3.9rem;
    margin-top: 5.625rem;
    background-position: right top;
    background-size: 61.125rem auto;
  }
}

/* --- フィルターボタン --- */
.column-page__filters {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  gap: 1rem 2rem;
  list-style: none;
  padding: 0;
  margin-top: 0.625rem;
}
.column-page__filters .btn-white {
  height: 1.4375rem;
  font-size: 0.875rem;
  padding: 0.1875rem 1.5rem;
  border-radius: 2.5rem;
}
@media screen and (min-width: 768px) {
  .column-page__filters {
    margin-top: 2.3125rem;
  }
}

/* --- 記事リスト --- */
.column-page__items {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 2.5rem;
  margin-top: 2.5rem;
}
@media screen and (min-width: 768px) {
  .column-page__items {
    gap: 3.375rem;
  }
}

/* リンク全体 */
.column-page__item {
  display: block;
  border-radius: 8px; /* 角丸（任意） */
  overflow: hidden; /* 画像の角丸対応 */
}
@media screen and (min-width: 768px) {
  .column-page__item {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    background-color: transparent; /* PCでは背景なしか、デザインに合わせて調整 */
  }
}

/* 画像ラッパー */
.column-page__img-wrapper {
  width: 100%;
  display: block;
}
@media screen and (min-width: 768px) {
  .column-page__img-wrapper {
    width: 33%; /* PCでの画像幅 */
    max-width: 21.5625rem;
    -ms-flex-negative: 0;
        flex-shrink: 0; /* 画像幅を固定 */
    margin-right: 2.5rem; /* テキストとの余白 */
  }
}
.column-page__img-wrapper img {
  border-radius: 5px;
  object-fit: cover;
  width: 100%;    /* 親要素いっぱいに広げる */
  height: auto;
  display: block; /* 隙間を消す */
}
/* テキストエリア */
.column-page__body {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}
@media screen and (min-width: 768px) {
  .column-page__body {
    padding: 0;
    -webkit-box-flex: 1;
        -ms-flex: 1;
            flex: 1; /* 残りの幅を使用 */
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
  }
}

/* 記事タイトル */
.column-page__head {
  font-size: 1.5rem;
  font-weight: 700;
  color: #E1B33F;
  line-height: normal;
  background-color: transparent;
  -webkit-writing-mode: horizontal-tb;
      -ms-writing-mode: lr-tb;
          writing-mode: horizontal-tb;
  margin-top: 1rem;
  white-space: normal;      /* nowrapから変更：自動折り返しを許可 */
  text-overflow: ellipsis;
}
@media screen and (min-width: 768px) {
  .column-page__head {
    color: #fff;
    background-color: #E1B33F;
    padding: 0.375rem 0 0.375rem 1rem;
    border-radius: 3px;
    margin-top: 0;
  }
}

/* メタ情報（日付・タグ） */
.column-page__meta {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.9375rem;
}
@media screen and (min-width: 768px) {
  .column-page__meta {
    gap: 1.5rem;
    margin-top: 0.625rem;
  }
}

.column-page__date {
  font-size: 0.875rem;
  font-family:lato, sans-serif;
  font-weight: 400;
  color: #363636;
}
/* タグをまとめるul */
.column-page__tags {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap; /* タグ同士も溢れたら改行 */
  gap: 0.25rem 0.5rem; /* タグ間の隙間 */
  list-style: none;
  padding: 0;
  margin: 0;
}
.column-page__tag {
  font-size: 0.75rem;
  border: 1px solid #E1B33F;
  border-radius: 12px;
  padding: 2px 10px;
  color: #E1B33F;
  background: #fff;
}

/* 本文テキスト */
.column-page__text {
  font-size: 1rem;
  line-height: 1.5;
  color: #363636;
  /* 3行以上は省略する記述（必要であれば） */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
  margin-top: 0.5rem;
}
/* PCサイズでの調整 */
@media screen and (min-width: 768px) {
  .column-page__text {
    /* --- PC版：2行に制限 --- */
    -webkit-line-clamp: 2; 
    
    /* PC版で本文の上の余白を調整したい場合はここに追加 */
    margin-top: rrem(12); 
  }
}

/* 一覧用の制限を、詳細ページ（column-detail__textがある時）だけ解除する */
.column-page__text.column-detail__text {
  display: block;             /* -webkit-box から通常のブロック要素に戻す */
  overflow: visible;          /* 隠れていたテキストを表示 */
  -webkit-line-clamp: unset;  /* 行数制限を解除 */
}

/* PCサイズ（768px以上）の時にかかっている2行制限も合わせて解除 */
@media screen and (min-width: 768px) {
  .column-page__text.column-detail__text {
    -webkit-line-clamp: unset;
  }
}
.column-page__btn {
  margin-top: 1.5rem;
}
@media screen and (min-width: 768px) {
  .column-page__btn {
    margin-top: 0;
  }
}
/* --- 記事リスト --- */
@media screen and (min-width: 768px) {
  .column-detail__inner {
    max-width: 43.75rem;
    padding-inline: 0;
  }
}
.column-detail__item {
  margin-top: 2.5rem;
}
@media screen and (min-width: 768px) {
  .column-detail__item {
    margin-top: 3.75rem;
  }
}
.column-detail__head {
  color: #fff;
  background-color: #E1B33F;
  padding: 0.375rem 0 0.3125rem 1rem;
}
@media screen and (min-width: 768px) {
  .column-detail__head {
    padding: 0.375rem 0 0.375rem 1rem;
    border-radius: 3px;
    margin-top: 0;
  }
}

.column-detail__meta {
  margin-top: 1.3125rem;
}
@media screen and (min-width: 768px) {
  .column-detail__meta {
    margin-top: 1.6875rem;
  }
}

.column-detail__image {
  margin-top: 1.5rem;
}
@media screen and (min-width: 768px) {
  .column-detail__image {
    margin-top: 2.5rem;
  }
}

.column-detail__image img {
  width: 100%;
  height: auto;
  -o-object-fit: cover;
     object-fit: cover;
  aspect-ratio: 345/222;
  border-radius: 5px;
}
@media screen and (min-width: 768px) {
  .column-detail__image img {
    aspect-ratio: 700/450;
  }
}

.column-detail__content h3 {
  /* 見出し（黄色文字）のスタイル */
  color: #E1B33F; /* 画像の色味に合わせた例 */
  font-size: 1.5rem;
  font-weight: bold;
  margin-top: 2.5rem;
}
.column-detail__content p {
  /* 本文のスタイル */
  font-size: 1rem;
  line-height: 1.5;
  margin-top: 1.5rem;
}
@media screen and (min-width: 768px) {
  .column-detail__content p {
    margin-top: 1.4375rem;
  }
}

.section-column-detail {
  margin-top: 10.25rem;
}
@media screen and (min-width: 768px) {
  .section-column-detail {
    margin-top: 14.125rem;
  }
}

.contact-page__section {
  padding-top: 5rem;
  background-image: url(../images/iro-dental-clinic..svg);
  background-repeat: no-repeat;
  background-position: right top 0;
  background-size: 23.125rem auto;
}
@media screen and (min-width: 768px) {
  .contact-page__section {
    padding-block: 9.8rem;
    background-position: right top 90px;
    background-size: 61.125rem auto;
  }
}

.contact-page__btn {
  padding: 0.875rem 2.5rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  margin-inline: auto;
  width: auto;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  width: 10.5rem;
  padding-right: 3.125rem;
  margin-top: 2.5rem;
  box-shadow: 4px 4px 10px 0 rgba(0, 0, 0, 0.13);
}

/* セクション全体 */
.contact-page__section {
  background-color: #fdfaf4; /* デザインに合わせた背景色 */
}

/* フォームのコンテナ（inner） */
.contact-page__section .inner {
  margin: 0 auto;
}

/* フォーム本体 */
.contact-form {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 2rem;
  max-width: 43.75rem;
  margin-top: 2.5rem;
  margin-inline: auto;
  color: #363636;
}
@media screen and (min-width: 768px) {
  .contact-form {
    gap: 3.875rem;
  }
}

.contact-form__wrap {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 1rem;
  width: 100%;
}
@media screen and (min-width: 768px) {
  .contact-form__wrap {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: flex-start;
    gap: 3.125rem;
  }
}
/* CF7が生成するラッパーをブロック化して幅を広げる */
.contact-form__wrap .wpcf7-form-control-wrap {
  display: block; 
  width: 100%;
  height: auto;
}
/* ラベル部分（左側） */
.contact-form__label {
  width: 9.0625rem;
  -ms-flex-negative: 0;
      flex-shrink: 0;
  font-weight: 400;
  line-height: 1.5;
  margin: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

/* 必須マーク */
.contact-form__required::after {
  content: "※";
  color: #e64a19;
  font-size: 0.875rem;
}

/* 入力フィールド共通 */
.contact-form input[type=text],
.contact-form input[type=email],
.contact-form input[type=tel],
.contact-form textarea {
  -webkit-box-flex: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
  width: 100%;
  padding: 0.75rem 1rem;
  border: 0.0625rem solid #ffffff;
  background-color: #ffffff;
  font-size: 1rem;
  border-radius: 0.25rem;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}


/* -----------------------------------------------------------
   Contact Form 7 プレースホルダー色指定（修正版）
----------------------------------------------------------- */

/* モダンブラウザ共通（Chrome, Safari, Edge, Firefox） */
.contact-form .wpcf7-form-control::placeholder {
  color: #CACACA;
  opacity: 1;
}

/* 古いブラウザ用（すべて赤色に統一） */
.contact-form .wpcf7-form-control::-webkit-input-placeholder { color: #CACACA; }
.contact-form .wpcf7-form-control::-moz-placeholder { color: #CACACA; opacity: 1; }
.contact-form .wpcf7-form-control:-ms-input-placeholder { color: #CACACA; }

/* お問い合わせ内容（textarea） */
.contact-form textarea {
  height: 18.75rem;
  resize: vertical;
}

.contact-form .wpcf7-list-item {
  display: inline-block;
  margin: 0;
}

.contact-form .wpcf7-list-item label {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  cursor: pointer;
  gap: 0.5rem;
}

/* ラジオボタン全体の囲み（wpcf7構造） */
.contact-form .wpcf7-radio {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  gap: 1.5rem;
  padding-top: 0.25rem;
}
@media screen and (min-width: 768px) {
  .contact-form .wpcf7-radio {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
  }
}


/* ラベルとSVGの位置調整 */
.wpcf7-radio .wpcf7-list-item label {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  cursor: pointer;
}

/* 本物のラジオボタンは非表示にする */
.wpcf7-radio .wpcf7-list-item input[type=radio] {
  display: none;
}

/* 未選択状態のSVG（inputの直後のspanに対して擬似要素を作る） */
.wpcf7-radio .wpcf7-list-item input[type=radio] + .wpcf7-list-item-label::before {
  content: "";
  display: inline-block;
  width: 14px;
  height: 14px;
  margin-right: 8px;
  background-repeat: no-repeat;
  background-size: contain;
  /* 外枠のみのSVG (#d4a373) */
  background-image: url("../images/radio-btn_white.svg");
}

/* 選択された状態のSVG */
.wpcf7-radio .wpcf7-list-item input[type=radio]:checked + .wpcf7-list-item-label::before {
  /* 中に点があるSVG (#d4a373) */
  background-image: url("../images/radio-btn_yellow.svg");
}

/* ==================================
   1. ラッパー（外枠）のスタイル
================================== */
.btn.btn-confirm {
  /* 固定幅を指定 */
  width: 10.5rem;
  height: 2.9375rem;
  /* 親のflexで引き伸ばされないように指定 */
  display: inline-flex; 
  margin: 0 auto;       /* 親要素の中で中央寄せ */
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  gap: 0.5rem; 
  
  /* ボタンの見た目（背景、枠、影、角丸） */
  background-color: #E1B33F;
  border: 1px solid #E1B33F;
  border-radius: 2.5rem;
  padding: 0.875rem 0;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  cursor: pointer;
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
/* 文字部分（input）の幅をリセット */
.btn.btn-confirm input.confirm-btn {
  width: auto;  
  flex: 0 1 auto;
  min-width: 0;       /* 幅を文字分だけにする */
  margin: 0;
  padding: 0;
  flex-shrink: 0;      /* 縮ませない */
}

/* アイコン部分の幅をリセット */
.btn.btn-confirm .btn-icon {
  width: 1rem;         /* アイコンのサイズ */
  height: 1rem;
  margin: 0;
  padding: 0;
  flex-shrink: 0;      /* 縮ませない */
}
/* ==================================
   2. Input本体（テキスト部分）のスタイル
================================== */
.btn.btn-confirm input {
  /* Input特有の背景や枠線を全て消し、ただの「文字」のように振る舞わせる */
  border: none;
  color: #fff;
  font-family: inherit;
  font-size: 1rem;
  font-weight: bold;
  padding: 0;
  margin: 0;
  cursor: pointer;
  background: none;
  outline: none;
  -webkit-appearance: none;
  appearance: none;
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
}

/* ==================================
   3. アイコン画像のスタイル
================================== */
.btn.btn-confirm .btn-icon {
  display: block;
  flex-shrink: 0;
  width: 1rem;
  height: 1rem;
  background-image: url(../images/btn-icon2.svg);
  background-size: contain;
  background-repeat: no-repeat;
  pointer-events: none; /* アイコンを誤クリックして動作不良を起こすのを防ぐ */
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
}


/* ==================================
   4. ホバー（マウスオーバー）時の変化
================================== */
.btn.btn-confirm:hover {
  background-color: #fff;
}

.btn.btn-confirm:hover input {
  color: #E1B33F;
}

.btn.btn-confirm:hover .btn-icon {
  background-image: url(../images/btn-icon1.svg);
}

.btn.btn-confirm::after {
    display: none;
}
/* =========================================
   共通設定
   ========================================= */
/* ラベルのスタイル調整 */
.contact-form__wrap .wpcf7-list-item-label {
    margin-left: 5px; /* ボタンと文字の隙間 */
}
/* ラジオボタンとラベルの重なり防止（共通） */
.contact-form__wrap label {
    cursor: pointer;
    display: inline-flex;
    align-items: center;
}
.contact-form .confirm-btn:hover {
  opacity: 0.8;
}

/*確認画面全体を隠しておく*/
.confirm-area {
  display: none;
}


.thanks__content {
  text-align: center; /* 中身を中央揃えにする */
  padding: 3.5rem 0.25rem 2.5rem; /* SP用：画面端との余白を確保 */
  width: 100%; /* 幅を確保 */
  -webkit-box-sizing: border-box;
          box-sizing: border-box; /* paddingを含めた幅計算にする */
}
@media screen and (min-width: 768px) {
  .thanks__content {
    padding-block: 3.5rem 0;
  }
}

/* タイトル */
.thanks__title {
  display: block; /* ブロック要素として幅を持たせる */
  font-size: 1.5rem;
  font-weight: 700;
  color: #363636;
  line-height: normal;
  text-align: center; /* テキストを中央揃え */
  margin-top: 0.625rem;
}
@media screen and (min-width: 768px) {
  .thanks__title {
    font-size: 2rem;
  }
}

/* 本文テキスト */
.thanks__text {
  display: inline-block; /* 中央揃えのためにインラインブロック化 */
  font-size: 1rem;
  line-height: normal;
  color: #363636;
  font-weight: 400;
  text-align: center; /* テキストの各行を中央揃え */
  margin-top: 1rem;
}
@media screen and (min-width: 768px) {
  .thanks__text {
    font-size: 1rem;
    margin-top: 2.5rem;
  }
}

.thanks__btn {
  margin-top: 3.5rem;
  box-shadow: 4px 4px 10px 0 rgba(0, 0, 0, 0.13);
}
@media screen and (min-width: 768px) {
  .thanks__btn {
    margin-top: 2.5rem;
  }
}

.section-error-404 {
  background-color: #E1B33F;
  padding-top: 10rem;
}
@media screen and (min-width: 768px) {
  .section-error-404 {
    padding-top: 8.75rem;
  }
}

.error-404 {
  background-color: #E1B33F;
  color: #fff;
  min-height: 100vh;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding-bottom: 3.75rem;
}

/* 404ページ専用のスタイル上書き */
.is-error404 .header {
  background-color: #E1B33F;
}
@media screen and (min-width: 768px) {
  .is-error404 .header__nav-items {
    background: #E1B33F;
    border-color: #fff;
    border: 1px solid var(--white, #FFF);
  }
}
.is-error404 .header__nav-item::before {
  background-color: #fff;
}
.is-error404 .header__nav-link {
  color: #fff;
}
.is-error404 .header__drawer span {
  background-color: #fff;
}
.is-error404 .logo__header img {
  opacity: 0;
}
.is-error404 .logo__header:before {
  z-index: 1;
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url(../images/common/logo-white_sp.svg);
  background-size: contain;
  background-repeat: no-repeat;
}

@media screen and (min-width: 768px) {
  .is-error404 .logo__header:before {
    background-image: url(../images/common/logo-white_pc.svg);
  }
}
/* 404ページ用のパンくずリスト色変更 */
.is-error404 .pankuzu span,
.error404 .pankuzu span,
.is-error404 .pankuzu a,
.error404 .pankuzu a {
    color: #fff;
}
/* 404ページ用の矢印アイコン色変更 */
.is-error404 .pankuzu__item::before {
    filter: invert(1) brightness(100);
}

/* インナー */
.error-404__inner {
  width: 100%;
  max-width: 1040px;
  padding: 0 15px;
}
@media screen and (min-width: 768px) {
  .error-404__inner {
    padding: 0 25px;
  }
}

/* 画像配置エリア */
.error-404__content {
  text-align: center;
}

.error-404__image-wrap {
  width: 100%;
  max-width: 19.1875rem; /* SP時の画像幅をrremに変換 */
  margin: 2.5rem auto 1.25rem;
}
@media screen and (min-width: 768px) {
  .error-404__image-wrap {
    max-width: 45rem; /* PC時の画像幅をrremに変換 */
    margin: 3.75rem auto 1.875rem;
  }
}

.error-404__image-wrap .error-404__main-img {
  width: 100%;
  height: auto;
  display: block;
}

/* メッセージ */
.error-404__text-group {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 1.5rem;
  margin-top: 3.4375rem;
}
@media screen and (min-width: 768px) {
  .error-404__text-group {
    margin-top: 2.8125rem;
  }
}

.error-404__title {
  font-size: 1.5rem;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
}
@media screen and (min-width: 768px) {
  .error-404__title {
    font-size: 2rem;
  }
}

.error-404__text-group .error-404__message {
  font-size: 1rem;
  line-height: 1.5;
  font-weight: 400;
}

.error-404__button-wrap {
  margin-top: 3.375rem;
}
@media screen and (min-width: 768px) {
  .error-404__button-wrap {
    margin-top: 2.5rem;
  }
}

.news-page__first {
  padding-top: 7.0625rem;
  background-image: url(../images/iro-dental-clinic..svg);
  background-repeat: no-repeat;
  background-position: right top 1.875rem;
  background-size: 23.125rem auto;
}
@media screen and (min-width: 768px) {
  .news-page__first {
    padding-top: 4.0625rem;
    margin-top: 5.625rem;
    background-position: right top;
    background-size: 61.125rem auto;
  }
}

.news-page__inner {
  width: 100%;
  margin-inline: auto;
  padding-inline: 1.25rem;
}
@media screen and (min-width: 768px) {
  .news-page__inner {
    max-width: 77.5rem;
  }
}

.news-page__main {
  padding-inline: 0.8125rem 0.75rem;
}
@media screen and (min-width: 768px) {
  .news-page__main {
    padding-inline: 0;
    max-width: 56.25rem;
  }
}

/* ===================================================
    記事一覧グリッド (.news-grid)
    SPデザインに合わせて「1列」にします
   =================================================== */
.news-page__grid {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 1fr;
  grid-template-columns: 1fr; /* SP: 1カラム (画像通り) */
  gap: 2.4375rem; /* カード間の余白 */
}
@media screen and (min-width: 768px) {
  .news-page__grid {
    -ms-grid-columns: 1fr 1.5rem 1fr 1.5rem 1fr;
    grid-template-columns: repeat(3, 1fr); /* PC: 3カラム */
    gap: 3.5rem 1.5rem;
  }
}

/* ===================================================
    レイアウト全体 (2カラム)
    SP: 縦並び (メイン -> サイド)
    PC: 横並び (メイン + サイド)
=================================================== */
.news-page__columns {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 5.3125rem;
  margin-top: 2.5rem;
}
@media screen and (min-width: 768px) {
  .news-page__columns {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row; /* PCは横並び */
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: flex-start;
    gap: 3.75rem;
  }
}

/* メインコンテンツエリア */
.news-page__main {
  width: 100%;
}
@media screen and (min-width: 768px) {
  .news-page__main {
    -webkit-box-flex: 1;
        -ms-flex: 1;
            flex: 1;
    min-width: 0;
  }
}

/* サイドバーエリア */
.news-page__side {
  width: 100%;
}
@media screen and (min-width: 768px) {
  .news-page__side {
    width: 15rem;
    -ms-flex-negative: 0;
        flex-shrink: 0;
    position: sticky;
    top: 1.25rem;
    margin-top: 0.9375rem;

  }
}

/* --- 共通の見出しスタイル --- */
.side-widget h3 {
  position: relative;
  padding-left: 0.4375rem;
  /* 日本語メインタイトルのスタイル */
  font-family: "Noto Sans JP", sans-serif;
  font-size: 1.5rem;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
  color: #E1B33F;
  line-height: 1;
  text-align: left; /* デフォルトは左揃え */
}

/* --- 1. 左上の黄色い丸 (::before) --- */
.side-widget h3::before {
  content: "";
  display: block;
  position: absolute;
  /* 位置調整: 文字の左上へ */
  top: -0.625rem;
  left: 0;
  /* 丸のサイズと形 */
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background-color: #E1B33F;
}

.side-widget h3::after {
  content: attr(data-en);
  /* 英語サブタイトルのスタイル */
  display: block; /* ブロック要素にして改行させる */
  font-family: "Lato", sans-serif;
  font-size: 0.75rem;
  font-weight: bold;
  color: #E1B33F;
  margin-top: 0.5rem; /* 日本語との距離 */
}
@media screen and (min-width: 768px) {
  .side-widget h3::after {
    margin-top: 0.625rem;
  }
}

/* --- 最新記事 (custom-news) --- */
.side-widget.custom-news {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 1.3125rem; /* 見出しとリストの間の余白 */
}

.side-widget.custom-news ul {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 1.1875rem; /* 記事同士の間の余白 */
  list-style: none;
  padding: 0;
  margin: 0;
}

.side-widget.custom-news time {
  display: block;
  font-family: "Lato", sans-serif;
  font-size: 0.875rem;
  font-weight: 400;
  color: #363636;
}

.side-widget.custom-news p {
  font-size: 1rem;
  font-weight: 700;
  color: #363636;
  margin-top: 0.5rem;
}

/* --- アーカイブ (archive-news) --- */
.side-widget.archive-news {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 1.5rem; /* 見出しとリストの間の余白 */
  margin-top: 3.875rem; /* 最新記事セクションとの間隔 */
}

.side-widget.archive-news > ul {
  list-style: none;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 1.375rem;
}

.side-widget.archive-news button {
  background: none;
  border: none;
  cursor: pointer;
  width: 100%;
  text-align: left;
  font-size: 1rem;
  font-weight: 700;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  color: #363636;
  padding: 0;
}

.side-widget__toggle-icon {
  width: 0.375rem;
  height: 0.625rem;
  margin-right: 0.25rem;
  color: #E1B33F;
  -webkit-transition: -webkit-transform 0.3s ease;
  transition: -webkit-transform 0.3s ease;
  transition: transform 0.3s ease;
  transition: transform 0.3s ease, -webkit-transform 0.3s ease;
  pointer-events: none;
  -webkit-transform: rotate(0deg);
          transform: rotate(0deg);
}

.archive-news button.is-open .side-widget__toggle-icon {
  -webkit-transform: rotate(90deg);
          transform: rotate(90deg);
}

/* 月リスト（子要素）の表示制御とインデント */
.archive-news button + ul {
  display: none; /* デフォルトは非表示 */
  padding-left: 1.375rem; /* ★ここを調整：年（2023）のテキスト開始位置に合わせる */
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 0.5rem;
}

/* 月リストの各項目（li）に「・」を追加 */
.archive-news button + ul li {
  font-size: 0.875rem;
  font-weight: 400;
  color: #363636;
  line-height: normal;
  position: relative;
  padding-left: 0.75rem; /* 「・」とテキストの間のスペース */
}

.archive-news button + ul li::before {
  content: "・";
  position: absolute;
  left: 0;
  color: #363636; /* ドットの色 */
  font-weight: 700;
}

.archive-news button + ul li a {
  text-decoration: none;
  color: inherit;
}

/* --- カテゴリー (category-news) --- */
.side-widget.category-news {
  margin-top: 3.875rem; /* アーカイブセクションとの距離 */
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 1rem; /* 見出しとリストの間の余白 */
}

.side-widget.category-news ul {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 1rem; /* 項目同士の間の余白 */
  list-style: none;
  padding-left: 1rem;
  margin: 0;
}

.side-widget.category-news li a {
  display: block;
  font-size: 1rem;
  font-weight: 700;
  line-height: normal;
  color: #333636;
  text-decoration: none;
}

.contact-complete-page__section {
  padding-top: 7.5rem;
  background-image: url(../images/iro-dental-clinic..svg);
  background-repeat: no-repeat;
  background-position: right top 10%;
  background-size: 23.625rem auto;
}
@media screen and (min-width: 768px) {
  .contact-complete-page__section {
    padding-block: 9.375rem;
    background-position: right top 90px;
    background-size: 61.125rem auto;
  }
}

.contact-page__btn-wrap {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: reverse;
      -ms-flex-direction: column-reverse;
          flex-direction: column-reverse;
  gap: 1.5rem;
  margin-top: 2.5rem;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
@media screen and (min-width: 768px) {
  .contact-page__btn-wrap {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    gap: 5rem;
  }
}
/* 親要素の中にいるボタンの margin をリセット */
.contact-page__btn-wrap .btn.btn-confirm {
  margin: 0; /* これで中央寄せの干渉を防ぎ、gapが正しく機能します */
}

.pagination-area {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}
/* ページネーション全体のコンテナ */
.pagination {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  list-style: none;
  padding: 2.5rem 0;
  gap: 2.75rem; /* アイテム間の距離 */
  margin: 0;
}
@media screen and (min-width: 768px) {
  .pagination {
    gap: 3.75rem;
    padding: 5rem 0;
  }
}

/* 各リスト項目 */
.pagination__item {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

/* リンクと現在のページ共通 */
.pagination__item .page-numbers {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  width: 1.75rem;
  height: 1.75rem;
  text-decoration: none;
  color: #E1B33F;
  font-size: 0.875rem;
  font-family: "Lato", sans-serif;
  line-height: 1;
  -webkit-transition: opacity 0.3s;
  transition: opacity 0.3s;
}
@media screen and (min-width: 768px) {
  .pagination__item .page-numbers {
    font-size: 1.5rem;
    width: 2.5rem;
    height: 2.5rem;
  }
}

/* 現在のページ（塗りつぶし） */
.pagination__item .page-numbers.current {
  background-color: #E1B33F;
  color: #fff;
}

/* ホバー時（現在のページ以外） */
.pagination__item a.page-numbers:hover {
  opacity: 0.6;
}

/* 前へ (prev) の画像設定 */
.pagination__item .prev::before {
  content: "";
  display: inline-block;
  width: 18px;  /* 画像の横幅 */
  height: 14px; /* 画像の縦幅 */
  background-image: url('../images/prev-arrow.svg'); 
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
}

/* 次へ (next) の画像設定 */
.pagination__item .next::after {
  content: "";
  display: inline-block;
  width: 18px;  /* 画像の横幅 */
  height: 14px; /* 画像の縦幅 */
  background-image: url('../images/next-arrow.svg'); /* 画像パスを修正してください */
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
}

@media screen and (min-width: 768px) {
  .pagination {
    padding: 5rem 0;
  }
}
/* ページネーションのリストスタイル */
.pager {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center; /* 中央揃え */
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  list-style: none;
  padding: 0;
  margin: 0;
  /* 文字スタイルの一括指定 */
  color: #E1B33F;
  font-size: 0.875rem;
  font-weight: 400;
  line-height: 1;
}

/* 各項目の基本設定 */
.pager__item {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

/* 中央の「一覧へ」の左右に74pxの余白を持たせる */
.pager__item--start {
  margin-inline: 4.625rem;
}

/* リンクの色調整（青色にならないように） */
.pager__item-link {
  color: inherit;
  text-decoration: none;
}

.pager__item-link:hover {
  opacity: 0.7; /* ホバー時の視覚効果 */
}

/* アイコン画像の設定 */
.pager__item-image {
  width: 0.875rem;
  height: 0.875rem; /* テキストの高さに合わせるのが一般的 */
  display: inline-block;
  -o-object-fit: contain;
     object-fit: contain;
}

/* Previous（左側）のアイコン余白 */
.pager__item:first-child .pager__item-image {
  margin-right: 0.6rem; /* 文字との隙間 */
}

/* Next（右側）のアイコン余白 */
.pager__item--end .pager__item-image {
  margin-left: 0.6rem; /* 文字との隙間 */
}

.column-detail__pager {
  margin-top: 5.0625rem;
}
@media screen and (min-width: 768px) {
  .column-detail__pager {
    margin-top: 3.5625rem;
  }
}
.wpcf7-spinner {
    display: none;
}