@charset "UTF-8";
/*
Theme Name: miyaoclinic-theme2
Author: cosmos-factory
Version: 2.0.1
*/

/*
* {
  outline: 1px solid red !important;
}

*/



html {
  /* ブラウザの初期値16pxの62.5% ＝「10px」を基準（1rem）にする */
  font-size: 62.5%; 
}

body	{margin: 0;
	font-family: "じゅん 201";
	font-size: 1.6rem;
	line-height: 1.5;
-webkit-text-size-adjust: 100%;
}



h1, h2, h3, h4, h5, h6 {
  margin: 0 0 0.5em 0; /* 下側にだけ少し余白を作る */
  color: #1a202c;
  font-family: "じゅん 501";
  line-height: 1.3;
}

/* 個別のサイズ設定（上が大きく、下に行くほど小さく） */
h1 { font-size: 3.2rem; }   /* 最も大きい大見出し */
h2 { font-size: 2.4rem; } /* 中見出し */
h3 { font-size: 2rem; }/* 小見出し */
h4 { font-size: 1.5rem; }
h5 { font-size: 1rem; }
h6 { font-size: 0.875rem; }


/* ===================================================
   独自クラス（custom-post-content）専用の回り込み設定
=================================================== */

/* 左寄せ */
div.custom-post-content .alignleft,
div.custom-post-content img.alignleft {
    display: inline !important;
    float: left !important;
    margin: 0 20px 20px 0 !important;
}

/* 右寄せ */
div.custom-post-content .alignright,
div.custom-post-content img.alignright {
    display: inline !important;
    float: right !important;
    margin: 0 0 20px 20px !important;
}

/* 回り込みの解除 */
div.custom-post-content::after {
    content: "";
    display: block;
    clear: both;
}



/* ------------------- 基本構造 ------------------- */

.outer
{
	
display: flex;
  justify-content: center; /* 左右の中央揃え */
  align-items: center;    /* 上下の中央揃え */
  min-height: 100vh;          /* 親要素の高さ（例: 画面の高さ全体） */

}

.inner{


	box-sizing: border-box;
	margin: 0 auto;
	width: 100%;
	max-width:900px;
}

@media (max-width: 900px) {
.inner{
	padding-left: 10px;
	padding-right: 10px;
}
}


.midashi{
	border-radius: 12px;
	background-image: url("images/wood-back.jpg");
	color: #fff;
	font-size: 2.5rem;
	text-align: center;
	margin:20px 0;
}




.pagebox {
  /* 💡中身の量に合わせて下方向へ自然に伸びる可変設定 */
  min-height: 100vh !important;
  height: auto !important; 
  box-sizing: border-box !important; 
  
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start !important; /* 基準線を狂わせない上詰め配置に統一 */
  position: relative !important;
  
  /* 親の箱自体へのスナップ命令はすべて「none（解除）」にし、内部の目印タグにすべて委ねます */
  scroll-snap-align: none !important; 
  scroll-snap-stop: unset !important;
  
  padding-top: 0 !important; 
}


/* ヘッダー */
header	{

	width: 100%;
	padding: 5px;
	box-sizing: border-box;
	zoom: 1}

#header-inner	{
	width: 100%;
	max-width:1200px;
	margin: 0 auto;
}

	/* ------------------- top ------------------- */
.top-img{
	width: 100%;
	max-width:400px;
	margin: 0 auto;
}
	
.top-lead{
		width: 100%;
		color: #f37;
		 text-align: center;
		font-size: 2.5rem;
		font-family: "じゅん 501"; 
	}	
	


.top-copy {
  list-style: none;
 padding-top: 10px;
}

/* 各li要素の基本設定 */
.top-copy li {
  opacity: 0; /* 最初は見えないようにする */
  transform: translateY(20px); /* 少し下にずらしておく */
  animation: fadeIncopy 0.8s ease forwards;
  padding: 10px;
}

