@charset "Utf-8";
@import url("reset.css");


/* ------------------------------
 Color
------------------------------ */

:root {	
	--color-main: #eb683d;
	--color-main-rgb: 235, 104, 61;
	
}



body{
}
/* ------------------------------
 Layout
------------------------------ */

.wrap,.wrappc{}


ul.sf_contact li a{
	display: block;
	color: #482f33;
	font-size: 10px;
	text-align: center
}

ul.sf_contact li a:before{
	font-size: 20px;
	display: block;
	color: #BD0025
}

a.pagetop{display: block;
	font-size: 9px;
	display: flex;
	justify-content: center;
	flex-direction: column;
	text-align: center
}

a.pagetop:before{
	font-family: icomoon;
	content: "\e978";
	display: block;
	font-size: 30px;
}


/* その場で */
.fadeIn{
animation-name:fadeInAnime;
animation-duration:1s;
animation-fill-mode:forwards;
opacity:0;
}

@keyframes fadeInAnime{
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}



/* 下からフェードイン */

.fadeUp{
animation-name:fadeUpAnime;
animation-duration:0.5s;
animation-fill-mode:forwards;
opacity:0;
}

@keyframes fadeUpAnime{
  from {
    opacity: 0;
  transform: translateY(100px);
  }

  to {
    opacity: 1;
  transform: translateY(0);
  }
}


.fade {
	opacity: 0;
	transform: translateY(30px);
	transition: opacity 1.5s, transform 1s;
}

.fade.active {
	opacity: 1;
	transform: translateY(0px);
}

/*スクロール下からフェードイン  */
.js-fade {
    opacity: 0;
    visibility: hidden;
    transform: translateY(50px);
    transition: opacity 1s,visibility 1s, transform 1s;
}

.scroll {
    opacity: 1;
    visibility: visible;
    transform: translateY(0px);
}



@media screen and (max-width: 666px) {
	.wrap{width: 90%;
		margin: 0 auto}
	
	#contents{
	margin: 0 auto;
	padding: 0 0 0;}
	
	body:not(#home) #contents{
	}
	
	#side_fix{display: none}
		
	
	.sfc_pc{display: none}
	
	br.brpc{display: none}
}	


@media screen and (min-width: 667px){
	
	.wrap,.wrappc{
		width: 94%;
		margin: 0 auto}

	#side_fix{
		width: 60px;background: #EFECE4;
		display: flex;
		top:0;
		right: 0;
		position: fixed;
		flex-direction: column;
		align-items: center;
		height: 100vh
	}
	a.pagetop{height: 100px}
	ul.sf_contact{
		border-bottom: solid 1px #482f33;
		margin: 1.5em auto 1em;
	}
	ul.sf_contact li{margin-bottom: 1.2em}
	#contents{padding: 0 0 0;}
	
	body:not(#home) #contents{
	}

	br.brsp{display: none}
	ul.sf_contact li.pcbtn{display: none}
}

@media screen and (min-width: 1360px){
	.wrap,.wrappc{
	width: 96%;
	max-width: 1200px;margin: 0 auto}
}

.notfound{
	padding: 5% 0;
	text-align: center;
}

.notfound h1{
	margin-bottom: .6em
}



#header{
	margin: 0 auto;
	text-align: center;
	padding: 1em;
	background: #f4f4ea
}

.contact_wrap{
	display: flex;
	align-items: center;
	justify-content: center
}

.tel_num{
	font-size: 23px;
	padding: 0 20px 0 0;
	font-weight: bold;
	color: #502800
}
.tel_num a{color: #502800}
.tel_num:before{
	content: "Tel.";
	font-size: .8em;
	padding: 0 5px 0 0}


.contact_btn a{
	display: block;
	border-radius: 50px;
	position: relative;
	background: #502800;
	color: #fff;
	padding: .5em 1em;
	line-height: 1em;
	-webkit-transition: all .3s;
	transition: all .3s;
	box-shadow: 0px 0px 6px #ccc;
	position: relative;
	border: solid 2px #fff
}

.contact_btn a:hover{
	background: #371b00;
}

@media screen and (max-width: 667px) {
	.header_logo{
	margin:0 auto 10px;
	max-width: 250px;
	}
}	

@media print, screen and (min-width: 668px) {
	#header{padding: 1.5em;}
	.header_wrap{
		display: flex;
		justify-content: space-between;
		align-items: center
	}
	.contact_btn a{padding: .6em 1.5em;}
}	

@media print, screen and (min-width: 1024px) {
	#header{padding: 1.5em 2em;}
	.tel_num{font-size: 30px;}
}	





.post_wrap{
	width: 90%;
	margin: 0 auto;
	max-width: 900px;
	padding: 5% 0 ;
}

#info_arc{}

#info_arc h1{
	color:var(--color-main);
	text-align: center;
	margin-bottom: 1em
}

