@charset "utf-8";
/* CSS Document */

/* --------------------------------------------- */
/* ▼モバイルファースト (全環境に共通のデザイン) */
/* --------------------------------------------- */

body  {
	margin: 0px;
	padding: 0px;
	background-color: #FFFFFF;
	background-attachment: fixed;
	z-index: 1;
	font-family: "Hiragino Sans", "Noto Sans JP", "Meiryo", sans-serif;
	font-size: clamp(14px, 2.5vw, 16px);
	transition: .7s;
	overflow-x: hidden;
	letter-spacing: 0.05em;
}

#wrapper {
    overflow: hidden;
}

img {
	width: 100%;
	height: auto;
 	display: block;
}

/* header */
#header{
	width: 100%;
	position: fixed;
	top: 0;
	left: 0;
	height: 60px;
	background: #fff;
	display: flex;
	align-items: center;
	justify-content: space-between;
	box-shadow: 0 2px 5px rgba(0,0,0,0.1);
	z-index: 10;	
}

a {
	text-decoration: none;
	color: #131313;
}

/* マゼンタ */
.txt-magenta {
  color: #D6007D;   /* 鮮やかすぎない医療系マゼンタ */
  font-weight: bold;
}

/* 青 */
.txt-blue {
  color: #0074C8;   /* 目に優しい深めの青 */
  font-weight: bold;
}

/* 黒 */
.txt-bold {
  font-weight: bold;
}

/*  ロゴ  */
.logo img {
	height: 20px;
 	width: auto;
	margin-right: 10px;
	padding-left: 10px;
}

/* PC以外では非表示 */
.pc-tel {
	display: none;
}

/*  オンライン予約ボタン---------------------------*/
.reserve-btn {
	background: #2E9BAF;
	color: #fff;
	text-decoration: none;
	padding: 6px 15px;
	border-radius: 20px;
	font-size: 0.6rem;
	transition: background 0.3s;
	font-weight: bold;
	margin-left: 0;      /* 左余白リセット */
    margin-right: auto;  /* 右側を広く取って左へ固定 */
    display: inline-block;
}

.reserve-btn:hover {
	background: #0D778D;
}


/* メニュー設定---------------------------*/
.menu-wrapper {
	position: relative;
}

.menu-icon {
	width: 30px;
	height: 30px;
 	position: fixed;
 	top: 12px;
 	right: 10px;
 	cursor: pointer;
 	z-index: 3;
 	display: inline-block;
}

.menu-icon span {
 	display: block;
 	height: 4px;
 	margin: 6px 0;
 	background: #333;
 	border-radius: 2px;
 	transition: 0.4s;
}

/* ハンバーガーがXに変形 */
#menu-toggle:checked + .menu-icon span:nth-child(1) {
 	transform: translateY(10px) rotate(45deg);
}
#menu-toggle:checked + .menu-icon span:nth-child(2) {
 	opacity: 0;
}
#menu-toggle:checked + .menu-icon span:nth-child(3) {
 	transform: translateY(-10px) rotate(-45deg);
}

/* オーバーレイ背景 */
.overlay {
 	position: fixed;
 	inset: 0;
 	background: rgba(0,0,0,0.5);
 	opacity: 0;
 	pointer-events: none;
 	transition: 0.4s;
 	z-index: 1;
}

#menu-toggle:checked ~ .overlay {
 	opacity: 1;
 	pointer-events: auto;
}

/* メニュー本体 */
.menu {
 	position: fixed;
 	top: 0;
 	right: -100%;
 	width: 300px;
 	height: 100%;
 	background: #2E9BAF;
 	box-shadow: -2px 0 8px rgba(0,0,0,0.2);
 	transition: left 0.4s ease;
 	z-index: 2;
}

#menu-toggle:checked ~ .menu {
 	right: 0; 
}

.menu ul {
 	list-style: none;
 	padding: 60px 20px;
}

.menu li {
 	margin: 35px 0;
}

.menu a {
 	text-decoration: none;
 	color: #fff;
 	font-size: 1.2rem;
 	transition: color 0.3s;
}

.menu a:hover {
 	color: #007bff;
}


/*トップイメージ スライダー　---------------------------*/

.hero-slider {
	position: relative;
	width: 100%;
	height: 30vh; /* お好みで変更 */
	z-index: 0;
	padding-top: 60px;
	overflow: hidden;
}

.hero-slide {
	position: absolute;
	top: 0;	left: 0;
	width: 100%;
	height: 100%;
	background-size: cover;
	background-position: center;
	opacity: 0;
	transform: scale(1.1); /* ズーム前の状態 */
	transition: opacity 1.8s ease, transform 7s ease; 
}

.hero-slide.active {
	opacity: 1;
	transform: scale(1); /* ズームアウト → ゆるく引く */
}

.hero-text {	
	margin: 0 auto;
	width: 80%;
	max-width: 600px;
 	position: absolute;
 	top: 50%;
 	left: 50%;
 	transform: translate(-50%, -50%);
 	color: #fff;
	font-size: 1.7rem;
 	font-weight: 700;
 	text-align: center;
 	padding: 0 20px; /* スマホで左右が切れないように */
	font-family: "Hiragino Mincho ProN", "Hiragino Mincho Pro", "Yu Mincho","游明朝", "MS Mincho", serif;
	text-shadow: 0 4px 12px rgba(0,0,0,0.8);
}


/*トップイメージ（仮）---------------------------*/
.m_img_area {
    width: 100%;
    position: relative;
    z-index: 0;
}

.hero {
 	height: 100vh;
 	min-height: 700px;
 	background: url('../img/pic_01.jpg') no-repeat center/cover;
 	position: relative; /* 子の絶対配置に必要 */
}

