/*
Theme Name: sawayaka dentist
Theme URI: https://www.sejuku.net/
Description: さわやか歯科のウェブサイト
Version: 1.0.0
Author: AKIHIRO SHINOHARA
Author URI: https://www.sejuku.net/
*/
body{
  font-family: "Noto Sans JP", sans-serif;
  font-optical-sizing: auto;
  font-style: normal;
  max-width: 1080px;
  margin: 0 auto 0 auto;
}

.logo{
  width: 200px;
  height: auto;
}

/* ヘッダー */
header {
  display: flex;
  justify-content: space-between;
  align-items: center; /* 縦方向の中央揃えを追加 */
  position: relative;  /* ★これが必要です（ハンバーガーアイコンの配置基準にするため） */
  padding: 15px 0;     /* 余白の調整 */
}

/* PC表示時：スマホ用ナビを非表示 */
.nav-sp {
  display: none;
}

/* ナビゲーションのレイアウト */
 .nav-pc {
   font-size: 16px;
 }
 
 .nav-pc ul {
   display: flex;
   padding-left: 0;
 }
 
 .nav-pc li {
   list-style: none;
 }
 
 /* ナビゲーションのリンクの装飾設定 */
 .nav-pc a {
   text-decoration: none;
   margin-left: 20px;
   color: #0d0d0d;
 }
 
 .nav-pc a:hover {
   text-decoration: underline;
   color: #56B7EC;
 }

/* メインビジュアル*/
.main-visual {
  height: 700px;
  margin-top: 20px;
}
/* メインビジュアル内の画像設定 */
.main-visual img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* 縦横比を崩さず枠いっぱいに綺麗にトリミング表示 */
  object-position: center; /* 画像の中央を中心に表示 */
}

/* コンセプト */
.concept{
  margin: 100px auto 100px auto;
}

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

.col-left{
  width: 50%;
}

.col-right{
  width: 50%;
}

.concept-flex img{
  width: 100%;
  height: auto;
  display: block;
}

.tit_01{
  font-size: 30px;
  text-align: center;
  margin: 40px 0 0 0;
}

.tit_01 span{
  display: block;
  font-size: 14px;
  color: #56B7EC;
  margin-top: 10px;
  margin-bottom: 40px;
}

.tit{
  font-size: 28px;
  text-align: center;
}

.tex{
  font-size: 16px;
}

.col-right .tex{
  line-height: 1.8;
}

.btn{
  text-align: center;
  margin-top: 40px;
}

.btn a{
  display: inline-block;
  width: 280px;
  padding: 16px 0;
  background-color: #56B7EC;
  color: #ffffff;
  text-decoration: none;
  font-size: 16px;
  font-weight: bold;
  border-radius: 2px;
  transition: opacity 0.3s;
}

.btn a:hover{
  opacity: 0.8;
}
/* 院長あいさつセクション全体 */
.message {
  margin: 100px auto 100px auto;
}

.message-block {
  text-align: center;
}

/* 院長画像 */
.message-block img {
  width: 100%;
  max-width: 480px; 
  height: auto;
  margin: 0 auto 30px auto;
  display: block;
}

/* 院長名 */
.doc_name {
  font-size: 22px;
  font-weight: bold;
  line-height: 1.5;
  margin-bottom: 40px; 
}

/* あいさつ本文 */
.message-block .tex {
  text-align: left; 
  line-height: 1.8; 
}

/* 診療内容（SERVICE）セクション */
.service {
  margin: 100px auto 100px auto;
}

/* 左右2列のFlexコンテナ */
.service-flex {
  display: flex;
  justify-content: space-between;
  gap: 80px; /* 左右のカード間の余白 */
}

/* 左右の列の幅 */
.service-left,
.service-right {
  width: 50%;
}

/* 各カードのブロック */
.service-left_01,
.service-left_02,
.service-right_01,
.service-right_02 {
  margin-bottom: 50px; /* 上下のカード間の余白 */
}

/* 診療内容の画像 */
.service-flex img {
  width: 100%;
  height: 400px; /* 画像の高さを統一 */
  object-fit: cover; /* 画像の縦横比を保ってトリミング */
  display: block;
}

/* 診療名（一般歯科、小児歯科など） */
.tit_02 {
  font-size: 20px;
  font-weight: bold;
  text-align: center;
  margin: 20px 0 12px 0;
}

/* 説明テキスト */
.service-flex .tex {
  line-height: 1.7;
}

