/* 全体のリセット */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Arial', sans-serif;
    line-height: 1.6;
}

/* ヘッダー */
.header {
    width: 100%;
background-color: #ffffff;
}

/* ヘッダートップ全体 */
.header-top {
    display: flex;
    align-items: center;
    justify-content: space-between; /* 左右に配置 */
    padding: 1rem 2rem;
    flex-wrap: wrap; /* 必要に応じて折り返し */
    width: 100%;
}

/* 左側：ロゴ + サブコピー + 社名 */
.header-left {
    display: flex;
    align-items: center; /* ロゴとテキストを横並びに */
    flex: 1;
}

/* ロゴエリア */
.logo {
    flex-shrink: 0; /* ロゴのサイズを固定 */
}

.logo img {
    max-width: 90px;
    height: auto;
}

/* サブコピー & 社名（2行を横並び） */
.header-text {
    display: flex;
    flex-direction: column; /* サブコピーと社名を縦並び */
    margin-left: 1rem; /* ロゴとの間隔 */
}

/* サブコピー */
.sub-copy {
    font-size: 1.3rem;
    color: #32b427;
    white-space: nowrap;
    font-family: "Zen Maru Gothic", serif;
font-weight: 400;
font-style: normal;
    line-height: -1;
}

.sub-copy2 {
    font-size: 0.8rem;
    color: #555;
    white-space: nowrap;
    font-family: "Zen Maru Gothic", serif;
font-weight: 400;
font-style: normal;
}



/* 社名 */
.company-name {
    font-size: 2rem;
    font-weight: bold;
    color: #32b427;
    white-space: nowrap;
    font-family: "Zen Maru Gothic", serif;
    font-weight: 400;
    font-style: normal;
    line-height: -1;
}

/* 右側：住所・電話・アクセス */
.header-right {
    display: flex;
    align-items: center;
    justify-content: flex-end; /* 右揃え */
    flex: 1;
}

/* 住所・電話エリア（縦配置） */
.header-info {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    text-align: right;
    margin-right: 1rem;
}

/* 住所 */
.header-address {
    font-size: 0.95rem;
    color: #333;
    white-space: nowrap;
}

/* 電話番号 */
.header-phone {
display: flex;
  align-items: center;
  font-size: 2.5rem;
  font-weight: bold;
  color: #20a129;
  white-space: nowrap;
  font-family: "Zen Maru Gothic", serif;
  font-weight: bold;
  font-style: normal;
  line-height: 1;
}

/* スマホアイコン */
.header-phone img {
    width: 60px;
    height: auto;
    margin-right: -1rem;
}

/* アクセスボタン */
.header-access a {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 80px;
    height: 80px;
    background-color: transparent;
    border: 1px solid transparent;
    transition: border-color 0.3s ease, background 0.3s ease;
    text-decoration: none;
}

.header-access a:hover {
    border-color: #28a745;
}

/* アクセスボタンのアイコン */
.header-access a img {
    width: 80%;
    height: auto;
}






/* ヒーローエリア全体（基準となる親要素） */
.hero {
    position: relative; /* 子要素をabsolute配置できるようにする */
    width: 100%;
    height: 50vh; /* ヒーローエリアの高さを固定 */
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

/* 背景装飾エリア */
.hero-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 70%;
    height: 100%;
    background: linear-gradient(135deg, #b1f07a 0%, #b3e0ff 100%); /* 背景に装飾（グラデーション） */
    z-index: 0; /* 一番背面 */
}

/* ヒーロータイトル */
.hero-title {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); /* 完全なセンター揃え */
    font-size: 3vw;
    color: #ffffff; /* テキストカラーを白に */
    text-align: left;
    font-family: "Zen Maru Gothic", serif;
    font-weight: 400;
    font-style: normal;
    text-shadow: 2px 2px 0px rgba(0, 0, 0, 0.3); /* シャープな影 */
    z-index: 2; /* 画像より前面 */
    white-space: nowrap; /* 強制改行を防ぐ */
}

/* 各行の背景を個別に設定（ワイプエフェクトのため初期状態を非表示） */
.hero-title span {
    display: inline-flex;
    align-items: center;
    background: rgba(81, 88, 78, 0.8);
    padding: 0.1rem 1rem;
    border-radius: 0px;
    white-space: nowrap;
    line-height: 1.2;
    opacity: 0; /* 初期状態で透明 */
    transform: translateX(-50px); /* 左にずらしておく */
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}






/* ヒーロー画像共通設定（初期状態：透明） */
.hero-img {
    position: absolute;
    object-fit: cover;
    box-shadow: 8px 8px 20px rgba(0, 0, 0, 0.3); /* シャープな影 */
    z-index: 1; /* タイトルより背面 */
    opacity: 0; /* 初期状態は非表示 */
    transition: opacity 0.6s ease-in-out; /* フェードインの時間を短縮 */
}



/* ヒーロー画像1（左上） */
.hero-img-1 {
    width: 40%;
    top: 0%;
    left: -10%;
    transform: rotate(0);
}

/* ヒーロー画像2（右上） */
.hero-img-2 {
    width: 45%;
    top: 50%;
    right: -10%;
    transform: rotate(0);
}

/* ヒーロー画像3（左下） */
.hero-img-3 {
    width: 35%;
    bottom: 40%;
    left: 15%;
    transform: rotate(16deg);
}

/* ヒーロー画像4（右下） */
.hero-img-4 {
    width: 50%;
    bottom: -10%;
    right: 10%;
    transform: rotate(-12deg);
}






/* ナビゲーションエリア */
.nav-container {
    background-color: transparent; /* 背景を透明に */
    padding: 0.5rem 0;
}

/* ナビゲーションリスト */
.nav-container ul {
    display: flex;
    justify-content: center;
    list-style: none;
    padding: 0;
    gap: 0rem; /* 項目間の間隔 */
}

/* ナビゲーションの各項目（アイコン + ルビ + テキストを縦配置） */
.nav-container ul li {
    height: 15vh; /* 各コンテンツの高さを15vh */
    display: flex;
    flex-direction: column; /* 縦に配置 */
    align-items: center;
    justify-content: center;
    padding: 1rem; /* 内側の余白を調整 */
    border: 1px solid transparent; /* 通常時は罫線を透明に */
    transition: border-color 0.3s ease; /* ホバー時のアニメーション */
}

