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

@media screen and (min-width: 769px) and (max-width: 1024px) {
#subject > ul.top-subject-list > li > .top-subject-t-box{
	width: 80%;
	margin: 1rem auto;
}
}

@media screen and (max-width: 767px) {
.header-nav-sp > .logo{
	width: 334px;
	height: auto;
	margin-top: 0.75rem;
	margin-bottom: 0.5rem;
}
}

@media screen and (max-width: 5767px) {
.header-nav-sp > .logo{
	width: 60%;
	height: auto;
	margin-top: 1.15rem;
	margin-bottom: 0.75rem;
	margin-left: 0.5rem;
}
}

@media screen and (max-width: 767px) {
.container,.container-news,.container-table,.container-hi,.container-max,
.container-footer{
  width: 90%;
  max-width: none;
}	
	
/* ＜TOPページ＞ */
/* hero */
#hero{}
.hero-anchor{position: relative;}

.slider {
  display: block;
  width: 100%;
  height: auto;
  max-height: 555px;
  margin-inline: auto;
  overflow: hidden; /* 画像がはみ出ないようにする */
} 
	
.slider-img {
	height: 100%;
}
	
.slick-img img {
	width: 100%;
	height: 100%;
	display: block;
	object-fit: cover;
	margin: 0;
}
	
.hero-news{
	position: static;
	display: block;
	bottom: none;
	right: none;
	width: 95%;
	margin-right: 5%;
	margin-left: 0%;
	height: auto;
	background-color: rgba(255,255,255,0.50);
	padding: 10px 30px 22px 10px;
}	
	
.hero-news-flex {
	display: -webkit-flex;
	display: flex;
	-webkit-flex-wrap: wrap;
	flex-wrap: wrap;
	-webkit-justify-content: space-around;
	justify-content: space-around;
}
	
.hero-news-flex-left{
	width: 88%;
	height: auto;
	margin-right: auto;
	margin-left: auto;
}	
		
.hero-news-flex-left h2{
	font-size: 22px;
	font-weight: 600;
	color: #333333;
	padding-bottom: 7px;
	margin-bottom: 0;
	border-bottom: solid 1px #2C9B9F;
}	
	
.hero-news-flex-right{
	width: 88%;
	padding-top: 10px;
	padding-bottom: 10px;
}	
	
.top-features-whopper{
	margin-top: -22rem;
	z-index: 9999!important;
}
	
	
ul.top-features-list {
	width: 100%;
	height: auto;
	margin: 0 !important;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}

ul.top-features-list li {
	width: 100%;
	margin: 1% 1% 5% 1%;
	padding-bottom: 2rem;
	list-style: none;
	background-color: #FFFFFF;
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); 
}

#subject > ul.top-subject-list{
	width: 100%;
	height: auto;
	/* Flexboxを追加 */
	display: flex; 
	/* 子要素が折り返さないようにする（デフォルトですが明示的に） */
	flex-wrap: wrap; 
	margin-top: -0.5rem;
	margin-bottom: -0.5rem;
}

#subject > ul.top-subject-list > li{
	width: 100%;
	height: 380px;
	margin: 0!important;
	flex-shrink: 0;
	text-align: center;
	overflow: hidden;
	background-size: cover;
    background-repeat: no-repeat;
	background-attachment: inherit;
	background-position: top;
}

#subject > ul.top-subject-list > li > img{
	margin-top: 3rem;
	width: 90px;
	height: auto;
}

#subject > ul.top-subject-list > li > .top-subject-t-box{
	width: 85%;
	margin: 1rem auto;
}

#subject > ul.top-subject-list > li > .top-subject-t-box > p{
	font-size: 16px;
	color: #FFFFFF;
}
	
#subject .top-subject-about {
    padding-top: 50px; /* PC版より小さく */
    padding-bottom: 50px; /* PC版より小さく */
}

/* 横並びを解除し、縦並びにする */
#subject .t--s--a--anchor {
    display: block; /* Flexboxを解除 */
}