/* 予約セクション全体 */
.appointment {
  margin: 100px auto 100px auto;
  text-align: center;
}

.tel-text {
  font-size: 18px;
  margin-bottom: 10px;
}

.tel-num {
  font-size: 28px;
  font-weight: bold;
  margin-bottom: 30px;
}

/* テーブルスタイル */
.schedule-table {
  width: 100%;
  max-width: 800px; /* テーブルの最大幅 */
  margin: 0 auto;
  border-collapse: collapse; /* 枠線の重複を解消 */
  border: 1px solid #333; /* 外枠線 */
}

.schedule-table th,
.schedule-table td {
  border: 1px solid #333; /* マス目の枠線 */
  padding: 15px 10px; /* マス内の余白 */
  text-align: center;
  font-size: 16px;
}

.schedule-table th {
  font-weight: normal;
}

/* 最終受付の注意書き */
.table-note {
  max-width: 800px;
  margin: 15px auto 0 auto;
  text-align: left;
  font-size: 14px;
}

.table-note span {
  margin-right: 30px; /* 右側に30pxの余白を作る */
}

.table-note span:last-child {
  margin-right: 0; /* 一番右の要素の余白は消す */
}

/* ブログ全体のレイアウト */
.blog-flex {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 40px;
}

.blog-flex-left,
.blog-flex-right {
  flex: 1;
}

.blog-flex-right img {
  width: 100%;
  height: auto;
}

/* 各記事のスペーシング */
.blog-item {
  margin-bottom: 24px;
}

.blog-item:last-child {
  margin-bottom: 0;
}

/* カテゴリー（お知らせ・豆知識など） */
.blog-category {
  font-size: 15px;
  color: #333333;
  margin-bottom: 6px;
  font-weight: bold;
}

/* 記事タイトル（リンクの紫線と色を解除） */
.blog-title {
  font-size: 16px;
  line-height: 1.5;
  margin: 0;
  font-weight: bold;
}

.blog-title a {
  color: #333333;
  text-decoration: none; /* 下線を削除 */
  transition: color 0.2s ease;
}

.blog-title a:hover {
  color: #56B7EC; /* ホバー時に水色に変化 */
}

 /* お問い合わせセクション全体 */
 .contact{
  margin: 100px auto 100px auto;
}

/* お問い合わせ画像の設定 */
.contact-form {
  width: 100%;
}

/* WPForms 送信ボタンの完全統一カスタマイズ */
div.wpforms-container .wpforms-form button[type=submit],
div.wpforms-container .wpforms-form input[type=submit] {
  display: inline-block !important;
  width: 280px !important;                 /* ボタンの横幅 */
  max-width: 100% !important;
  height: auto !important;
  padding: 16px 0 !important;              /* 他ボタンと同じ上下余白 */
  background: #56B7EC !important;          /* 背景色 */
  color: #ffffff !important;               /* 文字色 */
  font-family: inherit !important;
  font-size: 16px !important;
  font-weight: bold !important;
  border: none !important;
  border-radius: 2px !important;           /* 角丸 */
  box-sizing: border-box !important;
  line-height: 1 !important;
  cursor: pointer !important;
  transition: opacity 0.3s ease !important;
}

/* マウスホバー時（opacityのみ適用し、背景色の再指定を外す） */
div.wpforms-container .wpforms-form button[type=submit]:hover,
div.wpforms-container .wpforms-form input[type=submit]:hover {
  opacity: 0.8 !important;                 /* 透明度のみ変更 */
  background: #56B7EC !important;          /* ホバー時も同じ色を維持 */
}

/* ボタンを中央寄せにする */
div.wpforms-container .wpforms-form .wpforms-submit-container {
  text-align: center !important;
}

/* アクセスセクション全体 */
 .access{
  margin: 100px auto 80px auto;
}

.access iframe {
   width: 100%;
   height: 368px;
   margin-top: 40px;
 }

 .access-tex{
  line-height: 1.7;
 }

 /* フッター全体 */
footer {
  text-align: center; /* 要素を中央寄せ */
  padding: 60px 0 40px 0; /* 上下の余白 */
}

/* フッター内のロゴ */
footer .logo {
  display: inline-block;
  margin-bottom: 30px;
}

footer .logo img {
  width: 200px;
  height: auto;
  display: block;
  margin: 0 auto;
}

/* ナビゲーションリンク */
.footer-link {
  margin-bottom: 40px;
}