/* キャッチコピー */
.hero__copy {
	margin: 0 auto;
	width: 80%;
	max-width: 600px;
 	position: absolute;
 	top: 50%;
 	left: 50%;
 	transform: translate(-50%, -50%);
 	color: #fff;
 	font-size: 1.8rem;
 	font-weight: 700;
 	text-align: center;
 	padding: 0 20px; /* スマホで左右が切れないように */
	font-family: "Hiragino Mincho ProN", "Hiragino Mincho Pro", "Yu Mincho","游明朝", "MS Mincho", serif;
	text-shadow: 0 4px 12px rgba(0,0,0,0.8);
}


/*サブページタイトル------------------------*/
.subpage-title {
 	width: 100%;
 	height: 250px;
	padding-top: 50px;
 	background-color: #f6f6f6;
 	display: flex;
 	flex-direction: column;  /* タイトル + サブタイトル縦並び */
 	justify-content: center; /* 全体を縦方向中央 */
 	align-items: center;     /* 横方向も中央 */
 	text-align: center;
}

.subpage-title h1 {
 	font-size: 2rem;   /* 大きめタイトル */
 	font-weight: bold;
 	margin-bottom: 8px;  /* サブタイトルとの余白 */
 	color: #333;
}

.subpage-subtitle {
 	font-size: 1rem;       /* 小さめ */
 	letter-spacing: 2px;   /* 少し広めで品よく */
 	opacity: 0.7;
 	color: #444;
}



/* お知らせ全体---------------------------*/
.news {
	background: #fff;
}

.news__inner {
	padding: 30px 25px 50px;
}

/* タイトル */
.news__title {
	font-size: 1.5rem;
	font-weight: 700;
	margin-bottom: 10px;
	color: #2E9BAF;
	text-align: center;
	position: relative;
}


/* お知らせリスト */
.news__list {
	list-style: none;
	padding: 0;
	margin: 0;
}

/* 各お知らせ項目 */
.news__item {
 	display: flex;
 	flex-direction: column;   /* 縦並び */
 	align-items: flex-start;  /* 左寄せ */
 	margin-bottom: 15px;
	border-bottom: 2px dotted #ccc;
}


/* 日付 */
.news__date {
	flex-shrink: 0;
	width: 100px; /* 日付欄の固定幅 */
	margin-right: 10px;
	color: #2E9BAF;
	margin-bottom: 5px;       /* 本文との間隔 */
}

/* お知らせ本文 */
.news__text {
	padding-bottom: 10px;
	width: 100%;
	box-sizing: border-box;
}


/* お知らせ一覧メニュー */
.news__button-wrapper {
	text-align: center;
	margin-top: 40px; /* お知らせリストとの間隔 */
}

.news__button {
	display: inline-block;
	padding: 10px 40px;
	background-color: #2E9BAF; /* ボタン色 */
	color: #fff;
	text-decoration: none;
	border-radius: 20px;
	font-weight: bold;
	transition: background-color 0.3s;
}

.news__button::after {
	content: " ›"; 
	font-weight: bold;
	margin-left: 20px; /* 文字との間隔 */
}


.news__button:hover {
	background-color: #0D778D; /* ホバー色 */
}


/*お知らせサブページ------------------------*/
.news-detail-section {
  padding: 40px 24px 80px;
  background: #fff;
}

/* タイトル */
.news-title {
  font-size: 2rem;
  font-weight: bold;
  margin-bottom: 30px;
}

/* 内側コンテナ */
.news-detail-inner {
  max-width: 1100px;
  margin: 0 auto;
}

/* メタ情報 */
.news-meta {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 30px;
}

.news-date {
  color: #444;
  font-size: 1rem;
}

.news-label {
  padding: 4px 20px;
  font-size: 0.9rem;
  background: #2E9BAF;
  color: #fff;
  border-radius: 20px;
}

/* 見出し */
.news-heading {
  font-size: 1.6rem;
  font-weight: bold;
  margin-bottom: 24px;
}

/* 区切り線 */
.news-line {
  border: none;
  border-bottom: 1px solid #ddd;
  margin: 20px 0;
}

/* 本文 */
.news-body p {
  font-size: 1rem;
  line-height: 1.8;
  margin-bottom: 12px;
}

/* 前の記事へ */
.news-prev {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 30px 0 50px;
  color: #333;
  font-size: 1rem;
  text-decoration: none;
}

.prev-icon {
  font-size: 1.2rem;
}

/* 一覧へ戻るボタン */
.news-back-wrap {
  display: flex;
  justify-content: center;
	margin-top: 20px;
}

.news-back-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 280px;
  padding: 20px 0;
  border-radius: 40px;
  background: #f5f5f5;
  color: #333;
  font-size: 1.1rem;
  font-weight: bold;
  text-decoration: none;
  gap: 12px;
}

.back-icon {
  font-size: 1.2rem;
}



/*クリニック紹介---------------------------*/

.clinic-intro {
	background: #D7EDEC url("../img/magokoro.png") no-repeat;
	background-position: left 0px top 0px;
	background-size: 80px auto;
	padding: 60px 25px;
}

.intro-inner {
	max-width: 1200px;
	margin: 0 auto;
}

.intro-text h2 {
	font-size: 1.7rem;
	margin-bottom: 0px;
	color: #2E9BAF;
	text-align: center;
}

.intro-subtitle {
	font-size: 0.9rem;
	color: #666;
	margin-bottom: 25px;
	letter-spacing: 2px;
	text-transform: uppercase;
	text-align: center;
}

.intro-main-img img {
	width: 100%;
	height: auto;
	border-radius: 20px;
	margin-bottom: 30px;
}


.intro-text p {
	line-height: 1.8;
	margin-bottom: 40px;
}

.intro-lead {
	font-weight: bold;
	font-size: 1rem;
}




/*症状コンテンツ----------------------------*/