/* テキスト部分 (左側) の調整 */
#subject .t--s--a--whopper-left {
    /* flex設定を解除し、幅を100%に */
    flex: none;
    width: 90%;

    /* PC版で設定されていたマージンやz-indexをリセット */
    margin-right: 0;
    position: static;
    z-index: auto;

    /* パディングをモバイル向けに調整 */
    padding: 20px; 
}

/* テキストボックスの幅を100%に */
#subject .t--s--a--left-box {
    width: 100%;
}

/* h2のフォントサイズ調整（任意） */
#subject .t--s--a--left-box h2 {
    font-size: 25px;
    margin-bottom: 10px;
}

/* pタグのフォントサイズ調整（任意） */
#subject .t--s--a--left-box p {
    font-size: 16px;
	text-align: justify;
}

/* 画像部分 (右側) の調整 */
#subject .t--s--a--whopper-right {
    /* flex設定を解除し、幅を100%に */
    flex: none;
    width: 100%; 

    /* PC版で設定されていたz-indexをリセット */
    position: static;
    z-index: auto;

    /* テキストブロックとの間にマージンを追加 */
    margin-top: 20px; 
}

/* 画像の表示調整 (必要に応じて) */
#subject .t--s--a--whopper-right img {
    /* 画像をコンテナいっぱいに表示 */
    width: 100%;
    height: auto;
    display: block;
}
	
/* タイトルセクションの調整 */
#flow .top-flow-whopper h1{
    font-size: 48px; /* 大きなタイトルを小さく */
    letter-spacing: 0.2rem;
    line-height: 1.3;
}

#flow .top-flow-whopper span{
    font-size: 18px; /* サブタイトルを小さく */
    line-height: 1.2;
}

#flow .top-flow-whopper p{
    /* font-variant-position: 15px; はCSSのプロパティとして不適切なので削除または修正が必要です。 */
    /* font-variant-positionの代わりによく使われるmargin-topなどを仮に設定 */
    margin-top: 15px;
    font-size: 14px; /* テキストを読みやすいサイズに */
}

/* フローリストの調整 */
#flow ul.top-flow-list {
    margin: 3rem 0 0 0; /* マージンを調整 */
    display: block; /* li要素を縦に積み重ねるためにblockに変更 */
}

/* リストアイテムの調整 */
#flow ul.top-flow-list li {
    width: 90%; /* 全幅を使用 */
    margin: 0 0 2rem 0; /* マージンを調整して縦に間隔を空ける */
    padding: 1rem; /* 内側の余白を追加 */
    box-shadow: 0 2px 5px rgba(0,0,0,0.1); /* 区切りを分かりやすく */
}

/* フローアイコン（円形要素）の調整 */
#flow .flow-item,
#flow .flow-item-end{
    width: 150px; /* アイコンサイズを小さく */
    height: 150px;
    margin-bottom: 1rem;
}

/* フローアイコン内の画像の調整 */
#flow .flow-item img,
#flow .flow-item-end img{
    width: 150px; /* アイコンサイズに合わせる */
    height: auto;
}

/* 進行方向を示す矢印の削除または変更 */
#flow .flow-item::after{
    /* モバイルでは縦積みにするため矢印を非表示に（または下に方向を変える）*/
    content: none; /* 矢印を非表示 */
    /* もし縦に矢印を出す場合は以下のように変更
    content: "";
    width: 10px;
    height: 10px;
    border-top: 2px solid #333;
    border-right: 2px solid #333;
    top: auto;
    bottom: -20px;
    right: 50%;
    transform:translateX(50%) rotate(135deg); */
}

/* フロー番号とタイトルの調整 */
#flow .top-flow-list h2.flow-no{
    font-size: 18px;
    margin: 5px auto;
    /* flow-numberとのレイアウト調整のため、必要に応じてcenterからleftなどに変更も考慮 */
    justify-content: flex-start;
}

