@charset "utf-8";

/* =========================================================
   目次
   ---------------------------------------------------------
   1.  メインビジュアル
   2.  ご挨拶セクション
   3.  サービスイメージセクション
   4.  設備紹介セクション
   5.  ご利用の流れセクション
   6. お知らせ・ブログセクション
   7. 運営事業所セクション
   8. お問い合わせセクション
   9. アクセスセクション
   ========================================================= */



/* =========================================================
   1. メインビジュアル
   ========================================================= */
.main-visual {
  position: relative;
  width: 100%;
  height: calc(100vh - 90px);
  min-height: 600px;
  overflow: hidden;
  background-color: #fff;
}

/* 背景画像 */
.mv-bg {
  position: absolute;
  inset: 0;
  background: url("../images/top/top-background.webp") center / cover no-repeat;
  z-index: 1;
}

.sun-rays {
  position: absolute;
  top: -5%;
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  pointer-events: none;
  opacity: 0.8;
}

.catchcopy {
  position: absolute;
  top: 15%;
  left: 15%;
  z-index: 10;
}

.catchcopy img { width: 28vw; max-width: 440px; min-width: 250px; height: auto; }

/* 施設外観写真 */
.mv-building {
  position: absolute;
  bottom: 60px;
  left: 50%;
  transform: translateX(-50%);
  width: 95%;
  max-width: 1100px;
  z-index: 4;
  display: flex;
  justify-content: center;
  align-items: flex-end;
}

.mv-building img { width: 100%; height: auto; filter: drop-shadow(0 10px 20px rgba(0,0,0,0.15)); }

/* 右上の3つの丸バッジ */
.feature-circles {
  position: absolute;
  top: 5%;
  left: 50%;
  margin-left: 18%;
  width: 320px;
  height: 450px;
  z-index: 20;
}

.circle {
  position: absolute;
  animation: fuwafuwa 4s ease-in-out infinite;
}

.circle img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 6px 12px rgba(218, 148, 7, 0.4));
}

.circle-lg              { width: 220px; height: 220px; top: 0;    right: 60px; z-index: 3; }
.circle-md:nth-child(2) { width: 130px; height: 130px; top: 165px; right: 0;   z-index: 2; animation-delay: 1s; }
.feature-circles .circle:nth-child(3) {
  width: 160px !important;
  height: 160px !important;
  top: 250px;
  right: 80px;
  z-index: 1;
  animation-delay: 2s;
}

@keyframes fuwafuwa {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-15px); }
}

/* 下部ウェーブ */
.wave-bottom { position: absolute; bottom: -1px; left: 0; width: 100%; line-height: 0; z-index: 15; }
.wave-bottom img { width: 100%; display: block; }

/* --- レスポンシブ：タブレット --- */
@media (max-width: 1000px) and (min-width: 481px) {
  .main-visual {
    height: 80vh; /* 固定pxより可変の方が安定する場合があります */
    min-height: 650px;
  }

  .catchcopy {
    left: 4%;
    top: 10%;
  }
  .catchcopy img {
    width: 30vw; /* 少し控えめに */
  }

  .feature-circles {
    left: auto;
    right: 2%; /* 右端固定 */
    margin-left: 0;
    top: 5%;
    transform: scale(0.75);
    transform-origin: right top;
  }

  .mv-building {
    width: 95%;
    bottom: 40px;
  }
  
  /* 太陽の光が強すぎる場合は調整 */
  .sun-rays img {
    width: 80%;
  }
}
@media (max-height: 780px) {
		.mv-building {
			width: 60%;
		}
	}
/* --- レスポンシブ：スマホ --- */
@media (max-width: 480px) {
  .main-visual { height: auto; min-height: 550px; padding-top: 60px; }

  .sun-rays img { width: 200px; }

  .catchcopy { top: 85px; left: 5%; width: 90%; text-align: center; }
  .catchcopy img { width: 100%; max-width: 300px; margin-inline: auto; }

  .mv-building { bottom: 5px; width: 110%; }

  /* 丸バッジを横一列に並べ直す */
  .feature-circles {
    position: relative;
    top: auto; left: auto;
    margin: 120px auto 0;
    width: 100%; height: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    transform: none;
  }

  .circle { position: static; flex-shrink: 0; }

  .circle-lg              { width: 130px !important; height: 130px !important; order: 2; }
  .circle-md:nth-child(2) { width: 90px;  height: 90px;  order: 1; margin-top: 80px; }
  .feature-circles .circle:nth-child(3) { width: 100px !important; height: 100px !important; order: 3; margin-top: 30px; }
}


