@charset "utf-8";

/* =============== reset =============== */
html, body, body div, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, figure, footer, header, menu, nav, section, time, mark, audio, video, details, summary {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font-weight: normal;
	font-style:normal;
	vertical-align: baseline;
	background: transparent;
}
article, aside, figure, footer, header, nav, section, details, summary {display: block;}
html {
	box-sizing: border-box;
}
*,
*:before,
*:after {
	box-sizing: inherit;
}
img,
object,
embed {max-width: 100%;}
html {overflow-y: scroll;}
ul {list-style: none;}
blockquote, q {quotes: none;}
blockquote:before,
blockquote:after,
q:before,
q:after {content: ''; content: none;}
a {margin: 0; padding: 0; font-size: 100%; vertical-align: baseline; background: transparent;}
del {text-decoration: line-through;}
abbr[title], dfn[title] {border-bottom: 1px dotted #000; cursor: help;}
table {border-collapse: collapse; border-spacing: 0;}
th {font-weight: bold; vertical-align: bottom;}
td {font-weight: normal; vertical-align: top;}
hr {display: block; height: 1px; border: 0; border-top: 1px solid #ccc; margin: 1em 0; padding: 0;}
input, select {vertical-align: middle;}
pre {
    white-space: pre; /* CSS2 */
    white-space: pre-wrap; /* CSS 2.1 */
    white-space: pre-line; /* CSS 3 (and 2.1 as well, actually) */
    word-wrap: break-word; /* IE */
}
input[type="radio"] {vertical-align: text-bottom;}
input[type="checkbox"] {vertical-align: bottom;}
.ie7 input[type="checkbox"] {vertical-align: baseline;}
.ie6 input {vertical-align: text-bottom;}
select, input, textarea {font: 99% sans-serif;}
table {font-size: inherit; font: 100%;}
small {font-size: 85%;}
strong {font-weight: bold;}
td, td img {vertical-align: top;}
sub, sup {font-size: 75%; line-height: 0; position: relative;}
sup {top: -0.5em;}
sub {bottom: -0.25em;}
pre, code, kbd, samp {font-family: monospace, sans-serif;}
.clickable,
label,
input[type=button],
input[type=submit],
input[type=file],
button {cursor: pointer;}
button, input, select, textarea {margin: 0;}
button,
input[type=button] {width: auto; overflow: visible;}
.ie7 img {-ms-interpolation-mode: bicubic;}
/* prevent BG image flicker upon hover
   (commented out as usage is rare, and the filter syntax messes with some pre-processors)
.ie6 html {filter: expression(document.execCommand("BackgroundImageCache", false, true));}
*/
.clearfix:before, .clearfix:after { content: "\0020"; display: block; height: 0; overflow: hidden; }
.clearfix:after { clear: both; }
.clearfix { zoom: 1; }


/* =============== common =============== */
html { -webkit-text-size-adjust: 100%; font-size: 62.5%; }
body { font-size: 1.6rem; font-family: 'Noto Sans JP', 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro','メイリオ', 'Meiryo', '游ゴシック', 'Yu Gothic', 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif; }
@media screen and (max-width: 479px) {
	body { font-size: 1.4rem; }
}
* { box-sizing: border-box; }
body, select, input, textarea {color: #201d1c;}
a {color: #005ea0;}
a:hover {color: #1e99ef;}
a:link { text-decoration:none;}
ins {background-color: #fcd700; color: #000; text-decoration: none;}
mark {background-color: #fcd700; color: #000; font-style: italic; font-weight: bold;}
input:-moz-placeholder { color:#a9a9a9; }
textarea:-moz-placeholder { color:#a9a9a9; }

/* ================ ALL ================ */
@media screen and (max-width:959px) {
	.pc-only{ display: none; }
}
@media screen and (min-width:960px) {
	.sp-only{ display: none; }
}
body {
	animation: fadeIn .5s ease 0s 1 normal;
	-webkit-animation: fadeIn .5s ease 0s 1 normal;
}
@keyframes fadeIn {
	0% {opacity: 0}
	100% {opacity: 1}
}
@-webkit-keyframes fadeIn {
	0% {opacity: 0}
	100% {opacity: 1}
}

body.lock {
  width: 100%;
  height: 100%;
  position: fixed;
}

img{
  max-width: 100%;
  height: auto;
  vertical-align: bottom;
}
.inner{
  margin: 0 auto;
  padding: 0 5px;
  width: 100%;
  max-width: 1200px;
}
	



/* =============== header =============== */
.header {
  display: flex;
  align-items: center;  
	margin: 0 auto;
  padding: 5px 0;
	width: 100%;
	max-width: 1200px;
  min-height: 60px;
}
.header h1 {
	margin: 0 50px 3px 0;
  font-size: 1.0rem;
}
.header-logo{
  width: 150px;
}
@media screen and (max-width: 350px) {
	.header h1 {
		letter-spacing: -.1em;
	}
}



/* =============== nav =============== */
.gNav{
	width:100%;
	background: #8bc431;
}

.gNav li a{
  display: block;
	padding: 15px;
	color: #333;
  line-height: 1.3;
}



/* =============== breadcrumb =============== */
.breadcrumb {
	padding: 5px 10px;
	background: #f8f8f7;
}
.breadcrumb li {
	display:inline;
	margin-left: 7px;
	padding-left: 12px;
	font-size: 1.1rem;
	background: url("../images/ico_breadcrumb.gif") no-repeat left 6px;
}
.breadcrumb li:first-child {
	margin-left: 0;
	padding-left: 0;
	background: none;
}


/* =============== contents =============== */
.mv{
	display: flex;
	align-items: center;
	padding: 20px 10px;
	width: 100%;
	min-height: 100px;
}
.mv h2{
	color: #4a3834;
	font-size: 2.2rem;
	font-weight: bold;
}
.sect{
	margin: 30px 10px 0;
}

.ttl-line {
	padding-bottom:5px;
	font-size: 2.0rem;
	font-weight:bold;
}
.ttl-line.-orange {
	color: #ffb109;
	border-bottom: solid 3px #ffb109;
}
.ttl-line.-green {
	color: #77be07;
	border-bottom: solid 3px #77be07;
}
.ttl-line.-blue {
	color: #1eaad8;
	border-bottom: solid 3px #1eaad8;
}
.ttl-line.-pink {
	color: #f2778b;
	border-bottom: solid 3px #f2778b;
}

.ttl-line.-emerald{
	color: #52b6a0;
	border-bottom: solid 3px #52b6a0;
}


/* =============== complementary =============== */
.side-bar {
	margin: 50px 0 0;
	padding: 50px 30px;
	background: #f8f8f7;
}
.side-bar_bn li:not(:first-child){
	margin-top:15px;
}
.contents aside img{
	width: 100%;
	height: auto;
	vertical-align:bottom;
}

.side-bar_time{
	margin-top: 30px;
}
.side-bar_time-ttl{
	position: relative;
	padding: 2px 0 2px 30px;
	font-size: 1.8rem;
	font-weight: bold;
	border-bottom: solid 2px #77be07;
}
.side-bar_time-ttl:before{
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	content: "";
	display: inline-block;
	width: 25px;
	height: 25px;
	background: url(/images/ico_doctor.gif) center / 100% auto  no-repeat;
}
.side-bar_time-txt{
	display: flex;
	flex-wrap: wrap;
	margin-top: 10px;
  font-size: 1.3rem;
	line-height: 1.3;
}
.side-bar_time-txt dt{
	width: 5em;
  text-align: center;
}
.side-bar_time-txt dd{
  margin-left: 1em;
	width: calc(100% - 6em);
}
.side-bar_time-txt dt:not(:first-of-type), .side-bar_time-txt dd:not(:first-of-type){
	margin-top: 5px;
}


/* 診療時間/担当医 */
.side-bar_time-table{
	margin-top: 10px;
}
.side-bar_time-table table {
  width: 100%;
	border: solid 2px #ead2ae;
}

.side-bar_time-table th, .side-bar_time-table td{
	padding: 10px;
  text-align: center;
	line-height: 1.2;
	vertical-align: middle;
	border: solid 1px #e4dbcd;
}

.side-bar_time-table thead th {
	background: #fff8e2;
}
.side-bar_time-table tbody th {
	background: #fffefe;
}
.side-bar_time-table tbody th em {
  font-size: 1.3rem;
  font-weight: bold;
  vertical-align: middle;
}
.side-bar_time-table tbody th span {
	font-size: 1.0rem;
}
.side-bar_time-table tbody td {
	background: #fffefe;
}
.side-bar_time-table tbody th span,
.side-bar_time-table tbody td span {
  -webkit-writing-mode: vertical-rl;
  -ms-writing-mode: tb-rl;
  -o-writing-mode: vertical-rl;
  writing-mode: vertical-rl;
	white-space: nowrap;
	margin: 0;
	line-height: 1em;
}


.side-bar_time-list{
	margin-top: 10px;
}
.side-bar_time-list li {
  position: relative;
  padding-left: 1.2em;
	line-height: 1.8;
	font-size: 1.1rem;
}
.side-bar_time-list li:before {
  position: absolute;
  left: 0;
  top: 0;
	content: "●";
  display: inline-block;
  font-family: Osaka,"ＭＳ Ｐゴシック","MS PGothic",Sans-Serif;
	color: #9bcc4d;
}



/* =============== pagetop =============== */
#container {
	position: relative;
}
.gotop{
  display: none;
}

/* =============== footer =============== */
footer {
	position: relative;
	margin-top: 100px;
  padding-top: 30px;
	background: #f2f7eb;
}
.f-contact{
  padding-bottom: 30px;
}
.f-logo {
	margin-bottom: 10px;
	width: 35%;
}
.f-logo img {
	width: 100%;
	height: auto;
}

.f-information{
	font-size: 1.2rem;
}
.f-tel{
	position: relative;
	margin-left: 39%;
	padding: 5px 10px;
	border-radius: 8px;
	border: solid 1px #dce9c7;
}
.f-tel:before{
	position: absolute;
	left: 5px;
	top: 5px;
	content: "";
	display: inline-block;
	width: 25px;
	height: 35px;
	background: url("/common/images/tel.svg") center / 100% auto no-repeat;
}
.f-tel dt{
	left: .2em;
	padding-left: 30px;
	font-size: 1.3rem;
	font-weight: 500;
	letter-spacing: .3em;
}
.f-contact_tel{
	padding-left: 30px;
  max-width: 190px;
	font-size: 5.2vw;
	font-weight: bold;
	font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
	line-height: 1.0;
}
.f-contact_tel a{
  color: #201d1c;
}
.f-contact_fax{
  max-width: 190px;
	padding-left: 30px;
  font-weight: bold;
	font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
}
.f-contact_time{
  display: flex;
  flex-wrap: wrap;
  max-width: 250px;
  color: #8bc431;
  font-size: 1.1rem;
  line-height: 1.3;
  font-weight: 500;
}
.f-contact_time span{
  width: 5em;
  text-align: center;
}
.f-contact_time em{
  margin-left: 1em;
  width: calc(100% - 6em);
  letter-spacing: .1em;
  font-weight: bold;
  font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
}
.f-address{
	margin-top: 10px;
}
@media screen and (max-width: 400px) {
  .f-contact_time{
    display: block;
  }
  .f-contact_time br{
    display: none;
  }
  .f-contact_time span,
  .f-contact_time em{
    display: block;
    margin: 0;
    width: 100%;
    text-align: left;
  }
}




.f-information address img{
	margin-bottom: 5px;
}
.f-subjects {
	display: flex;
	margin-top: 10px;
}
.f-subjects dt {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 2px 5px;
	color: #fff;
	font-weight: bold;
	border-radius: 3px;
	background: #8bc431;
	white-space: nowrap;
}
.f-subjects dd {
	margin-left: 10px;
}
.f-subjects ul{
	display: flex;
	flex-wrap: wrap;
}
.f-subjects li:not(:first-child){
	margin-left: 5px;
}


.f-subjects dd li:not(:first-child):before{
	content: "/";
	margin-right: 5px;
}

.f-map{
  margin-top: 20px;
}
.f-map figure {
	max-width: 394px;
}

.fnav {
	padding: 25px 10px;
	background: url(/common/images/bg_fnav.gif) repeat 0 0;
}
.fnav-list{
  display: flex;
  flex-wrap: wrap;
  margin: -10px 0 0 -15px;
}
.fnav-list li{
	margin: 10px 0 0 15px;
}
.fnav-list li a {
	padding-left: 10px;
	color: #fff;
	background: url(/common/images/f_navico.gif) no-repeat 0 10px;
}
.fnav-list li a:hover {
	color: #fdffc1;
}
.fnav-copy{
  margin-top: 15px;
	text-align: center;
  font-size: 1.0rem;
	color: #fff;
}

.fixed-info{
  position: fixed;
  right: 0;
  bottom: 0;
  cursor: pointer;
  width: 100%;
  background: rgba(0,0,0,.2);
  transition: .3s;
  opacity: 0;
  visibility: hidden;
}
.fixed-info.ac{
  opacity: 1;
  visibility: visible;
}
.fixed-info.absolute{
  position: absolute;
  top: -60px;
  bottom: auto;
}
.fixed-info_list{
	display: flex;
  background: #fff;
}
.fixed-info_list li{
	width: 50%;
}
.fixed-info_list li:not(:first-child){
	border-left: solid 1px #aed472;
}

.fixed-info_list li a{
	position: relative;
	display: flex;
	align-items: center;
	padding: 5px 5px 5px 40px;
 	height: 60px;
	color: #fff;
	font-size: 3.3vw;
	font-weight: bold;
	background: #8bc431;
}
.fixed-info_list li a:before{
	position: absolute;
	left: 5px;
	top: 50%;
	transform: translateY(-50%);
	content: "";
	display: inline-block;
	width: 30px;
	height: 30px;
	border-radius: 5px;
}
.fixed-info_list li.-tel a:before{
	background: url("/common/images/tel.svg") center / 70% auto no-repeat #fff;
}
.fixed-info_list li.-address a:before{
	background: url("/common/images/address.svg") center / 60% auto no-repeat #fff;
}


    
/* ～959px：タブレット
------------------------------ */
@media screen and (max-width: 959px) {
  /* ナビゲーション */
  .gNav-btn{
    cursor: pointer;
    position: fixed;
    top: 0;
    right: 0;
    z-index: 1001;
    width: 60px;
    height: 60px;
    box-sizing: border-box;
    background: #fff;
    -webkit-transition: all 400ms;
    transition: all 400ms;
  }
  .gNav-btn:after{
    position: absolute;
    left: 0;
    bottom: 5px;
    content: "MENU";
    width: 100%;
    color: #8bc431;
    text-align: center;
    font-size: 1.0rem;
    font-weight: bold;
  }
  .gNav-btn span{
    position: absolute;
    left: 0;
    right: 0;
    margin: 0 auto;
    width: 60%;
    height: 4px;
    border-radius: 10px;
    background: #8bc431;
    -webkit-transition: all 400ms;
    transition: all 400ms;
  }
  .gNav-btn span:nth-child(1) {
    top: 10px;
  }
  .gNav-btn span:nth-child(2) {
    top: 22px;
  }
  .gNav-btn span:nth-child(3) {
    top: 34px;
  }
  .gNav-btn.open{
    background: #8bc431;
  }
  .gNav-btn.open span{
    height: 2px;
  }
  .gNav-btn.open span:nth-child(1){
    background: #fff;
    top: 22px;
    -webkit-transform: rotate(-45deg);
    -moz-transform   : rotate(-45deg);
    transform        : rotate(-45deg);
  }
  .gNav-btn.open span:nth-child(2), .gNav-btn.open span:nth-child(3){
    top: 22px;
    background :#fff;
    -webkit-transform: rotate(45deg);
    -moz-transform   : rotate(45deg);
    transform        : rotate(45deg);
  }
  .gNav-btn.open:after{
    color: #fff;
    content: "CLOSE";
  }
  .gNav-panel{
    position: fixed;
    right: -100%;
    top: 0;
    z-index: 1000;
    padding: 80px 20px 20px;
    width: 100%;
		height: 100%;
    font-size: 16px;
    box-sizing: border-box;
		background-color: #f8f8f7;
		transition: .3s;
  }
  .gNav-panel.open{
    right: 0;
  }
  
  
  .gNav li {
    border-bottom: solid 1px #ccc;
  }
  .gNav li:first-child {
    border-top: solid 1px #ccc;
  }
	
	.gNav-close{
		margin: 20px auto 0;
		width:180px;
	}
	.gNav-close span{
		display: block;
		line-height: 40px;
		text-align: center;
		border: 1px solid #ccc;
		border-radius: 50vw;
	}
	

	/* =============== footer =============== */
	.f-logo{
		float: left;
		margin-right: 3%;
	}
	.f-map {
		text-align: center;
	}
	.f-map figure{
		display: inline-block;
	}


	
  

}



/* ～959px：タブレット
------------------------------ */
@media screen and (max-width: 959px) {
}

/* 480px～959px：タブレット
------------------------------ */
@media screen and (min-width: 480px) and (max-width: 959px) {
	.fixed-info_list li a{
    padding-left: calc(7% + 30px);
    font-size: 1.8rem;
  }
  .fixed-info_list li a:before{
    left: 5%;
  }
  .side-bar_bn{
		margin: -10px 0 0;
	}
	.side-bar_bn li:not(:first-child){
		margin: 10px 0 0 calc(50% + 10px);
		width: calc(100% / 2 - 10px);
	}
	.side-bar_bn li:first-child{
    float: left;
    width: 50%;
	}
	.f-contact_tel{
		font-size: 2.5rem;
	}
	
}
	
	
	

  
/* ～479px：SP
------------------------------ */
@media screen and (max-width: 479px) {
	
	/* =============== pagetop =============== */
	#container {
		position: relative;
	}

  .f-address{
		clear: both;
	}
}


/* 960px～：PC
------------------------------ */
@media screen and (min-width: 960px) {
  /* =============== header =============== */
  .header{
  	padding: 5px 0 10px;
  }
  .header h1 {
    font-size: 1.3rem;
  }
  .header-wrap{
    display: flex;
    justify-content: space-between;
  }
  .header-logo{
    margin-top: 15px;
    width: 258px;
  }
  .header-info{
    width: calc(100% - 278px);
  }
  .header-info_list{
    display: flex;
    justify-content: flex-end;    
  }
  
	
	.header-info_list li{
		position: relative;
    padding-left: 45px;
	}
	.header-info_list li:before{
		position: absolute;
		left: 0;
		top: 5px;
		content: "";
		display: inline-block;
		width: 35px;
		height: 45px;
	}
  .header-info_list li.header-contact:before{
		top: 15px;
  }
	
  .header-adress:before{
		background: url("/common/images/address.svg") center / 90% auto no-repeat;
  }
  .header-adress a{
    margin-top: 5px;
    display: inline-block;
  }
  .header-adress a:hover{
    opacity: 0.7;
  }
  .header-adress img {
    vertical-align: bottom;
  }
	
	.header-contact{
    margin-top: -10px;
    margin-left: 30px;
		line-height: 1.1;
		color: #554a48;
  }
	.header-contact:before{
		background: url("/common/images/tel.svg") center / 100% auto no-repeat;
  }
	.header-contact dt{
		left: .2em;
		font-size: 1.3rem;
		font-weight: 500;
		letter-spacing: .3em;
	}
	.header-contact_tel{
		display: inline-block;
		font-size: 2.5rem;
		font-weight: bold;
		font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
    line-height: 1;
	}
	.header-contact_tel span{
    font-size: 1.3rem;
  }
	.header-contact_time{
    width: auto;
		color: #8bc431;
		font-size: 1.2rem;
		line-height: 1.2;
		font-weight: 500;
	}
  .header-contact_time span{
    float: left;
    width: 5em;
    text-align: center;
  }
  .header-contact_time em{
    margin-left: 1em;
    width: calc(100% - 6em);
    letter-spacing: .1em;
    font-weight: bold;
		font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
  }
  
  
  /* =============== nav =============== */
  .gNav-panel {
    display: block;
    margin: 0 auto;
    width: 100%;
    max-width: 1200px;
  }
  .gNav ul {
    display: flex;
    width: 100%;
  }
  .gNav li {
    width: calc(100% / 7);
    border-right: solid 1px #aed472;
  }
  .gNav li:first-child {
    border-left: solid 1px #aed472;
  }
  .gNav li a{
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 10px;
    height: 100%;
    color: #fff;
  	font-weight: 500;
    text-align: center;
  }
  .gNav li.active a {
    color:#fff95f;
  }
	.gNav li:not(.active) a:hover{
		color: #fff;
		background: #9ecd54;
	}

	/* =============== breadcrumb =============== */
	.breadcrumb {
		margin: 10px auto;
		padding: 0;
		width: 100%;
		max-width: 1200px;
		background: none;
	}
	.breadcrumb li {
		font-size: 1.3rem;
	}
	
	/* =============== contents =============== */
	.mv{
		padding: 20px 50px;
		min-height: 129px;
	}

	.mv h2{
		color: #4a3834;
		font-size: 3.0rem;
	}
	.contents {
		display: flex;
		justify-content: space-between;
		margin: 0 auto;
    padding: 0 5px;
		max-width: 1210px;
	}
	.top-cont .main{
		width: 100%;
	}
	.contents:not(.top-cont) .main{
		width: calc(100% - 282px);
	}

  .sect{
    margin: 50px auto 0;
  }
	main a:hover{
		opacity: 0.7;
	}
	
	
	/* =============== complementary =============== */
	.contents aside {
		margin: 0;
		padding: 0;
		width: 232px;
		background: none;
	}
	aside a:hover img {
		opacity: 0.7;
	}


	
	
	
  footer div#fnav{
    padding: 25px 0;
  }
	
	
	/* =============== pagetop =============== */
  .gotop{
    display: block;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    max-width: 1200px;
  }
  .gotop a{
    margin-left: auto;
    width: 122px;
    height: 28px;
    display: block;
  }


  
  /* =============== footer =============== */
	.f-contact{
		display: flex;
	}
  .f-logo {
		margin: 0;
    width: 209px;
  }
  .f-information{
    margin-left: 25px;
		min-width: 355px;
    width: calc(100% - 628px);
    font-size: 1.6rem;
  }
	.f-subjects {
		margin-top: 15px;
	}
  .f-subjects dt{
    font-size: 1.3rem;
  }
  .f-map{
    margin-top: 0;
  }
	.f-tel{
		display: inline-block;
		margin-left: 0;
		padding: 5px 10px;
	}
	.f-tel:before{
		left: 10px;
		width: 35px;
		height: 45px;
	}
	.f-tel dt{
    margin-left: 20px;
  }
	.f-contact_tel{
    margin-left: 20px;
		font-size: 2.5rem;
    line-height: 1;
	}
  .f-contact_tel a{
    pointer-events: none;
  }
  .f-contact_fax{
    margin-left: 20px;
    font-size: 1.3rem;
  }
  .f-contact_time{
    font-size: 1.2rem;
  }
	.f-address{
		margin-left: 0;
	}
  .fnav-copy{
    text-align: right;
    font-size: 1.1rem;
  }
  .f-map figure {
    max-width: 394px;
  }
}