.flow-number{
    font-size: 18px;
    width: 20px;
    height: 20px;
    margin-right: 8px;
}

/* 説明文の調整 */
#flow .top-flow-list p{
    font-size: 14px;
    padding-bottom: 0;
    margin-bottom: 10px;
}

/* リンクの調整 */
#flow .top-flow-list a{
    font-size: 14px; /* リンクを少し大きくしてタップしやすく */
}
	
/* 表 */
ul.gaiyou{
	width: 90%;
	height: auto;
	margin: 0;
	padding: 0;
	margin-bottom: 10% !important;
	margin-left: 0 !important;
	list-style: none;
}	
	
ul.gaiyou li ul li:first-child,
ul.gaiyou li ul li:last-child{
	width: 100%;
}
	
ul.gaiyou li ul li:first-child br,
ul.hyo li ul li:first-child br{
	display: none;
}
	
ul.gaiyou li ul li:first-child,
ul.hyo li ul li:first-child{
	text-align: left;
	width: 100%;
}	
	
ul.gaiyou li ul li:first-child span{
	width: 100%;
}
	
ul.gaiyou li ul li:first-child{
	width: 100%;
}
	
.gaiyou{
    padding: 0 0 2rem 0;
}
	
ul.gaiyou li ul{
	padding: 0 40px 15px 15px;
}
	
/* フッターコンテンツのコンテナ */
.footer-whopper {
    /* アイテムを縦に並べる（スマホの標準的な配置） */
    flex-direction: column; 
    /* アイテム間のスペースを上下左右に均等に配置するのではなく、左寄せにするなど、より詰まった配置に変更 */
    justify-content: flex-start;
    /* 折り返しは不要（縦に並べるため） */
    flex-wrap: nowrap;
    /* スマホで横幅いっぱいに使う */
    padding: 1rem 1rem 1rem 0.5rem; /* 内側の余白を追加 */
}

/* フッターアイテム全体（左側・右側） */
.f--item-left,
.f--item-right {
    /* 幅を100%にして縦に積み重ねる */
    width: 100%;
    /* 左右のマージンをリセット */
    margin-right: 0;
    /* 各アイテム間のスペースを確保 */
    margin-bottom: 1.5rem; 
    /* スマホでは要素を左寄せにする（より自然な流れに） */
    text-align: start; 
}

/* 2つ目のフッターアイテム（右側）の特定スタイル解除 */
.footer-whopper:nth-child(2) {
    width: 100%; /* 幅を100%に */
    order: 2; /* 順序はそのままか、または不要 */
}

/* ロゴの調整 */
.f-logo {
    /* スマホ画面に合わせて幅を調整（例：最大幅100%に） */
    max-width: 100%; 
    width: auto;
    height: auto;
    /* 中央寄せにする場合は以下のコメントアウトを解除 */
    /* display: block;
    margin-left: auto;
    margin-right: auto; */
}

/* 右側テキストの調整 */
.f--item-right-text p {
    /* 左側のマージンを少し減らすか、リセット */
    margin-left: 0; 
    /* 必要であればフォントサイズも調整（既存の14pxでも問題ないことが多い） */
    /* font-size: 14px; */ 
}

/* フッターメニュー（ナビゲーション） */
ul.f-menu {
    /* スマホ画面に合わせて上下のパディングを調整 */
    padding-top: 0.8rem;
    padding-bottom: 0.8rem;
    /* 背景色はそのままでOK */
}

/* メニューリストアイテム */
ul.f-menu li {
    /* インライン表示からブロック表示（縦並び）に変更、またはインラインのままパディングを広げる */
    display: block; /* 縦に並べる場合 */
    text-align: center; /* テキストを中央寄せに */
    font-size: 13px; /* 少し大きくしてタップしやすく */
    padding: 0.3rem 0; /* 上下のパディングを追加してタップ領域を確保 */
}