/* アニメーションの定義 */
@keyframes fadeIncopy {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 各li要素に順番に遅延（animation-delay）を設定 */
.top-copy li:nth-child(1) { animation-delay: 1s; }
.top-copy li:nth-child(2) { animation-delay: 2s; }
.top-copy li:nth-child(3) { animation-delay: 3s; }
.top-copy li:nth-child(4) { animation-delay: 4s; }
.top-copy li:nth-child(5) { animation-delay: 5s; }


floating-outer{
		overflow-x: hidden;
		overflow-y: visible;
		 width: 100%;
}
	
.floating-list {
 color: #f9c;
  list-style: none;
  padding: 0;
  margin: 0;
  position: absolute;
  top: 0　;
  left: 0;
  width: 100%;
								z-index: 1;
overflow-y: visible; /* 上下は完全にはみ出させる */
  height: auto; 
}

.floating-list li {
  position: absolute; 
  display: inline-block;
  writing-mode: vertical-rl; 
  text-orientation: upright; 
  white-space: nowrap;       
  left: auto; 

  /* --- 追加：文字の右側（および左側）の欠けを防ぐ --- */
  padding: 0 0.2em; 

  /* 必要に応じて、文字の見切れを完全に防ぐ魔法のプロパティ */
  overflow: visible;

  /* 【修正】浮遊アニメーション(random-float)と、新設のフェードアニメーション(random-fade)を2つ指定 */
  animation-name: random-float, random-fade;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
  animation-direction: alternate; /* 往復運動を維持 */
}

@keyframes random-float {
  0% {
    transform: translate(0, 0) rotate(0deg);
  }
  33% {
    transform: translate(15px, -60px) rotate(15deg);
  }
  66% {
    transform: translate(-15px, -30px) rotate(-15deg);
  }
  100% {
    transform: translate(10px, -150px) rotate(5deg);
  }
}

/* 【追加】表示・非表示（フェード）を滑らかに繰り返すアニメーション */
@keyframes random-fade {
  0%, 100% {
    opacity: 0; /* 完全に非表示 */
  }
  40%, 60% {
    opacity: var(--max-opacity, 1); /* JavaScriptで計算した文字サイズ毎の最適な透明度 */
  }
}

	

@media screen and (max-height: 520px) {
  .floating-list {
    height: 150px !important; /* 縦書き文字のエリアも少し縮める */
  }
	}
	
/* ------------------- topお知らせ ------------------- */	
	
.info-outer{
		display: flex; 
		gap: 24px;
}
.info-cont{
  flex: 1; 
	}
.info-img {
  width: 300px; /* 右側の幅を300pxに固定 */
		flex-shrink: 0; /* 画面が狭くなっても右側が縮まないように固定 */
		display: flex;
  align-items: center;      /* 上下（垂直）方向の中央揃え */
  justify-content: center;
	}
	
@media (max-width: 768px) {
  .info-outer{
    flex-direction: column; /* 上下に並べる */
    gap: 24px;
  }

  .info-cont{
    flex: 1;
  }

 
  .info-img{
    order: -1;      
    width: 100%;   
    max-width: 300px; 
    margin: 0 auto; 
  }
}

	
.midashi2{
text-align: center;
  display: inline-block;
  width: 100%;
  margin-bottom: 10px;
  padding: 5px;
  border-radius: 12px;
  background-color: #fee;
  font-size: 2.0rem;
  color: #f16;
	}
	
.midashi-info{
  text-align: center;
	}
	
.midashi-info {
text-align: center;
  position: relative;
  display: inline-block;
  width: 100%;
  margin-bottom: 26px;
  padding: 10px;
  border-radius: 12px;
  background-color: #f16;
  font-size: 1.8rem;
  color: #fff;
	}
.midashi-info::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 17%;
  border-style: solid;
  border-width: 26px 16px 0 0;
  border-color: #f16 transparent transparent;
  translate: calc(-50% - 0.2px) 100%;
  transform: skew(42deg);
  transform-origin: top;
}
	

.speechBubble::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 17%;
  border-style: solid;
  border-width: 26px 16px 0 0;
  border-color: #9bee8c transparent transparent;
  translate: calc(-50% - 0.2px) 100%;
  transform: skew(42deg);
  transform-origin: top;
}
	
.cat_box_1{
	box-sizing: border-box;
	width:100%;
	height:auto;
	padding:8px 10px 0px 10px;
	margin-bottom:20px;
}

.cat_txt_1{
	box-sizing: border-box;
	width:100%;
	float:left;
	margin-left:-80px;
	padding:0;
	font-size: 1.6rem;
	line-height:20px;
}
.cat_txt_1 a{
		color: #f37;
		text-decoration: none;
}
.cat_txt_2{
	margin-left:80px;
}


.cat_photo_1 {
	width:80px; 
	height:80px; 
	float:right;
	overflow:hidden;
	margin:0;
}
	
.date-top{
	float:left;
	font-size: 1.4rem;
}