ul.news-list{}

ul.news-list li{
	padding: .6em;
	border-bottom: solid 1px rgba(var(--color-main-rgb), 0.7);
}

ul.news-list li i{
	color: var(--color-main);;
	padding: 0 1em 0 0;
	font-size: .8em
}

ul.news-list li span{
	width: 100px;
	display: inline-block
}






#info_post{
	margin: 0 auto
}

#info_post h1{
	border-bottom: solid 2px var(--color-main);
	padding: .6em 10px;
	margin-bottom: 1em;
	font-size: clamp(1.125rem, 0.943rem + 0.91vw, 1.625rem)
}

.content{
	padding: 10px;
}


/* ------------------------------
 ページ共通
------------------------------ */

#page_content{
	max-width: 1000px;
	width: 90%;
	margin: 0 auto;
	padding: 5% 0;
}


.page_header h1{
	font-size: clamp(1.125rem, 0.898rem + 1.14vw, 1.75rem);
	margin-bottom: 1em;
	color: var(--color-main);
	text-align: center;
	letter-spacing: .2em
}




/* ------------------------------
 よく使う
------------------------------ */

.gback{background:var(--color-main);color: #f1eee7}
.gback a{color: #f1eee7}


.gfont{color: var(--color-main)}


ul.hlbox li{
	display: flex;
	justify-content: center;
	flex-wrap:wrap;
	margin: 2em 0 0 0
}

ul.hlbox li div:nth-child(1){
	width: 120px
}

ul.hlbox li div:nth-child(2){
	width: calc(100% - 120px);
	padding-left: 1.6em
}

ul.hlbox li .date{display: inline-block;margin-right: 1em}
ul.hlbox li .cat{
	background:#fff;
	font-size: .8em;
	padding: 0 5px
}


/* 外枠のコンテナ */
.epress_pager {
    display: flex;
    justify-content: space-between; /* 左右に振り分け */
    align-items: stretch;
    margin: 40px 0;
    padding: 20px 0;
    border-top: 1px solid #eee;
    gap: 20px; /* 前後のボタン間の溝 */
}

/* 共通のボタンスタイル */
.epress_pager_prev,
.epress_pager_next {
    width: 50%; /* 半分ずつ確保 */
    font-size: 14px;
    line-height: 1.5;
}

/* リンク自体のスタイル */
.epress_pager a {
    display: flex;
    flex-direction: column; /* 矢印とタイトルを縦に並べる場合 */
    height: 100%;
    padding: 15px;
    background-color: #fff;
    color: #00a0b0;
    text-decoration: none;
    border-radius: 8px;
    transition: all 0.3s ease;
}

/* ホバー時の挙動 */
.epress_pager a:hover {
    background-color: #ebebeb;
    color: #fff;
}

/* 「前へ」の設定 */
.epress_pager_prev a::before {
    content: "＜ 前の記事";
    font-size: 11px;
    font-weight: bold;
    margin-bottom: 5px;
    display: block;
}

/* 「次へ」の設定 */
.epress_pager_next a {
    text-align: right;
}

.epress_pager_next a::after {
    content: "次の記事 ＞";
    font-size: 11px;
    font-weight: bold;
    margin-top: 5px;
    display: block;
}

/* タイトル部分（%title）の装飾 */
.epress_pager a {
    font-weight: 500;
    color: #4a2f24; /* タイトルは読みやすい茶色に */
}

.epress_pager a:hover {
    color: #fff; /* ホバー時は白に反転 */
}

/* スマホ対応：横並びだと窮屈な場合は縦に並べる */
@media screen and (max-width: 600px) {
    .epress_pager {
        flex-direction: column;
    }
    .epress_pager_prev,
    .epress_pager_next {
        width: 100%;
    }
}

/* ------------------------------
 sns
------------------------------ */

@media print, screen and (min-width: 1000px) {}	

#snslink ul{
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
	font-family: serif
}

#snslink li{margin: 0 1em}

#snslink a{color: #fff;text-decoration: none;font-size: 1.2em}

a.ig:before{
	font-family: sns;
	content: "\e903";
	padding-right: .3em
}

a.fb:before{
	font-family: sns;
	content: "\e90d";
	padding-right: .3em
}


a.tw:before{
	font-family: sns;
	content: "\e611";
	padding-right: .3em
}

a.line:before{
	font-family: sns;
	content: "\e009";
	padding-right: .3em
}

a.pinta:before{
	font-family: sns;
	content: "\e63a";
	padding-right: .3em
}

a.plane:before{
	font-family: sns;
	content: "\e900";
	padding-right: .3em
}

a.yt:before{
	font-family: icomoon;
	content: "\e912";
	padding-right: .3em
}

a.ns:before{
	font-family: sns;
	content: "\e902";
	padding-right: .3em
}

a.map:before{
	font-family: icomoon;
	content: "\e9ee";
	margin-right: .3em
}


a.hp:before{
	font-family: icomoon;
	content: "\ea73";
	margin-right: .3em
}

a.call:before{
	font-family: icomoon;
	content: "\e905";
	margin-right: .3em
}

a.home:before{
	font-family: icomoon;
	content: "\e908";
}

a.event:before{font-family: icomoon;content: "\e9b5";}
a.sodan:before{font-family: sns;content: "\e90f";}
a.contact:before{font-family: sns;content: "\e900";}

a.works:before{
	font-family: icomoon;
	content: "\e9d6";
}

a.madori:before{
	font-family: icomoon;
	content: "\ea30";
}



/* ------------------------------
 ページコンテンツ共通スタイル
------------------------------ */

#page_header{
	text-align: left;
	margin:5% auto 8%;
}

