@charset "utf-8";

.pc_only { display:block; }
.pc_only_inline { display:inline-block; }
.sp_only { display:none; }
.sp_only_inline { display:none; }
@media screen and (max-width: 480px){
	.pc_only { display:none; }
	.pc_only_inline { display:none; }
	.sp_only { display:block; }
	.sp_only_inline { display:inline-block; }
}
.mg_0_auto{margin:0 auto;}
.mg_t24{margin-top:24px;}

/* タイトル枠（外側） */
.ttl_outer{
box-sizing: border-box;
width: 94%;
height: 70px;
border: 1px solid #A5546F;
margin: 12px auto 28px;
padding: 2px;
background: transparent;
}

/* タイトル枠（内側） */
.ttl_inner{
box-sizing: border-box;
width: 100%;
height: 64px;
/* 外枠から2pxの間隔を作る */
margin: 0;
padding: 0;
border: 1px solid #F3BED4;
/* 背景画像（左220px/上0pxに配置） */
background-image: url("image/title_bk.jpg");
background-repeat: no-repeat;
background-position: right 0px top -40px;
background-size: auto;
/* 中のページ名画像を絶対配置する基準 */
position: relative;
}

/* 各ページで置くページ名画像 */
.ttl_inner #page_ttl{
position: absolute;
top:10px;
left: 32px;
width: 160px;
height: 48px;
}
.ttl_inner #page_ttl img{/* imgで入れる場合、はみ出しを防ぐ */
display: block;
width: 160px;
height: 48px;
}

