@charset "UTF-8";

/* ========== mv ========== */
.wrapper {
  overflow: hidden;
}

.mv {
  position: relative;
  width: 100vw;
  height: 92svh;
  margin-top: 7rem;
}

.mv__backgrounds {
  position: absolute;
  top: 0;
  left: 0;
  width: 69vw;
  height: 100%;
  z-index: 0;
  overflow: hidden;
}

.mv__backgrounds img.mv__bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100svh;
  object-fit: cover;
  pointer-events: none;
  user-select: none;
  opacity: 0;
  transition: opacity 3s ease;
  transform: scale(1); /* 初期値を一応指定 */
}
.wave {
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 100%;
  overflow: hidden;
  line-height: 0;
  z-index: 1;
}

@keyframes zoomIn {
  from {
    transform: scale(1);
  }
  to {
    transform: scale(1.1);
  }
}

.mv__backgrounds img.mv__bg.active {
  opacity: 1; /*.active クラスがつくと見える(フェードイン・アウト）*/
  animation: zoomIn 4s ease-in-out forwards; /* 拡大 */
}

.mv__inner {
  position: absolute;
  right: 0;
  top: 0;
  width: 31vw;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.mv__inner .site-logo {
  width: 8.6rem;
  min-width: 60px;
  margin: 0 auto;
}

.mv__title {
  font-size: clamp(1.2rem, 2.5vw, 1.5rem);
}
.mv__title--main {
  font-size: clamp(2rem, 3.9vw, 3.6rem);
}

.mv__subtitle {
  margin-top: 12.7rem;
  text-align: left;
  font-size: clamp(1.6rem, 2.4vw, 2.2rem);
}
.mv__subtitle--sub {
  font-size: clamp(1.2rem, 1.8vw, 1.6rem);
  display: inline-block;
  margin-top: 2rem;
}

.mv .circle-svg {
  position: absolute;
  top: 50%;
  left: 69vw;
  transform: translate(-50%, -50%);
  width: 400px;
  height: 400px;
  z-index: -1;
}

@media (min-width: 1440px) {
  .mv__wrapper {
    width: 476px;
  }
}

@media (max-width: 1100px) {
  .mv__backgrounds {
    width: 65vw;
  }
  .mv__inner {
    width: 35vw;
  }

  .mv .circle-svg {
    left: 65vw;
  }
  .mv__subtitle {
    padding-left: 2rem;
  }
}

@media (max-width: 768px) {
  .mv {
    height: auto;
  }

  .mv__backgrounds {
    position: relative;
    width: 100vw;
    height: 80svh;
  }

  .mv__bg {
    object-fit: cover;
    object-position: left bottom;
  }

  .mv .circle-svg {
    position: absolute;
    top: 114%;
    right: 0;
    transform: translateY(-50%);
    width: 250px;
    height: 250px;
    z-index: 5;
  }
  .mv__inner {
    position: static;
    width: 100%;
    height: auto;
    margin-top: 2rem;
  }

  .mv__inner-top {
    position: absolute;
    top: 14%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    color: var(--primary-white);
  }

  .mv__subtitle {
    padding-left: 0; /* 左余白を解除 */
    margin-top: 4rem;
    font-size: 2rem;
    text-align: center;
  }

  .mv__subtitle--sub {
    font-size: 1.4rem;
  }
}

/* ========== concept ========== */

.concept-inner {
  display: flex;
  gap: 6vw;
  /* padding: 16rem 6rem 18rem 0; */
  padding: 10svh 5vw 12svh 2vw;
  margin: 8rem auto 0;
}

.concept__left,
.concept__right {
  flex: 1;
}
.concept__left {
  position: relative;
}

.concept__img1 {
  position: absolute;
  top: -6vw;
  left: 5vw;
  width: 21vw;
  min-width: 200px;
  max-width: 350px;
  aspect-ratio: 31 / 20;
  z-index: 1;
}

.concept__img2 {
  position: absolute;
  top: 8vw;
  left: 27vw;
  width: 16vw;
  min-width: 150px;
  max-width: 300px;
  aspect-ratio: 31 / 20;
  z-index: 1;
}

.concept-sp {
  display: none;
}

.concept__left .circle-svg {
  position: absolute;
  top: 5vw;
  left: var(--contentPadding);
  transform: translate(-50%, -50%);
  width: 26.4vw;
  aspect-ratio: 1 / 1;
}

/* 円形グラデ浮遊アニメーション*/

.concept__left .circle-svg,
.concept__right .circle-svg {
  animation: floating-xy 7s ease-in-out infinite alternate-reverse;
}

@keyframes floating-xy {
  0% {
    transform: translate(-15%, -20%);
  }
  50% {
    transform: translate(15%, 10%);
  }
  100% {
    transform: translate(-15%, -20%);
  }
}

/* / 円形グラデ浮遊アニメーション */

.concept__right {
  font-size: clamp(1.4rem, 2.2vw, 2rem);
  line-height: 1.9;
  position: relative;
  /* overflow: hidden;  */
}
.concept__right2 {
  margin-top: 3rem;
}
.concept__right .circle-svg {
  position: absolute;
  top: -15rem;
  right: -10rem;
  transform: translate(-50%, -50%);
  width: 15vw;
  aspect-ratio: 1 / 1;
  z-index: 0;
}

@media (max-width: 768px) {
  .concept-inner {
    display: block;
    margin: 14rem auto 0;
    text-align: left;
    padding: 16rem 0 18rem;
  }

  .concept__img1 {
    position: absolute;
    top: -230px;
    left: 0;
    width: 25vw;
  }
  .concept__img2 {
    position: absolute;
    top: 250px;
    left: auto;
    right: 0;
    width: 25vw;
  }
  .concept__left .circle-svg {
    position: absolute;
    top: 60vw;
    left: var(--contentPadding);
    transform: translate(-50%, -50%);
    width: 26.4vw;
    aspect-ratio: 1 / 1;
  }

  .concept__right1,
  .concept__right2 {
    margin:0 auto;
    width: 430px;
    padding-left: var(--contentPadding);
    max-width: 100%;
  }

  .concept__right .circle-svg {
    position: absolute;
    top: -15rem;
    right: 6rem;
    transform: translate(-50%, -50%);
    width: 15vw;
    aspect-ratio: 1 / 1;
    z-index: -1;
  }
}
/* ========== salon ========== */

.salon__list {
  width: 100%;
  display: flex;
  gap: 2.7vw;
  margin-top: 8rem;
}

.salon__item {
  flex: 1;
  position: relative;
}
.salon__txt {
  padding: 0 20px 20px;
}

.salon__txt h3 {
  margin-top: 2.2rem;
  text-align: center;
}

.salon__txt p {
  margin-top: 2.2rem;
  font-size: clamp(1.4rem, 1.6vw, 1.8rem);
}

.salon__item img {
  width: 100%;
  aspect-ratio: 20 / 13; /* 横:縦の比率を統一 */
  object-fit: cover; /* 画像をトリミングして枠に収める */
  display: block; /* 隙間防止 */
}

@media (max-width: 768px) {
  .salon__list {
    flex-direction: column;
    gap: 30px;
    margin: 40px 0 80px;
  }
  .salon__txt .brsp {
    display: none;
  }
}
/* ========== therapist ========== */

.therapist {
  position: relative;
}

.therapist__subTitle {
  text-align: center;
  font-weight: 350;
  line-height: 1.3;
  margin-top: 6rem;
}

.therapist__role {
  font-size: clamp(1rem, 4vw, 1.6rem);
}

.therapist__name--jp {
  font-size: clamp(2.4rem, 4vw, 3.2rem);
  font-weight: 500;
}

.therapist__name--kana {
  font-size: clamp(1.4rem, 2.5vw, 1.6rem);
}

.therapist__wrapper {
  display: flex;
  align-items: flex-start;
  margin-top: 4rem;
  flex-wrap: wrap;
  align-items: stretch;
  position: relative;
}

.therapist__left {
  flex: 1 1 50%;
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  position: relative;
}

.therapist__left::before {
  content: "";
  position: absolute;
  top: 11rem;
  left: calc(-1 * var(--contentPadding));
  width: 46.5vw;
  height: 600px;
  background: linear-gradient(
    to bottom right,
    rgba(241, 232, 229, 0.2) 0%,
    rgba(241, 232, 229, 1) 60%
  );
  z-index: -1;
  pointer-events: none;
}

.therapist-img {
  width: 35vw;
  max-width: 100%;
  height: auto;
  display: block;
}

.therapist .circle-svg {
  position: absolute;
  top: 4rem;
  left: 2rem;
  transform: translate(-50%, -50%);
  width: 26.4vw;
  aspect-ratio: 1 / 1;
  z-index: -1;
}

.therapist__right {
  flex: 1 1 50%;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  font-size: 1.56rem;
}

.therapist__qualification {
  margin-top: 0.4rem;
}

.therapist__profile {
  display: inline-block; /* 横並びにする */
  margin-right: 4rem; /* 横の間隔 */
  white-space: nowrap; /* 折り返したくない場合 */
  margin-top: 1.6rem;
  font-size: 1.4rem;
}

.therapist__message {
  margin-top: 1.6rem;
  padding-bottom: 1.6rem;
  border-bottom: 1px solid var(--primary-gray);
}

/* timeline */

.timeline {
  position: relative;
  display: flex;
  gap: 4rem;
}
.timeline-item {
  display: flex;
  align-items: flex-start;
  position: relative;
}
.timeline-item:not(:last-child) {
  padding-bottom: 2rem;
}

.timeline-year {
  margin-right: 2.3rem;
  color: var(--primary-red);
  flex-shrink: 0;
  width: 3rem;
}
.timeline-content {
  font-size: clamp(1.2rem, 2vw, 1.4rem);
}
.fa-solid {
  color: var(--primary-red);
  margin-right: 0.9rem;
}

/* 線 */
/* 左線 */
.timeline-item::before {
  content: "";
  position: absolute;
  top: 1rem;
  left: calc(3rem + 2.3rem + 10px / 2);
  transform: translateX(-50%);
  width: 1px;
  height: 100%;
  background-color: var(--primary-red);
  z-index: 0;
}
.timeline-item:last-child::before {
  display: none;
}
/* 右線 */
.timeline-item::after {
  content: "";
  position: absolute;
  top: 1rem;
  right: -2rem;
  transform: translateX(-50%);
  width: 1px;
  height: 100%;
  background-color: var(--primary-red);
  z-index: 0;
}

.timeline-item:last-child::after {
  display: none;
}

/* ドット */
.timeline-dot {
  width: 10px;
  margin-right: 2.3rem;
}
/* 左ドット */
.timeline-dot span {
  display: inline-block;
  width: 10px;
  height: 10px;
  background-color: var(--primary-red);
  border-radius: 50%;
  position: relative;
  z-index: 1; /* 線より上に */
}
/* 右ドット */
.timeline-dot::before {
  content: "";
  position: absolute;
  top: 1rem;
  right: -2.4rem;
  width: 10px;
  height: 10px;
  background-color: var(--primary-red);
  border-radius: 50%;
  z-index: 1;
}

.timeline-left .timeline-item:nth-child(2) .timeline-dot::before,
.timeline-left .timeline-item:nth-child(3) .timeline-dot::before {
  opacity: 0;
}

/* timeline-right */

.timeline-right {
  display: flex;
}

.timeline-right .timeline-item {
  align-items: center;
}

@media (min-width: 1440px) {
}
@media (max-width: 768px) {
  .therapist__wrapper {
    flex-direction: column;
    gap: 4rem;
  }
  .therapist__name--kana {
    letter-spacing: normal;
  }
  .therapist-img {
    width: 80%;
  }
  .therapist__left::before {
    content: "";
    position: absolute;
    top: 2rem;
    left: 2rem;
    width: 80%;
    height: 100%;
    background: linear-gradient(
      to bottom right,
      rgba(241, 232, 229, 0.2) 0%,
      rgba(241, 232, 229, 1) 60%
    );
    z-index: -1;
    pointer-events: none;
  }

  .therapist__profile {
    margin-top: 0.4rem;
  }
  .timeline-year {
    margin-right: 1.5rem;
  }
  .timeline-dot {
    margin-right: 1.5rem;
  }
  .timeline-item::before {
    left: calc(3rem + 1.5rem + 10px / 2);
  }
}
@media (max-width: 420px) {
  .timeline-right {
    width: calc(50% - 4rem);
  }
}

/* ========== concern ========== */

.concern {
  width: 100%;
  height: 485px;
  margin-left: auto;
  text-align: center;
  font-size: clamp(1.3rem, 2.2vw, 2rem);
  color: var(--primary-white);
  position: relative;
  padding-top: 8rem;
  overflow: hidden;
  margin-top: 16rem;
  background:
    /* 上レイヤー：SVG */ url("../images/concern-background.svg")
      center calc(100% + 1px) / 100% auto no-repeat,
    /* 下レイヤー：PNG */ url("../images/concern.png") center / cover no-repeat;
}

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

.concern-content {
  display: flex;
  gap: 14.5rem;
  text-align: left;
  width: fit-content;
  margin: 2rem auto 0;
  color: var(--primary-white);
}

.concern-title__top {
  background-color: #4a362f;
  font-size: clamp(1.8rem, 4vw, 2.4rem);
  margin-right: clamp(0.5rem, 3vw, 1.8rem);
}

.concern-content p {
  margin-top: 1.4rem;
}

.concern-content .fa-solid {
  color: var(--primary-white);
  margin-right: clamp(0.8rem, 3vw, 4rem);
}

@media (max-width: 768px) {
  .concern {
    padding-top: 4rem;
    height: 300px;
  }
  .concern-content {
    gap: 2rem;
    text-align: left;
    width: fit-content;
    margin: 2rem auto 0;
    color: var(--primary-white);
  }
  .concern-content p {
    margin-top: 0.7rem;
  }
}

/* ========== menu ========== */

.menu {
  padding-bottom: 20rem;
}

.menu-title {
  text-align: center;
  margin-top: 7rem;
}

.menu-title__top {
  font-size: clamp(1.8rem, 2.4vw, 2.4rem);
}
.menu-title__sub {
  font-size: clamp(1.4rem, 2.5vw, 1.8rem);
  margin-top: 1rem;
}

.menu-title__sub .brsp {
  display: none;
}

.menu__list {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  gap: 1.5vw;
  margin: 8rem 0;
}

.menu__item {
  flex: 1 1 calc(20% - 1.5vw);
  display: flex;
  flex-direction: column;
  background: linear-gradient(
      to bottom,
      rgba(255, 255, 255, 0) 0%,
      rgba(255, 255, 255, 0.9) 95%
    ),
    /* 薄い茶系の透明レイヤー */
      linear-gradient(rgba(255, 227, 204, 0.05), rgba(255, 227, 204, 0.05)),
    /* 一番下に shade.png */ url("../images/shade-1.jpg");

  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 1;
  text-align: center;
  box-shadow: 2px 2px 4px rgba(104, 66, 30, 0.25);
  cursor: pointer;
}

.menu__item--2 {
  background-image: linear-gradient(
      to bottom,
      rgba(255, 255, 255, 0) 0%,
      rgba(255, 255, 255, 0.9) 95%
    ),
    linear-gradient(rgba(255, 227, 204, 0.05), rgba(255, 227, 204, 0.05)),
    url("../images/shade-2.jpg");
}
.menu__item:hover {
  opacity: 0.85;
}

.menu__top {
  margin-top: 4rem;
}

.menu__txt {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding: 0 2rem 4rem;
  margin-top: 4rem;
}

.menu__txt h3 {
  font-size: clamp(1.6rem, 2.5vw, 1.8rem);
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 8rem;
  color: var(--primary-black);
}

.menu__txt p {
  margin-top: 2rem;
  padding-top: 2rem;
  font-size: clamp(1.4rem, 2.1vw, 1.6rem);
  text-align: left;
  border-top: 1px solid var(--primary-gray);
}

.menu__item img {
  object-fit: cover;
  width: 10rem;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
}

.button-wrapper {
  text-align: center;
}
.more-btn {
  position: relative;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 200px;
  height: 45px;
  background-color: var(--primary-red);
  color: var(--primary-white);
  font-size: 2.2rem;
  font-weight: 500;
  border-radius: 8rem;
  box-shadow: 2px 2px 4px rgba(104, 66, 30, 0.25);
  transition: all 0.3s ease;
  letter-spacing: 0.08em;
  line-height: 1;
}
.more-btn:hover {
  opacity: 0.85;
}

.more-text {
  position: relative;
  top: -2.5px;
}

.arrow {
  position: relative;
}

.arrow::before,
.arrow::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 30px;
  width: 12px;
  height: 1px;
  background: var(--primary-white);
  transition: background 0.2s;
}