.symptoms {
	background: #fff;
	padding: 30px 25px 80px;
}

.symptoms-inner {
	max-width: 1200px;
	margin: 0 auto;
}

.symptoms h2 {
	font-size: 1.5rem;
	margin-bottom: 0px;
	color: #2E9BAF;
	text-align: center;
}

.symptoms-subtitle {
	font-size: 0.9rem;
	color: #666;
	margin-bottom: 40px;
	letter-spacing: 2px;
	text-transform: uppercase;
	text-align: center;
}

/* 症状リスト（スマホ：2列 × 5行） */
.symptom-list {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 15px;
	text-align: center;
}

.symptom-item {
	padding: 15px;
	border: 1px solid #aaa;
	border-radius: 12px;
	background: #fff;
	font-size: 0.95rem;
	line-height: 1.4;
	color: #333;
	transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.symptom-item:hover {
	transform: translateY(-6px);
	box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.symptoms-note {
	background: #FFE9E2;
	border-radius: 20px;
	padding: 15px 20px;
	margin: 40px auto 0;
	max-width: 1200px;
	color: #333;
	line-height: 1.7;
}


/*診療時間----------------------------*/

.clinic-hours {
	padding: 50px 25px;
	text-align: center;
	background: #F6F6F6;
}

.hours-title {
	color: #2E9BAF;
	font-size: 1.5rem;
	margin-bottom: 10px;
}

.title-line {
	width: 100%;
	height: 1px;
	background: #2E9BAF;
	margin: 0 auto 30px;
}

.hours-table-wrap {
	overflow-x: auto;
}

.hours-table-wrap p{
	margin: 0;
}

.hours-table {
	width: 100%;
	max-width: 900px;
	margin: 0 auto;
	border-collapse: collapse;
	background: #fff;
	font-size: 16px;
}

.hours-table th {
	background: #2E9BAF;
	color: #fff;
	padding: 12px 0px;
	border: 1px solid #ddd;
	font-weight: 600;
}

.hours-table td {
	padding: 12px 0px;
	border: 1px solid #ddd;
	background: #fff;
}

.hours-info {
	max-width: 900px;
	margin: 10px auto 0;
	display: flex;
	flex-direction: column;
	gap: 5px;
	text-align: left;
}

.info-item h3 {
	margin-top: 5px;
	font-size: 16px;
	color: #2E9BAF;
	margin-bottom: 1px;
	line-height: 1;
}

.info-item h3::before {
	content: "●";
	color: #2E9BAF;
	margin-right: 6px;
	font-size: 0.9em;
}

.info-item p {
	font-size: 15px;
	line-height: 1.7;
	color: #333;
}

.hours-contact {
	background: #F6F6F6;
	padding: 30px 0px 10px;
}

.hours-info-box {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 20px;
}

/* 電話番号・受付時間 */
.hc-info {
	text-align: center;
}

.hc-tel {
	font-size: 2.3rem;
	font-weight: bold;
	line-height: 1;
	color: #333;
}

.hc-time {
	margin-top: 4px;
	font-size: 0.9rem;
	color: #666;
}

/* 仕切り（モバイルは非表示） */
.hc-divider {
	display: none;
}

/* 予約ボタン */
.hc-reserve {
	width: 90%;
    max-width: 320px; 
	background: #2E9BAF;
	color: #fff;
	text-decoration: none;
	padding: 12px 20px;
	border-radius: 30px;
	font-size: 1rem;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-weight: bold;
	transition: background 0.3s;
	justify-content: center;
}

.hc-reserve:hover {
	background: #0D778D;
}

.hc-reserve-icon {
	width: 20px;
	height: 20px;
}


/* ご挨拶  ----------------------- */
	
.greeting {
	background: #D7EDEC url("../img/magokoro.png") no-repeat;
	background-position: left 0 top 0;
	background-size: 80px auto;
	padding: 60px 25px;
}


.greeting-inner {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.greeting-text h2 {
	font-size: 1.5rem;
	margin-bottom: 0px;
	color: #2E9BAF;
	text-align: center;
}

.greeting-text .sub {
	font-size: 0.9rem;
	letter-spacing: 2px;
	color: #666;
	text-transform: uppercase;
	margin-bottom: 30px;
	text-align: center;
}

.greeting-doctor {
	order: 2; /* タイトルの次 */
	text-align: center;
}

.greeting-doctor img {
	width: 80%;
	border-radius: 16px;
	display: block;
	margin: 0 auto;
}

.dr-name {
	margin-top: 8px;
	font-size: 1.2rem;
	text-align: center;
}

.greeting-text {
	order: 3; 
	line-height: 1.8;
	margin-bottom: 40px;
}

/* ギャラリー・モバイルは縦並び */
.intro-gallery {
	display: grid;
	gap: 15px;
}

.gallery-card {
	position: relative;
}

.gallery-card img {
	width: 100%;
	border-radius: 20px;
	display: block;
}

.gallery-text {
	position: absolute;
	bottom: 0;
	width: 100%;
	background: rgba(0,0,0,0.6);
	color: #fff;
	padding: 15px;
	font-size: 0.9rem;
	line-height: 1.5;
	border-radius: 0 0 20px 20px;
	box-sizing: border-box;
}


/* 医師紹介ボタン */

.doctor-btn-wrap {
	display: flex;
	justify-content: flex-end; /* 横方向に右寄せ */
}

.doctor-btn {
	width: 85%;
	max-width: 350px;
	display: flex;
	align-items: center; /* 縦位置そろえる */
	padding: 20px 24px;
	background: #0D778D;
	color: #fff;
	text-decoration: none;
	border-radius: 10px;
	font-size: 1rem;
	transition: background 0.3s;
	font-weight: bold;
}

.doctor-btn::after {
	content: '';
	width: 120px;
	height: 10px;
	border-bottom: solid 1px;
	border-right: solid 1px;
	transform: skew(45deg);
	margin-left: auto;   /* ← ② 右寄せにするポイント */
	padding-left: 15px;  /* ← ① テキストとの隙間 */
} 

.doctor-btn:hover {
	background: #0B6172;
}


/*現在準備中---------------------------------------*/

.comingsoon {
  padding: 80px 20px;
  text-align: center;
  border-radius: 10px;
  margin: 40px 0;
}

.comingsoon h2 {
  font-size: 1.6rem;
  font-weight: bold;
  margin-bottom: 10px;
}

.comingsoon p {
  color: #666;
}


/*検査の案内---------------------------------------*/
.section {
  padding: 20px 0;
}

.inner {
  width: 90%;
  margin: 0 auto;
  max-width: 1200px;
}

.page-title {
  text-align: center;
  font-size: 24px;
  margin-bottom: 30px;
  padding: 15px 0;
  border-top: 1px solid #999;
  border-bottom: 1px solid #999;
  font-weight: 500;
}

.content-block {
	margin-bottom: 60px;
  display: block;
}

.text {
  line-height: 2;
  font-size: 16px;
  margin-bottom: 20px;
}

.image img {
  width: 100%;
  height: auto;
  border-radius: 10px;
  display: block;
}


/*診療の案内---------------------------------------*/

.medical-section {
	background: #fff;
	padding: 20px 25px 80px;
	border-top: 1px solid #A0A0A0;
}

.medical-inner {
	max-width: 1200px;
	margin: auto;
}

/* タイトル */
.medical-title {
	font-size: 1.7rem;
	font-weight: bold;
	color: #2E9BAF;
	margin-bottom: 0px;
	text-align: center;
}

.medical-subtitle {
	font-size: 0.9rem;
	color: #666;
	letter-spacing: 2px;
	margin-bottom: 25px;
	text-transform: uppercase;
	text-align: center;
}

/* グリッド */
.medical-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);  /* モバイル：2列 */
	gap: 30px;
}

/* カード */
.medical-card {
	background: #F8F8F8;
	border-radius: 12px;
	padding: 15px 5px;
	border: 1px solid #e4e4e4;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	transition: box-shadow 0.3s, transform 0.3s;
}

/* アイコン */
.medical-card img {
	width: 120px;
	height: auto;
	margin-bottom: 5px;
}

/* テキスト */
.medical-card p {
	font-size: 1rem;
	color: #333;
	font-weight: 600;
}

@media (hover: hover) {
  .medical-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.15);
  }
}
	

