@charset "utf-8";


/* =======================================================================

 SP表示
 
======================================================================= */


@media screen and (max-width: 767px) {

/* SP非表示 */
.pc-cont {
	display: none;
}

    
    
img.fluid-image {
	max-width: 100%;
}

figure {
    margin: 0 auto;
    float: none;
    text-align:center;
}      

figure img {
    width: 100%;
}
    
figure.w70 img {
    width: 70% !important;
    height: auto;
}         
    
figure.w50 img {
    width: 50% !important;
    height: auto;
}         
        
figure.right img {
    width: 100%;
}     

.reservation {
    width: 92%;
    height: auto;
    margin: 0 auto;
}  
    
body {
    width: 100%;
    font-family:Quicksand, 游ゴシック体, 'Yu Gothic', YuGothic, 'ヒラギノ角ゴシック Pro', 'Hiragino Kaku Gothic Pro', メイリオ, Meiryo, Osaka, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
    background: url(../images/bk_header_rp01.png) top center no-repeat;
    -moz-background-size: 100% auto;
    background-size: 100% auto;
    margin: 0 !important;
    padding: 0 !important;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

/* ロゴマーク */
#header-maincontents-left {
    width: 78%;
    margin: 2% 0 0 2%;
}
    
#header-maincontents-left img {
    width: 100%;
    height: auto;
}    

h1 {
    width: 90%;
    margin: 5% auto 0;
    font-size: 12px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    text-align: center;
    font-weight: normal;
}

    .box h3 {    
    color: #6e4a0a;
    }

.sp-contact {
	margin: 0;
	padding: 0;
	z-index: 100;
	position: fixed;
	bottom: 0;
	left: 0;
	width: 100%;
	display: flex;
	flex-wrap: wrap;
}    
.sp-contact li {
	width: 50%;
	line-height: 0;
	list-style: none;
}
.sp-contact li a {
	display: block;
	text-align: center;
}
.sp-contact li a img {
	max-width: 100%;
	height: auto;
}
.sp-contact li.wide {
	width: 100%;
}

    
#header-maincontents-right {
    display: none;
}

#flash-area,     
#animation_container{
    padding: 0 !important;
    margin: 0 0 5%!important;
}

/* カレンダーページはこちらから */ 
.calendar-btn a {
    display: block;
    width: 96%;
    margin: 10px auto 0;
    padding:5px 0 8px;
    border: solid 2px #714900;
    color: #714900;
    font-weight: bold;
    background-color: #ffe33b;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-border-radius:6px;
    -moz-border-radius:6px;
    border-radius: 6px;
    text-decoration: none !important;
    font-size: 120%;
    text-align: center;
    font-family:Quicksand, 游ゴシック体, 'Yu Gothic', YuGothic, 'ヒラギノ角ゴシック Pro', 'Hiragino Kaku Gothic Pro', メイリオ, Meiryo, Osaka, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
}    
  
.calendar-btn a:before {
    content: "\f073";
    font-family: FontAwesome;
    margin-right: 10px;
}
    
.calendar-btn a:after {
    content: "\f0a9";
    font-family: FontAwesome;
    margin-left: 10px;
}


/* 診療カレンダーはSP表示でトップページのみになるように指定 */
body:not(#index) .calendar-toppage {
    display: none;
}

#calender .calendar-calender,
#index .calendar-toppage {
    margin: 0 auto 20px;
}       
    
/* 診療カレンダー見出し */

