/*TOPページcontainer*/
#index-container  {
	background: #fff;
}

/*TOPページだけ 最初に#headerを隠しておく*/
#header {
	top:-100%;
}

/*============================================================================================
↓ファーストビュー============================================================================
============================================================================================*/
#first {
	width: 100%;
	position: relative;
	overflow:hidden;
}

/*==========================================
↓ファーストビュー　コピー==================
==========================================*/
#first .copy {
	position: absolute;
	max-width:660px;
	width:100%;
	min-height:130px;
	top:30%;
	left:5%;
	padding:20px 20px;
	box-sizing:border-box;
	background-color:rgba(255,255,255,0.9);
	transition: all 1s ease 0s;
	opacity:0;
	margin-top:10px;
}
#first .copy .fadein1,
#first .copy .fadein2 {
	overflow:hidden;
}
#first .copy .fadein1 span,
#first .copy .fadein2 span {
	height:25px;
	float:left;
	display:block;
	margin:10px 0;
}
#first .copy .fadein1 span img,
#first .copy .fadein2 span img {
	width:auto;
	height:100%;
}
@media screen and (max-width: 768px){
#first .copy {
	width:70%;
	min-height:175px;
	top:50%;
	left:50%;
	transform:translate(-50%,-50%);
}
.tab-unit {
	float: left;
	display:block;
}
}
@media screen and (max-width: 480px){
#first .copy {
	width:250px;
	min-height:240px;
}
#first .copy .fadein1 span,
#first .copy .fadein2 span {
	height:20px;
}
}

/*==========================================
↓ファーストビュー　サイドボタン============
==========================================*/
.side-btn{
	position: absolute;
    right: 0;
    top: 50%;
    transform: translate(0,-50%);
	transition: all 0.3s ease 0s;
}
.side-btn .reserve a:link,
.side-btn .reserve a:visited {
	background:rgba(9,97,185,1);
	padding:30px 10px;
	display:block;
	transition: all 0.3s ease 0s;
}
.side-btn .reserve a:hover {
	background-color:rgba(107,199,225,1);
}
.side-btn .reserve a img {
	width:36px;
	height:auto;
}
.side-btn .map a:link,
.side-btn .map a:visited {
	background: rgba(9,137,185,1);
	padding:10px;
	display:block;
	transition: all 0.3s ease 0s;
}
.side-btn .map a:hover {
	background-color:rgba(107,199,225,1);
}
.side-btn .map a img {
	width:36px;
	height:auto;
}
@media screen and (max-width: 1080px){
.side-btn{
	right:-100%;
}
}

/*==========================================
↓ファーストビュー　ヘッダー================
==========================================*/
#index-header {
	position: absolute;
	top: 0;
	z-index:99;
	width: 100%;
	height:70px;
	background: rgba(255,255,255,1);
}
#index-header .logo {
	width: 160px;
	height: 160px;
	position: absolute;
	z-index:-1;
	top: 0;
	left: 0;
	display: block;
	background: rgba(255,255,255,1);
}
#index-header .logo a:link,
#index-header .logo a:visited {
	width:100%;
	height:100%;
	background: url(../img/logo-square.png) no-repeat center center;
	background-size:62.5%;
	display: block;
	overflow: hidden;
	text-indent: -9999px;
	white-space: nowrap;
	transition: all 0.3s ease 0s;
}
#index-header .logo a:hover {
	background-size:70%;
	opacity:0.7;
}
#index-header .cl-name {
	display:none;
}
#index-header .content-right {
	position:absolute;
	right:0;
}
@media screen and (max-width: 480px){
#index-header h1 {
	width: 130px;
	height: 130px;
}
}

/*==========================================
↓ファーストビュー　スライダー==============
==========================================*/
.firstSliderWrap {
	position:absolute;
	width: 100%;
	height: 100vh;
	overflow: hidden;
	top:0;
	left:0;
	z-index:-1;
	border: solid 20px rgba(255,255,255,1);
    box-sizing: border-box;
}
.firstViewSlider li {
	width: 100%;
	height: 100vh;
	overflow: hidden;
}
#pic001 {
	background-image:url(../img/slide1.jpg);
	background-position:center top;
	background-size:cover;
	background-repeat:no-repeat;
}
#pic002 {
	background-image:url(../img/slide2.jpg);
	background-position:center top;
	background-size:cover;
	background-repeat:no-repeat;
}
#pic003 {
	background-image:url(../img/slide3.jpg);
	background-position:center top;
	background-size:cover;
	background-repeat:no-repeat;
}
#pic004 {
	background-image:url(../img/slide4.jpg);
	background-position:center top;
	background-size:cover;
	background-repeat:no-repeat;
}
#pic005 {
	background-image:url(../img/slide5.jpg);
	background-position:center top;
	background-size:cover;
	background-repeat:no-repeat;
}