.footer-link a {
  color: #0d0d0d;
  text-decoration: none;
  margin: 0 15px; /* 各リンクの左右の余白 */
  font-size: 15px;
}

.footer-link a:hover {
  text-decoration: underline;
  color: #56B7EC;
}

/* コピーライト */
.copyright {
  font-size: 14px;
  color: #0d0d0d;
}


/* コンセプトページ用のレイアウト */
.concept-main {
  text-align: center;
  margin-top: 40px;
}

.concept-main .tit {
  font-size: 28px;
  font-weight: bold;
  line-height: 1.6;
  margin-bottom: 40px;
  text-align: center;
}

.concept-main .tex {
  max-width: 680px; 
  margin: 0 auto;
  font-size: 16px;
  line-height: 2.2; /* 行間をゆったり開ける */
  text-align: center;
}

/* PC表示：左側に画像がある行のテキストを右寄りに配置 */
.concept-col-left {
  /* 要素の両端揃えにより、余白を中央（画像とテキストの間）に自動で作成 */
  justify-content: space-between; 
}

.concept-col-left-r {
  /* テキストブロック自体の幅を絞るか、左側に余白を作って右へ寄せる */
  margin-left: auto; /* 右寄せにして間隔を広く確保 */
  max-width: 520px; 
}

/* 全体の枠組み */
.concept-col {
  max-width: 900px;
  margin: 60px auto 100px;
  padding: 0 20px;
}

/* 左右並びのベース設定 (Flexbox) */
.concept-col-right,
.concept-col-left {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 40px;
  margin-bottom: 80px; /* 各行の上下間隔 */
}

/* テキスト領域のスタイル */
.concept-col-right-l,
.concept-col-left-r {
  flex: 1;
}

.concept-col-right-l h3,
.concept-col-left-r h3 {
  font-size: 20px;
  font-weight: bold;
  color: #0d0d0d;
  margin-bottom: 15px;
}

.concept-col-right-l p,
.concept-col-left-r p {
  font-size: 15px;
  line-height: 1.8;
  color: #333333;
}

/* 画像領域のスタイル */
.concept-col-right-r,
.concept-col-left-l {
  width: 260px;
  height: 260px;
  flex-shrink: 0;
}

.concept-col-right-r img,
.concept-col-left-l img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* 画像の縦横比を崩さず枠いっぱいにトリミング */
  border-radius: 4px;
}

/*  スタッフ紹介セクション  */

/* 全体の枠組み */
.staff {
  max-width: 850px;
  margin: 60px auto 100px;
  padding: 0 20px;
}

/* 各スタッフのブロック（Flexboxで左右配置） */
.staff-col {
  display: flex;
  align-items: center;
  gap: 50px;
  margin-bottom: 70px;
}

/* 左側：丸形画像エリア */
.staff-col-left {
  width: 240px;
  height: 240px;
  flex-shrink: 0;
}

.staff-col-left img {
  width: 100%;
  height: 100%;
  border-radius: 50%; /* 正円に切り抜き */
  object-fit: cover;  /* 正方形以外でも歪まずきれいに表示 */
}

/* 右側：テキストエリア */
.staff-col-right {
  flex: 1;
}

/* 名前 */
.staff-name {
  font-size: 22px;
  font-weight: bold;
  color: #0d0d0d;
  margin-bottom: 20px;
}

/* 得意分野・趣味 */
.staff-skill {
  font-size: 15px;
  font-weight: bold;
  color: #333333;
  line-height: 1.7;
  margin-bottom: 20px;
}

/* プロフィール本文 */
.staff-text {
  font-size: 14px;
  line-height: 1.8;
  color: #555555;
}

/* 全体の配置と幅指定 */
.service {
  max-width: 850px;
  margin: 60px auto 100px;
  padding: 0 20px;
}

/* セクションタイトル（見出し） */
.service .tit_01 {
  text-align: center;
  font-size: 24px;
  font-weight: bold;
  margin-bottom: 60px;
  line-height: 1.4;
}

.service .tit_01 span {
  font-size: 13px;
  color: #72c6ef; 
  letter-spacing: 0.1em;
}

/* 各診療内容のブロック（横並びレイアウト） */
.service-col {
  display: flex;
  align-items: center;
  gap: 110px;
  margin-bottom: 70px;
}

/* 左側：丸形画像エリア */
.service-col-left {
  width: 240px;
  height: 240px;
  flex-shrink: 0;
}