.calendar-calender h3,    
.calendar-toppage h3{
	text-align: left;
	font-size: 22px;
	height: 50px;
	line-height: 50px;
    padding: 1% 2% 0;
    color: #6e4a0a;
	background:url(../images/s/h3.png) repeat-x;
    background-size: auto 100%;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

/* 診療カレンダー年月日 */
.calendar-calender h4,    
.calendar-toppage h4{
	color:#433318;
	background-color:#FFED88;
	font-weight:normal;
	font-size:120%;
	width: 100%;/*#maincontents width*/
	text-indent:10px;
	height:32px;
	line-height:32px;
	border-top-width: 1px;
	border-bottom-width: 1px;
	border-top-style: solid;
	border-bottom-style: solid;
	border-top-color: #6EB92B;
	border-bottom-color: #6EB92B;
	margin-bottom:12px;
}

/* 診療カレンダーtable*/
.calendar-calender table,     
.calendar-toppage table {
    width: 100%;
    height: auto;
    border-collapse: collapse;
}


.calendar-calender th,
.calendar-calender td,    
.calendar-toppage th,
.calendar-toppage td {
    border: solid 1px #ccc;
    width:14%;
    height: auto;
    vertical-align: top;
    text-align: center !important;
}
    
.calendar-calender td img,
.calendar-toppage td img {
    width: 80%;
    height: auto;
}    

/* 診療カレンダーのアイコンマーク説明*/
.calendar-guide {
    width: 100%;
    text-align: left;
    padding: 0;
}
.calendar-guide li {
    width: 100%;
    height: 46px;
    margin: 0 0 10px 0;
    list-style: none;
    vertical-align: middle !important;
}
/* 診療カレンダーのアイコンマーク画像*/    
.calendar-guide li img {
    float: left;
    width: 60px;
    height: 46px;
}    
.calendar-guide li span {  
    color: #fa4a1c;
    font-weight: bold;
}
  
 

/* 時間外診療所（SP表示）*/    
.overtime-clinic-pc {
    display: none;
}

.overtime-clinic-sp {
    width: 94%;
    text-align: left;
    padding: 10px 10px 0;
    margin: 0 auto;
    border:solid 1px #1b6245;
    background-color: #fefff7;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    border-radius: 8px;   
} 
    
.overtime-clinic-sp p {
    color: #1b6245;
    height: 20px;
    font-size: 24px;
    font-weight: bold;
    text-align: center !important;
    background: none !important;
    margin: 0 !important;
    padding: 0 !important;
} 
    
.overtime-clinic-sp p:before {
    content: "\f0f8";
    font-family: FontAwesome;
    margin-right: 10px;
    color: #1b6245;
    font-weight: normal;
}      

.overtime-clinic-sp ul {
    margin: 20px 0 20px 20px;
    padding: 0;
}    

.overtime-clinic-sp li {
    list-style: none;
    margin: 0;
}
    
.overtime-clinic-sp li a {
    font-size: 18px;
    color: #1b6245;
}  
    
.overtime-clinic-sp li:before {
    content: "\f0a9";
    font-family: FontAwesome;
    margin-right: 10px;
    margin-left: 0;
    color: #1b6245;
}      
    
    
#canvas {
    width: 100% !important;
    height: auto;
    padding: 0 !important;
    margin: 0%!important;
}

#maincontents {
    width: 94%;
    height: auto;
    margin: 0 auto;
    background-color: #fff;
}    
    
#maincontents h3{
	text-align: left;
	font-size: 22px;
	height: 50px;
	line-height: 50px;
    padding: 1% 2% 0;
    color: #6e4a0a !important;
	background:url(../images/s/h3.png) repeat-x;
    background-size: auto 100%;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}


/* 予約専用ダイヤル（SP表示用）ボタン（PC表示では非表示） */
.reservation2 {
    height: auto;
    margin: 0 auto;
}    
    

.recruit-pc {
    display: none;
}

#maincontents .recruit_box .tit_pc, #left-navi .recruit_box {
	display: none;
}
#maincontents .recruit_box {
	display: block;
	text-align: center;
}
	
.recruit_box dt img {
	vertical-align: bottom;
}
.recruit_box dd {
	margin: 10px 0 0;
	padding: 0;
	border: none;
}
.recruit_box dd a {
	display: block;
	padding: 12px;
	background: #f3f9db;
	text-decoration: none;
	color: #343434;
	border-radius: 5px;
}
.recruit_box dd a span::after {
	content: '》';
	color: #005a40;
	padding-left: 0.5em;
}
	
	
nav h3 {
    display: none;
} 


#tocalender {
    display: none;        
}    


/* （左カラム）pdfダウンロード*/

body:not(#index) .pdf_dl {
    display: none;
}       
    
.pdf_dl {
    text-align: center;
    width: 94%;
    margin: 15px auto 0;
    padding: 0 0 10px;
    list-style-type: none;
}
 
.pdf_dl li a{
    display: block;
    width: 100%;
    height: 0;
    margin: 0 auto 10px;
    padding: 18% 0 0;
    text-indent: -9999px;
}

/*
.pdf_dl li:nth-child(1) a {
    background: url(../images/s/pdf_sheet01.png) top center no-repeat;
    background-size: 100% auto;
}

.pdf_dl li:nth-child(2) a {
    background: url(../images/s/pdf_sheet02.png) top center no-repeat;
    background-size: 100% auto;
}
*/
.pdf_dl li.consultation a {
    background: url(../images/s/pdf_sheet03.png) top center no-repeat;
    background-size: 100% auto;
}
.pdf_dl li.reserveBtn {
    clear: both;
	width:100%;
	height:auto;
    aspect-ratio: 254 / 44;
	line-height:44px;
    margin: 10px auto 15px;
	text-align:center;
	background:url(../images/bk_lnavi_tocalender01.png) no-repeat center / contain;
	color:#d78400;
}