/* ホバー時に罫線を表示 */
.nav-container ul li:hover {
    border-color: #e6e6e6; /* ホバー時に罫線を表示 */
    background-color: rgba(0, 115, 230, 0.1); /* うっすら色をつける */
}

/* アイコンエリア */
.nav-icon {
    width: 40px;  /* 画像の幅 */
    height: 40px; /* 画像の高さ */
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 5px; /* ルビとの間隔 */
}

/* 画像のスタイル */
.nav-icon img {
    max-width: 100%;
    max-height: 100%;
}

/* ナビゲーションのリンク */
.nav-container ul li a {
    color: #1e9c27;
    text-decoration: none;
    font-size: 1rem;
    padding: 0.5rem 1rem;
    display: flex;
    flex-direction: column; /* アイコンとルビを縦並びに */
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    text-align: center;
}

/* ルビのスタイル */
ruby rt {
    font-size: 0.7rem;
    color: #d4d4d4;
    padding: 1vw;
}

.schedule-section {
  background-color: #f9f9f9;
  padding: 10vh 2vw;
  box-sizing: border-box;
}

.schedule-container {
  max-width: 1200px;
  margin: 0 auto;
  width: 100%;
  padding: 0 1rem;
  box-sizing: border-box;
}

.schedule-content {
  display: flex;
  gap: 2rem;
  flex-wrap: wrap;
}

.schedule-left,
.schedule-calendar,
.schedule-right {
  flex: 1 1 30%;
  min-width: 280px;
}

.schedule-left-title,
.schedule-calendar-title,
.schedule-right-title,
.news-single-title,
.news-title {
  font-size: 1.2rem;
  margin-bottom: 1rem;
  color: #4a4a4a;
  font-weight: bold;
  border-left: 4px solid #4faf2d;
  padding-left: 0.5rem;
  font-family: "Zen Maru Gothic", sans-serif;
}

/* 親ラッパー：スクロール可能に */
.schedule-table-container {
  overflow-x: auto;
}

/* テーブル全体 */
.schedule-table {
  min-width: 300px;             /* 日曜まで収めるための最小幅を設定 */
  table-layout: fixed;          /* 均等割り */
  width: 100%;
  border-collapse: collapse;
  text-align: center;
  background: transparent;
  box-shadow: none;
}

/* ヘッダー */
.schedule-table thead th {
  background-color: #85c96d;
  color: #fff;
  padding: 0.6rem;
  font-size: 0.75rem;
  border: none;
}

/* 丸み処理 */
.schedule-table thead th:first-child {
  border-top-left-radius: 8px;
}
.schedule-table thead th:last-child {
  border-top-right-radius: 8px;
}

/* 行見出し（午前／午後） */
.schedule-table tbody th {
  color: #333;
  padding: 0.5rem 0.2rem;
  font-weight: normal;
  font-size: 0.75rem;
  white-space: nowrap;
  text-align: center;
  background: transparent;
  border: none;
  border-bottom: 1px solid #ccc;
  width: 22%; /* 少し広め */
}

/* 曜日セル（○△×） */
.schedule-table td {
  padding: 0.5rem 0.2rem;       /* 最小限の余白で読みやすさを担保 */
  font-size: 0.95rem;           /* 通常サイズに戻す */
  word-break: keep-all;
  background: transparent;
  border: none;
  border-bottom: 1px solid #ccc;
  width: calc(78% / 7);         /* 残り幅を7等分（日〜土） */
}