.arrow::before,
.arrow::after {
  transform-origin: right center;
}
.arrow::before {
  transform: rotate(45deg);
}
.arrow::after {
  transform: rotate(-45deg);
}

@media (max-width: 1100px) {
  .menu__list {
    gap: 2vw;
    justify-content: center;
  }
  .menu__item {
    flex: 0 1 calc(33.333% - 2vw);
  }
  .menu__item img {
    width: 8rem;
  }
  .menu__txt {
    margin-top: 2rem;
  }
  .menu__txt h3 {
    min-height: 4rem;
  }
  .menu-br {
    display: none;
  }
}

@media (max-width: 768px) {
  .menu__list {
    flex-direction: column;
    gap: 1.6rem;
    margin: 40px 0 80px;
  }
  .menu__item {
    flex: 1 1 100%;
    flex-direction: row;
    padding-left: 2rem;
    align-items: center;
  }
  .menu__top {
    margin-top: 0;
  }
  .menu__txt {
    padding: 0 1.5rem 1.5rem;
    margin-top: 0.4rem;
  }
  .menu__txt p {
    margin-top: 0.2rem;
    padding-top: 1rem;
  }
  .menu-title__sub .brsp {
    display: block;
  }
  .menu-br.first {
    display: block;
  }
}

/* ========== review ========== */