/* メニュー項目の装飾を調整 */
ul.f-menu li .f-menu-item::after {
    /* 区切り線（パイプライン）は、縦並びになった場合不要なので削除 */
    content: none; 
    border-right: none;
    padding-right: 0;
}

/* コピーライト */
.copyright p {
    font-size: 10px; /* 少し小さくても良い */
    padding-top: 0.7rem;
    padding-bottom: 0.7rem;
}	
	
.table-container {
    /* 親要素の幅に合わせて表示を制限 */
    width: 100%;
    /* 画面に収まらない場合に横スクロールを有効にする */
    overflow-x: auto;
    /* スクロールバーのデザインを調整したい場合はここに追加 */
    -webkit-overflow-scrolling: touch; /* iOSで滑らかなスクロールを実現 */
}	
	
.schedule-table {
    width: 100%;
    max-width: 700px;
    border-collapse: collapse;
    background-color: #ffffff;
    border-radius: 10px;
    overflow: hidden;
}
	
/* ＜受診される方へページ＞ */	
.exa-box h2{
	font-family: YuMincho, "Yu Mincho", "Hiragino Mincho ProN", "serif";
	font-weight: 500;
    display: inline-block;
    align-items: center; /* 縦方向の中央揃え */
	margin-bottom: 0;
}

.exa-box h2::before{
	content: "";
    background-image: url("https://yano-naika-cl.com/wp2025/wp-content/uploads/2025/10/icon-heart.png");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    width: 20px;   /* アイコンの幅 */
    height: 20px;  /* アイコンの高さ */
    margin-right: 8px;
    display: inline-block;
}

.exa-box span.exa-sub-span{
	font-size: 14px;
	margin-left: 28px;
    display: block;
 	margin-top: 4px; /* 上部との間隔 */
}
	

/* ul.exa-column-2 (リスト全体) の設定 */
ul.exa-column-2{
	display: flex;
	/* 変更点: 要素の折り返しを許可し、縦に積み重ねる設定に変更 */
	flex-wrap: wrap; 
	/* 変更点: 横並びをやめ、要素を左寄せにするか中央に寄せる */
	justify-content: flex-start; /* または center */
	
	/* 変更点: 左右の余白を適切に調整 */
	margin: 0 5%; /* 左右に5%のマージンを設定（例） */
    padding: 0; /* リストのデフォルトのパディングをリセット */
    /* gridプロパティはWebサイトのレイアウト（全体）によりますが、ここでは削除します */
}

/* ul.exa-column-2 li (各リストアイテム) の設定 */
ul.exa-column-2 li{
	border: solid 3px #E5F3F4;
	border-radius: 10px;
	/* 変更点: 幅を100%にして縦一列にする */
	width: 100%; 
	height: auto;
	padding: 10px 15px; /* パディングを上下に広げ、左右を調整 */
    margin-bottom: 12px; /* アイテム間にスペースを追加し、見やすくする */
    /* width: 100%; にしたので、flex-basis: 100% と flex-grow: 1 は不要 */
}

/* h5 の設定は維持 */
ul.exa-column-2 li h5{
	margin: 0;
	padding: 0;
	font-size: 16px; /* スマホ向けに少し小さく */
	margin-top: 0.5rem;
	margin-bottom: 0;
}

/* p の設定は維持 */
ul.exa-column-2 li p{
	margin: 0;
	padding: 0;
	margin-top: 0.35rem;
	font-size: 15px;
}
	
.exa-box .exa-whopper{
    width: 90%; /* スマホ画面の左右に余白を持たせる（例: 5%ずつ）*/
    max-width: 600px; /* タブレット程度の最大幅を設定 */
    margin-left: auto; /* 中央寄せ */
    margin-right: auto; /* 中央寄せ */
 	padding: 0;
 	background-color: #ffffff;
 	box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.1); /* スマホ向けに影を控えめに */
 	margin-top: 2rem; /* マージンを少し調整 */
}