/* =========================================================
   2. ご挨拶セクション
   ========================================================= */
.message-section {
  position: relative;
  padding: 50px 0 150px;
  background-image:
    linear-gradient(to bottom, #fff 0%, rgba(255,255,255,0) 40%),
    url("../images/top/Greeting-background.webp");
  background-repeat: no-repeat;
  background-position: center bottom;
  background-size: cover;
  background-color: #fff;
}

.message-section .section-title{
  text-align: center;
  color: var(--color-orange-mid);
  border-bottom: dotted;
  width: 100%;
}

/* テキスト＋プロフィールの横並び */
.message-container { display: flex; justify-content: space-between; align-items: flex-start; gap: 50px; }

.message-text { flex: 1; line-height: 2; margin-bottom: 60px; }
.message-text p { margin-bottom: 2em; }

.message-profile { width: 190px; text-align: center; }
.profile-img     { width: auto; height: 100%; margin: 0 auto 20px; }
.profile-img img { width: 100%; height: 100%; object-fit: cover; }
.company-name    { font-size: 1rem; margin-bottom: 5px; }
.ceo-name        { font-weight: bold; font-size: 1.1rem; }

@media (max-width: 1000px) {
  .message-container { flex-direction: column; align-items: center; gap: 30px; }
  .message-text      { margin-bottom: 0; width: 100%; }
  .message-text p    { font-size: 0.95rem; line-height: 1.8; }
  .message-section{
		  background-size: contain;
	}
}
@media (max-width: 768px) {
	.message-section {background-image:
    linear-gradient(to bottom, #fff 0%, rgba(255,255,255,0) 40%),
    url("../images/top/Greeting-background-s.webp");
		background-position: center bottom -25px;
	}
}
@media (max-width: 480px) {
  .message-section   { padding: 80px 0 120px; background-position: center bottom -120px; background-size: cover; }
  .message-section .section-title { font-size: 1.5rem; margin-bottom: 40px; }
  .message-profile   { width: 100%; }
  .profile-img       { width: 160px; }
}


/* =========================================================
   3. サービスイメージセクション
   ========================================================= */
.service-section {
  position: relative;
  padding: 100px 0 200px;
  background-color: var(--color-bg-yellow);
}

.service-container { display: flex; justify-content: space-between; align-items: center; gap: 40px; }

/* 左側：イラスト */
.service-visual { flex: 1; max-width: 580px; }

.visual-box { background: #fff; border-radius: 20px; padding: 30px; text-align: center; }
.visual-box img { width: 100%; height: auto; margin-bottom: 20px; }
.visual-note    { font-size: 1rem; line-height: 1.6; }

/* 右側：テキスト */
.service-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}


.service-section .ribbon-right::after {
  background: var(--color-bg-yellow);
}

.service-text p { margin-bottom: 1.5em; }

/* ボタンを右寄せ */
.service-content .btn-main { align-self: flex-end; }

@media (max-width: 1000px) {
  .service-container { flex-direction: column; gap: 50px; }
  .service-visual    { width: 100%; max-width: none; }
}


/* =========================================================
   4. 設備紹介セクション
   ========================================================= */
.facility-section { padding: 80px 0 120px; background-color: #fff; overflow: hidden; }


/* スライダー */
.facility-slider-wrapper { overflow: hidden; padding-left: calc((100vw - 1200px) / 2 + 20px); }

@media (max-width: 1240px) { .facility-slider-wrapper { padding-left: 20px; } }

.facility-track { display: flex; gap: 24px; transition: transform 0.4s ease; will-change: transform; }

.facility-card      { flex: 0 0 300px; width: 300px; }
.facility-card img  { width: 100%; height: 220px; object-fit: cover; border-radius: 15px; display: block; }

.facility-label {
  display: block;
  width: fit-content;
  margin: -18px auto 0;
  background-color: #fff9d8;
  color: #66520d;
  padding: 15px 36px 0;
  border-radius: 12px;
  font-weight: bold;
  font-size: 0.95rem;
  letter-spacing: 0.05em;
  position: relative;
  z-index: -1;
}

.facility-controls { display: flex; justify-content: space-between; align-items: center; margin-top: 32px; }

.facility-dots { display: flex; gap: 8px; align-items: center; }

.facility-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #ccc;
  border: none;
  padding: 0;
  cursor: pointer;
  transition: background 0.2s, transform 0.2s;
}

.facility-dot.is-active { background: var(--color-orange-mid); transform: scale(1.2); }

.facility-arrows { display: flex; gap: 12px; }

.facility-arrow {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: var(--color-orange-mid);
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s, transform 0.2s;
}

.facility-arrow:hover { background: #e07d1a; transform: scale(1.05); }

.facility-arrow svg {
  width: 22px;
  height: 22px;
  stroke: #fff;
  stroke-width: 2.5;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.btn-container-bottom { text-align: center; margin-top: 60px; }

.facility-section .btn-main { display: inline-flex; }


@media (max-width: 600px) {
  .facility-slider-wrapper { padding-left: 20px; }
  .facility-card { flex: 0 0 calc(100vw - 40px); width: calc(100vw - 40px); }
  .facility-card img { height: 220px; }
}


/* =========================================================
   5. ご利用の流れセクション
   ========================================================= */
.flow-section { 
  position: relative; 
  background-color: #fff; 
  /* 背景ドットのはみ出しを防ぐために必要 */
  overflow: hidden; 
}

/* ドット背景エリア */
.flow-inner-content {
  position: relative;
  z-index: 2;
  background-color: #fff;
  background-image:
    radial-gradient(circle, var(--color-bg-yellow) 3.5px, transparent 3.5px),
    radial-gradient(circle, var(--color-bg-yellow) 3.5px, transparent 3.5px);
  background-position: 5px 5px, 13.5px 22px;
  background-size: 17px 34px;
  /* 上下のパディングを確保してイラストやタイトルのスペースを作る */
  padding: 160px 0 100px; 
}

/* 上下のウェーブ装飾 */
.wave-decoration {
  position: absolute;
  left: 0;
  width: 100%;
  line-height: 0;
  z-index: 10;
  pointer-events: none;
}

.wave-decoration img { width: 100%; height: auto; display: block; }

.flow-section .wave-decoration:first-child { top: 0; }
.flow-section .wave-decoration:last-child  { bottom: 0; }

/* 上の波を反転 */
.wave-decoration.inverted { transform: scaleY(-1); margin-top: -1px; }

/* --- リボンタイトルのセンター配置 --- */
.flow-section .section-title{
	display: table;
	margin: 0 auto 40px;
}
/* 2つの吹き出し */
.flow-flex {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 30px;
  margin-bottom: 40px;
  position: relative;
  z-index: 20;
}

.flow-balloon {
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 440px;
  height: 310px;
}

.flow-balloon.is-left  { background-image: url("../images/top/speech-bubble-left.webp"); }
.flow-balloon.is-right { background-image: url("../images/top/speech-bubble-right.webp"); }

.flow-balloon-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  width: 85%;
  padding-bottom: 45px;
}

.flow-balloon-inner h3 {
  color: #7d4d37;
  font-size: 2rem;
  letter-spacing: 2px;
  font-weight: bold;
  margin-bottom: 18px;
  border-bottom: 2px dotted #9fd8a9;
  display: inline-block;
  padding: 0 10px 5px;
}

/* --- 人物イラストの上下隠れ防止修正 --- */
.flow-illustration {
  width: 100%;
  text-align: center;
  position: relative;
  z-index: 20;
  /* マイナスマージンを控えめにし、paddingで調整 */
  margin-top: 0px; 
  margin-bottom: 0; 
  line-height: 0; /* 下に謎の隙間ができるのを防ぐ */
}

.flow-illustration img {
  max-width: 680px;
  width: 100%;
  height: auto;
  display: inline-block; /* centerを効かせる */
  margin: 0 auto;
  vertical-align: bottom; /* 下端を揃える */
}


@media (max-width: 950px) {
  .flow-flex { 
    flex-direction: column; 
    gap: 10px; 
  }
	.flow-balloon-inner h3{
		font-size: 1.5rem;
		margin-bottom: 0;
	}
  .flow-balloon { 
    width: 100%; 
    max-width: 380px; 
    height: auto; 
    aspect-ratio: 440 / 310; 
  }

  .flow-inner-content { 
    padding: 80px 0 60px; /* 下に少し余白を増やす */
  }

  .flow-illustration {
    margin-top: 10px;
    margin-bottom: -45px; /* スマホでは波に少し被せるくらいが綺麗 */
  }
}

/* =========================================================
   6. お知らせ・ブログセクション
   ========================================================= */
.news-section { padding: 0px 0 100px; background-color: #fff; }

.news-section .section-title { color: var(--color-orange-mid); margin-bottom: 60px; }

.news-list { border-top: 2px dotted var(--color-border-dot); }
.news-section .news-list {
    display: flex;
    flex-direction: column;
    gap: 0px;
}

.news-section .news-item {
    display: flex;
    align-items: center;
    width: 100%;
}
.news-item {
  display: flex;
  align-items: center;
  padding: 20px 10px;
  color: var(--color-brown);
  border-bottom: 2px dotted var(--color-border-dot);
  transition: background-color 0.3s;
}

.news-item:hover { background-color: #fffaf5; }

.news-meta { display: flex; align-items: center; gap: 20px; flex-shrink: 0; width: 250px; }

.news-date { font-weight: bold; font-family: Arial, sans-serif; letter-spacing: 0.05em; }

.news-category {
  font-size: 0.75rem;
  font-weight: bold;
  color: #fff;
  padding: 4px 20px;
  border-radius: 50px;
  min-width: 100px;
  text-align: center;
}

.news-category.is-news { background-color: var(--color-orange); }
.news-category.is-blog { background-color: #44a044; }

.news-item-title {
  flex: 1;
  font-weight: bold;
  margin: 0;
  padding: 0 20px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.news-arrow {
  width: 24px;
  height: 24px;
  background-color: var(--color-orange);
  border-radius: 50%;
  position: relative;
  flex-shrink: 0;
}

.news-arrow::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 45%;
  width: 6px;
  height: 6px;
  border-top: 2px solid #fff;
  border-right: 2px solid #fff;
  transform: translate(-50%, -50%) rotate(45deg);
}

.news-btn-container { display: flex; justify-content: flex-end; }

@media (max-width: 768px) {
  .news-item       { flex-wrap: wrap; }
  .news-meta       { width: 100%; margin-bottom: 10px; }
  .news-item-title { padding-left: 0; font-size: 1rem; }
  .news-arrow      { margin-left: auto; }
}


/* =========================================================
   7. 運営事業所セクション
   ========================================================= */
.office-section { position: relative; background-color: #fff; overflow: hidden; }

.office-inner-content {
  position: relative;
  background-color: var(--color-bg-beige);
  padding: 200px 0;
  z-index: 2;
}

.wave-top,
.office-inner-content .wave-bottom {
  position: absolute;
  left: 0;
  width: 100%;
  line-height: 0;
  z-index: 10;
}

.wave-top img,
.office-inner-content .wave-bottom img { width: 100%; height: auto; display: block; }

.wave-top { top: 0; transform: scaleY(-1); }
.office-inner-content .wave-bottom { bottom: 0; }

/* 背景装飾（ニコちゃん） */
.deco-smile {
  position: absolute;
  z-index: 1;
  width: 280px;
  pointer-events: none;
  opacity: 0.8;
  will-change: transform;
  animation: floatSmile 4s ease-in-out infinite;
}

.deco-smile.is-right { top: 0;    right: -60px; animation-delay: 1s; }
.deco-smile.is-left  { bottom: 30px; left: -80px;  animation-delay: 3s; }

@keyframes floatSmile {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-20px); }
}

.office-section .section-title {
  text-align: center;
  color: var(--color-brown);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
}

.office-section .section-title::before,
.office-section .section-title::after {
  content: "...........................";
  letter-spacing: 0.15em;
  color: var(--color-brown);
  font-size: 1.5rem;
  font-weight: normal;
  display: inline-block;
  transform: translateY(-8px);
}

.office-btns {
  max-width: 720px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 25px;
  position: relative;
  z-index: 5;
}

.office-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #fff;
  padding: 25px 40px;
  border-radius: 25px;
  position: relative;
  transition: all 0.3s ease;
  box-shadow: 0 4px 10px rgba(0,0,0,0.05);
}

.office-btn:hover { transform: translateY(-3px); box-shadow: 0 12px 25px rgba(0,0,0,0.1); }

.office-btn.is-nurse   { border: 3px solid var(--color-orange-dark); }
.office-btn.is-regular { border: 3px solid var(--color-green-dark); padding: 10px 40px; text-align: center;}

.office-btn-text { font-size: 1.6rem; font-weight: bold; line-height: 1.3; }
.office-btn.is-nurse   .office-btn-text { color: var(--color-orange-dark); }
.office-btn.is-regular .office-btn-text { color: var(--color-green-dark); }

.office-btn-icon {
  position: absolute;
  right: 35px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.office-btn.is-nurse   .office-btn-icon { background-color: var(--color-orange-dark); }
.office-btn.is-regular .office-btn-icon { background-color: var(--color-green-dark); }
.office-btn-icon svg { width: 24px; height: 24px; }

@media (max-width: 768px) {
  .office-inner-content { padding: 100px 0; }
.office-section .section-title::before,
.office-section .section-title::after { display: none; }
  .office-btn-text { font-size: 1.25rem; }
  .office-btn-icon { right: 15px; width: 30px; height: 30px; }
  .deco-smile      { width: 200px; }
  .deco-smile.is-left {top:0;}
}


/* =========================================================
   8. お問い合わせセクション
   ========================================================= */
.contact-section { position: relative; padding: 100px 0 60px; background-color: #fff; overflow: hidden; }

.contact-section .section-title {
display: table;
    margin: 0 auto 40px;
}


.contact-flex {
  display: flex;
  justify-content: center;
  align-items: stretch;
  gap: 40px;
  margin-bottom: 40px;
  position: relative;
  z-index: 10;
}

.contact-card {
  width: 440px;
  padding: 40px 30px;
  border-radius: 30px;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
}

.contact-card.is-green  { background-color: #e5f4cf; border: 4px solid var(--color-green); }
.contact-card.is-orange { background-color: #fdf2c6; border: 4px solid var(--color-orange-dark); }

.contact-card h3 { font-size: 2.5rem; font-weight: bold; margin-bottom: 15px; color: #fff; letter-spacing: 0.15em; }

/* 文字のアウトライン（テキストシャドウで表現） */
.contact-card.is-green  h3 {
  text-shadow:
    3px  3px 0 var(--color-green), -3px  3px 0 var(--color-green),
    3px -3px 0 var(--color-green), -3px -3px 0 var(--color-green),
    3px  0   0 var(--color-green), -3px  0   0 var(--color-green),
    0    3px 0 var(--color-green),  0   -3px 0 var(--color-green);
}
.contact-card.is-orange h3 {
  text-shadow:
    3px  3px 0 var(--color-orange-dark), -3px  3px 0 var(--color-orange-dark),
    3px -3px 0 var(--color-orange-dark), -3px -3px 0 var(--color-orange-dark),
    3px  0   0 var(--color-orange-dark), -3px  0   0 var(--color-orange-dark),
    0    3px 0 var(--color-orange-dark),  0   -3px 0 var(--color-orange-dark);
}

.contact-tel { margin-bottom: 20px; }

.contact-tel a {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  font-size: 2rem;
  font-weight: bold;
  color: #44a044;
  line-height: 1;
}

.icon-tel { width: 28px; height: 28px; flex-shrink: 0; }

.contact-card .btn-main { margin-top: auto; width: fit-content; }

.contact-note { text-align: center; font-weight: bold; position: relative; z-index: 10; }

/* 背景イラスト */
.contact-illust { position: absolute; bottom: 50px; z-index: 20; pointer-events: none; }
.contact-illust.is-left  { left:  calc(50% - 530px); width: 150px; }
.contact-illust.is-right { right: calc(50% - 540px); width: 250px; }
.contact-illust img { width: 100%; height: auto; display: block; }

.contact-bottom-line { margin-top: 40px; border-bottom: 3px dotted var(--color-border-dot); width: 100%; }

@media (max-width: 1000px) {
  .contact-section  { padding: 60px 0 40px; }
  .contact-title    { margin-bottom: 40px; padding: 8px 40px; font-size: 1.3rem; }
  .contact-flex     { flex-direction: column; align-items: center; gap: 30px; padding: 0 20px; }
  .contact-card     { width: 100%; max-width: 440px; padding: 35px 20px; }
  .contact-card h3  { font-size: 1.8rem; letter-spacing: 0.1em; margin-bottom: 20px; }
  .contact-card .btn-main { margin-top: 20px; width: 100%; max-width: 280px; }
  .contact-tel a    { font-size: 1.6rem; }
  .icon-tel         { width: 22px; height: 22px; }
  .contact-note     { padding: 0px; line-height: 1.6; }
  .contact-illust   { display: none; }
}


/* =========================================================
   9. アクセスセクション（決定版：中央揃え・地図強化）
   ========================================================= */
.access-section {
  background-color: var(--color-bg-cream);
  padding: 200px 0 400px;
}

.access-container {
  background-color: #fff;
  border-radius: 40px;
  overflow: hidden;
  display: flex;
  align-items: stretch; /* 左右の高さを同期 */
}

/* 左側：施設情報 */
.access-info {
  flex: 1;
  padding: 80px 40px;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center; /* 縦方向の中央揃え */
}
.access-section .section-title {
    display: table;
    margin: 0 auto 40px;
}
.access-info-inner {
  max-width: 420px;
  margin: 0 auto;
  text-align: center; /* 横方向の中央揃え */
}

.access-logo {
  margin-bottom: 30px;
}

.access-logo img {
  height: auto;
  max-width: 200px;
  margin: 0 auto;
}

.access-address {
  font-style: normal;
  margin-bottom: 35px;
}

.address-text {
  font-weight: bold;
  margin-bottom: 20px;
  font-size: 1.1rem;
  line-height: 1.5;
}

.contact-item {
  display: flex;
  align-items: center;
  gap: 12px;
  justify-content: center;
}

.contact-item .label {
  padding: 4px 12px;
  border-radius: 20px;
  color: #fff;
  font-size: 0.8rem;
  font-weight: bold;
  min-width: 80px;
  background-color: var(--color-orange-mid);
}

.tel-number,
.fax-number {
  font-size: 2rem;
  font-weight: bold;
  color: #604c3f;
  text-decoration: none;
}

/* アクセス方法 */
.access-method {
  margin-top: 30px;
  display: flex;
  flex-direction: column; /* 枠も中身も中央に寄せる */
}

.method-title {
  display: block;
  text-align: center;
  border: 1px solid var(--color-orange-mid);
  color: var(--color-orange-mid);
  padding: 3px 20px;
  border-radius: 5px;
  font-size: 0.9rem;
  font-weight: bold;
  margin-bottom: 15px;
  width: fit-content; /* 文字幅に合わせる */
}

.method-list {
  text-align: left;
  font-size: 0.95rem;
  line-height: 1.6; /* 少し詰め気味に調整 */
  list-style: none; /* デフォルトのポッチを消す */
  padding: 0;
}

.method-list > li {
  display: flex;
  gap: 8px;
  margin-bottom: 15px; /* 項目間の間隔 */
}

.method-icon {
  color: var(--color-orange-mid);
  flex-shrink: 0; /* アイコンが潰れないように */
}

.method-content strong {
  display: block;
  font-weight: bold;
  margin-bottom: 4px;
}

/* 詳細リスト（・の部分） */
.method-content ul {
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: 0.9rem;
  color: #333;
}

.method-content ul li {
  position: relative;
  padding-left: 1.2em; /* 「・」の幅＋余白分を確保 */
  line-height: 1.6;
  margin-bottom: 2px;
}

.method-content ul li::before {
  content: "・";
  position: absolute;
  left: 0;           /* 左端に固定 */
  top: 0;            /* 1行目の高さに合わせる */
}

/* 右側：地図 */
.access-map {
  flex: 1;
  min-height: 550px; /* PCでの地図の高さを確保 */
  display: flex;
}

.access-map iframe {
  width: 100% !important;
  height: 100% !important;
  border: none;
  display: block;
}

@media (max-width: 900px) {
  .access-container {
    flex-direction: column; /* 縦並びに強制変更 */
    height: auto;
  }

  .access-info {
    padding: 60px 20px 50px;
    order: 1; /* 情報が上 */
  }

  .tel-number,
  .fax-number {
    font-size: 1.7rem;
  }

  /* 地図を下にしっかり伸ばす */
  .access-map {
    order: 2; /* 地図が下 */
    width: 100%;
    height: 500px; /* ここで好きなだけ高さを出せます */
    min-height: 500px;
  }

  .access-map iframe {
    height: 500px !important; /* スマホでの高さを強制上書き */
  }

  .sp-only {
    display: block;
  }
}
.footer {
    position: relative;
    background: var(--color-bg-cream);
}