.review {
  margin-bottom: 8rem;
}

.review-title__sub {
  text-align: center;
  margin-top: 4rem;
  font-size: clamp(1.8rem, 2.4vw, 2.4rem);
}

/* GoogleMapボタン */

.btn-wrapper {
  text-align: center;
  margin-top: 8rem;
}

.google-map-btn {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  height: 85px;
  background-color: var(--primary-white);
  padding: 0 16px;
  box-shadow: 3px 3px 8px rgba(0, 0, 0, 0.2);
  gap: 12px;
  max-width: 100%;
  width: fit-content;
}

.google-map-btn:hover {
  transform: translate(2px, 2px);
  box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.22);
  opacity: 0.85;
}

.google-map-btn img {
  display: block;
  height: 44px;
}

.google-map-btn .google-lockup {
  height: 32px;
}

.stars {
  display: flex;
  gap: 2px;
  color: #fbbc05;
  font-size: 18px;
  margin-left: auto; /* 星を右寄せしたい場合 */
}

/* / GoogleMapボタン */

.review-slider {
  width: calc(100vw - (var(--contentPadding) * 2));
  padding: 0 6px 6px 0;
  margin-top: 8rem;
}
.review-slider .swiper-slide {
  height: auto;
}

.review__item {
  min-width: 280px;
  height: 100%;
  background: linear-gradient(
    135deg,
    /* 左上→右下 */ rgba(255, 243, 233, 0.2) 0%,
    /* 左上の薄い色 */ rgba(255, 243, 233, 1) 100% /* 右下の濃い色 */
  );
  box-shadow: 2px 2px 4px rgba(109, 98, 89, 0.25); /* ドロップシャドウ */
  border-radius: 40px 40px 40px 0px; /* 角丸を追加（おすすめ） */
  padding: 24px;
}