.service-col-left img {
  width: 100%;
  height: 100%;
  border-radius: 50%; /* 正円にくり抜き */
  object-fit: cover;  /* 画像の比率を崩さず収める */
}

/* 右側：テキストエリア */
.service-col-right {
  flex: 1;
  margin-left: 20px;
}

/* 診療科目名（一般歯科、小児歯科など） */
.service-col-right .tit_02 {
  font-size: 22px;
  font-weight: bold;
  color: #0d0d0d;
  margin-bottom: 20px;
  text-align: left;
}

/* 特徴・対応内容（太字テキスト） */
.service-col-right .feature {
  font-size: 15px;
  font-weight: bold;
  color: #333333;
  line-height: 1.7;
  margin-bottom: 20px;
}

/* 詳細説明テキスト */
.service-col-right .tex {
  font-size: 14px;
  line-height: 1.8;
  color: #555555;
}

/* --- ブログ 2カラムレイアウト --- */
.blog-container {
  display: flex;
  gap: 150px;
  align-items: flex-start;
}

/* 左側：記事リスト */
.blog-main {
  flex: 1;
  max-width: 680px;
}

.blog-item {
  margin-bottom: 60px;
}

.blog-category {
  display: inline-block;
  background-color: #72c6ef;
  color: #ffffff;
  font-size: 13px;
  padding: 3px 10px;
  margin-bottom: 12px;
}

.blog-tit {
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 16px;
  line-height: 1.4;
}

.blog-tex-01 {
  font-size: 14px;
  line-height: 1.8;
  color: #333333;
}

.blog-tex-01 strong {
  font-weight: 700;
}

/* 右側：サイドバー（カテゴリー） */
.blog-sidebar {
  width: 160px;
  flex-shrink: 0;
}

.blog-category-right {
  border: 1px solid #dcdcdc;
  text-align: center;
}

.blog-category-name {
  background-color: #dcdcdc;
  font-weight: 700;
  font-size: 14px;
  padding: 8px 0;
}

.blog-category-name-01 {
  font-size: 13px;
  padding: 8px 0;
  border-top: 1px solid #dcdcdc;
  background-color: #ffffff;
}

.blog-category-name-01 a {
  display: block;
  text-decoration: none;
  color: #0d0d0d;
}

/* 記事タイトルのリンク設定 */
.blog-tit a,
.blog-tit a:visited {
  color: #333333;        /* クリック前後で同じ文字色（黒・ダークグレー）を維持 */
  text-decoration: none; /* 下線を削除 */
  transition: color 0.2s ease;
}

/* マウスを乗せた時（ホバー時） */
.blog-tit a:hover {
  color: #56B7EC;        /* ホバー時はアクセントカラー（水色）にする */
}

/* 右側サイドバーのカテゴリーリンク設定（必要に応じて） */
.blog-category-name-01 a,
.blog-category-name-01 a:visited {
  color: #333333;
  text-decoration: none;
}

.blog-category-name-01 a:hover {
  color: #56B7EC;
}

/* オンライン予約セクション（appointment）*/

/* セクション全体の余白設定 */
.appointment {
  max-width: 900px;
  margin: 60px auto 100px;
  padding: 0 20px;
  text-align: center; /* 子要素（タイトル・画像）を中央寄せ */
}

/* カレンダー画像の設定 */
.appointment img {
  width: 100%;
  max-width: 887px; /* 画像の選択枠サイズ（887px）に合わせて指定 */
  height: auto;
  display: block;
  margin: 0 auto;  /* 中央配置 */
  border-radius: 4px; 
}

/* ==========================================
   スマホ用スタイル（画面幅767px以下）
   ========================================== */
