/* 全体 */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: Arial, sans-serif;
    background-color: #FFFFFF;
    color: #555; /* 薄いグレーの文字色 */
    line-height: 1.6;
}
body {
    overflow-x: hidden; /* 横スクロールを防ぐ */
    width: 100%;
}
/* ヘッダー全体 */
header {
    position: fixed;
    top: 0;
    width: 100%;
    background-color: rgba(255, 255, 255, 0.9);
    border-bottom: 1px solid #ddd;
    z-index: 1000;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 20px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

/* ロゴ部分 */
header .logo img {
    height: 50px;
    margin: 0;
    object-fit: contain;
}

/* ドロップダウンボタン */
header .dropdown {
    margin-left: auto; /* 右寄せ */
}

/* ドロップダウンボタン */
/* ドロップダウンボタンの通常状態 */
header .dropdown-toggle {
    background-color: #f2f2f2; /* 背景色を固定 */
    color: #333; /* 文字色 */
    border: 1px solid #ddd; /* 枠線 */
}

/* ドロップダウンボタンのホバー時 */
header .dropdown-toggle:hover {
    background-color: #f2f2f2; /* ホバー時の背景色 */
    color: #314EA1; /* ホバー時の文字色 */
}

/* ドロップダウンボタンのフォーカス時（背景色を固定） */
header .dropdown-toggle:focus {
    background-color: #f2f2f2; /* 背景色を変えない */
    color: #333; /* フォーカス時の文字色を固定 */
    outline: none; /* フォーカス時の青枠を非表示に */
}

/* ドロップダウンボタンのアクティブ時（背景色を固定） */
header .dropdown-toggle:active {
    background-color: #f2f2f2; /* 背景色を変えない */
    color: #333; /* アクティブ時の文字色を固定 */
    outline: none; /* アクティブ時の青枠を非表示に */
}

/* ドロップダウンメニューの背景色を薄いグレーに */
header .dropdown-menu {
    background-color: #f9f9f9; /* 背景色を薄いグレーに */
    border: 1px solid #ddd; /* 枠線を薄いグレーに */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* 軽い影を追加 */
}

/* ドロップダウンメニューの項目のスタイル */
header .dropdown-menu .dropdown-item {
    background-color: transparent; /* 項目のデフォルト背景を透明に */
    color: #7B7B7B; /* 文字色を濃いグレーに */
}

/* ホバー時のスタイル */
header .dropdown-menu .dropdown-item:hover {
    background-color: #f1f1f1; /* ホバー時の背景色をやや濃いグレーに */
    color: #314EA1; /* ホバー時の文字色を青に */
}

/* メイン画像 (ロゴ2) */
.main-image img {
    width: 100%; /* 画像が画面幅に合わせて伸縮する */
    height: 200; /* 高さは自動で調整 */

}
/* コンセプト画像  */
.consept-image img {
    width: 80%; /* 画像が画面幅に合わせて伸縮する */
    height: auto; /* 高さは自動で調整 */
	margin: 0 auto; /* 中央寄せ */
    text-align: center; /* 画像が親要素内で中央配置 */
    max-height: auto;  
    display: block; 
}

/* 画像センター60％  */
.image-center {
    width: 80%; /* 親要素の幅を100%に */
    max-width: 800px; /* 必要なら最大幅を設定 */
	height: 600;
    margin: 0 auto; /* 中央寄せ */
    text-align: center; /* 画像が親要素内で中央配置 */
}

.image-center img {
    width: auto;   /* 横幅を60%に設定 */
    height: 500px; /* 高さはアスペクト比を維持 */
    max-height: 500px;  /* 最大高さを設定、500pxを超えないように */
    display: block; 
    margin: 0 auto; 
}

/* 画像左寄せ */
.image-left {
    float: left;
    margin-right: 10px; /* テキストや他の要素との余白 */
}

/* 画像右寄せ */
.image-right {
    float: right;
    margin-left: 10px; /* テキストや他の要素との余白 */
}

/* 画像のみ画像右寄せ横長画像 */
.image-right-right {
    display: flex;
    flex-direction: column; /* 上下方向に並べる */
    align-items: flex-start; /* 画像を右寄せ */
    text-align: left; /* 文字は左揃え */
}

.image-right-right img {
    width: 180px; /* 画像の幅を調整 */
    height: auto; /* アスペクト比を維持 */
	align-self: flex-end; /* 画像を右寄せ */
	margin-left: auto;
    margin-bottom: 10px; /* 画像と文字の間に余白 */
}

/* 画像のみ画像右寄せ縦長画像 */
.image-right-right2 {
    display: flex;
    flex-direction: column; /* 上下方向に並べる */
    align-items: flex-end; /* 画像を右寄せに変更 */
    text-align: right; /* 文字は右揃え（必要に応じて調整） */
}

.image-right-right2 img {
    width: 100px;  /* 画像が親要素の幅に合わせて伸縮 */
    height: auto; /* アスペクト比を維持 */
}

.image-right-right img {
    width: 100px; /* 画像の幅を調整 */
    height: auto; /* アスペクト比を維持 */
	align-self: flex-end; /* 画像を右寄せ */
	margin-left: auto;
    margin-bottom: 10px; /* 画像と文字の間に余白 */
}
/* 画像のみセンター表示 */
.image-center {
    display: flex;
    justify-content: center; /* 水平方向に中央揃え */
    align-items: center; /* 垂直方向に中央揃え */
    height: auto; /* 親要素の高さを指定（例：画面全体の高さ） */
	padding:5px 20px 20px;
}

.image-center img {
    max-width: 200px; /* 画像の幅を親要素に収める */
    height: auto; /* 縦横比を保持 */
}

/* PCサイトへのリンクボタン */
.pc-link {
    text-align: right;
    margin: 0px 20px;
}

.pc-site-button {
    background-color: #BFBABA;
    color: white;
    padding: 2px 6px;
    text-decoration: none;
    font-size: 12px;
    border-radius: 5px;
    display: inline-block;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.pc-site-button:hover {
    background-color: #314EA1;
}
/* メインコンテンツ */
main {
    margin-top: 0px; /* ヘッダーの高さを考慮 */
    padding: 20px;
}

section {
    margin-bottom: 20px;
}

h1 {
    color: #314EA1;
    margin-bottom: 15px;
	font-size: 20px;
    font-weight: bold;
}

 h2 {
    color: #314EA1;
    margin-bottom: 5px;
	font-size: 16px;
	font-weight: bold;
}
.info h2{
    color: #314EA1;
    margin-bottom: 5px;
	font-size: 16px;
	font-weight: bold;
}	
p, ul, table {
    color: #9F9F9F; /* 薄いグレーの文字色 */
	font-size: 14px;
}

p1 {
    color: #9F9F9F; /* 薄いグレーの文字色 */
	font-size: 12px;
}	

ul {
    list-style-type: disc;
    padding: 10px;
	margin: 20px 0;
}
ul li {
    margin-bottom: 10px; /* 各項目の下に余白を追加 */
    line-height: 1.5; /* 行間を広げる */
}

table {
    width: 100%;
	margin: 0 auto;
    border-collapse: collapse;
    margin-top: 10px;
}

table th, table td {
    border: 1px solid #ddd;
    padding: 8px;
    text-align: center;
}

table th {
    background-color: #EDECEC;
    color: #7B7B7B;
}

.footer-info {
    margin-top: 20px;
    text-align: center;
    font-size: 18px;
}

/* フッター */
footer {
    background-color: #FFFFFF;
    color: white;
    text-align: center;
    padding: 15px 0;
    margin-top: 20px;
	clear: both; 
	
}

/* トップページリンク */
a {
    color: #007bff;
    text-decoration: none !important;
}

.centered-text {
    text-align: center;  /* テキストを中央に配置 */
	font-size: 14px;
	margin-right: 30px;
	margin-left: 10px;
	color: #9F9F9F; 
}

#hours h2 {
    font-size: 16px;
    margin-bottom: 10px;
    color: #314EA1;
	text-align: center; 
    font-weight: bold;
}

/* アクセスマップのセクション */
#access {
    margin-top: 20px;
    padding: 10px;
    background-color: #FFFFFF;
    border-radius: 5px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

#access h2 {
    font-size: 16px;
    margin-bottom: 10px;
    color: #314EA1;
	text-align: center; 
    font-weight: bold;
}

