@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: 28px; letter-spacing: 3px !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: 120px auto 180px;
}
.article-wrap header time {
	color: #cccccc;
	position: absolute;
}
.article-wrap header h1 {
	text-align: center;
	font-size: 34px;
	margin-top: 30px;
}
.article-wrap header p {
	text-align: center;
}

.article-body {
	width: 100%;
	height: auto;
	min-height: 600px;
	padding-top: 180px;
}
.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;
	margin-top: 80px;
}
.article-body figure img {
	width: 400px;
	margin-top: 20px;
}

.article-body .left {
    width: 640px;
	float: left;
    padding-left: 40px;
}
@media screen and ( max-width:375px) { 
	.article-wrap header h1 { font-size: 26px; text-align: left; }
	.article-body h2 { font-size: 23px; text-align: left; }
	.article-body .left { width:96%; margin: 0 auto; padding-left: 0;}
	.article-body figure { width: 100%; margin-top: 40px; }
	.article-body figure img { width: 100%; }
}

.article-body .center { /*２カラム記事、写真なし、中央*/
	width: 100%;
	float: none;
	margin-top: 80px;
	position: relative;
    top: 80px;
}
/*下層ページ カスタマイズ部分*/

/*記事本体部分、ul,li表記など、ブログ用カスタマイズ*/
.article-wrap h2 {
	margin-top: 80px;
}
.article-wrap p {
	margin-top: 40px;
}

.article-wrap ul {
	margin: 30px 0;
}
.article-wrap li {
	font-size: 18px;
	list-style: disc;
	margin: 10px 0 0 40px;
}

/*記事一覧*/
h2.news-articles--title {
	font-size: 34px;
	font-weight: 700;
	text-align: center;
}
@media screen and ( max-width:375px) { h2.news-articles--title { font-size: 24px; }}

.news-articles ul li article figure img {
	border-radius: 7px;
}

/*slick解除の同一転用*/
.news-articles {
	margin-top: 200px;
	margin-bottom: 160px;
}
@media screen and ( max-width:375px) { .news-articles { margin-bottom: 90px }
}

.news-articles ul {
	margin-top: 30px;
}
@media screen and ( max-width:375px) { .news-articles ul { margin-top: 0; position: relative; top: -40px;}}
	
.news-articles li {
	width: 330px;
    float: left;
    margin: 20px 15px;
}
@media screen and ( max-width:375px) { .news-articles li { margin: 20px auto; position:relative; left:4px; }}

.news-articles ul li time {
    font-size: 11px;
    font-weight: 700;
    position: relative;
    top: -56px;
    Left: -11px;
    background: #fff;
    display: inline;
    padding: 2px 11px;
    z-index: 0;
}
.news-articles ul li h4 {
	font-size: 19px;
    font-weight: 700;
    position: relative;
    top: -28px;
    left: -87px;
    background: #fff;
    display: inline-block;
    padding: 0 10px 0 0;
    z-index: 1;	
}
@media screen and ( max-width:375px) { .slickframe ul li h4 { font-size: 18px; top: -20px;}}

.news-articles figure::before {
	content: url("../../files/img/slick_icon_dott.png");
    position: relative;
    top: 196px;
    left: 241px;
    transform: scale(0.8);
    display: block;
}

.news-articles ul li p {
	font-size: 15px;
	padding: 0 2%;
	word-break: break-all;
}

.news-articles .button_to_contents {
	margin-top : 20px;
	background:#3975ab;
	border-radius: 6px;
}
.news-articles .button_to_contents a {
	color: #fff;
	font-size: 21px;
	font-weight: 700;
	display: block;
	padding: 10px 10px;
	text-align: center;
}
.news-articles .button_to_contents a.slick-adjust {
	margin-top: -28px;
}

/*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*/

/*発熱外来お知らせ（電話番号）*/
.news_reserve {
    background-color: inherit;
    padding-top: 40px;
	margin-top: 100px;
}
.news_reserve .cont h2 {
	text-align: left;
	text-decoration-line: underline;
	text-decoration-style: wavy;
	text-decoration-color: #FFC107;
}
.news_reserve .cont li h3 {
	position: relative;
	left: -6px;
}

.news_reserve .cont .tel p,
.news_reserve .cont p.info  {
	margin-top: 0;
	line-height: inherit;
}
@media screen and ( max-width:375px) { 
	.news_reserve .cont li p.info {	font-size: 16px; }
	.tel a { font-size: 34px; }
	.news_reserve .cont li { width: 98%; }
	.news_reserve .cont li:nth-child(odd) { height: 460px; margin-left: 2px; }
	.news_reserve .cont li:nth-child(even) { height: 500px; margin-left: 2px;}
}
.news_reserve .cont li.lower--custom { list-style:none; }