.more1{
	margin:0;
	padding-left:10px;
		line-height:140%;
		font-size: 1.4rem;
}

	
/* ------------------- top診察時間・休診日 ------------------- */	
.schedule-img	{
	width:80%; 
	max-width:400px; 
	margin:0 auto;
}
.time{
	width:100%; 
		text-align: center;
		padding:20px;
		box-sizing: border-box;
	}
.time p{
	margin:0;
 padding:0;
	}
	
.yoyaku-tel{
	margin:0;
		padding:0;
		font-size: 3.8rem;
		color: #f16;
		font-family: "じゅん 501";
	}
	
.guide-img	{
	width:80%; 
	max-width:300px; 
	margin:0 auto;
	}
	
	
/* ------------------- 院内設備 ------------------- */
.equipment-container {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  grid-auto-rows: minmax(140px, max-content) !important;
  gap: 12px !important;
  grid-auto-flow: dense !important;
}

.equipment {
  display: flex !important;
  flex-direction: column !important;
  /* 上下に無理に広げず、画像と文字を上に詰める */
  justify-content: flex-start !important; 
  align-items: center !important;
  background-color: #fee;
  border: 2px solid #f69;
  border-radius: 8px;
  padding: 10px;
  box-sizing: border-box !important;
  width: auto !important; 
}

.equipment img {
  width: 100% !important;
  /* 高さを中身（自動）に任せる */
  flex: 0 0 auto !important; 
  max-height: none !important; 
  object-fit: contain !important;
}

.equipment .caption {
  text-align: center;
  font-size: 14px;
  color: #000;
  font-weight: bold;
  margin-top: 6px; /* 画像とキャプションを密着させる */
}

/* --- サイズバリエーションの修正 --- */

/* 横長（変更なし） */
.equipment.wide {
  grid-column: span 2 !important;
  grid-row: span 1 !important;
}

/* 縦長（【重要】ここにalign-selfを追加） */
.equipment.tall {
  grid-column: span 1 !important;
  grid-row: span 2 !important;
  
  /* 【ここを追加】2マス分の高さに強制拡大させず、中身のサイズで縦幅を縮める */
  align-self: flex-start !important; 
}

/* 画面幅が620px以下のときの設定 */
@media screen and (max-width: 620px) {
  /* 親要素：4列から1列（100%幅）に変更 */
  .equipment-container {
    grid-template-columns: 1fr !important;
    grid-auto-rows: auto !important; /* 高さをコンテンツに合わせる */
  }

  /* 子要素：すべてのサイズ指定（wideやtall）を解除して1列に収める */
  .equipment.wide,
  .equipment.tall {
    grid-column: span 1 !important;
    grid-row: span 1 !important;
    align-self: stretch !important; /* 横幅いっぱいに広げる */
  }

  /* 画像：スマホ画面でも見やすいように適度な大きさに固定 */
  .equipment img {
    max-height: 200px !important; /* 縦に長くなりすぎるのを防ぐ */
  }
}

/* ------------------- アクセス ------------------- */
.access-body{
		display: flex;
		gap: 16px;
		padding-bottom:10px;
	}
.access-cont{
flex: 1;
  display: flex;
  align-items: center;  
  justify-content: center; 
text-align: right;
	}
.access-img	{
flex: 1;
display: flex;
align-items: center;
justify-content: center;
		}
.access-img img	{
			width:80%;
			max-width:250px; 
}	
		
		.ac1{
	margin:0;
		padding:0;
		font-size: 2rem;
		color: #f16;
		font-family: "じゅん 501";
		}
.bus img{
	width:80%;
		}
	
.parking-cont{
flex: 1;
  display: flex;
  align-items: center;  
  justify-content: center; 
text-align: left;
	}
.parking-img	{
flex: 1;
display: flex;
align-items: center;
justify-content: center;
	}
.parking-img img {
width: 100%;
	}
	
	
@media (max-width: 768px) {
  .access-body{
    flex-direction: column; /* 上下に並べる */
    gap: 24px;
  }

.access-cont{
			flex: 1;
						 text-align: center;
  }

  /* 右側（画像）を上にしたいので順序を入れ替え */
.access-img{
    order: -1;       /* 画像を先頭へ */
    width: 100%;    /* モバイルは幅いっぱい */
    max-width: 300px; 
			margin: 0 auto; /* 中央寄せ */
			 text-align: center;
		}
		
.parking-cont{
			flex: 1;
						 text-align: center;
  }

  /* 右側（画像）を上にしたいので順序を入れ替え */
.parking-img{
    order: -1;       /* 画像を先頭へ */
    width: 100%;    /* モバイルは幅いっぱい */
    max-width: 500px; 
			margin: 0 auto; /* 中央寄せ */
			 text-align: center;
  }
		
}
	
	
/* ------------------- 自由診療 ------------------- */
table.tablepress.pmc{
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  border: 1px solid #e6e6e6; /* これで一番上・外枠も線になります */
  border-radius: 10px;
  overflow: hidden;
}