.review__item h3 {
  font-weight: 400;
  font-size: 2rem;
  margin-top: 2.2rem;
  text-align: left;
  color: var(--primary-black);
}

.review__item p {
  margin-top: 1rem;
  font-size: clamp(1.4rem, 2.1vw, 1.6rem);
}

.rating {
  margin-top: 1rem;
  color: var(--primary-yellow);
}

.review__item h3::after {
  content: "";
  display: block;
  width: 100%;
  height: 1px;
  background-color: #b3b3b3;
  margin-top: 12px;
}

.arrow-container {
  position: relative;
  width: 100%;
  height: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 4rem;
}

.arrow-container::before,
.arrow-container::after {
  content: "";
  position: absolute;
  top: 50%;
  /* width: calc(50% - 330px); */
  width: calc(50% - clamp(120px, 28vw, 330px));
  height: 1px;
  background: var(--primary-black);
  transform: translateY(-50%);
}

.arrow-container::before {
  left: var(--contentPadding);
}

.arrow-container::after {
  right: var(--contentPadding);
}

.arrow-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(2rem, 11vw, 13rem);
  position: relative;
  z-index: 1;
}

.arrow-btn {
  position: relative;
  width: 40px;
  height: 40px;
  cursor: pointer;
}

.arrow-btn::before,
.arrow-btn::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 28px;
  height: 1px;
  background: var(--primary-black);
  transition: background 0.2s;
}