/* header menu */
#head-menu {
line-height: 1;
z-index: 999;
display:none;
}
#head-menu a,
#head-menu {
color: #fff;
text-decoration: none;
}
#head-menu .inner {
position: relative;
}
/* Toggle Button */
#nav-toggle {
display: none;
position: absolute;
right: 12px;
top: 14px;
width: 34px;
height: 36px;
cursor: pointer;
z-index: 101;
}
#nav-toggle div {
position: relative;
}
#nav-toggle span {
display: block;
position: absolute;
height: 4px;
width: 100%;
/*background: #68c4e9;
background: #03428c;*/
background: #e50056;
/* border:1px solid #0a52a0; */
border:2px solid #fff;
left: 0;
-webkit-transition: .35s ease-in-out;
-moz-transition: .35s ease-in-out;
transition: .35s ease-in-out;
}
#nav-toggle span:nth-child(1) {
top: 0;
}
#nav-toggle span:nth-child(2) {
top: 11px;
}
#nav-toggle span:nth-child(3) {
top: 22px;
}
@media screen and (max-width: 480px){

#head-menu,
.inner {
width: 100%;
height:57px;
margin-top:30px;
padding: 0;
display:block;
}
#head-menu {
top: 0;
position: fixed;
margin-top: 0;
height:56px;
}
/* Fixed reset */
#head-menu.fixed {
padding-top: 0;
background: transparent;
}
#mobile-head {
; /* opaque white backgroudn makes to be able to see the behind.. */
background: url("../image/spmenu_fixbar_bk.png") repeat-x center top;
/*border-bottom:1px solid #aaa; */
width: 100%;
height: 56px;
z-index: 999;
position: relative;
}
.sp_logo a{
display:block;
width: 171px;
height: 42px;
position: absolute;
margin:0;
padding:0;
top:10px;
left:12px;
background: url("./image/sp_header_logo.png") no-repeat 0 0;
-webkit-background-size: 171px 42px;
-moz-background-size: 171px 42px;
-ms-background-size: 171px 42px;
background-size: 171px 42px;
font:0px/0px sans-serif;
}
#global-nav {
z-index:998; /* important */
position: absolute;
/* 開いてないときは画面外に配置 */
top: -620px; /* @@@ need to change due to the height of sp_menu */
/*background: #f4dce6;*/
background: #fff;
width: 100%;
text-align: center;
padding: 0;
-webkit-transition: .5s ease-in-out;
-moz-transition: .5s ease-in-out;
transition: .5s ease-in-out;
}
/* #global-nav ul#pc_menu { */
#global-nav {
display:block;
}
/* #global-nav #sp_menu_wrapper { */
#global-nav #sp_menu_wrapper {
margin:0;
padding:0;
overflow:hidden;
/*
overflow:auto;
overflow-y: auto;
max-height: 880px;
*/
}
/* #global-nav #sp_menu_wrapper::-webkit-scrollbar{width:6px;}*//*バーの太さ*/
/* #global-nav #sp_menu_wrapper::-webkit-scrollbar-track{background:#fff;}*//*バー背景色*/
/* #global-nav #sp_menu_wrapper::-webkit-scrollbar-thumb{background:#ddd;}*//*バー色*/
/* #global-nav ul#sp_menu { */
#global-nav ul#sp_menu {
display:block;
list-style: none;
position: static;
margin: 40px 0 32px;
padding: 0;
right: 0;
bottom: 0;
font-size: 15px;
.*border:2px solid #68c4e9;*/
width:100%;
/*
height: 100%;
overflow: auto;
-webkit-overflow-scrolling: touch;
*/
}
/* #global-nav ul#sp_menu li { */
#global-nav ul#sp_menu li {
margin:0;
/* border:2px solid #68c4e9; */
float: none;
position: static;
background-image: url("./image/sp_navi_li_bk.png");
background-repeat: x-repeat;
background-position:left bottom;
height:52px;
}
/* #head-menu #global-nav ul#sp_menu li a,
#head-menu.fixed #global-nav ul#sp_menu li a { */
#global-nav ul#sp_menu li a {
width: 100%;
display: block;
color: #A5546F;
font-weight:bold;
padding: 16px 8px;
box-sizing:border-box;
}
/* #head-menu #global-nav ul#sp_menu li a.bb,
#head-menu.fixed #global-nav ul#sp_menu li a.bb { */
#global-nav ul#sp_menu li a.bb {
border-bottom:1px dotted #68c4e9;
}
/* #head-menu #global-nav ul#sp_menu li a.pt,
#head-menu.fixed #global-nav ul#sp_menu li a.pt { */
#global-nav ul#sp_menu li a.pt {
background: url("../image/spmenu_li_bk.png") repeat-x center center;
background-size:contain;
font-weight:bold;
}
#nav-toggle {
display: block;
}
/* #nav-toggle 切り替えアニメーション */
.open {
background-color:#fff; /* make menu background white when menu is open. */
}
.open #nav-toggle span:nth-child(1) {
top: 11px;
-webkit-transform: rotate(315deg);
-moz-transform: rotate(315deg);
transform: rotate(315deg);
}
.open #nav-toggle span:nth-child(2) {
width: 0;
left: 50%;
}
.open #nav-toggle span:nth-child(3) {
top: 11px;
-webkit-transform: rotate(-315deg);
-moz-transform: rotate(-315deg);
transform: rotate(-315deg);
}
.open #global-nav {
/* #global-nav top + #mobile-head height */
-moz-transform: translateY(620px); /* @@@ need to change due to the height of sp_menu */
-webkit-transform: translateY(620px); /* @@@ need to change due to the height of sp_menu */
transform: translateY(620px); /* @@@ need to change due to the height of sp_menu */
}

/* 背後のグレー幕 */
#coverup_layer{
display: none; /* JSでON/OFF */
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0,0,0,0.45); /* 好みで濃さ調整 */
z-index: 900; /* topheader(2000)より下、global-nav(1500)より下、本文より上 */
}

/* もし topheader(30px帯) を見せたままにしたいなら、こうもできる
#coverup_layer{ top:30px; height: calc(100% - 30px); }
*/


} /* /@media (max-width: 480px) */



.clmn118 a img {display:block;}
.clmn118 a {margin: 0;padding: 0;border: 0;}