/*内視鏡検査の特徴---------------------------*/

.feature-section {
	background: #0D778D;
	padding: 70px 30px;
	color: #fff;
}

.feature-inner {
	max-width: 1200px;
	margin: 0 auto;
}

/* タイトル */
.feature-title {
	text-align: center;
	font-size: 1.5rem;
	font-weight: bold;
	margin-bottom: 0px;
}

.feature-subtitle {
	text-align: center;
	font-size: 0.9rem;
	letter-spacing: 2px;
	margin-bottom: 50px;
	opacity: 0.85;
}

/* ボックス共通（モバイル縦並び） */
.feature-box {
	margin-bottom: 60px;
}

.feature-img {
    width: 105vw;
    position: relative;
    left: 43%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    overflow: hidden;
    max-height: 500px;
}

.feature-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* モバイル：奇数 →写真右寄せ（左角丸） */
.feature-odd .feature-img img {
	border-radius: 20px 0 0 20px;
	margin-left: auto;
	width: 85%;
}

/* モバイル：偶数 →写真左寄せ（右角丸） */
.feature-even .feature-img img {
	border-radius: 0 20px 20px 0;
	margin-right: auto;
	margin-left: 30px;  
	width: 85%;
}

/* キャッチ + 説明 */
.feature-text h3 {
	font-size: 1.2rem;
	font-weight: bold;
	margin-bottom: 12px;
}

.feature-text p {
	line-height: 1.7;
	font-size: 0.95rem;
	color: #eefafa;
}


/*医師紹介----------------------------------*/
/* ▼ 上部のナビボタン */
.doctor-header-nav {
	display: flex;
	justify-content: center;
	gap: 30px;
	margin-top: 50px;
	margin-bottom: 20px;
	padding-bottom: 40px;
	border-bottom: 1px solid #bfbfbf;
	flex-wrap: wrap; /* モバイルで縦になる */
}

.nav-btn {
 	display: flex;
	justify-content: center;
	align-items: center;
	width: 200px;            /* ←ここで幅を固定（お好みでOK） */
	padding: 14px 0;
	background: #2E9BAF;
	color: #fff;
	text-decoration: none;
	border-radius: 8px;
	font-weight: bold;
	transition: 0.3s;
	font-size: 1rem;
}

.nav-btn:hover {
 	background: #0D778D;
}


/* ▼ 医師紹介 */
.doctor-profile {
	margin-top: 50px;
	padding: 20px 24px;
}

.doctor-profile-inner {
	display: flex;
	flex-direction: column;
 	gap: 10px;
	max-width: 1200px;
	margin: 0 auto 80px;
}

/* 写真（モバイルは全幅） */
.doctor-photo img {
 	width: 100%;
 	border-radius: 12px;
	margin-bottom: 30px;
	object-fit: cover;
}

.doctor-name {
 	font-size: 1.3rem;
 	font-weight: bold;
 	margin-bottom: 12px;
	text-align: center;
}


/*略歴*/
.career-table {
	width: 100%;
 	background: #fff;
 	border: 1px solid #cccccc;
 	border-radius: 12px;
 	padding: 20px;
 	border-collapse: separate;
 	border-spacing: 0;
 	box-shadow: 0px 3px 12px rgba(0,0,0,0.08); /* うっすら影 */
 	margin-bottom: 40px;
}

