@charset "utf-8";

/*breakpoint
@media screen and ( max-width:1080px) and ( min-width:769px) {}  *PCヨコ幅_規定値以下のレスポンシブor大型タブレット*
@media screen and ( max-width:768px) {}							 *タブレットのブレイクポイントからiPhoneSE基準(375)でscript制御*
@media screen and ( max-width:375px) {}							 *iPhoneSE基準(375)、GalaxyS8(360)、デバイス判定基準値*

/*breakpoint
@media screen and ( max-width:768px) and ( min-width:541px)  {}  *iPad_miniタブレットのヨコ規定値～PCでの特殊な閲覧例*
@media screen and ( max-width:540px) and ( min-width:415px)  {}　*SurfaceDuo(540)*
@media screen and ( max-width:414px) and ( min-width:376px)  {}　*iPhoneXR(414),GalaxyS20/A51/71(412)*

*%,rem,vw,で構成してコントロール_デザイン上の異常値はfix最適化*

html {
	font-size: calc(100vw * 16 / 375);	// viewport 375px のとき font-size 16px

	@media (min-width: 415px) {
	font-size: calc(100vw * 16 / 768);
	}

	@media (min-width: 768px) {
	font-size: calc(100vw * 16 / 768);
	}

	@media (min-width: 1080px) {
	font-size: calc(100vw * 18 / 1240);
	}

	@media (min-width: 1081px) {
	font-size: calc(100vw * 20 / 1440);
	}
}

*/
/*lower-slick*/
.slickframe .button_to_contents a.slick-adjust {
	margin-top: 0;
}
/*lower*/

/*firstview_custom*/
#firstview {
    max-height: 600px;
}
.slider-top .slick-slide img {
	height: 600px;
}
.catchcopy {
	width: 760px;
    top: 200px;
	left: 0;
}
@media screen and ( max-width:375px) { .catchcopy { width: 356px; top: 150px; left: 1.3%; right: 0; margin: 0; padding: 0 5px;} }

.catchcopy .ttl {
}
.title--lower {
	width: 92%;
	animation: txt_delay 10.0s forwards;
}
@media screen and ( max-width:375px) { .title--lower { }}

.title--lower_h {
    padding: 4px 19px 0px;
	font-size: 32px;
	letter-spacing: 3.0px !important;
	background-color: #fff;
    animation: ttl_anieme 10.0s forwards;
    position: relative;
}
.title--lower_caption {
	animation: ttl_anieme 10.0s forwards;
    position: relative;
}
.title--lower_caption p {
	width: 92%;
    padding: 10px 19px;
	font-size: 18px;
	font-weight: 700;
	letter-spacing: 1.0px !important;
	animation: txt_delay 10.0s forwards;
	background-color: #fff;
    position: relative;
    top: -15px;
}
@media screen and ( max-width:375px) { .title--lower_h { font-size: 25px; letter-spacing: 0px !important; top: 13px; padding-top:7px; } }
@media screen and ( max-width:375px) { .title--lower_caption p { font-size: 15px; letter-spacing: 0px !important; line-height: 26px; top: 6px; } }
@media screen and ( max-width:375px) { .nav_cate { margin-top: 100px; } }

.catchcopy .caption {
	font-size: 18px;
	margin-top: 0px;
}
@media screen and ( max-width:375px) { .catchcopy .caption { margin-top: 10px; }}

.catchcopy .caption p {
	letter-spacing: 1.0px !important;
	line-height: 34px;
}

.catchcopy .ttl p:nth-of-type(1) {
	font-size: 18px;
	letter-spacing: 5.6px !important;
	position: absolute;
	top: 52px;
}
@media screen and ( max-width:375px) { .catchcopy .ttl p:nth-of-type(1) { font-size: 16.5px; letter-spacing: 2px !important; top: 51px; } }

.catchcopy .caption p::before {
	width: 100%;
	height: 100%;
}


/*下層ページ カスタマイズ部分*/
.article-wrap {
	margin-top: 120px;
	margin-bottom: 180px;
}
.article-wrap header time {
	color: #cccccc;
	position: absolute;
}
.article-wrap header h1 {
	text-align: center;
	font-size: 34px;
	margin-top: 30px;
}

.article-body {
	width: 100%;
	height: auto;
	min-height: 600px;
	padding-top: 180px;
}
.article-body figure img {
	width: 400px;
	margin-top: 20px;
}
.article-body h2 { 
	font-size: 26px;
	font-weight: 600;
}
.article-body p {
	margin-top: 10px;
	line-height: 2.4em;
}

.article-body figure { /*２カラム記事、左写真、回り込み*/
	width: 400px;
    display: block;
    float: left;
}
.article-body .left {
    width: 640px;
	float: left;
    padding-left: 40px;
}
.article-body .center { /*２カラム記事、写真なし、中央*/
	width: 100%;
	float: none;
	margin-top: 80px;
	position: relative;
    top: 80px;
}
/*下層ページ カスタマイズ部分*/

/*医師一覧*/
.director {
	margin-top: 180px;
}
.director h1 {
	font-size: 38px;
	font-weight: 700;
	letter-spacing: 1.0px;
	text-align: center;
}
.director .left {
	margin-top: 120px;
	clear: both;
}

.director .left figure {
	width: 500px;
	float: left;
	margin-top: 0px;
	margin-right: 40px;
}

.director .left .text {
	width: 540px;
	float: left;
}

.director .left .text p {
	margin-top: 30px;
}

