@media(max-width: 1200px){
	.sec-dr:before{ background-size: 120rem; }
}

@media(max-width: 768px){
	.mv{ flex-wrap: wrap; }
	.mv .main-slide{ width: 100%; }
	.mv .main-slide:before{ width: 20rem; height: 14.6rem; }
	.mv .main-slide li{ height: 30rem; }
	.mv .main-slide .slide01{ background-image: url(../images/index/webp/mv01-sp.webp); }
	.mv .main-slide .slide02{ background-image: url(../images/index/webp/mv02-sp.webp); }
	.mv .main-slide .slide03{ background-image: url(../images/index/webp/mv03-sp.webp); }
	.mv .content{ width: 100%; height: auto; padding: 5rem 0 11.5rem; background-size: 17rem, 27.2rem; }
	.mv .content .inner{ width: 100%; }
	.mv .content ul{ justify-content: center; margin-bottom: 2.1rem; }
	.mv .content ul li{ font-size: 1.2rem; }
	.mv .content p.catch{ font-size: 3.5rem; text-align: center; letter-spacing: inherit; line-height: 1.5; }
	.mv .content h1{ font-size: 1.3rem; text-align: center; }
	.mv + .news{ width: 32.5rem; height: auto; padding: 2.5rem; display: block; }
	.mv + .news dt{ width: 100%; border-right: none; border-bottom: solid 1px; display: flex; align-items: center; padding-bottom: 1em; margin-bottom: 1rem; }
	.mv + .news dt a{ margin: 0 0 0 0.7rem; }
	.mv + .news dd{ padding-left: 0; width: 100%; }
	.mv + .news dd ul li{ font-size: 1.2rem; line-height: 2; }

	.sec-medical{ padding: 12rem 1.25rem 5rem; background-size: 70.7rem; background-position: top right -11.5rem; }
	.sec-medical .wrap{ padding: 4.5rem 2.75rem; }
	.sec-medical h2 + p{ max-width: 100%; margin-bottom: 2rem; }
	.sec-medical .point{ flex-wrap: wrap; padding-top: 4.7rem; }
	.sec-medical .point li{ width: 100%; }
	.sec-medical .point li + li{ margin-top: 2.5rem; }
	.sec-medical .point li p{ padding: 0 2.25rem; }

	.sec-first .left{ width: 100%; height: 32.5rem; }
	.sec-first .left .inner{ width: 100%; margin: 0; }
	.sec-first .left .inner:before{ width: 32.4rem; height: 26.2rem; }
	.sec-first .left .inner h2{ font-size: 2.5rem; }
	.sec-first .right{ width: 100%; }
	.sec-first .right li{ font-size: 1.5rem; }
	.sec-first .right li a{ height: 9rem; padding-left: 10rem; }
	.sec-first .right li a:before{ width: 6rem; height: 6rem; border-radius: 6rem; left: 2.5rem; }
	.sec-first .right li a span{ width: 100%; }
	.sec-first .right li a span:after{ right: 2.5rem; width: 1.15rem; height: 1.15rem; }

	.sec-dr{ background-image: url(../images/index/webp/dr-bg01-sp.webp); }
	.sec-dr:before{ content: none; }
	.sec-dr .wrap{ padding-top: 5rem; padding-bottom: 5rem; }
	.sec-dr .left{ width: 100%; margin-bottom: 2rem; }
	.sec-dr .left .logo{ width: 4rem; margin: 0 auto 2rem; }
	.sec-dr .left h2{ text-align: center; margin-bottom: 0.3rem; }
	.sec-dr .left h2 small{ font-size: 1.3rem; text-align: center; }
	.sec-dr .left h2 strong{ font-size: 3.5rem; }
	.sec-dr .left p{ text-align: center; }
	.sec-dr .img{ position: relative; left: 0; transform: none; width: 15rem; margin: 0 auto 1.5rem; z-index: 0; }
	.sec-dr .img:before{ content: ''; width: 100vw; height: 12.5rem; background: url(../images/index/webp/dr-bg02.webp) no-repeat center/60rem; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); z-index: -1; }
	.sec-dr .img img{ width: 100%; }
	.sec-dr .right{ width: 100%; }
	.sec-dr .right p{ margin-bottom: 1.8rem; }

	.sec-treatment .point li .img{ width: 100vw; height: 35.4rem; position: static; margin-left: -2.5rem; }
	.sec-treatment .point li:nth-of-type(even) .img{ width: 100vw; }
	.sec-treatment .point li .content{ width: 100%; padding: 4rem 0 5rem; }
	.sec-treatment .point li .content h3{ font-size: 2.5rem; text-align: center; margin-bottom: 1.7rem; }
	.sec-treatment .point li .content p{ margin-bottom: 1.8rem; }

	.sec-youtube{ padding: 9rem 0 5rem; }
	.sec-youtube:before{ width: 29rem; height: 30.75rem; background-image: url(../images/index/webp/youtube-bg02-sp.webp); }
	.sec-youtube .content{ width: 100%; padding: 2.2rem 2.5rem 2.5rem; }
	.sec-youtube .content h2{ margin-bottom: 1.5rem; }
	.sec-youtube .content h2 + p{ margin-bottom: 2rem; }
	.sec-youtube .content .link-row{ margin-bottom: 2.5rem; }
	.sec-youtube .content .link-row a{ width: 100%; }
	.sec-youtube .content .link-row a + a{ margin-top: 3.25rem; }
	.sec-youtube .content .link-row a img{ width: 100%; }
	.sec-youtube .banner-list li{ width: 100%; }
	.sec-youtube .banner-list li:nth-of-type(n+2){ margin-top: 1.5rem; }
	.sec-youtube .banner-list li img{ width: 100%; }

	.sec-blog{ width: 32.5rem; padding: 0 2.5rem 2.5rem; margin-top: 23rem; }
	.sec-blog .blog-row{ padding-top: 20rem; min-height: 0; margin-bottom: 2.5rem; }
	.sec-blog .blog-row .img{ width: 27.5rem; bottom: auto; top: -19.2rem; left: 50%; transform: translateX(-50%); }
	.sec-blog .blog-row .content{ width: 100%; }
	.sec-blog .blog-row .content h2{ font-size: 2.5rem; text-align: center; padding-bottom: .1em; }
	.sec-blog .blog-row .content dl{ padding-bottom: 2.5rem; }
	.sec-blog .blog-row .content dl + dl{ margin-top: 2rem; }
	.sec-blog .blog-row .content dl dt{ font-size: 1.4rem; margin-bottom: .6rem; }
	.sec-blog .blog-row .content dl dt .time{ font-size: 1.1rem; margin-bottom: .8rem; }
	.sec-blog .blog-row .content dl dd{ font-size: 1.1rem; }	
    .micro{width: 100%;}
    .micro img {padding: 0px 0vw 1vw;width: 100%;}
	
	.sec-dr .wrap .img {
    position: relative;
    left: 0;
    transform: none;
    width: 35rem;
    margin: 0 auto 1.5rem;
    z-index: 0;
	}
	.sec-dr .wrap {
		padding-top: 8rem;
		width:100%;
	}
    .director_wrap{ padding: 3rem 2.5rem; }
    .director_wrap h2{ color: #FFF; font-size: 2rem;}
    .director_wrap .dr_flex{ display: block; width: 100%; padding: 2.5rem;}
    .director_wrap .dr_flex .img{ width: 210px; margin: 0 auto 1rem;}
    .director_wrap .dr_flex .text{ width: 100%;}
    .director_wrap .dr_flex .text p{ font-size: 1.3rem;}
}