/* 行の区切り線（横線） */
.career-table tr + tr td,
.career-table tr + tr th {
 	border-top: 1px solid #e5e5e5;
}

/* thデザイン */
.career-table th {
 	width: 23%;
 	background: #E3F2F4;      /* 優しい青系 */
 	color: #0D778D;            /* キーカラー */
 	padding: 14px 16px;
 	font-weight: bold;
 	border-right: 1px solid #cccccc;
 	vertical-align: top;
 	text-align: left;
}

/* tdデザイン */
.career-table td {
 	padding: 14px 16px;
 	line-height: 1.7;
 	color: #333;
}


/*クリニック概要-----------------------------*/
.clinic-info-section {
	margin-bottom: 60px;
	padding: 10px 30px;
}

.clinic-info-inner {
	max-width: 1200px;
	margin: 0 auto;
}

.clinic-info-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 24px;
  font-size: 16px;
}

.clinic-info-table th,
.clinic-info-table td {
  padding: 25px 0;
  text-align: left;
}

/* 横線は各行の下だけ */
.clinic-info-table tr {
  border-bottom: 1px solid #e0e0e0;
}

.clinic-info-table th {
  width: 28%;
  font-weight: 700;
	padding-right: 20px;
}


/*アクセス----------------------------------*/
.map-wrap {
  width: 100%;
  max-width: 600px;
  margin: 50px auto 0;
}

.map-wrap iframe {
  width: 100%;
  height: 300px;
  border: 0;
  border-radius: 15px;
}


.map-table {
  width: 100%;
  border-collapse: collapse;
  margin: 24px auto 0;
  font-size: 16px;
}

.map-table th,
.map-table td {
	padding: 25px 0;
	text-align: left;
}

/* 横線は各行の下だけ */
.map-table tr {
	border-bottom: 1px solid #e0e0e0;
}

.map-table th {
	width: 28%;
	font-weight: 700;
	padding-right: 20px;
	vertical-align: top;
}



/*プライバシーポリシー------------------------*/

.policy-section {
 	padding: 60px 20px;
	background: #E7E7E7;
	border-bottom: 1px solid #666;
}

/* ボックス本体（モバイル → 100%　PC → max-widthで広め） */
.policy-container {
 	width: 100%;
 	max-width: 1200px; /* PC時に自然に広がる幅 */
 	margin: 0 auto;
 	background: #fff;
 	padding: 40px 50px;
 	border-radius: 12px;
 	box-shadow: 0 4px 16px rgba(0,0,0,0.08);
	box-sizing: border-box;	
}

.policy-content p {
  	line-height: 1.7;
 	font-size: 0.95rem;
 	color: #444;
 	margin-bottom: 30px;
}



/* 見出し（中央＋両サイドライン） */
.policy-heading {
	position: relative; 
 	font-size: 1.2rem;
 	font-weight: 800;
 	padding-left: 16px;
 	border-left: 6px solid #2E9BAF;
 	color: #2E9BAF;
 	text-shadow: 0 1px 2px rgba(0,0,0,0.15);
	margin-top: 45px;
 	margin-bottom: 24px;
}


.policy-heading::after {
 	content: "";
 	position: absolute;
 	left: 0;
 	bottom: 0;
  	width: 100%;   /* ★ 長さ調整ココ！（好みで200,250pxもOK） */
 	height: 1.5px;
 	background: #2E9BAF;
 	border-radius: 2px;
}

.policy-sub{
	margin-bottom: 0;
} 



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

.footer {
	background: #F6F6F6;
}

.footer-inner {
	max-width: 1200px;
	margin: 0 auto;
	padding: 60px 20px 0px;
}

.footer-title {
	text-align: center;
	font-size: 1.7rem;
	color: #2E9BAF;
	font-weight: bold;
	margin-bottom: 10px;
}

.footer-line {
	width: 100%;
	height: 1px;
	background: #2E9BAF;
	margin: 0 auto 40px;
}

/* --- レイアウト --- */
.footer-content {
	display: block; /* SP縦並び */
	text-align: center;
}

/* 左側（SP縦） */
.footer-left {
	margin-bottom: 40px;
}

/* ロゴ */
.footer-logo img {
	width: 350px;
	margin-bottom: 20px;
	margin: 20px auto; 
}

/* 住所 */
.footer-address {
	line-height: 1.8;
	color: #333;
	margin-bottom: 25px;
}

/* 駐車場案内 */
.parking-box {
	background: #fff;
	padding: 10px 30px 20px;
	border-radius: 12px;
	margin-bottom: 25px;
}

.parking-inner {
	background: #f3f3f3;
	padding: 12px;
	border-radius: 10px;
	font-weight: bold;
	border: 1px solid #6A6A6A; /* 太さ1px、実線、薄いグレー */
}

/* 電話 & 予約 */
.footer-contact {
	display: flex;
	flex-direction: column;
	gap: 15px;
	margin-bottom: 25px;
	text-align: center;
}

.footer-tel {
	display: inline-flex;
	font-size: 2.3rem;
	font-weight: bold;
	justify-content: center;
	gap: 8px;
}

.footer-tel-icon {
	width: 30px;
	height: 30px;
	position: relative;
    top: 4px;   /* ← ここで下げる（お好みで調整） */
}


.footer-time {
	margin-top: 10px;
	font-size: 0.9rem;
	text-align: left;
	color: #666;
	border: 1px solid #2E9BAF; 
	border-radius: 8px; 
	padding: 15px 12px; 
	display: inline-block; 
}

.footer-time p{
	margin: 0;
	text-align: center;
}