.director .center {
	width: 100%;
	height: 600px;
	margin-top: 80px;
	border: solid 1px #333333;
}

/*カレンダー用table表*/

.list_doctor-schedule {
	margin-top: 160px;
	margin-bottom: 180px;
}
.schedule-section h2 {
	font-weight: 700;
	text-align: center;
}
.schedule-section .annotation {
    width: 640px;
    margin: 0 auto;
	position: relative;
    top: 40px;
}
.schedule-section .annotation p {
	font-weight: 700;
	margin: 10px 20px 0 0;
	float: left;
}
.schedule-section .annotation p.morning::before,
.schedule-section .annotation p.afternoon::before {
	width: 50px;
    display: block;
    border-radius: 3px;
    text-align: center;
    color: #fff;
    float: left;
    margin: 0 13px 0 0;
}
.schedule-section .annotation p.morning::before {
	content: "午前";
	background: #29B6F6;
}
.schedule-section .annotation p.afternoon::before {
	content: "午前";
	background: #009688;
}

.table-scroll {
	margin-top: 80px;
}
.schedule-section h3 {
	width: 38px;
	float: left;
	font-size: 15px;
	font-weight: 700;
	color: #fff;
	text-align: center;
	letter-spacing: 1.0px;
	margin-top: 10px;
	margin-right: 8px;
    position: relative;
    top: 14px;
}
.schedule-section li {
	font-size: 16px;
    position: relative;
    top: 14px;
}
.schedule-section li span.min {
	padding-left: 27px;
	position: relative;
	top: -10px;
}
.schedule-section h3.morning {
	background: #29B6F6;
	/*border: solid 2px #689F38;
	color: #689F38;*/
	border-radius: 3px;
}
.schedule-section h3.afternoon {
	background: #009688;
	/*border: solid 2px #0097A7;
	color: #0097A7;*/
	border-radius: 3px;
}

.schedule-section .description {
	margin-top: 10px;
}


.calendar-table time {
	width: 100%;
	font-size: 17px;
	font-weight: 700;
    text-align: center;
    background: #FFEB3B;
    border-radius: 3px;
    display: block;
}
.calendar-table tr th.weekday {
	height: 24px;
}

.calendar-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}
.calendar-table th,
.calendar-table td {
  border: 1px solid #dcdcdc;
  padding: 12px;
  vertical-align: top;
  height: 140px;
}
.calendar-table th {
  background: #f5f5f5;
  text-align: center;
}
.is-sunday {
  background: #fff8f8;
}
.is-empty {
  background: #fafafa;
}
.doctor-list {
  margin: 8px 0 0;
  padding-left: 18px;
}

.table-scroll {
overflow-x: auto;
}

/*カレンダー用table表__end*/

/*SP最適化*/
@media screen and ( max-width:375px) { 
	.director { margin-top: 80px;}
	.director h1 { font-size: 30px; }
	.director .left { margin-top: 40px; }
	.director .left figure { width: 96%; margin: 0 auto; margin-right: 5px; float: none;}
	.director .left .text { width: 100%;float: none; position: relative; left:2%; margin-top: 30px;}
	.schedule-section h2 { font-size: 28px; }
	.table-scroll { margin-top: 40px; }

	.calendar-table,
	.calendar-table thead,
	.calendar-table tbody,
	.calendar-table tr,
	.calendar-table th,
	.calendar-table td { display: block; }
	.calendar-table thead { display: none; }
	.calendar-table tr { margin-bottom: 24px; }
	.calendar-table td { border: 1px solid #ddd; padding: 16px; min-height: auto; }
	.schedule-section li span.min { padding-left: 0; top: 0; }
	.schedule-section li span.min::before { content: "・"; }
	.schedule-section .annotation { width: 96%; top: 12px; left: 18px; }
	.schedule-section .annotation p { float: none; }
}

/*animation*/
@keyframes ttl_anieme {
  0% { width: 0%;}
  10% { width: 100%;}
  55%{ width: 100%;}
  100%{ width: 100%;}
}
@keyframes txt_delay {
  0% { opacity: 0;}
  8% { opacity: 0;}
  12%{ opacity: 1;}
  100%{ opacity: 1;}
}
@keyframes caption_anieme_p01 {
  0% { width: 0%; opacity:0;}
  3% { width: 0%; opacity:0;}
  8% { opacity:1;}
  14%{ width: 100%; opacity:1;}
  100%{ width: 100%; opacity:1;}
}
@keyframes caption_anieme_p02 {
  0% { width: 0%; opacity:0;}
  3%{ width: 0%; opacity:0;}
  8%{ opacity:1;}
  14%{ width: 100%; opacity:1;}
  100%{ width: 100%; opacity:1;}
}
@keyframes caption_anieme_p03 {
  0% { width: 0%; opacity:0;}
  3%{ width: 0%; opacity:0;}
  8%{ opacity:1;}
  14%{ width: 100%; opacity:1;}
  100%{ width: 100%; opacity:1;}
}
@keyframes category_pop {
  0% { top:0; opacity: 0;}
  14%{ top:0; opacity: 0;}
  16%{ top:0; opacity: 1;}
  18%{ top:-10px; opacity: 1;}
  20%{ top:2px; opacity: 1;}
  22%{ top:-2px; opacity: 1;}
  24%{ top:1px; opacity: 1;}
  26%{ top:0; opacity: 1;}
  100%{ top:0; opacity: 1;}
}

/*../news/*/

/*doctor-schedule*/