.arrow-btn.next::before,
.arrow-btn.next::after {
  transform-origin: right center;
}
.arrow-btn.next::before {
  transform: rotate(45deg);
}
.arrow-btn.next::after {
  transform: rotate(-45deg);
}

/* ＜ */
.arrow-btn.prev::before,
.arrow-btn.prev::after {
  transform-origin: left center;
}
.arrow-btn.prev::before {
  transform: rotate(-45deg);
}
.arrow-btn.prev::after {
  transform: rotate(45deg);
}

.arrow-btn:hover::before,
.arrow-btn:hover::after {
  background: #666;
}

@media (max-width: 768px) {
  .btn-wrapper {
    margin-top: 4rem;
  }
  .review-slider {
    width: calc(100vw - (7vw * 2));
  }
  .google-map-btn {
    max-width: 90%;
    height: 75px;
  }
  .google-map-btn img {
    height: 26px;
  }
  .google-lockup {
    max-height: 22px;
  }
  .stars {
    font-size: 14px;
    gap: 1px;
  }
  .review-slider {
    margin-top: 4rem;
  }
  .arrow-inner {
    gap: 6.5rem;
  }
}

/* ========== blog ========== */

.blog {
  background: url("../images/curve-2-top.svg") top center no-repeat,
    url("../images/curve-2-bottom.svg") bottom center no-repeat, #f1e8e5;
  background-size: 100% auto, 100% auto, cover;
  background-repeat: no-repeat;
  padding-top: 8rem;
  padding-bottom: 16rem;
}