/* 予約ボタン */
.footer-reserve-btn {
	width: 90%;
	max-width: 320px;
	margin: 15px auto; 
	display: inline-flex;
	padding: 14px 20px;
	background: #2E9BAF;
	color: #fff;
	text-decoration: none;
	border-radius: 30px;
	font-weight: bold;
	font-size: 1rem;
	transition: background 0.3s;
	justify-content: center;
	gap: 8px;
}

.footer-reserve-btn:hover {
	background: #0D778D;
}

.footer-reserve-btn-icon {
	width: 20px;
	height: 20px;
}


/* リンク */
.footer-links {
	margin: 10px 0;
}

.footer-links a {
	color: #333;
	font-size: 0.9rem;
	text-decoration: none;
}

/* --- 右カラム（SP下に来る） --- */
.footer-right {
	text-align: center;
	margin-bottom: 40px;
}

.footer-map img {
	width: 100%;
	height: auto; 
	border-radius: 10px;
	margin-bottom: 15px;
}

.map-btn {
	width: 90%;
	max-width: 320px;
	display: inline-block;
	background: #C8E2E1;
	padding: 12px 20px;
	border-radius: 30px;
	font-size: 1rem;
	color: #333;
	font-weight: bold;
	text-decoration: none;
	transition: background 0.3s;
	justify-content: center;
}

.map-btn:hover {
	background: #A3DBD9;
}


/* ブルー帯ロゴ */
.footer-bottom-logo {
	width: 100%;
	background: #283892;
	padding: 5px 0;
	text-align: center;
}

.footer-bottom-logo img {
	width: 320px;
	margin: 10px auto;
}

/* コピーライト */
.footer-copy {
	background: #fff;
	padding: 12px 0;
	text-align: center;
	font-size: 0.85rem;
	color: #555;
	border-radius: 10px;
}


/*ページスクロール-----------------*/

.pagetop {
    position: fixed;
    right: 20px;
    bottom: 20px;
    width: 60px;
    height: 60px;
    background: rgba(0,0,0,0.5); /* 黒の50%透過 */
    color: #fff;
    font-size: 25px;
    text-align: center;
    line-height: 60px;
    border-radius: 12px; /* 角丸 */
    text-decoration: none;
    display: none; /* 最初は非表示 */
    transition: opacity 0.3s ease;
    z-index: 9999;
}

/* スクロールしたら表示 */
.pagetop.active {
    display: block;
    opacity: 1;
}



/* -------------------------------------------- */
/* ▼タブレット用デザインとして付け足すデザイン */
/* -------------------------------------------- */

@media (min-width: 768px) {

.hero-slider {
	margin-top: 0;
	height: 75vh;
}	
	
.hero-text {
	font-size: 2.3rem;
	max-width: 800px;
	margin: 0 auto;
}	

.clinic-intro {
    background-position: left 50px top 60px;
    background-size: 400px auto;
    padding: 100px 40px;
  }
	
 
/*ヘッダーメニュー-------------------------*/
.menu-icon {
	display: none; /* ハンバーガー消す */
  }	
	
#menu-toggle {
    display: none; /* チェックボックス消す */
  }		

.menu-wrapper {
	width: 100%;
    max-width: 500px;
    margin-left: auto; 
    padding: 0 10px 0 5px;
    display: flex;
    justify-content: flex-end;
    align-items: center;
  }	
	
.menu {
	position: static; 
 	width: auto;
    height: auto;
    box-shadow: none;
    background: none;
    transition: none;
  }

.menu ul {
    display: flex;
    gap: 15px;
    padding: 0;
    margin: 0;
  }

.menu li {
    margin: 0;
  }

.menu a {
    color: #333;
    font-size: 0.6rem;
	letter-spacing: -0.01em
  }
	
.overlay {
    display: none;
  }

  /* ボタンを右側へ寄せる */
.reserve-btn {
	font-size: 0.7rem;
    flex-shrink: 0; 
    padding: 8px 10px;
	border-radius: 30px;
	 margin-right: 10px;
    order: 2; /* メニューより右側にする */
  }

/*診療時間---------------------------------*/
.clinic-hours {
	padding: 50px 0;
  }

.clinic-hours-inner {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    gap: 20px;
    align-items: flex-start;
  }

.hours-table {
	width: 95%;
}	

.hours-table th:first-child,
.hours-table td:first-child {
	width: 25%; /* 好きな幅に調整できる */
}	
	
.info-item p {
	margin: 0px;
	font-size: 15px;
	line-height: 1.5;
	color: #333;
}
	
	
	
/* 左（表）を大きめ、右（info）を小さめに */
.hours-table-wrap {
    flex: 2;
  }
	
.hours-table-wrap p{
	text-align: left;
	padding-left: 15px;
}

.hours-info {
	margin-top: 0px;
	align-self: flex-end;  /* ★ これで下揃えになる！ */
    flex: 1;
  }	

	

/*お知らせ-----------------------------------*/
	
.news__inner {
    max-width: 1200px;    /* 最大幅を指定 */
    margin: 0 auto;/* 中央寄せ */
  }	
	
.news__title {
	font-size: 1.7rem;
    width: 1200px;   
  }	
	
.news__item {
    flex-direction: row; 
    align-items: center; 
	margin-bottom: 5px;
  }

.news__date {
    margin-bottom: 10px;            
    width: 110px; 
  }

.news__text {
    width: 100%;
    margin: 10px 0 8px 10px;
    display: block;
	flex: 1;
  }
	
.news__button-wrapper {
	text-align: right;
  }

/*お知らせ一覧用---------------------------*/
.news-list {
    max-width: 1200px;    /* 最大幅を指定 */
    margin: 100px auto;/* 中央寄せ */
}

	

/*ご挨拶----------------------------------*/

.greeting-inner {
	display: flex;
	flex-direction: row;
	gap: 40px;
	max-width: 1200px;
	margin: 0 auto;
}