.access-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 15px;
}

.access-table th,
.access-table td {
    text-align: left;
    padding: 8px 12px;
    border: 1px solid #ddd;
}

.access-table th {
    background-color: #EDECEC;
    font-weight: bold;
    color: #333;
}

.map-container {
    text-align: center;
    margin-top: 10px;
}

.map-container iframe {
    border: none;
    border-radius: 5px;
}

/* ソーシャルリンク */
.social-links {
    display: flex;
    justify-content: center;
    gap: 15px;
    padding: 20px 0;
    background-color: #FFFFFF;
}

.social-icon {
    width: 30px;
    height: 30px;
    transition: transform 0.3s ease;
}

.social-icon:hover {
    transform: scale(1.2); /* ホバー時に拡大 */
}

/* 開院日表 */
/* カレンダー全体のスタイル */
.calendar-container {
    display: flex;
    justify-content: space-between; /* カレンダー間のスペースを確保 */
    flex-wrap: wrap; /* 横幅が狭い場合に縦並びになる */
    gap: 20px; /* カレンダー間の余白 */
    margin: 20px 0; /* 全体の上下余白 */
}

/* 各カレンダーのスタイル */
.calendar-table {
    width: 280px; /* 各カレンダーの幅 */
    margin: 0 auto; /* カレンダーを中央揃え */
    border-collapse: collapse; /* テーブルの隙間をなくす */
    text-align: center; /* テキストを中央揃え */
    font-size: 13px; /* テーブル内の文字サイズ */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* 影を追加して視認性を向上 */
    border-radius: 8px; /* カレンダーの角を丸く */
    overflow: hidden; /* 角丸が隠れないように */
}