#back-top,#back-top2 {
z-index: 500;
position: relative;
}
#back-top a {
display: block;
overflow: hidden;
position: fixed;
bottom: 20px;
right: 20px;
}
#back-top a img, #back-top2 a img {
display: block;
overflow: hidden;
max-width: 100%;
width: 45px;
height: 48px;
}
#back-top2 a#a1 {
display: block;
overflow: hidden;
position: fixed;
bottom: 70px;
right: 20px;
}
#back-top2 a#a2 {
display: block;
overflow: hidden;
position: fixed;
bottom: 20px;
right: 20px;
}


/* モバイル固定ヘッダ分スクロール不足対応 */
.anchor-spacer{display:block;height:0px;}
@media (max-width: 480px){
	.anchor-spacer{height: 30px;margin-top: -30px;}
}



/* ====== 目次リンク ====== */
.index_lnk{
border: 1px solid #c99AA0;
box-sizing: border-box;

background-image: url("./image/index_arrow.png"),
	url("./image/index_gradation_bk2.jpg");
background-repeat: no-repeat, repeat-x;

/* 矢印は左中央、グラデは全体 */
background-position: 1px center, left center;
/* ★ここが変更点 */
background-size: 11px 11px, auto;
}
@media (max-width: 480px){
	.index_lnk{
		background-size: 13px 13px, auto;
	}
}
.index_lnk h3{
width: auto; /* 210px固定を解除 */
padding: 0; /* 14px上paddingを消す */
margin: 0;
line-height: 1.2; /* 見た目調整（好みで） */
text-align: inherit; /* a側で中央にするので継承でもOK */
}
.index_lnk a{
display: flex;
width: 100%; /* ★追加 */
height: 100%; /* ★追加 */
align-items: center; /* 縦中央 */
/*justify-content: center; *//* 横中央 */
text-align: left;
padding: 0px 10px 0px 32px; /* 上下は flex に任せる */
min-height: 42px;
color: #0060a3;
text-decoration: none;
box-sizing: border-box;
word-break: break-word; /* 日本語長文のはみ出し対策 */
}
.index_lnk a:hover{ text-decoration: underline; }
/* ====== 目次リンクラッパー ====== */
.index_lnk-grid{
--gap: 6px;
--gutter: 12px; /* ← “見た目の余裕” を追加（好みで） */
display: flex;
flex-wrap: wrap;
gap:var(--gap); /* 余白 */
justify-content: center;
margin:24px auto;

width:636px;

}
/* PC 3列レイアウト（横3列のとき）*/
.index_lnk-grid--3 .index_lnk{
flex: 0 0 calc((100% - (var(--gap) * 2) - var(--gutter)) / 3); /* gapが4px×2 + 大外12px */
}
/* PC テキスト長め1列レイアウト（横1列のとき）*/
.index_lnk-grid--1 .index_lnk{
flex: 0 0 calc(100% - var(--gutter)); /* 大外12px */
}
/* モバイル（どちらも横1列）*/
@media (max-width: 480px){
	.index_lnk-grid{
		width:100%;
		padding: 0 10px; /* ←左右10pxの余白 */
		box-sizing: border-box;
	}
	.index_lnk-grid .index_lnk{
		flex: 0 0 100%;
	}
	.index_lnk-grid--1 .index_lnk a{ /* テキスト長めの1列目次 */
		min-height: 50px; /* 42pxだとテキストが上付になるので */
	}
}
/* モバイルで長文が改行の場合は2行で省略*/
@media (max-width: 480px){
	.index_lnk{
		margin-bottom:8px;
	}
	.index_lnk a{
		padding: 0px 10px 0px 26px;
		justify-content: flex-start; /* 長文だと左寄せの方が読みやすいこと多い */
		text-align: left;
	}
	/* 2行で省略（必要な場合だけ） */
	.index_lnk a{

	}
}