.greeting-text h2 {
	text-align: left;
	font-size: 2rem;
	}	
	
	
/* 左側にあいさつ文 */
.greeting-text {
	flex: 2;
	order: 1;
	margin-bottom: 0px;
	}
	
.greeting-text p {
	order: 0; /* 全て文章内で自然に */
	margin-bottom: 20px;
	}
	
.greeting-text .sub {
	font-size: 0.9rem;
	text-align: left;
}
	
/* 右側に写真 + 名前 */
.greeting-doctor {
	flex: 1;
	order: 2;
	text-align: center;
	align-self: flex-start;
	}

.greeting-doctor img {
	width: 100%;
	max-width: 300px;
	}

.dr-name {
	text-align: left;
	margin-top: 10px;
	font-size: 1.3rem;
	text-align: center;
	}

/* ギャラリーは横並び3列 */
.intro-gallery {
	max-width: 1200px;
	display: flex;
	flex-direction: row;
	gap: 20px;
	margin: 40px auto 20px;
	}

.gallery-card {
	flex: 1;
	}

	
	
/*医師紹介--------------------------------*/
	
.doctor-profile-inner {
    flex-direction: row;
    align-items: flex-start;
  }
	
 .doctor-left {
    width: 33.333%;
    display: flex;
    flex-direction: column;
    align-items: center; /* 中央寄せ */
  }
	
.doctor-photo {
    width: 100%;      /* 1/3 カラム */
    display: flex;
    justify-content: center; /* 中央寄せ */
  }
	
.doctor-photo img {
    width: 63%;         /* 親幅に合わせて自動縮小 */
    height: auto;        /* 縦横比を維持 */
    object-fit: contain; /* 切れないようにする */
  }
	
 .doctor-name {
    margin-top: 5px;
    font-size: 1.2rem;
    text-align: center;   /* 左3分の1の中央に */
  }

.doctor-career {
    width: 66.666%;
  }

	
/*検査の案内-------------------------------*/
.section {
    padding: 60px 0;
  }

.page-title {
    font-size: 28px;
    margin-bottom: 50px;
    padding: 20px 0;
  }

.content-block {
    display: flex;
    gap: 40px;
    align-items: flex-start;
  }

.text {
    flex: 1;
    font-size: 17px;
  }

.image {
    flex: 0 0 40%;
  }
	
	
/*アクセス------------------------------*/
.map-wrap {
    max-width: 900px;  /* ★PC版で大きめに */
  }

.map-wrap iframe {
    height: 500px;     /* ★縦も拡大 */
  }


.map-table {
  width: 75%;
}	
	
	
/*プライバシーポリシー-----------------------*/
.policy-heading {
 	font-size: 1.5rem;
	}
	
.policy-content p {
 	font-size: 1.1rem;
}
	
/*フッター---------------------------------*/
 .footer-content {
    display: flex;
    justify-content: space-between;
    gap: 40px;
  }

 .footer-left {
	order: 1;
    width: 50%;
  }

 .footer-right {
    width: 50%;
	order: 2;
    text-align: right;
  }

 .footer-contact {
    flex-direction: row; /* PC：横並び */
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
	margin: 20px 0;
  }

/* ロゴ */
.footer-logo img {
	width: 90%;
	margin: 0px auto 20px; 
}	

/* 駐車場案内 */
.parking-box {
	font-size: 13px;
	margin-bottom: 0px;
}
	
.footer-tel-icon {
	top: 15px;
}	

	
/* 予約ボタン */
.footer-reserve-btn {
	width: 40%;
	max-width: 220px;
	display: inline-flex;
	padding: 14px 15px;
	font-size: 0.8rem;
	gap: 5px;
	margin: 0 auto; 
}

.footer-reserve-btn-icon {
	width: 18px;
	height: 18px;
}

/* 住所 */
.footer-address {
	font-size: 14px;
	margin-bottom: 10px;
}	
	
	
.footer-map img {
    width: 98%;
	height: auto; 
	display: block; 
    margin-left: auto;
}

.map-btn {
    margin: 30px auto 0;
    display: block;
    text-align: center;
	width: 93%;
	max-width: 640px;
	font-size: 1.2rem;
}


.footer-links {
	text-align: left;
}

	
/*ページスクロール-----------------*/

.pagetop {
    width: 80px;
    height: 80px;
    font-size: 30px;
    line-height: 75px;
}

	
/* ------------------------------------ */
/* ▼PC用デザインとして付け足すデザイン */
/* ------------------------------------ */