/* カレンダーのセル */
.calendar-table th {
    background-color: #FFFBDD; /* 曜日の背景色 */
    font-weight: bold;
    padding: 8px; /* セル内の余白 */
}

.calendar-table td {
    border: 1px solid #ddd;
    padding: 5px; /* セル内の余白を調整 */
    width: 14.28%; /* 各曜日の幅を均等にする */
    height: 40px; /* 各セルの高さ */
}

/* 各種スタイル */
.calendar-table td.closed {
    background-color: #FCCDCD; /* 赤背景 (休み) */
    color: #ff0000; /* 赤文字 */
}

.calendar-table td.holiday {
    background-color: #e6ffe6; /* 緑背景 (祝日) */
    color: #008000; /* 緑文字 */
}

.calendar-table td.irregularity {
    background-color: #CAD3FF; /* 青背景 (不定期休み) */
    color: #0000ee; /* 青文字 */
}

.calendar-table td.morning {
    background-color: #FFF1D6; /* オレンジ背景 (午前休診) */
    color: #ff9a1c; /* オレンジ文字 */
}

/* 色の説明 */
.legend {
    margin: 20px auto; /* 表との余白 */
    max-width: 350px; /* 最大幅 */
    padding: 15px;
    background-color: #f9f9f9;
    border: 1px solid #ddd;
    border-radius: 8px;
	font-size: 13px;
	line-height: 1.5;
	color: #9F9F9F; 
}

.legend p {
    margin-bottom: 10px;
    font-weight: bold;
    text-align: center;
}

.color-box {
    display: inline-block;
    width: 20px;
    height: 20px;
    margin-right: 10px;
    margin-bottom: 5px;
    border: 1px solid #f9f9f9;
    vertical-align: middle;
}

.color-box.black {
    background-color: #ddd;
}

.color-box.orange {
    background-color: #FFF1D6;
}

.color-box.red {
    background-color: #FCCDCD;
}

.color-box.green {
    background-color: #e6ffe6;
}

.color-box.blue {
    background-color: #CAD3FF;
}