@media screen and (max-width: 767px) {
  body {
    padding: 0 16px; /* スマホ時の左右余白を整える */
  }

  /* --- ヘッダー・ハンバーガーメニュー --- */
  .nav-pc {
    display: none;
  }
  .nav-sp {
    display: block;
  }

  .drawer-checkbox {
    display: none;
  }

  .drawer-icon {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 15px;
    width: 30px;
    height: 22px;
    cursor: pointer;
    z-index: 100;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }

  .drawer-icon span {
    display: block;
    width: 100%;
    height: 3px;
    background-color: #56B7EC;
    border-radius: 2px;
    transition: all 0.3s;
  }

  .drawer-content {
    position: fixed;
    top: 0;
    right: -100%;
    width: 40%; /* スマホで見やすい幅に変更 */
    height: 100vh;
    background-color: #ffffff;
    box-shadow: -2px 0 8px rgba(0,0,0,0.1);
    padding-top: 80px;
    transition: all 0.3s;
    z-index: 99;
  }

  .drawer-content ul {
    list-style: none;
    padding: 0;
    margin: 0;
  }

  .drawer-content li a {
    display: block;
    padding: 15px 20px;
    color: #0d0d0d;
    text-decoration: none;
    border-bottom: 1px solid #eee;
    font-size: 16px;
  }

  .drawer-checkbox:checked ~ .drawer-content {
    right: 0;
  }

  .drawer-checkbox:checked ~ .drawer-icon span:nth-child(1) {
    transform: translateY(9.5px) rotate(45deg);
  }
  .drawer-checkbox:checked ~ .drawer-icon span:nth-child(2) {
    opacity: 0;
  }
  .drawer-checkbox:checked ~ .drawer-icon span:nth-child(3) {
    transform: translateY(-9.5px) rotate(-45deg);
  }

  /* --- 共通見出し & ボタン設定 --- */
  .tit_01 {
    font-size: 22px;
    margin: 30px 0 0 0;
  }

  .tit_01 span {
    font-size: 12px;
    margin-top: 5px;
    margin-bottom: 25px;
  }

  .btn {
    margin-top: 25px;
  }

  .btn a {
    width: 100%; /* ボタンをスマホ幅いっぱいに */
    max-width: 280px;
    padding: 14px 0;
    font-size: 15px;
  }

  /* 各セクションの上下余白最適化 */
  .concept,
  .message,
  .service,
  .appointment,
  .blog,
  .contact,
  .access {
    margin: 50px auto;
  }

  /* --- 1. メインビジュアル --- */
  .main-visual {
    height: 260px; /* スマホに適した高さ */
    margin-top: 10px;
  }

  /* --- 2. コンセプト (CONCEPT) --- */
  .concept-flex {
    flex-direction: column;
    gap: 20px;
  }

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

  .concept .tit {
    font-size: 18px;
    line-height: 1.5;
    margin-bottom: 12px;
  }

  .concept .tex {
    font-size: 14px;
    line-height: 1.7;
  }

  /* --- 3. 院長あいさつ (MESSAGE) --- */
  .message-block img {
    max-width: 100%;
    margin-bottom: 20px;
  }

  .doc_name {
    font-size: 18px;
    margin-bottom: 20px;
  }

  .message-block .tex {
    font-size: 14px;
    line-height: 1.7;
  }

  /* --- 4. 診療内容 (SERVICE) --- */
  .service-flex {
    flex-direction: column;
    gap: 0;
  }

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

  .service-left_01,
  .service-left_02,
  .service-right_01,
  .service-right_02 {
    margin-bottom: 30px;
  }

  .service-flex img {
    height: 200px; /* 画像の高さを一定に調整 */
    border-radius: 4px;
  }

  .tit_02 {
    font-size: 18px;
    margin: 12px 0 8px 0;
  }

  .service-flex .tex {
    font-size: 14px;
    line-height: 1.6;
  }

  /* --- 5. 予約 (APPOINTMENT) --- */
  .appointment {
    margin: 50px auto;
    padding: 0 16px; /* 左右に余白を確保 */
    box-sizing: border-box;
  }

  .tel-text {
    font-size: 15px;
    margin-bottom: 6px;
  }

  .tel-num {
    font-size: 22px;
    margin-bottom: 20px;
  }

  /* 診療時間表のスマホ崩れ防止（スクロール可） */
  .schedule-table {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    border-collapse: collapse;
    table-layout: fixed; /* 各列の幅を均等に自動計算 */
  }

  .schedule-table th,
  .schedule-table td {
    padding: 10px 8px;
    font-size: 13px;
  }

  .table-note {
    font-size: 12px;
    margin-top: 10px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px 15px;
  }

  .table-note span {
    margin-right: 0;
  }

  /* --- 6. ブログ (BLOG) --- */
  .blog-flex {
    flex-direction: column-reverse; /* 画像を上に配置 */
    gap: 20px;
  }

  .blog-flex-left,
  .blog-flex-right {
    width: 100%;
  }

  .blog-item {
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px dotted #e0e0e0;
  }

  .blog-item:last-child {
    border-bottom: none;
    margin-bottom: 0;
  }

  .blog-date {
    font-size: 12px;
    color: #888;
    margin-bottom: 4px;
  }

  .blog-title {
    font-size: 15px;
    line-height: 1.5;
  }

  /* --- 7. お問い合わせ (CONTACT) --- */
  .contact {
    margin: 50px auto;
    padding: 0 16px; /* 左右に16pxの内側余白を追加 */
    box-sizing: border-box;
  }

  .contact-form {
    padding: 0 10px;
  }

  div.wpforms-container .wpforms-form button[type=submit],
  div.wpforms-container .wpforms-form input[type=submit] {
    width: 100% !important;
    max-width: 280px !important;
  }

  /* --- 8. アクセス (ACCESS) --- */
  .access iframe {
    height: 250px; /* 地図の高さをスマホ用に調整 */
    margin-top: 20px;
  }

  .access-tex {
    font-size: 14px;
    line-height: 1.6;
    margin-top: 15px;
  }

  /* --- フッター (FOOTER) スマホ最適化 --- */
  footer {
  padding: 40px 16px 20px !important;
  text-align: center;
  }

  /* メニュー全体を2列の均等配置に設定 */
  footer ul,
  .footer-nav ul {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  padding: 0 !important;
  margin: 0 auto 24px !important;
  list-style: none !important;
  width: 100% !important;
  }

  /* 各メニュー項目を幅50%（2列）にして整理 */
  footer li,
  .footer-nav li {
  width: 50% !important;
  box-sizing: border-box;
  margin-bottom: 12px !important;
  padding: 0 8px;
  }

  /* 単語の途中での不自然な改行を防止 */
  footer li a,
  .footer-nav li a {
  display: inline-block;
  font-size: 14px !important;
  color: #333333;
  text-decoration: none;
  white-space: nowrap; /* 「アクセス」などが分断されるのを防ぐ */
  }

  /* コピーライト表記の調整 */
  footer copyright,
  footer small,
  footer .copyright {
  display: block;
  font-size: 11px !important;
  line-height: 1.5;
  color: #666666;
  margin-top: 20px !important;
  }

  /* --- 下層ページ用スタイル微調整 --- */
  .concept-main .tit {
    font-size: 18px;
    margin-bottom: 20px;
    text-align: center;
  }

  .concept-main .tex {
    font-size: 14px;
    line-height: 1.8;
    text-align: left;
  }

  .concept-col {
    margin: 40px auto 60px;
  }

  /* 各強みの見出し (●痛みの少ないやさしい治療 など) */
  .concept-col-left-r h3,
  .concept-col-right-l h3 {
    font-size: 16px; /* 大きすぎない見やすいサイズに調整 */
    font-weight: bold;
    line-height: 1.5;
    margin-bottom: 8px; /* <br>の代わりに余白で調整 */
    color: #333333;
  }

  .concept-col-left {
    flex-direction: column;
    gap: 20px;
  }

  .concept-col-right {
    flex-direction: column-reverse;
    gap: 20px;
  }

  .concept-col-left-r {
    margin-left: 0;
    max-width: 100%;
  }

  .concept-col-right-r,
  .concept-col-left-l {
    width: 100%;
    height: 220px;
  }

  .staff-col {
    flex-direction: column;
    gap: 25px;
    margin-bottom: 60px;
    text-align: center;
  }

  .staff-col-left {
    width: 180px;
    height: 180px;
  }

  .staff-name {
    font-size: 18px;
    margin-bottom: 12px;
  }

  .staff-skill {
    font-size: 14px;
    margin-bottom: 15px;
  }

  .staff-text {
    text-align: left;
  }

  .service-col {
    flex-direction: column;
    gap: 25px;
    margin-bottom: 60px;
    text-align: center;
  }

  .service-col-left {
    width: 200px;
    height: 200px;
  }

  .service-col-right .tit_02 {
    font-size: 18px;
    margin-bottom: 12px;
    text-align: center;
  }

  .service-col-right .feature {
    font-size: 14px;
    margin-bottom: 15px;
  }

  .service-col-right .tex {
    text-align: left;
  }

  .blog-container {
    flex-direction: column;
    gap: 30px;
  }

  .blog-main {
    max-width: 100%;
  }

  .blog-sidebar {
    width: 100%;
    max-width: 280px;
    margin: 0 auto;
  }

  /* カレンダーのスマホ最適化 */
  .appointment .schedule-table,
  .appointment table {
  width: 100% !important;
  max-width: 100% !important;
  border-collapse: collapse;
  table-layout: fixed; /* 列幅を均等に保持 */
 }

}