#page_header h1{
	padding:3px 0 3px 5%;}
	
#page_header h1 span{display: block;
	font-size: 1.5em;padding: 10px 0 0 0;color: var(--color-main)}


.ctitle{
	text-align:center;
	background: url(../img/h3ctitle_bg.png) center top repeat-x,url(../img/h3ctitle_bg.png) center bottom repeat-x;
	color: #300;
	padding: .8em 1em;
	letter-spacing: 2px;
	margin: 10% auto 5%;
	font-size: 1.3em
}



@media screen and (max-width: 667px) {
	#page_header p{
		margin-top: 1em
	}
}	

@media print, screen and (min-width: 668px) {
	#page_header{
		display: flex;
		justify-content: space-between;
		align-items: flex-end;
	}
	#page_header h1{
		font-size:24px;
		padding-left: 3%;
		border-left: solid 3px var(--color-main)
	}
	.ctitle{font-size: 20px;margin: 8% auto 3%;}
}	

@media print, screen and (min-width: 1024px) {
	#page_header h1{font-size:30px}
	.ctitle{font-size: 26px}
}	



.read{
	margin: .8em auto 0;
}

@media screen and (max-width: 767px) {
	.read{width: 95%;}
}	

@media print, screen and (min-width: 768px) {
	#header_l2{padding: 3em 2em;}
	#header_l2 h1 span{font-size: 38px;margin-bottom: 20px;}
}	

@media print, screen and (min-width: 1024px) {
	#header_l3 h1{font-size: 2em}
	.read{
		text-align: center;
		margin:0 auto;
		max-width: 1000px
	}
}	



/* ************************************************ 
*	.bread_crumb
* ************************************************ */

.bread_crumb {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;          /* 横並びにする */
    flex-wrap: wrap;        /* 長い場合に折り返す */
    align-items: center;
    color: #666;
    padding: 1em;
    font-size: .9em
}

/* 各要素（liとspan）のスタイル */
.bread_crumb li, 
.bread_crumb span[typeof="ListItem"] {
    display: flex;
    align-items: center;
}

/* リンクのスタイル */
.bread_crumb a {
    text-decoration: none;
    color: #4a2f24; /* 医院ロゴに合わせた茶色 */
    transition: color 0.3s;
}

.bread_crumb a:hover {
    text-decoration: underline;
    color: #00a0b0; /* ホバー時は水色に */
}