/* 記号マーク（大きめ・太め） */
.mark {
  font-size: 1.4rem;
  display: inline-block;
  line-height: 1;
}
.mark-ok { color: #2d7f2d; }
.mark-half { color: #e6a800; }
.mark-ng { color: #d32f2f; }

/* 注釈 */
.schedule-note {
  font-size: 0.8rem;
  color: #666;
  margin-top: 0.5rem;
  text-align: left;
}


/* 中央カレンダー */
.calendar-placeholder {
  /*border: 1px dashed #ccc;*/
  /*padding: 2rem;*/
  /*background-color: #fff;*/
  text-align: center;
  color: #999;
  font-size: 0.9rem;
  font-style: italic;
}

/* お知らせ一覧 */
.news-list {
  list-style: none;
  padding: 0;
  margin: 0;
  font-family: "Zen Maru Gothic", sans-serif;
  font-size: 1rem;
  color: #333;
  min-height: 140px;
}

.news-list li {
  margin-bottom: 0.7rem;
  margin-left: 1rem;
}

.news-date {
  display: inline-block;
  margin-right: 0.5rem;
  color: #999;
  font-size: 0.85rem;
  font-family: "Zen Kaku Gothic New", sans-serif;
}

.news-list a {
  text-decoration: none;
  color: inherit;
  font-weight: normal;
}

.news-list a:hover {
  text-decoration: none;
  color: inherit;
}

.news-more {
  text-align: right;
  margin-top: 1rem;
  margin-top: 5vh;
}

.news-more a {
  display: inline-block;
  padding: 0.5rem 1.2rem;
  background-color: #4faf2d;
  color: #fff;
  text-decoration: none;
  font-size: 0.9rem;
  border-radius: 9999px;
  transition: background-color 0.3s ease;
  font-family: "Zen Maru Gothic", sans-serif;
}

.news-more a:hover {
  background-color: #3cd115;
}

/* ーーーーーーーーーーーーーーーーーーーーー医院についてーーーーーーーーーーーーーーーーーーーーーーーーーーーー */

.about-section {
    /* background-color: #f9f9f9; */
    padding: 4vh 2vw;
}

.about-container {
    max-width: 1200px;
    margin: 0 auto;
    text-align: center;
}

/* タイトル */
.about-title {
    position: relative;
    text-align: center;
    font-size: 1.6rem;
    font-weight: bold;
    color: #333;
    font-family: "Zen Maru Gothic", sans-serif;
    margin-bottom: 5rem;
    padding-bottom: 0; /* マイナス値は無効なのでゼロに戻す */
}

/* タイトル下の装飾下線 */
.about-title::after {
    content: "";
    position: absolute;
    bottom: 10px; /* ← これでタイトルから下線までの距離を詰められる */
    left: 50%;
    transform: translateX(-50%);
    width: 620px;
    height: 1px;
    background-color: #4faf2d;
    border-radius: 1px;
}




.about-title-number {
    font-size: 6rem;
    color: #4faf2d;
}

/* ポイント一覧 */
.about-points {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1.2rem;
}
/* 初期状態（非表示＋下方向） */
.about-title,
.about-point {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

/* アニメーション表示時 */
.about-title.animate-in,
.about-point.animate-in {
    opacity: 1;
    transform: translateY(0);
}

/* 各ポイント全体 */
.about-point {
    flex: 1 1 min(300px, 100%);
    background-color: #fff;
    border: 1px solid #ccc;
    box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.2);
    padding: 1rem;
}

/* 内部レイアウト（左右分割） */
.about-point-inner {
    display: flex;
    align-items: center;
    gap: 1rem;
    font-family: "Zen Maru Gothic", sans-serif;
}

/* 左配置（デフォルト） */
.image-left .about-point-image {
    order: 0;

}
.image-left .about-point-textarea {
    order: 1;
}

/* 右配置 */
.image-right .about-point-image {
    order: 1;
}
.image-right .about-point-textarea {
    order: 0;
}

.about-point-image {
  width: 100px;
  height: 130px;
  overflow: hidden;
  border-radius: 8px;
  position: relative;
}

.about-point-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transform: scale(1.2); /* ★ 拡大倍率：1.0 = 等倍、1.2 = 20%拡大 */
  transition: transform 0.3s ease; /* ホバー時にふわっと拡大するなら */
}



/* テキスト側（タイトル + 本文） */
.about-point-textarea {
    flex: 1;
}

.about-point-title {
    font-size: 1.1rem;
    font-weight: bold;
    margin-bottom: 0.5rem;
    color: #258c0f;

}

.about-point-text {
    font-size: 0.95rem;
    color: #555;
    line-height: 1.5;
}



/* -----------------------フィロソフィー------------------------------------------------ */

/* 初期状態 */
.philosophy-animate {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}

/* 表示時 */
.philosophy-animate.visible {
  opacity: 1;
  transform: translateY(0);
}




/* アニメーションの初期状態と表示時 */
.philosophy-block {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}
.philosophy-block.visible {
  opacity: 1;
  transform: translateY(0);
}

/* セクション全体 */
.philosophy-section {
  background-color: #f9f9f9;
  padding: 4vh 2vw;
}

.philosophy-container {
  max-width: 1200px;
  margin: 0 auto;
  text-align: center;
}

/* セクションタイトル */
.philosophy-title {
  position: relative;
  text-align: center;
  font-size: 2rem;
  font-weight: bold;
  color: #333;
  font-family: "Zen Maru Gothic", sans-serif;
  margin: 0 auto 3rem auto;
  display: block;
  width: fit-content;
}

.philosophy-title::after {
  content: "";
  position: absolute;
  bottom: -10px;
  left: 50%;
  transform: translateX(-50%);
  width: 620px;
  height: 1px;
  background-color: #4faf2d;
  border-radius: 1px;
}

/* 左右並び */
.philosophy-content {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 2rem;
  flex-wrap: wrap;
}

.philosophy-box {
  flex: 1 1 48%;
  background-color: #fff;
  padding: 2rem;
  box-sizing: border-box;
  background-color: #ffffff;
  border: 1px solid #ccc;
  box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.1);
  border-radius: 8px;
}

/* 左側ポイントリスト */
/* .philosophy-left {
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
} */

/* .philosophy-point {
  border: 1px solid #ccc;
  box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.2);
  padding: 1rem;
  background-color: #fff;
  font-size: 1rem;
  color: #333;
  border-radius: 4px;
  font-family: "Zen Maru Gothic", sans-serif;
} */

/* 右側：診療方針 */
.philosophy-right {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1rem;
  background-color: #ffffff;
  border: 1px solid #ccc;
  box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.1);
  border-radius: 8px;
}

/* タイトル・サブタイトル・説明 */
.philosophy-subtitle {
  font-size: 1.4rem;
  font-weight: bold;
  color: #333;
  font-family: "Zen Maru Gothic", sans-serif;
  margin: 0;
}

.philosophy-subheading {
  font-size: 1rem;
  color: #666;
  font-family: "Zen Maru Gothic", sans-serif;
  margin: 0;
}

.philosophy-description {
  font-size: 0.95rem;
  line-height: 1.6;
  color: #555;
  margin: 0;
}

/* 横並び3つのコマ */
.philosophy-three-boxes {
  display: flex;
  gap: 1rem;
  margin-bottom: 1.5rem;
  flex-wrap: nowrap;
  justify-content: space-between;
}

.philosophy-box-item {
  flex: 1 1 30%;
  background-color: #ffffff;
  border: 1px solid #ccc;
  box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.1);
  padding: 1rem;
  text-align: center;
  border-radius: 6px;
  font-family: "Zen Maru Gothic", sans-serif;
  font-size: 0.95rem;
  color: #333;
}