/*==========================================
↓ファーストビュー　症状別メニュー==========
==========================================*/
.firstview-toggle-contents {
	position:absolute;
	/*top: 0;*/
	width: 100%;
	background: #fff;
	box-shadow: 0px -3px 5px 0px rgba(0,0,0,0.2);
	transition: all 0.3s ease 0s;	
}
.service-nav .btn-toggle {
	color:rgba(0,84,167,1);
	font-size:14px;
	line-height:1.5em;
	letter-spacing:0.5em;
	text-decoration:none;
	text-align:center;
	display:table;
	white-space:nowrap;
	width:100%;
	height:60px;
	transition: all 0.3s ease 0s;
	cursor:pointer;
}
.service-nav .btn-toggle span {
	display:table-cell;
	vertical-align:middle;
	padding:15px;
}
.service-nav .btn-toggle.is-active span {
	font-weight:bold;
}
.service-nav .btn-toggle span i {
	transform:rotate(0deg) ;
}
.service-nav .btn-toggle.is-active span i {
	transform:rotate(180deg) ;
}
.service-nav-body {
	width: 100%;
	padding: 0 20px;
    box-sizing: border-box;
}
.service-nav-body ul {
    margin-right: -2%;
    overflow: hidden;
	padding:10px 0;
}
.service-nav-body ul li {
	float: left;
	margin:5px 2% 5px 0;
    width: 31.3333%;
    text-align: center;
}
.service-nav-body ul li a:link,
.service-nav-body ul li a:visited {
	color:rgba(0,84,167,1);
	font-size:14px;
	line-height:1.5em;
	width:100%;
	display:table;
	padding:10px;
	border:solid 1px rgba(0,84,167,1);
	box-sizing:border-box;
	background-color:rgba(255,255,255,1);
	transition: all 0.3s ease 0s;
}
.service-nav-body ul li a:hover {
	color:rgba(255,255,255,1);
	text-decoration:none;
	border:solid 1px rgba(107,199,225,1);
	background-color:rgba(107,199,225,1);
}
.service-nav-body ul li a span {
	display:table-cell;
	vertical-align:middle;
}
@media screen and (max-width: 1080px){
.firstview-toggle-contents {
	display: none;	
}
}

/*============================================================================================
↓ニュースとコラム============================================================================
============================================================================================*/
#news-column {
	margin-right:-5%;
	overflow:hidden;
	padding:40px 0;
	box-sizing:border-box;
}
#news-column .content-news,
#news-column .content-column {
	width:45%;
	float:left;
	margin-right:5%;
}

/*==========================================
↓タイトルまわり============================
==========================================*/
#news-column h3 {
	display:block;
	display:table;
	margin-bottom:10px;
}
#news-column .content-news h3 {
	color:rgba(9,97,185,1);
}
#news-column .content-column h3 {
	color:rgba(9,137,185,1);
}
#news-column .ttlgroup div {
	display:table-cell;
	vertical-align:middle;
}
#news-column .ttlgroup .ico img {
	width:60px;
	height:60px;
	margin-right:10px;
	border-radius:30px;
}
#news-column .ttlgroup .ttl {
	font-size: 10px;
	line-height:18px;
	letter-spacing: 0.05em;
	white-space:nowrap;
}
#news-column .ttlgroup .ttl span.en {
	font-size: 20px;
	line-height:20px;
	margin-right:5px;
}