/* セル全体 */
table.tablepress.pmc td{
  padding: 12px 14px;
  border-bottom: 1px solid #ededed; /* 行間の線 */
  font-size: 1.4rem;
  line-height: 1.6;
  vertical-align: middle;
  background: #fff;
}

/* 一番下にも線を入れる（最後行の下線を消さない） */
table.tablepress.pmc tr:last-child td{
  border-bottom: 1px solid #ededed;
}

/* 一番上にも線を入れる（1行目の上に線） */
table.tablepress.pmc tr.row-1 td{
  border-top: 1px solid #ededed;
}

/* 左列：ワクチン名（幅固定） */
table.tablepress.pmc td.column-1{
  text-align: left;
  font-weight: 600;
  color: #222;
  width: 260px;          /* 固定幅：ここを調整 */
  white-space: normal;
}

/* 右列：金額（幅可変） */
table.tablepress.pmc td.column-2{
  text-align: right;
  font-weight: 600;
  color: #111;
  width: auto;           /* 可変 */
  white-space: normal;  /* 長文は折り返し */
}

/* （任意）tablepressの装飾が強い場合に備えて、区切り線を優先 */
table.tablepress.pmc tbody tr td{
  border-bottom-color: #ededed;
}

.sa{ 
width: 100%;
max-width: 300px;
		margin:0 auto;
		text-align: center;
		}
.sa img{ 
width: 100%;
		}
.yoyakusei{ 
		color: #f39;
		 font-size: 3.4rem;
		}
	
	
	/* ------------------- 医師紹介 ------------------- */
.doctor{
	box-sizing: border-box;
	padding-top: 10px;
	padding-bottom: 10px;
}

.note{
	padding-left: 20px;
	font-size: 12px;
}
.outL{
	box-sizing: border-box;
	width: 50%;
	float: left;
	padding-right: 10px;
}


.outR{
	box-sizing: border-box;
	width: 50%;
	float: right;
	padding-left: 10px;
}


.outL2{
	box-sizing: border-box;
	width: 50%;
	float: left;
	padding-right: 10px;
	padding-left: 60px;
}
.med-1{
	margin-top: -5px;
	padding:0;
	font-size: 20px;
	color: #822;
	text-align: center; 
}



.medL{
	box-sizing: border-box;
	width: 50%;
	float: left;
	padding-right: 10px;
}
.medR{
	box-sizing: border-box;
	width: 50%;
	float: right;
	padding-left: 10px;
}


	
.doc{
	background-image: url(images/wood-back.jpg);
	width: 150px;
	padding: 2px 8px;
	border-radius: 10px;
	color: #fff;
	text-align: center; 
	font-size: 15px
}
.doc2
{
	margin-top: 5px;
	margin-bottom: -5px;
	font-size: 20px
}
.doc3
{
padding-left: 20px;
margin-top: 5px;
margin-bottom: 10px;
}

.doc-image{
	box-sizing: border-box;
	width: 100%;
	max-width: 250px;
	padding: 0;
	margin: 0 auto;
}
.doc-prf{
	box-sizing: border-box;
	width: 100%;
	padding: 0;
	margin: 0 auto;
}


table.career {
	border-collapse: collapse;
	width: 100%;
	line-height: 1.5;
}
table.career th {
	text-align: right;
	width: 25%;
	padding: 3px;
	font-weight: bold;
	vertical-align: top;
}
table.career td {
	width: 75%;
	padding: 3px;
	vertical-align: top;
			}
			
/* ------------------- 自由診療・診断書 ------------------- */
.medical{
	width: 80%;
				max-width: 300px;
				margin: 0 auto;
			}
.medical img{
	width: 100%;
			}
			

/* ------------------- 投稿 ------------------- */
.b-notice{
color: #f05; 
	}
			
.post img{
max-width: 100%;
 
	}
	
#single{
 background-color: #fcd; 
	}
	
#single .inner{
		background-color: #fff; 
		 padding:20px;
	}
	
 /* 記事のカテゴリー表示 */
/* 全体 */
.title-out{
 background-image: url("images/wood-back.jpg");
  padding:12px 16px ;
  display:flex;
  justify-content:space-between ;
  align-items:center ;
  gap:16px ;
}