/* PDFボタン */
.philosophy-download-btn {
  display: inline-block;
  align-self: flex-start;
  background: #4faf2d;
  color: #fff;
  padding: 0.6rem 1.2rem;
  border-radius: 50px;
  font-size: 0.9rem;
  font-weight: bold;
  text-decoration: none;
  transition: background-color 0.3s ease;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.philosophy-download-btn:hover {
  background: #3b9422;
}

.pconly{display:block;}	
@media screen and (max-width: 768px) {
.philosophy-three-boxes {
  display: contents;
  gap: 1rem;
  margin-bottom: 1.5rem;
}
.pconly{display:none;}	

.philosophy-download-btn {
    align-self: anchor-center;
    margin: 20px 0;
}	
	
}

/* -----------------------------院長挨拶----------------------------------------------- */

/* 院長挨拶セクション全体 */
.greeting-section {
  background: linear-gradient(135deg, #e6f7e6 0%, #ffffff 70%);
  padding: 4vh 2vw;
}


.greeting-container {
  max-width: 1500px;
  margin: 0 auto;
}

.greeting-inner {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 2rem;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 2vw;
}

/* 親：縦書き見出し */
.greeting-title {
  writing-mode: vertical-rl;
  text-orientation: upright;
  font-weight: bold;
  font-family: "Zen Maru Gothic", sans-serif;
  color: #333;
  display: inline-block;
  padding: 0 1rem;
  line-height: 1.2;
}

/* 日本語「院長挨拶」 */
.greeting-title .greeting-jp {
  font-size: 2rem;
  background-color: #64c951;
  padding: 0.5rem 0.1rem;
  border-radius: 4px;
  margin-bottom: 0.3rem;
}

/* 英語「Message」 */
.greeting-title .greeting-en {
  font-size: 2.5rem;
  padding: 0.5rem 0.1rem;
  border-radius: 3px;
  margin-left: 0.2rem;
  color: #83d62f;
  font-family: "Zen Maru Gothic", sans-serif;
  writing-mode: vertical-rl;
  text-orientation: sideways;
}

/* 内容ブロック（画像とメッセージ） */
.greeting-content {
  display: flex;
  flex-direction: row;
  gap: 2rem;
  align-items: center;
  flex: 1;
  margin-left: auto;
  max-width: 100%; /* ← 幅制限を解除 */
  justify-content: flex-end;
}

/* 写真 */
.greeting-photo {
  width: auto;
  max-width: 500px;
  height: auto;
  overflow: visible;
}

.greeting-photo img {
  width: 100%;
  height: auto;
  object-fit: contain;
  object-position: top;
  display: block;
  border-radius: 0;
  box-shadow: none;
}

/* メッセージエリア */
.greeting-message {
  max-width: 700px;

}

/* 挨拶タイトル */
.director-name {
  font-size: 2rem;
  font-weight: bold;
  margin-bottom: 0.5rem;
  color: #333;
  line-height: 1;
  text-align: justify;
}

/* あいさつ文 */
.director-text {
  font-size: 0.9rem;
  color: #555;
  line-height: 1.7;
  text-align: justify;
  margin-top: 5vh;


}

/* 院長名（文末右寄せ） */
.director-sign {
  text-align: right;
  font-size: 1rem;
  font-weight: bold;
  margin-top: 1rem;
  color: #333;
}




/* ---------------------------------診療項目---------------------------------------------- */



/* 最初は非表示で下に少しズレる */
.fade-in-up {
  opacity: 0;
  transform: translateY(40px); /* ← もっとゆるく浮かび上がる感 */
  transition: opacity 1.2s cubic-bezier(0.25, 1, 0.5, 1),
              transform 1.2s cubic-bezier(0.25, 1, 0.5, 1);
}

/* 表示時にふわっと自然に */
.fade-in-up.visible {
  opacity: 1;
  transform: translateY(0);
}




.services-section {
  background-image: url("images/den-6.webp"); /* ← 適切な画像パスに変更 */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  padding: 4vh 2vw;
  position: relative;
}

/* ---------------------------------------------------------------マスク処理用 */

.services-section::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(143, 227, 126, 0.1); /* 白っぽいベール（必要に応じて調整） */
  z-index: 0;
}

.services-container {
  position: relative;
  z-index: 1;
  text-align: center;
}



.services-container {
  max-width: 1200px;
  margin: 0 auto;
font-family: "Zen Maru Gothic", sans-serif;
}

.services-title {
  position: relative;
  font-size: 2rem;
  font-weight: bold;
  color: #333;
  font-family: "Zen Maru Gothic", sans-serif;
  margin: 0 auto 2.5rem auto; /* 上下margin＋中央配置 */
  text-align: center;
  display: block;
  width: fit-content; /* コンテンツの幅に合わせる */
}

.services-title::after {
  content: "";
  position: absolute;
  bottom: -0.6rem; /* 下線の位置調整 */
  left: 50%;
  transform: translateX(-50%);
  width: 140%; /* タイトルよりやや長め */
  height: 1px;
  background-color: #4faf2d;
  border-radius: 1px;
}



.services-description {
  text-align: center;
  font-size: 1rem;
  color: #666;
  margin-bottom: 3rem;
  font-family: "Zen Maru Gothic", sans-serif;
}

.services-items {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.5rem;
}

.service-item {
  flex: 1 1 min(240px, 100%);
  max-width: 280px;
  background-color: #fff;
  border: 1px solid #ccc;
  box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.1);
  text-align: center;
  padding: 1rem;
  transition: transform 0.3s ease;
}

.service-item:hover {
  transform: translateY(-5px);
}

.service-icon img {
  width: 80px;
  height: 80px;
  object-fit: contain;
  margin-bottom: 1rem;
}

.service-title {
  font-size: 1rem;
  font-weight: bold;
  color: #333;
}

/* ------------------------------アクセス-------------------------------------------------- */

/* セクション全体 */
.access-section {
  background-color: #f9f9f9;
  padding: 4vh 2vw;
}

/* コンテナ中央寄せ */
.access-container {
  max-width: 1200px;
  margin: 0 auto;
  text-align: center;
}

/* セクションタイトル */
.access-title {
  position: relative;
  text-align: center;
  font-size: 2rem;
  font-weight: bold;
  color: #333;
  font-family: "Zen Maru Gothic", sans-serif;
  margin: 0 auto 3rem auto;
  display: block;
  width: fit-content;
}

.access-title::after {
  content: "";
  position: absolute;
  bottom: -10px;
  left: 50%;
  transform: translateX(-50%);
  width: 620px;
  height: 1px;
  background-color: #4faf2d;
  border-radius: 1px;
}

/* 親：横並び */
.access-flex {
  display: flex;
  gap: 2rem;
  flex-wrap: wrap;
}

.access-map-box {
  flex: 0 0 70%;
  aspect-ratio: 4 / 3;       /* 比率キープ（PCでも崩れにくい） */
  min-height: 300px;
  max-height: 450px;         /* 高さ制限でPC表示バランス調整 */
  background-color: #ccc;
  border-radius: 8px;
  overflow: hidden;
  position: relative;
}