.blog-sub {
  text-align: center;
  margin-top: 8rem;
  font-size: clamp(1.4rem, 2.5vw, 1.8rem);
}
.blog-sub .brsp {
  display: none;
}

.blog-pickup {
  text-align: left;
  font-size: clamp(1.6rem, 2.5vw, 2rem);
  font-weight: 500;
  margin-top: 4rem;
}

.blog-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 28px;
  width: 100%;
  margin: 1rem 0 8rem;
}

.blog-content {
  display: flex;
  align-items: center;
  width: 100%;
  height: 128px;
  overflow: hidden;
  background-color: var(--primary-white);
  box-shadow: 2px 2px 4px rgba(109, 98, 89, 0.25);
}
.blog-content:hover {
  opacity: 0.85;
}

.blog-content__img {
  height: 100%;
  width: clamp(12rem, 20vw, 16.5rem);
  flex-shrink: 0;
}

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

.blog-content__text {
  padding: 14px 24px;
  text-align: left;
  width: 100%;
  min-width: 0;
}
.blog-title {
  font-size: clamp(1.4rem, 2.5vw, 1.8rem);
  line-height: 1.5;
  /* line-clamp: 2; */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.blog-category {
  display: block;
  max-width: fit-content;
  background-color: var(--primary-pink-beige);
  border-radius: 8rem;
  padding: 1px 25px;
  font-size: clamp(1.2rem, 1.5vw, 1.4rem);
  margin-top: 1.3rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

@media (max-width: 1100px) {
  .blog-list {
    grid-template-columns: 1fr;
    gap: 20px;
  }
}
@media (max-width: 768px) {
  .blog-sub .brsp {
    display: block;
  }
  .blog-content__text {
    padding: 0.7rem 2rem;
  }
  .blog-content {
    height: 10rem;
  }
}

/* ========== faq ========== */

.faq {
  margin-top: 16rem;
}

.faq-link {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1.4rem;
  padding: 0 clamp(2rem, 8vw, 10rem) 1.5rem;
  width: clamp(24rem, 70vw, 58.3rem);
  height: clamp(10rem, 25vw, 14rem);
  margin: 0 auto;
  text-align: center;
  line-height: 1;
  background-color: var(--primary-soft-beige);
  box-shadow: 3px 3px 8px rgba(84, 73, 59, 0.25);
}
.faq-link:hover {
  transform: translate(2px, 2px);
  box-shadow: 2px 2px 4px rgba(84, 73, 59, 0.28);
  opacity: 0.85;
}
.faq-lead {
  width: 100%;
  font-size: clamp(1.2rem, 2vw, 1.6rem);
  line-height: 1.2;
}
.faq-link .brsp {
  display: none;
}

.faq-main {
  width: 100%;
  font-size: clamp(2rem, 3.8vw, 3rem);
}
.faq-arrow {
  position: absolute;
  right: clamp(1.6rem, 8vw, 6.5rem);
  top: 47%;
}

.faq-arrow::before,
.faq-arrow::after {
  content: "";
  position: absolute;
  top: 50%;
  width: clamp(14px, 4vw, 25px);
  height: 1px;
  background: var(--primary-black);
  transition: background 0.2s;
  transform-origin: right center;
}

.faq-arrow::before {
  transform: rotate(45deg);
}
.faq-arrow::after {
  transform: rotate(-45deg);
}

@media (max-width: 768px) {
  .faq-link {
    width: 90%;
  }
  .faq-link .brsp {
    display: block;
  }
}
/* ========== carousel ========== */

.image-carousel {
  overflow: hidden;
  width: 100%;
  position: relative;
  margin-top: 16rem;
}

.carousel-inner {
  display: flex;
  gap: 28px;
  width: max-content;
  animation: scroll 46s linear infinite;
}

.carousel-inner img {
  width: 333px;
  height: 333px;
  flex-shrink: 0;
}

/* 無限スクロール用アニメーション */
@keyframes scroll {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%); /* 元画像セット分左に移動 */
  }
}
@media (max-width: 768px) {
  .carousel-inner img {
    width: 222px;
    height: 222px;
  }
  .carousel-inner {
    animation: scroll 30s linear infinite;
  }
  .faq-link {
    padding: 0 30px 15px;
    height: 10rem;
  }
}
/* ========== access ========== */