@media (min-width: 1080px) {

.logo img {
	height: 30px;
	width: auto;
	flex-shrink: 0;
}	
	
.pc-tel {
    display: block;        /* PCで表示 */
    line-height: 0;
    color: #333;
    white-space: nowrap;  
    flex-shrink: 0; 
  }

.pc-tel .tel-number {
    font-size: 1.2rem;
    font-weight: bold;
  }

.pc-tel .tel-time {
    font-size: 0.7rem;
  }		

.menu-wrapper {
    padding: 0 10px;
  }	
	
.menu a {
    color: #333;
    font-size: 0.7rem;
  }
	
	
/*診療時間-------------------------------*/

.clinic-hours-inner {
    gap: 15px;
 }	

	

/*クリニック紹介-------------------------*/
	
.clinic-intro {
	background-position: left 0px top 0px;
	background-size: 125px auto;
	padding: 100px 20px;
}	
	
.intro-main-block {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    align-items: center; 
}

.intro-text h2 {
	font-size: 2.3rem;
	text-align: left;
}
	
.intro-subtitle {
	text-align:left;
}
	
	
.intro-lead {
	font-weight: bold;
	font-size: 1.4rem;
}


	
	
/*内視鏡検査の特徴---------------------------*/
	
.feature-box {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 150px;
  }
	
/* タイトル */
.feature-title {
	text-align: left;
	font-size: 2.3rem;
	font-weight: bold;
	margin-bottom: 0px;
}

.feature-subtitle {
	text-align: left;
	font-size: 0.9rem;
	letter-spacing: 2px;
	margin-bottom: 50px;
	opacity: 0.85;
}

  /* PC：奇数（①③） → 左にテキスト、右に写真 */
.feature-odd {
    grid-template-areas: "text img";
  }
.feature-odd .feature-text {
    grid-area: text;
  }
.feature-odd .feature-img {
    grid-area: img;
    text-align: right;
  }
.feature-odd .feature-img img {
    border-radius: 20px 0 0 20px;
    width: 90%;
  }

  /* PC：偶数（②） → 左に写真、右にテキスト */
.feature-even {
    grid-template-areas: "img text";
  }
.feature-even .feature-text {
    grid-area: text;
  }
.feature-even .feature-img {
    grid-area: img;
    text-align: left;
  }
.feature-even .feature-img img {
    border-radius: 0 20px 20px 0;
    width: 90%;
  }

.feature-text h3 {
    font-size: 1.7rem;
  }

.feature-text p {
	font-size: 1.2rem;
}	
	
.feature-img {
    max-height: none;
	height: auto;
}	
	
.feature-img img {
    height: 320px; /* 好きな高さに調整（250〜350pxが一般的） */
    object-fit: cover;
}
	
/* PC：奇数 →写真右寄せ（左角丸） */
.feature-odd .feature-img img {
	border-radius: 20px 0 0 20px;
	margin-left: auto;
	width: 70%;
}
	
/* PC：偶数 →写真左寄せ（右角丸） */
.feature-even .feature-img img {
	border-radius: 0 20px 20px 0;
	margin-right: auto;
	margin-left: 30px;  
	width: 70%;
}

	
/*フッター-------------------------------*/
.footer-tel {
	font-size: 2.1rem;
	gap: 8px;
}

.footer-tel-icon {
	width: 25px;
	height: 25px;
}

}
	
	
/* ------------------------------------ */
/* ▼PC用デザインとして付け足すデザイン */
/* ------------------------------------ */

@media (min-width: 1200px) {

.menu-wrapper {
    max-width: 550px;
  }		
	
.menu a {
    color: #333;
    font-size: 0.8rem;
  }	

.reserve-btn {
    padding: 8px 15px;
  }	
	
	
.pc-tel {
	margin-left: 10px;
  }
	
		
  /* キャッチコピー */	
.hero__copy {
	margin: 0 auto;
	max-width: 1200px;
 	font-size: 3rem;
}
	

	
/*症状コンテンツ-----------------------------*/

.symptoms h2 {
	font-size: 2rem;
	text-align:left;
}

.symptoms-subtitle {
	text-align:left;
}
	
.symptom-list {
    grid-template-columns: repeat(5, 1fr);
  }

.symptom-item {
    font-size: 1rem;
    padding: 20px;
  }
	
.symptoms-note {
	text-align: center;
  }
	
	
	
/*診療のご案内------------------------------*/	

.medical-title {
	font-size: 2rem;
	text-align: left;
}

.medical-subtitle {
	text-align: left;
	margin-bottom: 40px;
}	
		
.medical-grid {
    grid-template-columns: repeat(4, 1fr);
  }
	
/*内視鏡検査の特徴---------------------------*/

/* PC：奇数 →写真右寄せ（左角丸） */
.feature-odd .feature-img img {
	border-radius: 20px 0 0 20px;
	margin-left: auto;
	width: 63%;
	height: 400px;
}
	
/* PC：偶数 →写真左寄せ（右角丸） */
.feature-even .feature-img img {
	border-radius: 0 20px 20px 0;
	margin-right: auto;
	margin-left: 30px;  
	width: 63%;
		height: 400px;
}
	
/*プライバシーポリシー----------------------*/
.feature-inner {
	width: 1200px;
}
	
	
/*フッター-------------------------------*/
.footer-tel {
	font-size: 2.8rem;
	gap: 8px;
}

.footer-tel-icon {
	width: 36px;
	height: 36px;
	top: 8px;   /* ← ここで下げる（お好みで調整） */
}

.footer-time {
	padding: 20px;
	font-size: 1rem;
}

	/*
.footer-time p{
	font-size: 1.2rem;		
	}*/	
	
/* 予約ボタン */
.footer-reserve-btn {
	max-width: 250px;
	font-size: 1.2rem;
	gap: 10px;
}

.footer-reserve-btn-icon {
	width: 25px;
	height: 25px;
}
	
}
	

@media (min-width: 1400px) {
#header {
	height: 85px;
    padding: 0;
	gap:10px;
  }	

.menu-wrapper {
    max-width: 800px;
	padding: 0;
  }	
	
.pc-tel {
	margin-left: 0px;
  }

.pc-tel .tel-time {
    font-size: 0.85rem;
  }		

.menu ul {
    gap: 25px;
  }		
	
.menu a {
    font-size: 0.95rem;
}
	
.pc-tel .tel-number {
    font-size: 1.2rem;
  }	
	
.logo img {
	height: 30px;
	padding-left: 20px;
}
	
  /* ボタンを右側へ寄せる */
.reserve-btn {
	font-size: 1rem;
    padding: 10px 20px;
  }
}
	
	
@media (min-width: 1600px) {
#header {
	gap:20px;
}	
	
.menu a {
    font-size: 0.95rem;
}
	
.logo img {
	height: 45px;
}

.pc-tel .tel-number {
    font-size: 1.5rem;
 }	
	
  /* ボタンを右側へ寄せる */
.reserve-btn {
	font-size: 1rem;
    padding: 10px 25px;
  }
}