.exa-box .exa-w-title{
	width: 100%;
	padding: 0; /* padding: 15px auto; は無効なので削除 */
	background-color: #E5F3F4;
}

.exa-box .exa-w-title h3{
	margin: 0;
	padding: 12px 15px; /* 上下左右のパディングを調整 */
    font-size: 18px; /* メインタイトルを調整 */
}

.exa-box .exa-w-title h3 span{
	font-size: 10px; /* サブテキストをさらに小さく */
	margin-left: 8px; /* マージンを詰める */
	font-weight: 400;
	/* 補足：横幅が狭い場合は、spanを改行させるために display: block; にしても良い */
}

.exa-box .exa-w-list{
    display: flex;
    flex-direction: column;
    list-style: none;
    padding: 15px;
    margin: 0;
}

.exa-box .exa-w-list li,
.exa-box .exa-w-list li.exa-w-l-item-end{
    display: flex;
    align-items: center;
    margin-bottom: 15px;
    padding: 10px 0;
    border-bottom: 1px solid #eee;
	width: 100%;
	margin: auto;
	border-left: none;
}	
	
.exa-box .exa-w-list li.exa-w-l-item-end{
    border-bottom: none;
    margin-bottom: 0;
	border-left: none;
	border-right: none;
}

.exa-box .exa-w-list li img,
.exa-box .exa-w-list li.exa-w-l-item-end img {
    width: 20%;
    height: auto;
    flex-shrink: 0;
    margin-right: 20px;
}

.exa-box .exa-w-list li p,
.exa-box .exa-w-list li.exa-w-l-item-end p{
	flex-grow: 1;
    font-size: 16px;
    line-height: 1.5;
    margin: 0;
    padding: 0;
}

.exa-box .exa-w-interview {
 	text-align: center;
	padding: 15px;
	border-top: 1px solid #eee; /* リストとの区切り線 */
}

.exa-box .exa-w-interview h3 {
 	font-size: 16px; /* フォントサイズを小さく */
 	font-weight: 500;
 	color: #333;
 	margin-top: 10px; /* マージンを詰める */
 	margin-bottom: 10px; /* マージンを詰める */
 	letter-spacing: 0.05em;
}

.exa-box .exa-btn-interview {
 	display: block;
 	width: 100%;
 	max-width: 250px; /* ボタンの最大幅を少し広げる */
 	margin: 10px auto 15px; /* 中央寄せに変更 (margin-left, margin-rightをautoに) */
 	padding: 12px 20px; /* パディングを調整 */
 	font-size: 18px; /* フォントサイズを調整 */
 	font-weight: bold;
 	color: #333;
 	text-decoration: none;
 	background-color: #fff;
 	border: 2px solid #4a9e9e;
 	transition: background-color 0.3s, opacity 0.3s;
 	cursor: pointer;	
}

.exa-box .exa-btn-interview p{
	text-align: center;
	margin: 0;
	padding: 0;
}

.exa-box .exa-note {
    display: block; /* 注釈を独立した行にする */
    font-size: 10px;
    color: #666;
    margin-top: 5px;
}

.exa-box .exa-btn-interview:hover {
 	background-color: #e0f0f0;	
 	opacity: 0.9;
}

.exa-box ul.exa-w-flow{
    padding: 0 5px; /* 左右に適切な余白を確保 */
    margin: 0;
    list-style: none; /* リストの点を削除 */
}

.exa-box ul.exa-w-flow li{
    /* 変更点: 要素を縦に積み重ねる (アイコンとテキストが縦並びになる) */
	display: flex;
    flex-direction: column; 
    align-items: center; /* 中央寄せ */
	position: relative;
    /* 調整: 上下のアイテムとの間隔を確保 */
	margin-bottom: 2rem;
	padding-bottom: 2rem; /* フローの区切り線「▼」のための下部パディング */
}

.exa-box ul.exa-w-flow li:last-child{
	margin-bottom: 0rem; /* 最後のアイテムは下部マージンを削除 */
	padding-bottom: 0rem; /* 最後のアイテムは下部パディングを削除 */
}
	