.pdf_dl li.reserveBtn a {
	color:#d78400;
    line-height: 3.2;
	font-weight:bold;
	font-size:120%;
	display:initial;
	text-align:center;
    padding: 0;
}


/* インフルエンザ 単独接種 予約サイト*/

body:not(#index) .influenza-sheet {
    display: none;
}               
    
.influenza-sheet {
    margin: 0 !important;
    padding: 0 !important;
}    
    
.influenza-sheet ul {
}

.influenza-sheet li {    
    list-style: none;
    text-align: center;
    
}
    
.influenza-sheet li:nth-child(1) a {
    display: block;
    width: 252px;
    height: 66px;
    margin: 0 auto!important;
    text-indent: -9999px;
    background: url(../images/btn_lnavi_sheet04.png) top center no-repeat;
    background-color: #FF0004;
}    

.influenza-sheet li:nth-child(2),
.influenza-sheet li:nth-child(3)    {
    display: none;
} 
 
/* 医院概要 */
.overview_left {    
    width: 100%;
    height: auto;
}

.name-txt {
    font-size: 140% !important;
    margin: 0 !important;
}        

.overview_left p {    
    margin: 0;
}
    
.overview_left .tel {    
    font-size: 130%;
    color: #efab4c;
}      
    
.overview_right {    
    width: 100%;
    height: auto;
    padding: 0;
}    

.color-dorenge{
	color:#d78400;
}    

#maincontents h4 {
	color:#433318;
	background-color:#FFED88;
	font-weight:normal;
	font-size:120%;
	width: 100%;/*#maincontents width*/
	text-indent:10px;
	height:32px;
	line-height:32px;
	border-top-width: 1px;
	border-bottom-width: 1px;
	border-top-style: solid;
	border-bottom-style: solid;
	border-top-color: #6EB92B;
	border-bottom-color: #6EB92B;
	margin-bottom:12px;
}

#maparea {
    padding: 0;  
}


    
    
    
.table-lbline-timetbl table{
	width:100%;
	text-align:left;
    border-collapse: collapse;
    margin: 10px 0;
    
}
.table-lbline-timetbl table tr .thead{
	font-weight:normal;
	font-size:14px;
	padding:4px 4px;
    
}
.table-lbline-timetbl table tr .tdata{
	font-size:14px;
	padding: 0 !important;
}

.table-lbline-timetbl table tr th,
.table-lbline-timetbl table tr td{
	font-weight:normal;
	font-size:14px;
	border: solid 1px #ccc;
	text-align:center;
  vertical-align: middle;
}
.timetable{
	background-color:#75b716;
	white-space: nowrap;
	color:#FFFFFF;
    vertical-align: middle !important;
}

.timetable-time{
	background-color:#f3f9db;
	text-align:left;
	white-space: nowrap;
    vertical-align: middle !important;
}

.timepad{
	padding-left:3px;
	padding-right:3px;
}

.timetbl-sat{
	background-color:#D9E4FF;
}

.timetbl-sun{
	background-color:#F9DDDD;
}

.timetbl-hei{
	background-color:#efefef;
	text-align:center;
}

.table-lbline table tr .nobd{
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: #ffffff;
}

.table-lbline table tr .tdata{
	text-align:center;
}
    
#map_canvas {
    margin: 20px auto;
    text-align: center;
}  
    
/* 詳しいアクセスはこちら */ 
#maparea .more-info-access a {
    display: block;
    width: 94%;
    margin: 10px auto 0;
    padding:5px 0 8px;
    border: solid 2px #3b7a61;
    color: #0f6243;
    font-weight: bold;
    background-color: #f3f9dc;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-border-radius:6px;
    -moz-border-radius:6px;
    border-radius: 6px;
    text-decoration: none;
    font-size: 120%;
    text-align: center;
    font-family:Quicksand, 游ゴシック体, 'Yu Gothic', YuGothic, 'ヒラギノ角ゴシック Pro', 'Hiragino Kaku Gothic Pro', メイリオ, Meiryo, Osaka, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
}    
  
#maparea .more-info-access a:before {
    content: "\f041";
    font-family: FontAwesome;
    margin-right: 10px;
    color: #f35554;
}
    
.map_about {
    width: 100%;
    float: none;
    text-align: center;
}    

#access-box table td {
    vertical-align: top !important;    
    }
    
/* お知らせエディタ（2.0.5） */
    
.news_title {
    color:#d78400;
	font-size:16px;
	padding-bottom:3px;
	border-bottom:dotted 1px #565656;
	margin:0 0 10px 0;
}