.access-intro {
  text-align: center;
  margin-top: 8rem;
}

.access-name {
  font-size: clamp(1.8rem, 2.4vw, 2.4rem);
}
.access-desc {
  margin-top: 0.5rem;
  font-size: clamp(1.4rem, 2.5vw, 1.8rem);
}
.access-desc .brsp {
  display: none;
}
.access-map-wrapper {
  display: flex;
  gap: clamp(1.5rem, 2vw, 3rem);
  justify-content: center;
  flex-wrap: wrap;
  margin: 4rem 0;
  position: relative;
}

.access-image {
  width: clamp(18rem, 20vw, 28rem);
  aspect-ratio: 1 / 1;
  object-fit: cover;
  flex-shrink: 0;
}

.access-iframe {
  flex: 1 1 0; /* 残りの幅を自動で埋める */
  min-height: 20rem;
  height: auto;
  border: 0;
  pointer-events: auto;
}

.access .circle-svg {
  position: absolute;
  top: 4rem;
  left: 2rem;
  transform: translate(-50%, -50%);
  width: 26.4vw;
  aspect-ratio: 1 / 1;
  z-index: -1;
}

/* access-info, access-payment, access-note を縦に並べる */
.access-details {
  display: flex;
  flex-direction: column;
  gap: 1.5rem; /* 各ブロックの間隔 */
  width: 69vw;
  margin: 0 auto 6rem;
  font-size: clamp(1.4rem, 2vw, 1.6rem);
}

/* 各ブロック（住所、支払い、備考）内は横並び */
.access-address,
.access-info,
.access-payment,
.access-note {
  display: flex;
  align-items: center;
  gap: 1rem;
}

/* タイトルは固定100px */
.access-info-title {
  flex: 0 0 200px;
}
.access-info-title .brsp {
  display: none;
}

/* テキストは残りを占める */
.access-info-right {
  flex: 1;
  display: flex;
}
.access-info-address,
.access-info-transport {
  flex: 1;
}

.access-text {
  border: 1px solid #b3b3b3;
  padding: 0.4rem 3.2rem;
}

.access-details > * {
  border-bottom: 1px solid #b3b3b3; /* 各ブロックの下に線を引く */
  padding-bottom: 2rem; /* 線とテキストの間に余白を入れる */
}

.access-details > *:last-child {
  border-bottom: none; /* 最後（備考）の下は線を消す */
}

@media (max-width: 1100px) {
  .access-details {
    width: 100%;
  }

  .access-info-right {
    flex-direction: column;
  }
  .access-info-transport {
    margin-top: 1rem;
  }
}

@media (max-width: 768px) {
  .access-desc .brsp {
    display: block;
  }
  .access-text {
    padding: 0.4rem 2rem;
  }
  .access-info-title {
    line-height: 1.3;
  }
  .access-info-title .brsp {
    display: block;
  }
  .access-info-title {
    flex: 0 0 6rem;
  }
}