.exa-w-f-title{
    /* 調整: スマホ向けにアイコンサイズを少し小さく */
	width: 80px;
	height: 80px;
	border: solid #35C6E2 2px;	
	border-radius: 50%;
    /* display: flex; などは維持して、pを中央に配置 */
	display: flex;
	justify-content: center;
	align-items: center;
    margin-bottom: 10px; /* テキストとの間隔 */
}

.exa-w-f-title p {
 	color: #35C6E2;	
    /* 調整: フォントサイズを調整 */
 	font-size: 1.2rem; 
 	line-height: 1;
}

.exa-w-f-text{
    /* 変更点: 横のパディングを削除し、幅いっぱいに広げる */
	width: 100%; 
	padding: 0;
	margin: 0;
	font-size: 16px; /* フォントサイズを調整 */
    text-align:justify;
}

.exa-w-f-text p {
    margin: 0;
    padding: 0;
	margin-top: 0.75rem;
	margin-bottom: 0.75rem;
	font-size: 15px;
}

.exa-w-f-text-bver{
	margin-top: 0rem;
}

.exa-box ul.exa-w-flow li::after{
	content: "▼";
	color: #35C6E2;
    /* 調整: サイズは維持 */
	font-size: 1.5rem; 
	position: absolute;
    /* 変更点: 縦積みになったため、leftを50%にして中央に配置 */
	bottom: 0rem;	/* liのpadding-bottom: 2rem; の中に収まるように調整 */
	left: 50%;	
	transform: translateX(-50%);
}

.exa-box ul.exa-w-flow li:last-child::after {
 	content: none;
}	
	
.exa-box .exa-w-reservation{
    /* 変更点: 横並びから縦並びのブロックに変更 */
	display: block; 
    /* 横並びに関する flex プロパティは削除 */
    padding: 15px; /* 上下左右に適切なパディング */
    text-align: center; /* コンテンツを中央寄せにする */
}

.exa-box .exa-w-reservation > div:first-child{
    margin-bottom: 20px; /* 対応時間との間にスペースを作る */
}

.exa-box .exa-w-reservation p{
	margin: 0;
	padding: 0;
    font-size: 14px; /* テキストサイズを調整 */
}

.exa-box .exa-w-reservation a {
    /* 中央に配置し、タップ領域を広げる */
 	display: inline-flex; /* flexをinline-flexに変更して中央寄せに対応 */
 	align-items: center;
 	text-decoration: none;
	margin-top: 5px; /* 上部マージンを詰める */
    /* タップしやすいように上下左右にパディングを追加して領域を広げる */
    padding: 10px 15px;
    border-radius: 8px;
    background-color: #f0f8ff; /* 背景色を付けてタップ領域を明確化 */
}

.exa-box .exa-w-reservation a .fa-phone {
 	color: #35C6E2;
    /* 変更点: 電話アイコンを大きくして目立たせる */
 	font-size: 28px; 
 	margin-right: 15px;
}

.exa-box .exa-w-reservation h4{
    /* 変更点: 電話番号をさらに大きくして目立たせる */
	font-family: YuMincho, "Yu Mincho", "Hiragino Mincho ProN", "serif";
	color: #35C6E2;
	font-size: 28px; 
	margin: 0;
	padding: 0;
	display: inline;
	line-height: 1;
    white-space: nowrap; /* 電話番号が途中で改行されないようにする */
}

.exa-box .exa-w-reservation > div:last-child p{
    /* 対応時間テキストの調整 */
    font-size: 14px;
    line-height: 1.6;
}
	
/* ＜院内紹介ページ＞ */
.c-guidance{
	margin-top: 2rem; /* マージンを詰める */
	margin-bottom: 2rem;
    padding: 0 15px; /* 左右に余白を設定 */
}