/* レスポンシブ対応 */
@media (max-width: 768px) {
    .calendar-container {
        flex-direction: column; /* 縦並びに切り替え */
        align-items: center; /* 中央揃え */
    }

    .calendar-table {
        width: 100%; /* 幅を100%に設定 */
        max-width: 100%;/* 最大幅を設定 */
        margin-bottom: 20px; /* 下部に余白 */
    }
	
	/* 診療時間スタイル設定 */
/* スタイル設定 */
  .schedule-table {
    width: 100%;
    max-width: 700px;
    margin: auto;
    border-collapse: collapse;
    table-layout: fixed;
  }

  .schedule-table th, .schedule-table td {
    border: 1px solid #ccc;
    padding: 10px;
    text-align: center;
    font-size: 16px;
  }

  .schedule-table th {
    background-color: #f8f8f8;
    font-weight: bold;
  }

  .large-circle {
    font-size: 20px;
    font-weight: bold;
  }

  .large-triangle {
    font-size: 20px;
    font-weight: bold;
  }

  @media (max-width: 600px) {
    .schedule-table th, .schedule-table td {
      font-size: 14px;
    }

    .large-circle, .large-triangle {
      font-size: 18px;
    }
  }

/* レスポンシブ対応 */
@media (max-width: 768px) {
    .schedule-table th, .schedule-table td {
        padding: 5px;
    }

    .schedule-table {
        font-size: 12px;
    }

	/* 問診票ダウンロード設定 */
.download-section {
    text-align: center;
    margin: auto;
    padding: 20px;
    background-color: #f9f9f9;
    border: 1px solid #ddd;
    border-radius: 10px;
}

/* 見出しのスタイル */
.download-section h2 {
    font-size: 16px;
    margin-bottom: 20px;
}

.download-section h3 {
    font-size: 16px;
    color: #7B7B7B;
    margin-top: 30px;
}

.download-section h4 {
    font-size: 14px;
    color: #888;
    margin-bottom: 10px;
}

/* ダウンロードコンテナのレイアウト */
.download-container {
    display: flex;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap;
    margin-top: 10px;
}

/* ダウンロードアイテム全体 */
.download-item {
    width: 100%; /* アイテムの全体幅 */
    text-align: center;
}

/* 画像のスタイル */
.download-item img {
    width: auto; /* 横幅を自動調整 */
    height: auto; /* 高さを自動調整 */
    max-width: 100%; /* 親要素の幅を超えない */
    max-height: 150px; /* 必要なら最大高さを設定 */
    cursor: pointer; /* クリック可能を示す */
    transition: transform 0.2s ease; /* 拡大時のスムーズな動き */
}

/* マウスオーバーで拡大 */
.download-item img:hover {
    transform: scale(1.1); /* 拡大率 */
}

/* レスポンシブ対応: 親要素の幅を変更 */
@media screen and (max-width: 600px) {
    .download-item {
        width: 120px; /* 小画面時のアイテム幅 */
    }
}

/* かわいいイラストのスタイル */
.cute-illustration {
    margin-top: 30px;
}

.cute-illustration img {
    max-width: 100%;
    height: auto;
    margin: 0 auto;
    display: block;
}
	
/* 画像中央寄せ */
.image-center {
    text-align: center;
    margin-bottom: 20px;
}

.image-center img {
    max-width: 100%;
    height: auto;
}

/* 宿泊料金の表 */
.hotel-pricing {
    width: 100%;
	margin: 0 auto;
    border-collapse: collapse;
    margin-top: 10px;
}

.hotel-pricing th, .hotel-pricing td {
    border: 1px solid #ddd;
    padding: 10px;
    text-align: center;
}

.hotel-pricing th {
    background-color: #f2f2f2;
}

/* チェックイン・チェックアウトの時間表 */
.schedule-table-container {
    width: 100%;
	margin: 0 auto;
    border-collapse: collapse;
    margin-top: 10px;
}

.schedule-table {
    width: 100%;
	max-width: 100%;
    table-layout: auto;  /* 列幅が内容に合わせて広がる */
}

.schedule-table th, .schedule-table td {
    padding: 10px;
    border: 1px solid #ddd;
}

.schedule-table .circle {
    text-align: center;
}

.centered-text {
    text-align: center;
    margin-top: 10px;
}