/*==========================================
↓記事部分==================================
==========================================*/
#news-column ul {
	width:100%;
	margin-bottom:10px;
}
#news-column ul li {
	border-bottom:dotted 1px rgba(0,0,0,0.3);
	display:block;
	font-size:14px;
	line-height:1.5em;
}
#news-column ul li a:link,
#news-column ul li a:visited {
	color:rgba(51,51,51,1);
	display:block;
	padding:10px 0;
	text-decoration:none;
	transition: all 0.3s ease 0s;
}
#news-column ul li a:hover {
	background-color:rgba(248,245,241,1);
}
#news-column ul li a div {
	display:table-cell;
	vertical-align:middle;
	height:30px;
}
#news-column ul li div .update {
	margin:0 10px 0 0;
}
@media screen and (max-width: 768px) {
#news-column ul li div .update {
	display:block;
}
}
@media screen and (max-width: 480px) {
#news-column {
	margin-right:0;
}
#news-column .content-news,
#news-column .content-column {
	width:100%;
	float:none;
	margin-right:0;
}
#news-column .content-news {
	margin-bottom:20px;
}
}

/*============================================================================================
↓クリニックについて==========================================================================
============================================================================================*/
#about {
	background: url(../img/bg-left.jpg) no-repeat left 35%, url(../img/bg-right.jpg) no-repeat right 80%;
}
@media screen and (max-width: 768px) {
#about {
	background-size:30%;
}
}
@media screen and (max-width: 480px) {
#about {
	background-size:70%;
}
}

/*==========================================
↓はじめての方へ============================
==========================================*/
#about .for-firstvisitor {
	position:relative;
	background-color:rgba(248,245,241,1);
	overflow:hidden;
	margin-bottom:30px;
}
#about .for-firstvisitor .content-image {
	float:right;
	width:40%;
}
#about .for-firstvisitor .content-image img {
	width:100%;
	height:auto;
}
#about .for-firstvisitor .content-text {
	float:left;
	width:60%;
	padding:40px;
	box-sizing:border-box;
}
@media screen and (max-width: 768px) {
#about .for-firstvisitor {
	padding:30px;
}
#about .for-firstvisitor .content-image {
	float:none;
	width:100%;
	max-width:360px;
	margin:0 auto 20px;
}
#about .for-firstvisitor .content-text {
	float:none;
	width:100%;
	padding:0;
}
}

/*==========================================
↓診療方針==================================
==========================================*/
#about .service-guide {
	position:relative;
	display:table;
	overflow:hidden;
	margin-bottom:30px;
}
#about .service-guide .content-image {
	width:40%;
	display:table-cell;
	vertical-align:middle;
	overflow:hidden;
}
#about .service-guide .content-text {
	width:60%;
	display:table-cell;
	vertical-align:middle;
	padding:0 40px;
	box-sizing:border-box;
}
#about .content-text h2 {
	color: rgba(9,97,185,1);
	font-family: "游明朝", "Yu Mincho", "游明朝体", serif;
	font-size: 22px;
	font-weight:normal;
    line-height: 1.5em;
    letter-spacing: 0.2em;
}
#about .content-text p {
	font-size: 16px;
    line-height: 28px;
}
/*図解*/
.diagram {
	position:relative;
	width:100%;
	height:auto;
	margin:0 auto 20px;
}
.diagram .base {
	width:100%;
}
.diagram .base img {
	width:100%;
	height:auto;
}
.diagram .baloon1,
.diagram .baloon2,
.diagram .baloon3,
.diagram .baloon4 {
	width:180px;
	height:180px;
	position:absolute;
	text-align:center;
}
.diagram .baloon1 {/*上*/
	top:0;
	left:50%;
	transform: translate(-50%,0);
}
.diagram .baloon2 {/*右*/
	top:50%;
	right:0;
	transform: translate(0,-50%);
}
.diagram .baloon3 {/*下*/
	bottom:0;
	left:50%;
	transform: translate(-50%,0);
}
.diagram .baloon4 {/*å·¦*/
	top:50%;
	left:0;
	transform: translate(0,-50%);
}
.diagram .baloon1 a,
.diagram .baloon2 a,
.diagram .baloon3 a,
.diagram .baloon4 a {
	display:block;
	transform:scale(0.9,0.9);
	transition: all 0.3s ease 0s;
}
.diagram .baloon1 a:hover,
.diagram .baloon2 a:hover,
.diagram .baloon3 a:hover,
.diagram .baloon4 a:hover {
	transform:scale(1,1);
}
.diagram .baloon1 a img,
.diagram .baloon2 a img,
.diagram .baloon3 a img,
.diagram .baloon4 a img {
	width:100%;
	height:auto;
}
@media screen and (max-width: 1080px) {
#about .service-guide {
	display:block;
}
#about .service-guide .content-image {
	width:432px;
	display:block;
	margin:0 auto;
}
#about .service-guide .content-text {
	width:100%;
	display:block;
}
}
@media screen and (max-width: 768px) {
#about .service-guide .content-text {
	padding:30px;
	background-color:rgba(248,245,241,1);
}
}
@media screen and (max-width: 480px) {
#about .service-guide .content-image {
	width:330px;
}
.diagram .baloon1,
.diagram .baloon2,
.diagram .baloon3,
.diagram .baloon4 {
	width:130px;
	height:130px;
}
}

