@charset "UTF-8";
/* ------------------------ key
------------------------ */
.key { position: relative; z-index: 1; text-align: center; }

/* ------------------------ info
------------------------ */
.info_news { margin-top: -1.5em; margin-bottom: 5em; padding: 1.5em; background: #fff; }
.info_banner li:not(:last-of-type) { margin-bottom: 1em; }
.info_banner a { display: block; width: 100%; }
@media (min-width: 769px), print { .info_news { /*height: 340px;*/ } }
@media (min-width: 851px), print { .info_news { /*max-height: 400px;*/ margin-top: -2em; } }
@media (min-width: 1200px), print { .info_wrap { display: flex; flex-wrap: wrap; justify-content: space-between; }
  .info_news { width: calc(100% - 1em); }
  .info_banner { max-width: 1100px; width: calc(100% - 1em); margin: 0 auto; } }
@media (max-width: 768px) { .info_news { /*height: 500px;*/ } }
@media (max-width: 543px) { .info_news { /*height: 300px;*/ } }

/* ------------------------ WEB問診　WEB予約
------------------------ */
.btn_top { padding: 7% 5% 0; }
@media (max-width: 543px) { .btn_top { margin-bottom: 0%; } }
.btn_top ul { margin: 0 auto; /*display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-content: space-between;*/ height: 100%; margin-bottom: 1.5rem; }
.btn_top ul li { width: calc(50% - 1em); margin: 0 auto; }
@media (min-width: 1200px), print { .btn_top ul li { width: 49%; } }
@media (max-width: 543px) { .btn_top ul li { width: 49%; } }
.btn_top ul li a {   /*
	display: block;
	border: 1px solid #000;
	background-color: #cc7266;
	padding: 40px 40px 40px 170px;
	font-size: 30px;
	color: #fff;
	text-decoration: none;
	position: relative;
	&:hover{
		opacity: 0.9;
	}
	&::before{
		content: "";
		background-repeat: no-repeat;
		background-size: 60%;
		background-position: 50% 50%;
		position: absolute;
		width: 80px;
		height: 80px;
		background-color: #fff;
		border-radius: 40px;
		top: 25px;
		left: 40px;
	}
	&.btn_ms_top{
		&::before{
			background-image: url("../images/icon/icon_ms.svg");
		}
	}
	&.btn_rsv_top{
		&::before{
			background-image: url("../images/icon/icon_rsv.svg");
		}
	}
	&::after{
		content: "";
		background-repeat: no-repeat;
		background-size: 100%;
		background-position: 50% 50%;
		position: absolute;
		width: 35px;
		height: 35px;
		top: 48px;
		right: 50px;
		background-image: url("../images/icon/icon_arrow.svg");
	}
*/ }
.btn_top ul li a img { max-width: 100%; height: auto; vertical-align: bottom; }

.btn_top_single { padding: 6% 3% 0; text-align: center; }
@media (min-width: 769px), print { .btn_top_single { padding: 60px 0 0; } }

/* ------------------------ news
------------------------ */
.news { height: 100%; overflow: auto; }
.news_date { transition: ease all 0.15s; }
.news_title { text-decoration: none; transition: ease all 0.15s; }
.news_new { text-decoration: none; color: #cc7266; }
.news .new { color: #fff; font-weight: normal; font-size: .8em; padding: 0 .4em; border-radius: 10px; background: #cc7266; }
.news dt { cursor: pointer; font-weight: bold; }
.news dt:hover { color: #cc7266; }
.news dt.active { color: #cc7266; }
.news dt:not(:first-of-type) { border-top: 2px dashed #f2f2f2; padding-top: 1.5em; }
.news dd { padding-top: .8em; font-size: .9em; display: none; }
.news dd + dt { margin-top: 1.5em; }
@media (min-width: 769px), print { .news dt, .news dd { padding-left: 100px; position: relative; }
  .news_date { position: absolute; top: 0; left: 0; }
  .news dt:not(:first-of-type) .news_date { top: 1.5em; } }
@media (max-width: 768px) { .news_date { order: 1; padding-right: 1em; display: inline-block; font-weight: lighter; }
  .news_title { order: 3; width: 100%; display: block; }
  .news .new { display: inline-block; }
  .news_new { order: 2; } }

.news_toggle i { margin-right: 0.4em; }

.news_toggle { display: block; margin: 1.5em auto; padding: 0.4em 0; cursor: pointer; background: #fff; color: #CC7266; border: 1px solid #CC7266; width: 9em; font-size: .9em; }
@media (min-width: 769px), print { .news_toggle { padding: 0.7em 0; } }

/* ------------------------ index
------------------------ */
.index_banner { height: 100%; }
.index_banner ul { display: flex; flex-wrap: wrap; justify-content: space-between; align-content: space-between; height: 100%; margin-bottom: 1.5rem; }
.index_banner ul li { width: calc(50% - 1em); }
@media (min-width: 1200px), print { .index_banner ul li { width: 49%; } }
@media (max-width: 543px) { .index_banner ul li { width: 100%; } }

/* ------------------------ guidance
------------------------ */
.guidance { display: flex; flex-wrap: wrap; justify-content: space-between; width: 100%; text-align: center; }
.guidance span { display: block; font-size: 1.1em; text-align: center; }
.guidance li { width: 50%; padding: 1em; }
.guidance img { transition: ease-out all 0.15s; }
.guidance a { display: inline-block; text-decoration: none; color: #363636; transition: ease-out all 0.15s; }
.guidance a:hover { color: #cc7266; }
.guidance a:hover img { transform: translateY(-0.2em); }
.guidance_wrap h2 { width: 100%; margin: .6em 0; }
@media (min-width: 769px), print { .guidance li { width: 25%; padding: 0 .6em; } }
@media (min-width: 851px), print { .guidance_wrap { flex-wrap: wrap; }
  .guidance_wrap h2 { width: 100%; order: 2; }
  .guidance_wrap .itemA { width: 100%; order: 1; }
  .guidance_wrap .itemB { width: 100%; order: 3; } }

/* ------------------------ greeting
------------------------ */
.greeting { text-align: center; }
.greeting_title { margin: 1em auto; }
.greeting_deco { max-width: 13%; }
.greeting .inner { padding: 1.5em; border: 2px solid #363636; background: #fff; }
.greeting p { font-weight: normal; font-size: .8em; line-height: 1.9; }
.greeting h3 { padding-top: 1.5em; margin-top: 1.5em; position: relative; }
.greeting h3:before { content: ""; width: 70px; height: 1px; background: #363636; position: absolute; top: 0; left: calc(50% - 35px); }
.greeting h3 span { font-size: 1.3em; }
@media (min-width: 851px), print { .greeting { padding: 0 5%; } }

/* -----------------------------------------------------------
　新型コロナウィルス感染対策
----------------------------------------------------------- */
.bnr { margin: 2em auto; text-align: center; }
.bnr img { width: 100%; max-width: 740px; height: auto; margin: 0 auto; border: 2px solid #fff; }
@media (min-width: 851px), print { .bnr a:hover { opacity: 0.7; } }

/*# sourceMappingURL=index.css.map */