/* 区切り文字（ > ）を自動挿入 */
.bread_crumb li:not(:last-child)::after,
.bread_crumb span[typeof="ListItem"]:not(:last-child)::after {
    content: ">";
    margin: 0 10px;
    color: #ccc;
    font-family: sans-serif;
    font-size: 12px;
}

/* 現在のページのテキストカラー（リンクになっていない最後の子要素） */
.bread_crumb li:last-child a,
.bread_crumb li:last-child {
    color: #888;
    pointer-events: none; /* 最後の項目はクリック不可に */
}

/* ************************************************ 
*	prevnext
* ************************************************ */

.pagenav{
	max-width: 1240px;
	margin: 3% auto;
}

.pagenav li {
	margin:0 0 .6em;
	font-size: .8em
}

.pagenav li a{
	display: block;
	text-decoration: none;
	padding: .3em .8em;
	position: relative;
	color: #444;
	-webkit-transition: all .3s;
	transition: all .3s;
	}

	
.pagenav li a:hover{color: #510000}	
.pagenav li.prev{text-align: left;}

.pagenav li.prev a{}

.pagenav li.prev a:before{
		font-family: icomoon;
		content: "\e973";
		padding-right: .5em}
	
.pagenav li.next{text-align: right;}

.pagenav li.next a:after{
	font-family: icomoon;
	content: "\e974";
	padding-left: .5em}

@media screen and (max-width: 667px) {}	

@media print, screen and (min-width: 668px) {
	.pagenav{
		display: flex;
		justify-content: space-between;
		flex-wrap:wrap;
	}
	.pagenav li{width: 45%}
}	
	


.pageback {display: block;
	margin: 0 auto;
	background: #007fa8;
	color: #fff;
	padding: .6em 1em;
	text-align: center;
	max-width: 400px;
}

.pageback:before{
	font-family: icomoon;
	content: "\e973";
	padding-right: 5px
}



/* ************************************************ 
*	Pager
* ************************************************ */

#pager{overflow: hidden;
    position: relative;}
    
    
.pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 2em 0 3em;
    position: relative;
}

.pagination span, .pagination a {
    display: block;
    width: auto;
    margin: 4px 6px;
    padding: 8px;
    color: #000;
    background-color: #fff;
    text-decoration: none;
    text-align: center;
    line-height: 16px;
    position: relative;
    border-bottom: solid 3px #FFF
}



/* ページ番号 */
.pagination .pager{
    width: 32px;
}

/* ホバー時 & 現在のページ */
.pagination a:hover,
.pagination .current  {
    border-bottom: solid 3px #000
}

/* 前へ */
.pagination a.before {
    margin-right: 16px;
}
/* 次へ */
.pagination a.next {
    margin-left: 16px;
}
/* 最初へ */
.pagination a.first {}
/* 最後へ */
.pagination a.last {}

/* Page x / y */
.pagination span.page_num {
    display: none;
}


/* ------------------------------
 footer
------------------------------ */

#footer{
	margin: 0 auto;
	text-align: center;
	position: relative;
	background: #f4f4ea;
	padding: 5%
}

#footer h2{
	color: var(--color-main);
	margin-bottom: 1em
}


.footer_wrap {
    max-width: 1100px;
    margin: 0 auto;
}

.yoyaku{
	margin-bottom: 2em
}


@media screen and (max-width: 767px) {}	

@media print, screen and (min-width: 768px) {
	
}	

@media print, screen and (min-width: 1024px) {
	.footer_wrap{
		display: flex;
		justify-content: space-between
	}
	

	.info{width: 40%}
	.schedule{width: 55%}
}	





.info {
    border-top: 1px solid #d9dbcf;
    margin-bottom: 30px;
}

.info dl {
    border-bottom: 1px solid #d9dbcf;
    padding: 15px 0;
}

.info dl dt {
    font-weight: bold;
}

.info dl dd {
    flex: 1;
    line-height: 1.6;
}


.info dl dd .map{
	display: block;
	margin-top: 3px;
}
.info dl dd .map a{
	display: block;
	background: var(--color-main);
	color: #fff;
	border-radius: 5px;
	position: relative;
	line-height: 1em;
	padding: 2px 1em 4px;
	width:-moz-fit-content;
	width:fit-content;
}
.btn-link{
}