#guidance .guidance-title{
	font-family: YuMincho, "Yu Mincho", "Hiragino Mincho ProN", "serif";
	font-size: 16px; /* フォントサイズを小さく */
	color: #8F4C28;
	margin: 0;
	padding: 0;
}

#guidance h2{
	font-size: 32px; /* h2を大幅に小さく */
	color: #DAA799;
	font-family: YuMincho, "Yu Mincho", "Hiragino Mincho ProN", "serif";
	margin: 0;
	padding: 0;	
	margin-top: -0.2rem; /* マージンを詰める */
	margin-bottom: 1rem;
	font-weight: 500;
}

#guidance .g-whopper{
    /* flex設定は維持しつつ、justify-contentを調整 */
 	display: flex;
 	flex-wrap: wrap;
 	justify-content: space-between; /* 2列表示にする場合は space-between が適切 */
 	width: 100%;
}

#guidance .g-whopper .g-w-item{
    /* 変更点: スマホ向けに幅を100%にする（縦一列） */
 	flex-basis: 100%;
 	margin-bottom: 20px; /* アイテム間に適切なスペースを作る */
 	text-align: center;
}

/* 3列表示用の調整は不要になるため削除 */
.g-w-item:nth-child(3n) {
 	margin-right: 0;
}

#guidance .g-w-i-frame{
	background-blend-mode:lighten;
	width: 100%;
    /* 調整: 縦長になりすぎないよう高さを調整 */
 	height: 200px; 
 	background-size: cover;
 	background-position: center;
 	background-repeat: no-repeat;
 	overflow: hidden;
	margin: 0;
	padding: 0;	
	background-attachment: inherit;
	margin-bottom: 10px;
	position: relative;
	border-radius: 10px; /* 角丸を少し小さく */
}

#guidance .guidance-white{
	position: absolute;
	bottom: 0;
	right: 0;
	z-index: 1;
    /* 調整: スマホ向けにサイズを少し小さく */
 	width: 60%;
 	height: 60%; 
 	clip-path: polygon(0 100%, 100% 0, 100% 100%);	
	background-color: rgba(255,255,255,0.90); /* 透明度を上げて文字を見やすく */
 	aspect-ratio: auto;
}

#guidance .g-w-text{
	position: absolute;
 	right: 0%;
 	bottom: 5%;
 	padding: 5px 10px; /* パディングを詰める */
 	text-align: right;	
 	z-index: 11;	
 	width: 100%;	
}

#guidance .g-w-text h3{
	position: static;	
 	margin: 0;
 	line-height: 1.2;
	color: #8F4C28;
    font-size: 18px; /* 見出しを調整 */
}

#guidance .g-w-text span{
 	display: block;
 	font-size: 0.7em; /* サブテキストを調整 */
 	opacity: 0.7;
 	margin-bottom: 3px; /* マージンを詰める */
 	font-weight: normal;
	color: #DAA799;
}
	
.under-table-covid table {
    border-collapse: collapse;
    width: 100%;
    font-size: 14px;
}

.under-table-covid th,
.under-table-covid td {
    text-align: center!important;
    border: 1px solid #000;
    padding: 10px 15px;
    vertical-align: middle;
    background-color: #fff;
    white-space: nowrap;
}

#access{
	margin-bottom: 0;
}
	
#faq{
	margin-top: -5rem;
}

main,
.sidebar{
	float: none;
	width: 95%;
	height: auto;
	margin-right: auto;
	margin-left: auto;
}
	
main{
	margin-bottom: 2.5rem;
}
	
.single-top-margin{
	margin-bottom: 2.5rem;
}	
	
ul.news-list-main li hr{
  border: none;
  height: 0.5px;
  background-color: #ccc; /* 薄い灰色など、任意の色 */	
}
	
span.sp-news-list-link{
	margin-top: 1.5rem;
	font-weight: 600;
	font-size: 12px;
	color: #3E4048;
}
	
.post-line{
	margin-top: 2rem;
	margin-bottom: 1.5rem;
  border: none;
  height: 0.5px;
  background-color: #ccc; /* 薄い灰色など、任意の色 */	
}

