/* メインカラー（青）の文字 */
.text-theme-blue {
  color: #465daa !important;
}

.icon-orange {
  color: #82c896 !important;
}

/* 施設写真 */
.facility-photo {
  width: 100%;
  object-fit: cover;
  max-height: 400px;
}

/* 代表者の写真 */
.representative-photo {
  width: 140px; /* 少し大きくしました */
  height: 140px;
  object-fit: cover;
  border: 4px solid #fff; /* 写真に白枠をつけてリッチに */
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

/* ▼【重要】サイドバーの追従設定 */
.sidebar-sticky {
  top: 100px; /* 上からの余白 */
  z-index: 1;
}

/* --- 代表あいさつ用のタイルデザイン（完成版） --- */
.message-tile {
  background-color: #fffbf0; /* 薄いオレンジ背景 */
  padding: 30px; /* 内側の余白を広めに */
  border-radius: 12px; /* 角丸 */
  border-left: 5px solid #f29f05; /* 左側のオレンジ線 */
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.03);
  position: relative; /* 吹き出し三角の位置基準 */
  width: 100%;
}

/* タイル内の文章調整 */
.message-tile p {
  margin-bottom: 1.5rem; /* 段落ごとの間隔を空ける */
  line-height: 2; /* 行間をかなりゆったり取る */
  text-align: justify; /* 両端揃えできれいに見せる */
}

/* 最後の段落だけ下余白をなくす */
.message-tile p:last-child {
  margin-bottom: 0;
}

/* --- PC画面（幅768px以上）の時だけ吹き出し風にする設定 --- */
@media (min-width: 768px) {
  .message-tile {
    margin-left: 20px; /* 写真との間隔 */
  }

  /* 左側の三角（吹き出しのしっぽ）を作る */
  .message-tile::before {
    content: "";
    position: absolute;
    top: 40px; /* 上から40pxの位置 */
    left: -10px; /* 左に飛び出させる */
    width: 0;
    height: 0;
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
    border-right: 10px solid #f29f05; /* オレンジ色の三角 */
  }
}

/* ==========================================
   ▼ 代表あいさつ 新デザイン案 (A, B, C) ▼
   ========================================== */

/* --- 共通設定 --- */
.greeting-section {
  margin-bottom: 60px;
}
.greeting-section p {
  line-height: 2;
  text-align: justify;
  margin-bottom: 1.5rem;
  color: #444;
}

/* ----------------------------------
   【案A】雑誌インタビュー風（シンプル）
   ---------------------------------- */
.design-a .photo-col {
  text-align: center;
}
.design-a .photo-frame {
  width: 100%;
  max-width: 280px; /* 写真を少し大きく */
  border-radius: 10px;
  box-shadow: 10px 10px 0px #eef2f9; /* ずらした影でアクセント */
  margin-bottom: 20px;
}
.design-a .name-box {
  margin-top: 15px;
  text-align: left;
  padding-left: 10px;
  border-left: 4px solid #465daa;
}
.design-a .greeting-text {
  padding-left: 10px;
  padding-right: 10px;
  background-color: #fffbf0; /* 薄いオレンジ */
}
@media (max-width: 767px) {
  .design-a .greeting-text {
    padding-left: 0;
    margin-top: 30px;
  }
  .design-a .photo-frame {
    max-width: 200px;
  }
}

/* ==========================================
   ▼ 基本理念 新デザイン案 (A, B, C) ▼
   ========================================== */

/* --- 共通: アイコンのアクセントカラー --- */
.text-orange {
  color: #f29f05 !important;
}
.bg-orange-light {
  background-color: #fffbf0; /* 薄いオレンジ背景 */
}

/* ----------------------------------
   【案C】サークル・ポップ（親しみやすさ）
   ---------------------------------- */
.philosophy-circle-card {
  text-align: center;
  padding: 20px;
}
.circle-icon-box {
  width: 100px;
  height: 100px;
  background: #fffbf0; /* 薄いオレンジ */
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 20px;
  border: 2px solid #f29f05;
  color: #f29f05;
}
.philosophy-circle-card h5 {
  color: #465daa;
  font-weight: bold;
  margin-bottom: 15px;
  position: relative;
  display: inline-block;
  padding-bottom: 5px;
}
/* タイトルの下に短い線 */
.philosophy-circle-card h5::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 30px;
  height: 2px;
  background-color: #f29f05;
}

/* --- 【案C】ウォーム・カード --- */
.thought-warm-card {
  background-color: #fffbf0; /* 薄いオレンジ */
  border-radius: 20px;
  padding: 40px;
  border: 2px solid #fff;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.03);
}
.thought-warm-img {
  border-radius: 50% 50% 10px 10px / 15px 15px 10px 10px; /* 少し有機的な丸み */
  width: 100%;
  height: auto;
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
  border: 4px solid #fff;
}

/* --- スライド内の文字装飾 --- */

/* 施設名（大きく、太く、影をつける） */
.slide-title {
  font-size: 3.5rem; /* 文字の大きさ（かなり大きく） */
  font-weight: 700; /* 太文字 */
  letter-spacing: 0.1em; /* 文字の間隔を少し広げる */
  margin-bottom: 10px; /* 下の文字との隙間 */
  text-shadow: 0 4px 10px rgba(0, 0, 0, 0.6); /* 黒い影で浮き上がらせる */
  line-height: 1.2;
}

/* 事業所タイプ（少し控えめに、上品に） */
.slide-sub {
  font-size: 1.5rem; /* ほどよい大きさ */
  font-weight: 500;
  letter-spacing: 0.05em;
  text-shadow: 0 2px 5px rgba(0, 0, 0, 0.6); /* こちらも影をつける */
  opacity: 0.9; /* 少しだけ透明にしてメリハリを出す */
  margin-bottom: 0;
}

/* --- スマホで見たときの調整（少し小さくする） --- */
@media (max-width: 768px) {
  .slide-title {
    font-size: 2rem; /* スマホではこのくらいが適切 */
  }
  .slide-sub {
    font-size: 1rem;
  }
}

/* Instagram画像のズームエフェクト */
.insta-img:hover {
  transform: scale(1.1);
}