.news_title .new {
    font-weight: bold;
    color: #FF0004;
    margin: 0 10px 0 0;
}    
    
dd {
	font-size:15px;
	padding: 0 0 10px 0;
	margin: 0 20px 20px 0;
	border-bottom:dotted 1px #cccccc;
}
a:link {
	text-decoration: underline;
}    

.pagetop {
    padding-top: 20px;
    text-align: right;
    width: 100%;
}


.notice-frame dl dt::before {
    display: inline-block;
    content: '▶';
}	

.notice-frame dl dt.active::before {
    content: "▼";
}

    
    
/* フッター */    
    
#footer {
    padding: 0 0 33vw;
    background-color: #1b3d05;
}
    
#footerbush{
	height:90px;
	background:url(../images/bk_footer_bush01.png) repeat-x;
}    

#footer #footer-contents #footer-menu,
#footer #footer-contents #footer-sign-block {
    display: none;
}   
    
#footer-copyright {
    text-indent: -9999px;
    background: url(../images/bn_footer_logo01.png) top center no-repeat;
    background-size: 100% ;
    width: 60%;
    height: 0;
    margin: 0 auto;
    padding: 10% 0 15%;
}    
    
    
/* クリニックのご案内（about.html） */ 

.cont-cap{
	width: 90%;
    padding: 5%;
	background-color: #fef8e7;
}    
    
.cont-capin {
    width: 100%;
    padding: 0;
    margin: 0;
}      
    
.cont-capin li {
    list-style-type: none;
    padding: 0;
    margin: 0;
}  
 
.gallery {
    display: none !important;        
}
    
.access-box {
    width: 100%;
    height: auto;
    padding: 0 0 5%;
}
    
/* :::::::::: クリニック紹介 :::::::::: */
/*** 画面幅に対しての画像の表示サイズ
	　　 max-widthは画像ファイルの横幅サイズ ****/
	
.viewport {
	width:80%;
	max-width:650px;
	overflow:hidden;
	margin:0 auto;
}
	
/*** 画像枚数×100% ****/
	
.clinicgallery {
	text-align: center;
	margin: 0 auto;
}
	
.flipsnap {
	width:1000%;
}
	
ul.flipsnap  {
	margin:0;
}
	
/*** 100%÷画像枚数 ****/
.item {
	float:left;
	width:10%;
	cursor:pointer;
	overflow:hidden;
}
	
.item p {
	padding:3px 0 8px 0;
	font-weight:bold;
	color:#333;
	text-align:center;
}
	
.slidecomment {
	text-align:center;
}	


.lefthalf {
	margin: 0 0 0 !important;
}
    
/* :::::::::: クリニック紹介 :::::::::: */
/*** 画面幅に対しての画像の表示サイズ
	　　 max-widthは画像ファイルの横幅サイズ ****/
	
.viewport {
	width:80%;
	max-width:672px;
	overflow:hidden;
	margin:0 auto;
}
	
/*** 画像枚数×100% ****/
	
.clinicgallery {
	text-align: center;
	margin: 0 auto;
}
	
.flipsnap {
	width:2800%;
}
	
ul.flipsnap  {
	margin:0;
}
	
/*** 100%÷画像枚数 ****/
.item {
	float:left;
	width:10%;
	cursor:pointer;
	overflow:hidden;
}
	
.item p {
	padding:3px 0 8px 0;
	font-weight:bold;
	color:#333;
	text-align:center;
}
	
.slidecomment {
	text-align:center;
}	


.lefthalf {
	margin: 0 0 0 !important;
}


    
/* 受付システムのご案内（reserve.html）*/

.reservation-box {
    width: 100%;
    height: auto;
    overflow: hidden;
}    
    
.reservation-box-left {
    width: 100%;
    height: auto;
    float: none;
    padding: 0;
    text-align: center;
}        

.reservation-box-right {
    display: none;
}            
    
.caution {
	color: #C71B27;
}    
    
    
#request #maincontents h3{
    font-size: 16px;

}
    
.reservation-btn a {
    display: block;
    width: 96%;
    margin: 10px auto 0;
    padding:5px 0 8px;
    border: solid 2px #714900;
    color: #714900;
    font-weight: bold;
    background-color: #ffe33b;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-border-radius:6px;
    -moz-border-radius:6px;
    border-radius: 6px;
    text-decoration: none;
    font-size: 120%;
    text-align: center;
    font-family:Quicksand, 游ゴシック体, 'Yu Gothic', YuGothic, 'ヒラギノ角ゴシック Pro', 'Hiragino Kaku Gothic Pro', メイリオ, Meiryo, Osaka, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
}    
  