.postcat{
		border-radius: 999px;
		font-size: 1.2rem;
		line-height: 1;
		padding:5px 10px ;
		background: #f16;
		white-space: nowrap;
	}
	
.postcat a{
		color: #fff;
		text-decoration: none;
}

.title-out .datetime{
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  justify-content: flex-end; /* datetime内は右寄せ */
}


/* 年月日 */
.title-out .datetime .year,
.title-out .datetime .month,
.title-out .datetime .day{
  color: #fff;
}

/* 曜日 */
.title-out .datetime .youbi{
  margin-left: 6px;
  padding-left: 8px;
  border-left: 1px solid #e5e5e5; /* 曜日だけ区切り */
  color: #fff;
}
	
.title {
		margin-top: 15px;
}
	
.title a{
		color: #f37;
		text-decoration: none;
}

			
  /* ページネーション */

.pagenation{
font-size: 1.5rem;
width: 100%;
overflow: hidden
			display:block;
	 margin-top:30px;}

p.pagenation a{
	color: #555;
	text-decoration: none;
}

.oldpage	{float: left}

.newpage	{float: right}
					
					
.more a {
	color: #888;
	text-decoration: none;
			}
			
/* -------------------カテゴリ-ページ ------------------- */
.post-list-item{
  display: flex;
  align-items: flex-start; /* 上端を揃える */
				gap: 20px;
margin-bottom:20px;
}

.post-list-item .thumb{
  flex: 0 0 auto;
  line-height: 0; /* 画像の下の余白/基準線ズレを潰す */
}

.post-list-item .thumb img{
  display: block; /* 画像の基準線ズレ防止 */
}
.post-list-item .post-body p{
margin:0;
 padding:0;
						}


/* -------------------気になる症状 ------------------- */
.kininaru-link {
  display: block;   /* リンクをブロック要素にして全体に広げる */
 text-decoration: none; /* 下線を消す */
  color: inherit;   /* 文字色を親要素から引き継ぐ */
						}
						
.kininaru {
width:80%;
max-width:500px;
margin:10px auto;
padding:20px;
  border: 1px solid #eee;
  background-color: #fee;
  border-radius: 20px; /* 角を少し丸くすると今風になります */
  
  /* アニメーションの速度を設定（0.3秒かけて滑らかに変化） */
  transition: box-shadow 0.3s ease, transform 0.3s ease; 
}

/* 2. ホバー時の設定 */
/* 方法1（aタグで囲んだ場合） */
.kininaru-link:hover .kininaru {
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15); /* 影をつける */
  transform: translateY(-4px);                  /* 少し上に浮かび上がらせる（お好みで） */
						}
						
.kininaru p{
margin:0;
 padding:0;
font-size: 2.0rem;
}	
						
						
/* ------------------- フッター ------------------- */

#page-top {
    position: fixed;
    bottom: 20px;
        right:10px;
}

						

/* フッター全体の背景など */
.site-footer {
  background-color: #fab;
  color: #fff;
padding: 40px 20px;
border-bottom: solid 10px #f68;
						width:100%;
						box-sizing: border-box;
}
					
					
/* 1. コンテナの設定（念のため再確認） */
.footer-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;
  max-width: 1200px;
  width: 100%;
  margin: 0 auto;
}

/* 2. 店舗情報とマップを「それぞれ半分（約50%）」に指定 */
.footer-info {
  width: 48%; /* 左右の余白を残すため少し小さめに指定 */
box-sizing: border-box;
text-align: center;
					}
					
.footer-info .tablepress{
						width: 100%;
						box-sizing: border-box;
}
					

.footer-map {
  width: 48%; /* マップの親枠も半分に指定 */
box-sizing: border-box;
}

/* 3. マップ本体をその半分（48%）の枠いっぱいに広げる */
.footer-map iframe {
  width: 100% !important; /* これで48%の枠いっぱいの大きさになります */

}

/* スマホ対応（画面幅が狭くなったら縦並びにする） */
@media (max-width: 900px) {
  .footer-info, .footer-map {
    width: 100%; /* スマホでは横幅いっぱいに */
  }
  .footer-map {
							margin-top: 20px;
							box-sizing: border-box;
  }
}

						
						
						
.clear { clear:both; }  
.clear hr { display:none; }  

/* PC-mobile */

@media (min-width: 620px){
.mobile {	display:none;}
}
@media (max-width: 620px) {
.pc {	display:none}
																										}
																										
																										
/* -------------------------------------------------
  病名から探す
   ------------------------------------------------- */