.post-title{
	font-family: "Zen Old Mincho", "Yu Mincho Light", YuMincho, "Yu Mincho", 游明朝体, "ヒラギノ明朝 ProN", "Hiragino Mincho ProN", "ＭＳ 明朝", "MS Mincho", serif;
	font-size: 20px;
	line-height: 40px;
	font-weight: 500;
	letter-spacing: 0.66px;
	color: #3E4048;
}	
	
#under-page .custom-list {
	margin: 0;
    padding-left: 0; 
    list-style: none;
    counter-reset: custom-counter;
	margin-top: 1.75rem!important;
}

#under-page .custom-list li {
    display: flex;
	align-items: baseline;
	margin-bottom: 1rem;
    padding-left: 0;
	font-size: 16px;
}

#under-page .custom-list li::before {
    counter-increment: custom-counter;
    content: counter(custom-counter) ".　"; 
    font-weight: normal;
    min-width: 0.5em;
	margin-right: 0.25em;
    text-align: right;
	flex-shrink: 0;
}

#under-page .custom-list li .text-content {
    flex-grow: 1; /* 残りのスペースを埋める */
}
}

@media screen and (max-width: 768px) {
    /* 表を囲むラッパーに対して適用 */
    .scroll-table-wrap {
        /* 横幅を親要素に合わせる */
        width: 100%; 
        /* 横方向のスクロールを許可 */
        overflow-x: auto; 
        /* 縦方向のスクロールは隠す (通常不要) */
        overflow-y: hidden; 
        /* スクロールバーを見やすくするための設定（任意） */
        -webkit-overflow-scrolling: touch; 
    }
    
    /* 表自体の幅はそのまま維持（親要素より広くなる） */
    .scroll-table-wrap table {
        /* 必要に応じて、表の最小幅を設定するとより確実 */
        /* min-width: 600px; */ 
    }

    /* ... その他のスマホ向けスタイル ... */
}


@media screen and (max-width: 768px) {
.greeting-left{
	float: none;
	width: 100%;
}

.greeting-right{
	float: none;
	width: 50%;
	margin: 0 auto;
}

.greeting-name{
	width: 68%;
	margin: 0 0 0 auto;
	margin-top: 1rem;}

.greeting-name img{
	width: 100%;
	height: auto;
}
	
/* historyテーブル全体の設定 */
table.history {
    width: 100%; /* 親要素いっぱいに広げる */
    border-collapse: collapse; /* セルの境界線を一つにまとめる */
    margin: 20px 0; /* 上下の余白 */
    table-layout: fixed; /* 列幅指定を正確に反映させる */
}

/* 年月（左側）のセル設定 */
table.history .history-date {
    /* 年月欄の幅を30%に設定 */
    width: 15%; 
    padding: 10px 5px!important; 
    text-align: center!important;
    font-weight: bold; /* 強調 */
    vertical-align: top; /* 上揃え */
    /* 年月欄の背景色を薄くすることもできます */
    /* background-color: #f5f5f5; */
}

/* 沿革内容（右側）のセル設定 */
table.history .history-content {
    /* 内容欄の幅を70%に設定 */
    width: 80%; 
    padding: 10px 15px;
    text-align: start!important;
    vertical-align: top; /* 上揃え */
}

/* 各行の罫線 */
table.history tr {
    /* 各行の下に細い実線を入れる */
    border-bottom: 1px solid #ddd; 
}

/* 最後の行の下線を削除（オプション） */
table.history tr:last-child {
    border-bottom: none; 
}

p.about-philosophy{
	font-size: 19px;
	font-family: ten-mincho-text, serif;
	font-weight: 400;
	line-height: 1.8;	
}

p.about-greeting{
	font-size: 17px;
	font-family: ten-mincho-text, serif;
	font-weight: 400;
	line-height: 1.8;	
}
	
	
}