/*============================================================================================
↓診療内容抜粋（ティッカー）==================================================================
============================================================================================*/
#service {
	position:relative;
	background-color:rgba(248,245,241,1);
}
#service .ticker-slide li a:link,
#service .ticker-slide li a:visited {
	color:rgba(255,255,255,1);
	font-size:14px;
	line-height:18px;
	display:block;
}
#service .ticker-slide li a img {
	width:100%;
	height:auto;
	vertical-align:bottom;
}
#service .ticker-slide li a .hover-box {
	width:100%;
	height:100%;
	position:absolute;
	top:0;
	left:0;
	background-color:rgba(0,0,0,0.3);
	opacity:0;
	transition: all 0.3s ease 0s;
}
#service .ticker-slide li a:hover .hover-box {
	opacity:1;
}
#service .ticker-slide li a .hover-box div {
	width:100%;
	height:100%;
	position:absolute;
	top:5%;
	left:0;
	display:table;
	text-align:center;
	opacity:0;
	transition: all 0.3s ease 0s;
}
#service .ticker-slide li a:hover .hover-box div {
	top:0;
	opacity:1;
}
#service .ticker-slide li a .hover-box div span {
	width:100%;
	box-sizing:border-box;
	display:table-cell;
	vertical-align:middle;
}
@media screen and (max-width: 768px) {
#service .ticker-slide li a:link,
#service .ticker-slide li a:visited {
	font-size:1.5vw;
}
}

/*============================================================================================
↓患者様の声==================================================================================
============================================================================================*/
#voice {
	position:relative;
	background: rgba(248,245,241,1);
}
.carousel-slider li {
	overflow: hidden;
}
.carousel-slider li {
	padding:0 10px;
	box-sizing:border-box;
	margin:0 10px 20px;
	padding:20px;
	background-color:rgba(255,255,255,1);
}
.review {
	
}
.review .comment {
	font-size:16px;
	line-height:28px;
	margin-bottom: 10px;
}
.review .author {
	font-size:12px;
	line-height:20px;
	text-align:right;
	margin:10px 0;
}
.notice {
	font-size:10px;
	line-height:1.5em;
	text-align:center;
	padding:20px;
}


.review .service-ill {
	width:10%;
    min-width:120px;
    height:auto;
    margin:0 auto 10px;
	padding:5px;
	box-sizing:border-box;
    border-radius: 50%;
	border:solid 0px rgba(248,245,241,1);
    background-color:rgba(248,245,241,1);
	overflow:hidden;
	transition: all 0.3s ease 0s;
}
.review .service-ill img {
	width: 100%;
    height: auto;
	transition: all 0.3s ease 0s;
}
.review .memo {
	font-size:14px;
	line-height:24px;
}
.review .memo:after {
color:rgba(9,137,185,1);
content: "\f078";
font-family: FontAwesome;
text-align: center;
display: block;
}



/*============================================================================================
↓CLについて==================================================================================
============================================================================================*/
#clinic-info {
	position:relative;
}
#clinic-info .cl-data {
	overflow:hidden;
	margin-right:-5%;
}
#clinic-info .cl-data .content {
	float:left;
	width:45%;
	margin-right:5%;
}
#clinic-info .cl-data .content ul li .logo-full {
	width:240px;
	height:54px;
	background-image:url(../img/logo-full.png);
	background-repeat:no-repeat;
	background-position:center top;
	background-size:contain;
	display:block;
	text-indent:-9999px;
	overflow:hidden;
	margin:0 0 10px;
}
#clinic-info .cl-data .content ul li p {
	font-size: 14px;
	line-height: 2em;
}
#clinic-info .cl-data .content #access-map {
	float:none;
	width:100%;
	min-height:300px;
	margin-right:0;
}