/* ====== frame本体 ====== */
/* 念のため */
/*
*,
*::before,
*::after { box-sizing: border-box; }
*/
.anchor-push{height: 0px;}
@media (max-width: 480px){
/*	.anchor-push{height: 58px;}*/
}
#chap0 /* 目次リンクのアンカー*/, 
#chap1,#chap2,#chap3,#chap4,#chap5,#chap6,
#chap7,#chap8,#chap9,#chap10,#chap11,#chap12,
#chap13,#chap14,#chap15{height:0;font:0px/0px sans-serif;}


.frame{
box-sizing: border-box;
border: 1px solid #C99AA0;
background: #fff;
width: 100%;
overflow: hidden; /* 背景画像や角のはみ出し対策 */
}

/* タイトル帯 */
.frame_ttl{
box-sizing: border-box;
width: 100%;
min-height: 50px;
/* 1pxの白余白（＝内側に白い余白が欲しいなら） */
padding: 1px;
/* 背景画像（指定どおり bottom left） */
background: #fff url("./image/frame_ttl_bk.png") no-repeat left bottom;
/* 既存指定：中のh4用の余白は内側要素で付けると管理しやすい */
margin: 0 0 8px;
}
.frame_ttl2{
box-sizing:border-box;
width: calc(100% - 4px);
height: 36px;
margin:2px;
border: 1px solid #f9dae7;
position: relative;
}
.frame_ttl h4{
font-size: 16px;
line-height: 1.0em;
font-weight: bold;
margin: 0;
padding: 18px 0 0 20px;
color: #0060a3;
text-align: left;
}
.frame_ttl2 h4{
font-size: 16px;
line-height: 1.0em;
font-weight: bold;
margin: 0;
padding: 10px 0 0 20px;
color: #0060a3;
text-align: left;
}
/* 本文エリア */
.frame_cts{
box-sizing: border-box;
width: 100%;
margin: 0 auto 16px;
padding: 8px;
text-align: left;

overflow-wrap: anywhere;  /* 長いURLなどの折返し */
}
/* 本文内の画像がはみ出さないように */
.frame_cts img{
max-width: 100%;
height: auto;
}
/* .frame_cts a:link{color: #eb4882;} */
.frame_cts a:link {text-decoration:none; color:#0060a3; }
.frame_cts a:visited {text-decoration:none; color:#0060a3; }
.frame_cts a:active {text-decoration:none; color:#0060a3 }
.frame_cts a:hover {text-decoration:none; color:#d85800 }

/* ====== 複数frameの並べ方（ラッパー） ====== */
.frames{
display: grid;
grid-template-columns: 1fr;
gap: 6px;
width: 100%;
max-width: 604px;
margin: 24px auto; /* 中央寄せ */
/* ★ モバイルの左右余白 */
padding: 0 12px;
box-sizing: border-box;
}
/* PCで2列にしたい場合だけ */
@media (min-width: 480px){
	.frames{
		gap: 6px;
		padding: 0;
	}
	.frames.frames--2col{
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}
/* ====== 微調整 ====== */
.frame_cts.ct{width:100%;margin:0 auto;text-align:center;}
.frame_cts .fl{margin-right:12px;float:left;}
#fr300mgt48{float:right;width:300px;margin-top:48px;} /* inside.htm 診察室 */
@media (max-width: 480px){
	.frame_cts img{width:96%;}
	.frame_cts .fl{float:none;width:100%;margin:0 auto;text-align:center;}
	#fr300mgt48{float:none;margin:0 0 24px;width:100%;}
}
.tc_sp_tl {text-align:center;font-weight:bold;}
@media (max-width: 480px){
	.tc_sp_tl {text-align:left}
}



/* ====== top frame本体 ====== */
.top_frame{
border: 2px solid #f9dae7;
border-radius: 8px;
background: #fff;
overflow: hidden; /* 角丸に背景がきれいに収まる */
box-sizing: border-box;
}

/* タイトル帯 */
.top_frame_ttl{
width: 100%;
height: 36px;
background: url("./image/top_frame_ttl_bk.png") repeat-x left bottom;
position: relative;
}

/* h2（指定を活かしつつ、アイコンは疑似要素で表示） */
.top_frame_ttl h2{
font-size: 14px;
line-height: 1.0em;
font-weight: bold;
margin: 0;
padding: 8px 10px 0 34px; /* 右に少し余白も */
color: #2e2e5c;
text-align: left;

/* 36px内で文字がズレないよう保険（古い端末向け） */
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}

/* タイトルのアイコン */
.top_frame_ttl h2::before{
content: "";
position: absolute;
left: 14px; /* アイコン開始位置（必要なら調整） */
top: 6px; /* 36px内で中央寄せ気味 */
width: 11px;
height: 17px;
background: url("./image/top_frame_ttl_icon.png") no-repeat left top;
}
/* 本文エリア */
.top_frame_cts{
background: #fff;
margin: 10px;
text-align: left;
box-sizing: border-box;
}
.top_frame_btm{
width:100%;
height:12px;
background: #f9dae7;
margin:0;
text-align: left;
box-sizing: border-box;
}
/* 本文内の画像がはみ出さないように */
.top_frame_cts img{
max-width: 100%;
height: auto;
}

@media (max-width: 480px){
	img.sp_img100{width:90%;height:auto;}
}



/* --------------------------------------------------------
hours table
-------------------------------------------------------- */
table.timeTable{
width: 90%;
border-collapse: collapse;
border-spacing: 0;
margin: 0 auto 24px;
}
table.timeTable tr th {
/*background-color: #3d8eae;
color: #ffffff;*/
color: #121212;
border-bottom: 1px solid #121212;
padding: 8px 3px;
font-family: "Noto Sans JP", sans-serif;
font-weight: bold;
text-align:center;
}
table.timeTable .footInfoTimeHead {
/*width: 8em;*/
width: 28%;
line-height: 1.3em;
white-space: nowrap;
font-family: "Oswald", Arial, sans-serif;
}
table.timeTable .footInfoTimeHead div {
display: inline;
}
table.timeTable tr td {
background-color: #fff;
border-bottom: 1px solid #121212;
padding: 8px 3px;
text-align: center;
vertical-align: middle;
line-height: 2.0;
color: #121212;
}
table.timeTable tr td.day {
width: 12%;
font-family: "Noto Sans JP", sans-serif;
}
@media screen and (max-width: 767px){
	.html-embed {
	font-size: 16px;
	}
	/* table.timeTable{width: 100%;margin: 0 auto 10px;} */
}
table.timeTable.dispBig{max-width:600px;margin:0 auto 24px;}
@media screen and (max-width: 767px) {
table.timeTable.dispBig{max-width:400px;}
}



#sNav .plink {
position: relative;
letter-spacing: 0.1em !important;
margin: 0;
outline: 0 none;
padding: 0;
vertical-align: baseline;
}
#sNav .plink:last-child {border-bottom: 1px solid #fff;}
#sNav .plink a {
display: block;
border-top: 1px solid #fff;
font-size:15px;
/* font-weight:bold; */
box-sizing: border-box;
padding: 10px 20px 8px 10px;
position: relative;
text-decoration: none;
color: #fff;
font-weight:bold;
margin: 0;
vertical-align: baseline;
line-height:2;
}
#sNav .sb a:before {
background: url("./image/sp_arrow03.png") no-repeat right center;
content: "";
display: block;
height: 14px;
position: absolute;
left: 12px;
top: 21px;
width: 12px;
}
#sNav .sb a {
padding-left:24px;
border-top: 1px dotted #888;
}
#sNav .plink a:after {
background: url("./image/sp_arrow01.png") no-repeat right center;
content: "";
display: block;
height: 13px;
position: absolute;
right: 10px;
top: 18px;
width: 10px;
}