.reservation-btn a:before {
    content: "\f073";
    font-family: FontAwesome;
    margin-right: 10px;
}
    
.reservation-btn a:after {
    content: "\f0a9";
    font-family: FontAwesome;
    margin-left: 10px;
}
    
    
.come_by_car span {
    font-weight: bold;
    text-align: center;
    color: #3B8FB3;
    font-size: 20px;
    margin: 0 auto;
}
    
.come_by_car {
     width: 100%;
     margin: 0 0 20px 0;
     padding: 0 10px;
     border: solid 3px #3B8FB3;
     -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
     box-sizing: border-box;
     -webkit-border-radius:6px;
     -moz-border-radius:6px;
     border-radius: 6px;    
}
    
.come_by_car img { 
    display: none;
}
    
}

/* スタッフ募集（recruit.html） */ 

.recruit_tbl td ul {
    list-style-type: none;
    padding: 0;
}

.recruit_tbl td ul li {
	line-height: 1.8;
}









/* -----------------------------------------------------------
　ハンバーガーメニュー
----------------------------------------------------------- */

/* Toggle(Button) */
#navToggle {
	display: none;
	position: absolute;/*to body*/
	right: 10px;
	top: 55px;
	width: 35px;
	height: 50px;
	cursor: pointer;
	overflow:hidden;
	background-color:#23ac38;
	padding:7px 10px 2px 10px;
}
#navToggle div {
	position: relative
}
#navToggle span {
	display: block;
	position: absolute;/*to div*/
	width: 100%;
	border-bottom: solid 3px #fff;
	-webkit-transition: .35s ease-in-out;
	-moz-transition: .35s ease-in-out;
	transition: .35s ease-in-out
}
#navToggle span:nth-child(1) {
	top: 3px
}
#navToggle span:nth-child(2) {
	top: 14px
}
#navToggle span:nth-child(3) {
	top: 25px
}

#navToggle p{
	font-size:12px;
	margin:0;
	padding:30px 0 0 0;
	text-align:center;
	color:#fff;

}

@media screen and (max-width: 768px) {
    
.main_nav nav {
	position: absolute;
	right: 0;
	top: -660px; /*通常時はビュー外*/
	background:#fff;
	width: 100%;
	padding: 0;
	-webkit-transition: .5s ease-in-out;
	-moz-transition: .5s ease-in-out;
	-o-transition: .5s ease-in-out;
	transition: .5s ease-in-out;
	text-align: left;

}
.main_nav ul {
	margin: 0;
	padding: 0; 
}

.main_nav ul li {
	display: block;
	margin: 0;
	border-bottom: dotted 1px #ccc;
    background-color: #30ad3d;
	line-height: 3;
	width:100%;
}

.main_nav ul li a:before {    
    content: "\f0a9";
    font-family: FontAwesome;
    margin-right: 10px;
}
    
.main_nav ul li a {
	display: block;
    color: #fff;
    background－color: #30ad3d;
    text-decoration: none;
    padding: 0 0 0 20px;
}
.main_nav ul li:after {
	content: ''
}
.main_nav ul li:first-child {
	border-top:dotted 1px #454545;

}
/* Toggle(Button) */
#navToggle {
	display: block
}
/* Click Toggle(Button) */
.openNav #navToggle span:nth-child(1) {
	top: 11px;
	-webkit-transform: rotate(-45deg);
	-moz-transform: rotate(-45deg);
	transform: rotate(-45deg)
}
.openNav #navToggle span:nth-child(2), .openNav #navToggle span:nth-child(3) {
	top: 11px;
	-webkit-transform: rotate(45deg);
	-moz-transform: rotate(45deg);
	transform: rotate(45deg)
}
/*header menu*/
.openNav nav {
	-moz-transform: translateY(800px);
	-webkit-transform: translateY(800px);
	transform: translateY(800px)
}

	.color-yellow{
		color:#edb91f;
	}
	.color-kahki{
		color:#d7ac7c;
	}
	.color-orenge{
		color:#f6ad3a;
	}
	.color-dorenge{
		color:#d78400;
	}
	.color-brown{
		color:#846222;
	}
	.color-green{
		color:#497b00;
	}
	.color-lgreen{
		color:#01e1d5;
	}
	.color-lgray{
		color:#efeae7;
	}
	.color-dgray{
		color:#343434;
	}
	.color-white{
		color:#ffffff;
	}
	.color-rblue{
		color:#22b4e4;
	}
	.color-enji{
		color:#C7000A;
	}
	.color-pink{
		color:#F172A3;
	}

	.btn_reservation {
		margin: 10px 0 0 !important;
		text-align: center;
	}
}