@media screen and (max-width: 768px){
#clinic-info .cl-data .content #access-map {
	min-height: auto;
}
}


/*==========================================
↓診療時間割================================
==========================================*/
table.timeschedule {
  table-layout: fixed;
  width: 100%;
  margin:0 auto;
}
table.timeschedule tr {
  border-top: 1px solid rgba(220,209,197,1);
  border-bottom: 1px solid rgba(220,209,197,1);
  border-left: 1px solid rgba(220,209,197,1);
}
table.timeschedule th {
	font-size:1.4em;
	line-height:1.6em;
	text-align: center;
	padding:7px;
	border-right: 1px solid rgba(220,209,197,1);
	vertical-align:middle;
}
table.timeschedule td {
	font-size:1.4em;
	line-height:1.6em;
	text-align: center;
	padding:7px;
	border-right: 1px solid rgba(220,209,197,1);
	vertical-align:middle;
}
.time {
	width:25%;
}
.yes {
	color:rgba(0,84,167,1);
	font-size:1.4em;
	line-height:1.6em;
}
.no {
	color:rgba(153,153,153,1);
	font-size:1.4em;
	line-height:1.6em;
}
.add {
	font-size:8px;
	line-height:10px;
	display:block;
}
@media screen and (max-width: 768px){
#clinic-info .cl-data {
	margin-right:0;
}
#clinic-info .cl-data .content {
	float:none;
	width:100%;
	margin-right:0;
	margin-bottom:20px;
}
#clinic-info .cl-data .content:last-child {
	margin-bottom:0;
}
#clinic-info .cl-data .content ul li {
	text-align:center;
}
#clinic-info .cl-data .content ul li .logo-full {
	margin:0 auto 10px;
}
}
@media screen and (max-width: 480px) {
table.timeschedule {
  width:70%;
}
table.timeschedule thead {
  display: none;
}
table.timeschedule tr {
	margin-bottom:10px;
	display: block;
}
table.timeschedule td {
  border-bottom: 1px solid rgba(220,209,197,1);
  display: block;
}
table.timeschedule td:last-child {
  border-bottom: none;
}
table.timeschedule td:before {
  content: attr(aria-label);
  margin-right:10px;
}
.time {
	width:inherit;
}
.yes,
.no {
	font-size:inherit;
}
}

/*================================================================
↓リンク==========================================================
================================================================*/
#links .banner {
	text-align:center;
}
#links .banner li {
	box-sizing:border-box;
	display: inline-block;
	padding:5px;
}
#links .banner li a img {
  width:200px;
  height:60px;
  vertical-align:bottom;
}
#links .banner li a:link,
#links .banner li a:visited {
	border: solid 1px rgba(220,209,197,1);
	display:block;
	transition: all 0.3s ease 0s;
}
#links .banner li a:hover {
	border: solid 1px rgba(255,255,255,1);
}

/*================================================================
↓エンビロンアイテム==============================================
================================================================*/
#environ-item {
	padding:40px 0;
}
.environ-official {
	text-align:center;
}
.environ-official h2 {
	font-size:18px;
	font-weight:normal;
	letter-spacing:0.1em;
	line-height:1.5em;
	text-align:center;
	padding:20px 0;
}
.environ-official p {
	font-size:14px;
	line-height:1.5em;
	text-align:center;
}
.environ-official img {
	width:100%;
	height:auto;
}
.environ-item {
	font-size:14px;
	line-height:1.5em;
	text-align:center;
}
.environ-item img {
	width:100%;
	max-width:250px;
	height:auto;
}
.environ-menu {
	display: table;
	width: 100%;
	margin-bottom:40px;
}
.environ-menu li {
	width: 50%;
	display: table-cell;
	vertical-align: middle;
	padding:0 20px;
	box-sizing:border-box;
	border-right:solid 1px rgba(220,209,197,1);
}
.environ-menu li:first-child {
	border-left:solid 1px rgba(220,209,197,1);
}
.environ-menu li p {
	font-size:14px;
	line-height:1.5em;
	text-align:center;
	margin:20px auto 10px;	
}
@media screen and (max-width: 768px){
.environ-menu {
	display: table;
	width: 100%;
}
.environ-menu li {
	width: 100%;
	display:block;
	border-left:solid 1px rgba(220,209,197,1);
	border-right:solid 1px rgba(220,209,197,1);
}
}