@media screen and (min-width:768px) and ( max-width:1024px) {
	.mv{ flex-wrap: wrap; }
	.mv .main-slide{ width: 100%; }
	.mv .main-slide:before{ width: 20rem; height: 14.6rem; }
	.mv .main-slide li{ height: 30rem; }
	.mv .main-slide .slide01{ background-image: url(../images/index/webp/mv01-sp.webp); }
	.mv .main-slide .slide02{ background-image: url(../images/index/webp/mv02-sp.webp); }
	.mv .main-slide .slide03{ background-image: url(../images/index/webp/mv03-sp.webp); }
	.mv .content{ width: 100%; height: auto; padding: 5rem 0 11.5rem; background-size: 17rem, 27.2rem; }
	.mv .content .inner{ width: 100%; }
	.mv .content ul{ justify-content: center; margin-bottom: 2.1rem; }
	.mv .content ul li{ font-size: 1.2rem; }
	.mv .content p.catch{ font-size: 3.5rem; text-align: center; letter-spacing: inherit; line-height: 1.5; }
	.mv .content h1{ font-size: 1.3rem; text-align: center; }
	.mv + .news{ width: 32.5rem; height: auto; padding: 2.5rem; display: block; }
	.mv + .news dt{ width: 100%; border-right: none; border-bottom: solid 1px; display: flex; align-items: center; padding-bottom: 1em; margin-bottom: 1rem; }
	.mv + .news dt a{ margin: 0 0 0 0.7rem; }
	.mv + .news dd{ padding-left: 0; width: 100%; }
	.mv + .news dd ul li{ font-size: 1.2rem; line-height: 2; }

	.sec-medical{ padding: 12rem 1.25rem 5rem; background-size: 70.7rem; background-position: top right -11.5rem; }
	.sec-medical .wrap{ padding: 4.5rem 2.75rem; }
	.sec-medical h2 + p{ max-width: 100%; margin-bottom: 2rem; }
	.sec-medical .point{ flex-wrap: wrap; padding-top: 4.7rem; }
	.sec-medical .point li{ width: 100%; }
	.sec-medical .point li + li{ margin-top: 2.5rem; }
	.sec-medical .point li p{ padding: 0 2.25rem; }

	.sec-first .left{ width: 100%; height: 32.5rem; }
	.sec-first .left .inner{ width: 100%; margin: 0; }
	.sec-first .left .inner:before{ width: 32.4rem; height: 26.2rem; }
	.sec-first .left .inner h2{ font-size: 2.5rem; }
	.sec-first .right{ width: 100%; }
	.sec-first .right li{ font-size: 1.5rem; }
	.sec-first .right li a{ height: 9rem; padding-left: 10rem; }
	.sec-first .right li a:before{ width: 6rem; height: 6rem; border-radius: 6rem; left: 2.5rem; }
	.sec-first .right li a span{ width: 100%; }
	.sec-first .right li a span:after{ right: 2.5rem; width: 1.15rem; height: 1.15rem; }

	.sec-dr{ background-image: url(../images/index/webp/dr-bg01-sp.webp); }
	.sec-dr:before{ content: none; }
	.sec-dr .wrap{ padding-top: 5rem; padding-bottom: 5rem; }
	.sec-dr .left{ width: 100%; margin-bottom: 2rem; }
	.sec-dr .left .logo{ width: 4rem; margin: 0 auto 2rem; }
	.sec-dr .left h2{ text-align: center; margin-bottom: 0.3rem; }
	.sec-dr .left h2 small{ font-size: 1.3rem; text-align: center; }
	.sec-dr .left h2 strong{ font-size: 3.5rem; }
	.sec-dr .left p{ text-align: center; }
	.sec-dr .img{ position: relative; left: 0; transform: none; width: 15rem; margin: 0 auto 1.5rem; z-index: 0; }
	.sec-dr .img:before{ content: ''; width: 100vw; height: 12.5rem; background: url(../images/index/webp/dr-bg02.webp) no-repeat center/60rem; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); z-index: -1; }
	.sec-dr .img img{ width: 100%; }
	.sec-dr .right{ width: 100%; }
	.sec-dr .right p{ margin-bottom: 1.8rem; }

	.sec-treatment .point li .img{ width: 100vw; height: 35.4rem; position: static; margin-left: -2.5rem; }
	.sec-treatment .point li:nth-of-type(even) .img{ width: 100vw; }
	.sec-treatment .point li .content{ width: 100%; padding: 4rem 0 5rem; }
	.sec-treatment .point li .content h3{ font-size: 2.5rem; text-align: center; margin-bottom: 1.7rem; }
	.sec-treatment .point li .content p{ margin-bottom: 1.8rem; }

	.sec-youtube{ padding: 9rem 0 5rem; }
	.sec-youtube:before{ width: 29rem; height: 30.75rem; background-image: url(../images/index/webp/youtube-bg02-sp.webp); }
	.sec-youtube .content{ width: 100%; padding: 2.2rem 2.5rem 2.5rem; }
	.sec-youtube .content h2{ margin-bottom: 1.5rem; }
	.sec-youtube .content h2 + p{ margin-bottom: 2rem; }
	.sec-youtube .content .link-row{ margin-bottom: 2.5rem; }
	.sec-youtube .content .link-row a{ width: 100%; }
	.sec-youtube .content .link-row a + a{ margin-top: 3.25rem; }
	.sec-youtube .content .link-row a img{ width: 100%; }
	.sec-youtube .banner-list li{ width: 100%; }
	.sec-youtube .banner-list li:nth-of-type(n+2){ margin-top: 1.5rem; }
	.sec-youtube .banner-list li img{ width: 100%; }

	.sec-blog{ width: 32.5rem; padding: 0 2.5rem 2.5rem; margin-top: 23rem; }
	.sec-blog .blog-row{ padding-top: 20rem; min-height: 0; margin-bottom: 2.5rem; }
	.sec-blog .blog-row .img{ width: 27.5rem; bottom: auto; top: -19.2rem; left: 50%; transform: translateX(-50%); }
	.sec-blog .blog-row .content{ width: 100%; }
	.sec-blog .blog-row .content h2{ font-size: 2.5rem; text-align: center; padding-bottom: .1em; }
	.sec-blog .blog-row .content dl{ padding-bottom: 2.5rem; }
	.sec-blog .blog-row .content dl + dl{ margin-top: 2rem; }
	.sec-blog .blog-row .content dl dt{ font-size: 1.4rem; margin-bottom: .6rem; }
	.sec-blog .blog-row .content dl dt .time{ font-size: 1.1rem; margin-bottom: .8rem; }
	.sec-blog .blog-row .content dl dd{ font-size: 1.1rem; }	
    .micro{width: 100%;}
    .micro img {padding: 0px 0vw 1vw;width: 100%;}
	
	.sec-dr .wrap .img {
    position: relative;
    left: 0;
    transform: none;
    width: 35rem;
    margin: 0 auto 1.5rem;
    z-index: 0;
	}
	.sec-dr .wrap {
		padding-top: 12rem;
		width:100%;
	}
}
/* モニター募集バナースライダー（SP）
   padding-top: top.js が .news に margin-bottom:-（高さの半分）を付けるため、
     .monitor-bnr の上端はNEWS帯の下端より約9rem上に来る。padding-top をそれ未満にすると
     バナーがお知らせ本文に重なって見切れる（実測: news下端 886px / bnr上端 797px）。
     お知らせの見出しは折り返しで高さが変わるため、余裕をみて 11rem 確保している。
     .sec-intro が padding-top:15rem で同じ食い込みを吸収しているのと同じ考え方。
   padding-bottom: 0 は .sec-intro の margin-top:-12.5rem に食い込ませて余白を詰めるため。
     .monitor-bnr の z-index:5 > .sec-intro の z-index:2 なのでドットは前面に残る。 */
@media(max-width: 768px){
	/* SPは #top-page の上端がもともとMV下端と一致しておりズレないため、
	   PC用の margin-top:-5rem は打ち消す（残すとバナーがお知らせに潜り込む）。 */
	.monitor-bnr{ margin-top: 0; padding: 11rem 0 0; }
	.monitor-bnr__item{ width: 40vw; margin: 0; padding: 0 1vw; }
	.monitor-bnr__dots{ margin-top: 2rem; }
	.monitor-bnr__dots li button{ width: .8rem; height: .8rem; }
}