@media screen and (max-width: 767px) {
	.info dl{
		text-align: center;
	}
	
	.info dt{
		margin-bottom: .8em
	}
	.info dl dd .map a{
		margin: 0 auto
	}
}	

@media print, screen and (min-width: 768px) {
	.info dl {
    display: flex;
    padding: 15px 0;
	}
	
	.info dl dt {
	    width: 120px;
	}
	.info dl dd{text-align: left}
	
	.btn-link{
	display: flex;
	justify-content: space-between;
	align-items: center;
	}

}	

@media print, screen and (min-width: 1024px) {}	

.online{
	display: block;
	background: #0085ba;
	color: #fff;
	border-radius: 50px;
	position: relative;
	padding: .6em 1em;
	text-align: center;
	margin-bottom: .5em;
	border: solid 2px #fff;
	box-shadow: 0px 0px 5px #ccc;
	position: relative;
	max-width: 400px;
	-webkit-transition: all .3s;
	transition: all .3s;
}

.online:hover{
	background: #006d98;
}


.schedule-table {
    width: 100%;
    max-width: 800px;
    
    border-collapse: separate; /* これを separate にする */
    border-spacing: 0;         /* セル間の隙間をなくす */
    border-radius: 12px;       /* テーブル全体の角丸 */
    overflow: hidden;         /* 内側のセルがはみ出さないようにする */
    
    /* 均等幅のための設定 */
    table-layout: fixed; 
    text-align: center;
    background-color: #fff;
    font-family: sans-serif;
    
    /* 外枠の線 */
    border: 2px solid #d9dbcf;
    margin-bottom: 1em
}



.tel a{
	font-size: 20px;
	display: flex;
	align-items: center;
	background: var(--color-main);
	color: #fff;
	padding: .6em 1em;
	border-radius: 10px;
	position: relative;
	justify-content: center
}

.tel a span{
	font-size: 1.3em;
	padding: 0 0 0 5px
}


@media screen and (max-width: 767px) {
	.tel{
		margin-bottom: 1em
	}
}	

@media print, screen and (min-width: 768px) {
	.tel a{font-size: 24px;padding: .8em 1.5em;}
}	

@media print, screen and (min-width: 1024px) {}	


/* 1列目（時間軸）の幅 */
.col-time {
    width: 20%;
}

/* 曜日列（残り7列）の幅を均等にする */
.schedule-table th:not(.col-time),
.schedule-table td {
    width: 10.7%; /* (100% - 25%) / 7 */
}

.schedule-table th, 
.schedule-table td {
    /* border-top と border-left だけを指定して、線の重複を防ぐ */
    border-top: 1px solid #d9dbcf;
    border-left: 1px solid #d9dbcf;
    padding: 10px 2px;
    vertical-align: middle;
    word-break: break-all;
    line-height: 1.3em
}

/* 1行目の border-top をなくす（テーブル全体の枠線と重なるため） */
.schedule-table thead tr:first-child th {
    border-top: none;
}

/* 1列目の border-left をなくす（テーブル全体の枠線と重なるため） */
.schedule-table th:first-child,
.schedule-table td:first-child {
    border-left: none;
}

/* ヘッダーと左端の背景色 */
.schedule-table thead th {
    font-weight: bold;
    background-color: #fff;
}

.bg-blue {
    background-color: #e6fafa;
    font-weight: normal;
}

/* 休診の斜線 */
.closed {
    color: #999;
}

/* 金・土の細かい時間表記 */
.time-sub {
    font-size: 10px;
    line-height: 1.2;
    margin-top: 4px;
    color: #333;
}

.mark {
/*     font-size: 1.2rem; */
}

@media screen and (max-width: 767px) {
	.schedule-table th, 
	.schedule-table td{
		font-size: 12px;
	}
}	

@media print, screen and (min-width: 768px) {
	.bg-blue br{
		display: none
	}
}	

@media print, screen and (min-width: 1024px) {}	



.cr{
	padding: 1.5em;
	font-size: .8em;
	letter-spacing: .1em;
}




@media print{
	#footer{display: none}
}



/* ------------------------------
 Youtube
------------------------------ */	

.video-container {
   position: relative;
     padding-bottom: 56.25%;
     height: 0;}
.video-container iframe,
.video-container object,
.video-container embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}