.access-map-box iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}



/* 右：住所情報側 */
.access-info-box {
  flex: 1;
  display: flex;
  align-items: center;
}
.access-table {
  width: 100%;
  border-collapse: collapse;
  font-family: "Zen Maru Gothic", sans-serif;
  font-size: 0.95rem;
  color: #333;
}

.access-table th,
.access-table td {
  padding: 0.6rem 0.8rem;
  vertical-align: top;
  text-align: left;
  border-bottom: 1px solid #ccc; /* ← この行が「間の罫線」 */
}

.access-table th {
  width: 5em;
  font-weight: bold;
  color: #555;
}

/* ----------------------------------------------------------リクルート */

/* ------------------------- 採用情報セクション ------------------------- */

.recruit-section {
  background: linear-gradient(to right, #f5fff5, #f0f8ff); /* 薄緑→薄青のグラデ */
  padding: 4vh 2vw;
  font-family: "Zen Maru Gothic", sans-serif;
}

.recruit-container {
  max-width: 1280px;
  margin: 0 auto;
  text-align: center;
}

.recruit-title {
  font-size: 2rem;
  color: #2e5e2e;
  margin-bottom: 1rem;
}

.recruit-title {
  position: relative;
  display: inline-block;
  margin: 0 auto 2.5rem auto;
}

.recruit-title::after {
  content: "";
  position: absolute;
  bottom: -10px;
  left: 50%;
  transform: translateX(-50%);
  width: 620px;
  height: 1px;
  background-color: #4faf2d;
  border-radius: 1px;
}


.recruit-description {
  font-size: 1rem;
  color: #555;
  line-height: 1.6;
  margin-bottom: 2rem;
}

.recruit-boxes {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 2rem;
  margin-bottom: 2rem;
}

.recruit-box {
  background-color: #ffffff;
  border: 1px solid #cde4cd;
  border-radius: 12px;
  padding: 1.5rem;
  width: 280px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
}

.recruit-box h3 {
  font-size: 1.2rem;
  color: #4caf50;
  margin-bottom: 0.5rem;
}

.recruit-box p {
  font-size: 0.9rem;
  color: #444;
  margin: 0.2rem 0;
}

.recruit-cta {
  margin-top: 1rem;
}

.recruit-contact-btn {
  display: inline-block;
  background-color: #4caf50;
  color: #fff;
  font-size: 1rem;
  padding: 0.8rem 2rem;
  border-radius: 30px;
  text-decoration: none;
  transition: background-color 0.3s ease;
}

.recruit-contact-btn:hover {
  background-color: #388e3c;
}






/* -------------------------フッター----------------------- */

.site-footer {
  background: linear-gradient(
    to right bottom,          /* 左上から右下方向 */
    #cafaca 0%,               /* 薄いグリーン（開始） */
    #e7f0f5 100%              /* 薄いブルー（終了） */
  );
  padding: 4vh 2vw 2vh;
  font-family: "Zen Maru Gothic", sans-serif;
  color: #333;
  font-size: 0.9rem;
}


.footer-container {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  max-width: 1200px;
  margin: 0 auto;
  gap: 2rem;
  flex-wrap: wrap;
}

.footer-box {
  box-sizing: border-box;
}

.footer-col-2 {
  flex: 2;
}
.footer-col-4 {
  flex: 4;
}

/* 左ロゴ・テキスト縦並び */
.footer-logo-area {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.footer-logo {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
}

.footer-logo img {
  width: 100px;
  max-height: 100px;
  height: auto;
  display: block;
}

.footer-copy1 {
  font-size: 0.75rem;
  color: #666;
  margin: 0;
}
.footer-copy2 {
  font-size: 0.8rem;
  color: #4caf50;
  margin: 0;
}
.footer-clinic-name {
  font-size: 1.3rem;
  font-weight: bold;
  color: #4caf50;
  margin-top: 0rem;
}

/* 中央テーブル */
.footer-heading {
  font-size: 1rem;
  font-weight: bold;
  margin-bottom: 0.3rem;
}

.footer-schedule {
  width: 100%;
  border-collapse: collapse;
  margin-top: 0.5rem;
  font-size: 0.85rem;
  color: #333;
}

.footer-schedule thead th {
  background-color: #e7f1e7;
  color: #2e5e2e;
  font-weight: normal;
  padding: 0.4rem 0.6rem;
  border-bottom: 1px solid #c0d7c0;
}

.footer-schedule tbody th {
  background-color: #f7f7f7;
  color: #444;
  font-weight: normal;
  padding: 0.4rem 0.6rem;
  border-bottom: 1px solid #eee;
  text-align: center;
}

.footer-schedule td {
  padding: 0.4rem 0.6rem;
  text-align: center;
  border-bottom: 1px solid #eee;
}

.symbol-ok {
  color: #4caf50;
  font-weight: bold;
}
.symbol-partial {
  color: #ff9800;
  font-weight: bold;
}
.symbol-ng {
  color: #d32f2f;
  font-weight: bold;
}

.footer-note {
  font-size: 0.75rem;
  color: #666;
  margin-top: 0.3rem;
}

/* グローバルナビ */
.footer-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
  padding: 0;
  list-style: none;
}

.footer-nav li {
  flex: 1 1 40%;
  font-size: 0.8rem;
}

.footer-nav a {
  text-decoration: none;
  color: #333;
  transition: color 0.2s;
}
.footer-nav a:hover {
  color: #4caf50;
}

/* 住所・電話 */
.footer-info {
  margin-top: 1.5rem;
  display: flex;
  flex-direction: column;
  align-items: flex-end;

}

.footer-address p {
  margin: 0;
  font-size: 1rem;
  color: #333;
  text-align: right;
}

.footer-divider {
  width: 80%;
  height: 1px;
  background: linear-gradient(to right, #ccc, transparent);
  margin: 0.3rem 0;
}


.footer-phone {
  display: flex;
  align-items: center;
  gap:0rem;
  justify-content: flex-end;
}
.header-phone a,
.footer-phone a {
    color: #4caf50;
    text-decoration: none;
}
.footer-phone img {
  width: 50px;
  height: auto;
  margin-top: -2vh;
}

.footer-phone p {
  margin: 0;
  font-size: 1.6rem;
  font-weight: bold;
  color: #4caf50;
  margin-top: -2vh;
}

/* コピーライト */
.footer-bottom {
  text-align: center;
  padding-top: 1rem;
  font-size: 0.75rem;
  color: #666;
  border-top: 1px solid #ccc;
  margin-top: 2rem;
}


/* --------------------スムース---------------------------------- */
html {
  scroll-behavior: smooth;
}


/* --------------------カレンダー---------------------------------- */






.xo-event-calendar {
  font-family: "Zen Maru Gothic", sans-serif;
  border-collapse: collapse;
  width: 100%;
  /*margin-top: 1rem;*/
}

.xo-event-calendar table.xo-month .month-header {
    display: flex;
    flex-flow: wrap;
    justify-content: center;
    margin: 0;
    background: #85c96d;
    padding: 2px;
    border-radius: 6px 6px 0 0;
}


.xo-event-calendar table.xo-month button span.nav-prev {
    border-bottom: 2px solid #ffffff;
    border-left: 2px solid #ffffff;
    display: inline-block;
    font-size: 0;
    height: 13px;
    transform: rotate(45deg);
    width: 13px;
}

.xo-event-calendar table.xo-month button span.nav-next {
    border-right: 2px solid #ffffff;
    border-top: 2px solid #ffffff;
    display: inline-block;
    font-size: 0;
    height: 13px;
    transform: rotate(45deg);
    width: 13px;
}
.xo-event-calendar table caption, .xo-event-calendar table tbody, .xo-event-calendar table td, .xo-event-calendar table tfoot, .xo-event-calendar table th, .xo-event-calendar table thead, .xo-event-calendar table tr {
    font-style:normal;
    font-size:9px;
}
.xo-event-calendar table.xo-month .month-dayname td div {
    border-width: 1px 1px 0 0;
    font-size: 100%;
    font-style:normal;
    height: 1000px;
    line-height: 1.2em;
    padding: 4px;
    text-align: center;
}










.calendar-caption {
    color: #fff;
    font-style: normal;
    font-size: 16px;
    letter-spacing: 2px;
    padding: 4px 0;
}
.xo-event-calendar th,
.xo-event-calendar td {
  padding: 0.5rem;
  border: 1px solid #e0e0e0;
  text-align: center;
}

.xo-event-calendar caption {
  font-size: 1.3rem;
  color: #0a9248;
  font-weight: bold;
  margin-bottom: 1rem;
}

.calendar-description {
  margin-top:0;
  font-size: 0.8rem;
  color: #666;
  line-height: 1.5;
}










@media screen and (max-width: 768px) {

.mw_wp_form .horizontal-item + 
.horizontal-item {
    margin-left: 0 !important;
}
.mw_wp_form .horizontal-item + 
.horizontal-item {margin-left: 0 !important;}

.mw_wp_form .horizontal-item {
  display: block;
  margin: 0 0 0.5em 0;
  padding-left: 1rem;
}

.mw_wp_form .horizontal-item label {
  display: flex;
  align-items: center;
}

.mw_wp_form .horizontal-item input[type="radio"] {
  margin-right: 0.5em;
}



}



























/* ============================ レスポンシブ調整（768px以下） ============================ */

@media screen and (max-width: 768px) {

  /* ナビゲーション */
  .nav-container ul {
    flex-wrap: wrap;
    justify-content: center;
  }

  .nav-container ul li {
    width: 33%;
    height: auto;
    padding: 0.5rem;
  }

  .nav-icon {
    width: 30px;
    height: 30px;
  }

  .nav-container ul li a {
    font-size: 0.9rem;
  }

  ruby rt {
    font-size: 0.6rem;
    padding: 0.3vw;
  }

@media screen and (max-width: 768px) {
    .header-top {
      display:block;
      flex-direction: row;
      justify-content: space-between;
      align-items: center;
      flex-wrap: nowrap;
      padding: 0.5rem 1rem;
      box-shadow:1px 1px 20px #ccc;
    }

    /* 左エリア（ロゴ＋医院名） */
    .header-left {
      display: flex;
      justify-content: space-between;
      flex-direction: row;
      align-items: center;
      flex: 1;
    }

    .logo img {
      max-width: 80px;
      height: auto;
    }

    .header-text {
      display: flex;
      flex-direction: column;
      justify-content: center;
      margin-left: 0.6rem;
    }

    .sub-copy2 {
      display: none;
    }

    .sub-copy {
      font-size: 0.75rem;
      color: #258c0f;
      line-height: 1.2;
    }

    .company-name {
      font-size: 1rem;
      font-weight: bold;
      color: #258c0f;
      line-height: 1.2;
    }

    .company-name p {
      font-size: 1rem;
      margin: 0;
    }

    /* 右エリア（電話番号を大きく取る） */
    .header-right {
      display: none;
      justify-content: flex-end;
      align-items: center;
      flex: 2.2; /* ← 幅を広くとる */
    }

    .header-address,
    .header-access {
      display: none;
    }

    .header-phone {
      display: flex;
      align-items: center;
      font-size: 1.6rem; /* 少し大きく */
    }

    .header-phone img {
      width: 35px;
      margin-right: -0.5rem;
    }

    .header-phone p {
      font-size: 2rem;
      font-weight: bold;
      margin-left: 0.2rem;
      padding: -1rem 0; /* 上下に余白を少し */
      border-top: 1px solid #4caf50;   /* 上線 */
      border-bottom: 1px solid #4caf50; /* 下線 */
      border-left: none;
      border-right: none;
    }
}


@media screen and (max-width: 768px) {
    .header-top {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      z-index: 1000;
      background-color: #ffffff;
      padding: 0.5rem 1rem;
    }

    /* 固定分の余白を下に確保 */
    body {
      padding-top: 100px; /* ヘッダーの高さに応じて調整（必要なら90〜110pxで微調整） */
    }
  }


@media screen and (max-width: 768px) {
    /* 親を縦並びに */
    .greeting-inner {
      flex-direction: column;
      align-items: center;
    }

    /* タイトルを先頭に表示 */
    .greeting-title {
      order: -1;
      writing-mode: horizontal-tb;
      text-orientation: mixed;
      font-size: 1.4rem;
      text-align: center;
      margin-bottom: 1rem;
    }

    .greeting-title .greeting-jp {
      background: none;
      font-size: 1.6rem;
      color: #258c0f;
    }

    .greeting-title .greeting-en {
      writing-mode: horizontal-tb;
      font-size: 1.1rem;
      color: #64c951;
      margin-left: 0.5rem;
    }

    /* 画像非表示 */
    .greeting-photo {
      display: none;
    }

    /* メッセージ全体 */
    .greeting-message {
      text-align: center;
      display: flex;
      flex-direction: column;
      align-items: center;
    }

    /* 挨拶文 */
    .director-text {
      font-size: 0.9rem;
      line-height: 1.6;
      margin-bottom: 1rem;
    }

    /* 院長署名（任意） */
    .director-sign {
      font-size: 0.9rem;
      text-align: center;
    }
  }






  /* ヒーローエリア */
  .hero {
    position: relative;
    width: 100%;
    height: 60vh; /* ← ここが高さを決めているプロパティ */
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;

  }



  .hero-img-1,
  .hero-img-2,
  .hero-img-3,
  .hero-img-4 {
    width: 50%;
  }

  .hero-img-1 {
    top: 10%;
    left: -5%;
  }

  .hero-img-2 {
    top: 30%;
    right: -5%;
  }

  .hero-img-3 {
    bottom: 20%;
    left: 10%;
  }

  .hero-img-4 {
    bottom: -5%;
    right: 5%;
  }

  /* スケジュールセクション */
  .schedule-content {
    flex-direction: column;
  }

  .schedule-left,
  .schedule-right {
    min-width: 100%;
  }

  .schedule-title {
    font-size: 1.4rem;
  }

  /* 診療項目 */
  .service-item {
    max-width: 100%;
  }

  .services-items {
    gap: 1rem;
  }

  /* .services-title {
    font-size: 1.6rem;
  } */

  /* 採用情報 */
  .recruit-title {
    font-size: 1.6rem;
  }

  .recruit-contact-btn {
    font-size: 0.9rem;
    padding: 0.6rem 1.5rem;
  }

  /* アクセス */
  .access-flex {
    flex-direction: column;
  }

  .access-map-box {
    flex: 1 1 100%;
    aspect-ratio: 4 / 3;
    min-height: 250px;
  }

  .access-info-box {
    flex: 1 1 100%;
    justify-content: center;
    text-align: left;
    padding-top: 2vh;
  }

  @media screen and (max-width: 768px) {

  /* フッター全体：縦並び */
  .footer-container {
    flex-direction: column;
    text-align: center;
    align-items: center;
    gap: 2rem;
  }

  /* 各列を全幅表示 */
  .footer-box {
    flex: 1 1 100%;
    width: 100%;
  }

  /* ロゴ周り中央揃え */
  .footer-logo-area,
  .footer-logo {
    align-items: center;
    justify-content: center;
    text-align: center;
  }

  .footer-logo img {
    width: 80px;
  }

  .footer-copy1,
  .footer-copy2,
  .footer-clinic-name {
    font-size: 0.8rem;
  }

  .footer-clinic-name {
    font-size: 1.2rem;
    margin-top: 0.3rem;
  }

  /* スケジュールテーブル */
  .footer-schedule {
    font-size: 0.75rem;
    border: 1px solid #ccc;
    border-collapse: collapse;
  }
  }

  .footer-schedule thead th,
  .footer-schedule tbody th,
  .footer-schedule td {
    border-bottom: 1px solid #ccc;
    font-size: 0.75rem;
    padding: 0.3rem 0.4rem;
  }

  /* セクション見出し */
  .footer-heading {
    font-size: 0.9rem;
     display: none;
  }

  /* グローバルナビ */
  .footer-nav {
     display: none;
  }

  .footer-nav li {
    flex: 1 1 45%;
    text-align: center;
    margin-bottom: 0.3rem;
  }

  /* 住所・電話 */
  .footer-info {
    align-items: center;
  }

  .footer-address p {
    font-size: 0.9rem;
    text-align: center;
  }

  .footer-phone {
    justify-content: center;
  }

  .footer-phone img {
    width: 30px;
  }

  .footer-phone p {
    font-size: 1.3rem;
    border-top: 1px solid #4caf50;
    border-bottom: 1px solid #4caf50;
    padding: 0.4rem 0; /* 上下の余白も調整 */
  }

  /* コピーライト */
  .footer-bottom {
    font-size: 0.7rem;
    margin-top: 2rem;
    text-align: center;
  }
}

@media screen and (max-width: 768px) {
  .hero-title {
    font-size: 6vw;
    text-align: left;
  }
}


@media screen and (max-width: 768px) {
  /* 診療時間エリア専用のモバイル調整 */

  .schedule-left {
    width: 100%;
  }

  .schedule-left-title {
    font-size: 1rem;
    padding-left: 0.5rem;
    margin-bottom: 0.8rem;
  }

  .schedule-table-container {
    overflow-x: auto;
  }

  .schedule-table {
    min-width: 600px; /* モバイル時にスクロール可能な最大幅 */
    table-layout: fixed;       /* 各セルの幅を均等に */
    border-collapse: collapse;
  }

  .schedule-table thead th,
  .schedule-table tbody th,
  .schedule-table td {
    padding: 0.6rem;
    font-size: 0.6rem;
    white-space: nowrap;
    text-align: center;
  }

  /* 各列均等化 */
  .schedule-table th,
  .schedule-table td {
    width: 12.5%; /* 8列（曜日7+見出し1）で割り切る */
  }

  .schedule-table tbody th {
    width: 25%; /* 行見出し（午前/午後）列だけ少し広めに */
  }

  .schedule-note {
    font-size: 0.65rem;
    margin-top: 0.2rem;
  }

  .mark {
    font-size: 1.4rem;
  }
}


@media screen and (max-width: 768px) {
  .about-title,
  .philosophy-title,
  .services-title,
  .recruit-title,
  .access-title {
    font-size: 2rem;
    line-height: 1.5;
    padding: 0 1rem;
    position: relative;
    margin: 0 auto 2rem auto;
    display: inline-block;
    word-break: keep-all;
  }

  .about-title::after,
  .philosophy-title::after,
  .services-title::after,
  .recruit-title::after,
  .access-title::after {
    content: "";
    position: absolute;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    height: 1px;
    background-color: #4faf2d;
    border-radius: 1px;
  }

  .about-title-number {
    font-size: 5rem;
    color: #4faf2d;
    margin: 0 0.2rem;
  }

  .sp-br::after {
    content: "\A";
    white-space: pre;
  }
}

/*------*/
.recruit_contact{
    font-family: "Zen Maru Gothic", sans-serif;
    max-width: 1280px;
    margin:auto;
}

.contact-contentinr{
    width:80%;
    margin:auto;
    }
    
.form_inr{text-align:center;}
.sps h1{
    text-align:center;
    padding:5% 0 0;
    margin-bottom: 5%;
    position:relative;
    }
.sps h1::after {
    content: "";
    position: absolute;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
    width: 20%;
    height: 1px;
    background-color: #4faf2d;
    border-radius:1px;
  }
    
.contact_form {
    width: 70%;
    margin: 2% auto 0;
    border-collapse: collapse;
}
.contact_form tr {
    border: 1px solid #90907f85;
}
.contact_form th {
    width: 100%;
    vertical-align: middle;
    text-align: left;
    padding: 2%;
    background:#d8f5de;
}

.contact_form td {
    padding: 2%;
    color: rgb(111, 110, 106);
    font-family:  "Zen Maru Gothic", sans-serif;
    box-sizing: border-box;
    word-break: break-all;
    word-wrap: break-word;
    justify-content: space-around;
    display: flex;
}
.text_area {
    width: 96%;
    padding: 2%;
    margin: 0;
    border: 1px solid #ccc;
    border-radius: 0;
    font-size: 16px;
}
.check {
    color: red;
}

.form_btn {
    margin: 100px auto;
    width: 20%;
    background: #4caf50;
    padding: 2%;
    display: block;
    text-align: center;
}
.button {
    font-family: "Zen Maru Gothic", sans-serif;
    background: none;
    color: #fff;
    border: none;
    font-size: 16px;
}

.form_inr {
    width: 96%;
    margin: 2% auto 0;
    border-collapse: collapse;
}  
.contact_form {
    width:96%;
}
.contact_form tr {
    display: grid;
} 
  

.text_area {
    width: 100%;
} 
.form_btn {
    width: 60%;
}


@media screen and (max-width: 768px) {
.contact-contentinr{
    font-family: "Zen Maru Gothic", sans-serif;
    width:96%;
    margin:auto;
    }
    .sps h1::after {
     content: "";
     position: absolute;
     bottom: -10px;
     left: 50%;
     transform: translateX(-50%);
     width:50%;
     height: 1px;
     background-color: #4faf2d;
     border-radius:   1px;
   }
   .sps h1 {
    text-align: center;
    padding: 5% 0 0;
    margin-bottom: 8%;
    position: relative;
  }
  .contact_form td {
    padding: 2%;
    color: rgb(111, 110, 106);
    font-family:  "Zen Maru Gothic", sans-serif;
    box-sizing: border-box;
    word-break: break-all;
    word-wrap: break-word;
    display: contents;
}
}
  
  
/*----single--*/
.news-header-image {
  width: 100%;
  max-height: 60vh;
  overflow: hidden;
}

.news-header-image img {
  width: 100%;
  height: auto;
  object-fit: cover;
  display: block;
}

.news-article a{
  text-decoration: none;
  color: #333;
  font-size: 1rem;
  transition: all 0.2s ease;
}
.news-single,
.news-archive{
  width: 80%;
  margin: auto;
  padding: 5%;
  font-family: "Zen Maru Gothic", sans-serif;
}
.news-navigation {
  display: flex;
  justify-content: space-between;
  margin: 2rem 0;
  border-top: 1px solid #ccc;
}

.news-navigation .news-prev,
.news-navigation .news-next {
  font-size: 0.95rem;
}

.news-back {
  text-align: center;
  margin-top: 3rem;
}

/*----archive--*/
  
.news-list-archive{
  list-style: none;
  padding: 0;
  margin: 0;
  font-family: "Zen Maru Gothic", sans-serif;
  font-size: 1rem;
  color: #333;
}
.news-list-archive li {
  margin-bottom: 0rem;
  margin-left: 0rem;
  margin-top: 4rem;
  border-bottom: 1px dotted #ccc;
  padding: 0 0 1rem 0;
}
.news-list-archive li a {
  text-decoration: none;
  color: #333;
  font-size: 1rem;
  transition: all 0.2s ease;
}
  
  




@media screen and (max-width: 768px) {
.news-single, .news-archive {
    width: 90%;
    margin: auto;
    padding: 10% 0;
    font-family: "Zen Maru Gothic", sans-serif;
}
}






  
  
  
/*----calender--*/

.xo-event-calendar table.xo-month .month-event-title {
    color: #fff !important;
    font-weight: bold;
    background-color: #85c96d !important;
    border-radius: 50%;
    display: block;
    font-size: 1em;
    margin: -10px auto 4px;
    overflow: hidden;
    padding: 6%;
    text-align: center;
    white-space: nowrap;
    position: relative;
    text-decoration: none;
    border-bottom: none;
    width: 40%;
}
.holiday-titles {
    display: flex;
    justify-content: start;
}
.holiday-title {
    font-style:normal;
    font-size: 0.8rem;
}
.xo-event-calendar td.today {
  background-color: #ffecb3 !important; /* 明るい黄色 */
  border: 2px solid #ff9800;            /* オレンジの枠線 */
  font-weight: bold;                    /* 太字にする */
  color: #000 !important;               /* 文字色は黒 */
}
.xo-event-calendar p.holiday-title {
    font-size: 90%;
    margin: 0 20px 0 0px;
    padding: 2px 0;
    vertical-align: middle;
}