@charset "UTF-8";

/******************
スライド画像[共通]
******************/
.mainVisual {
  	width: 100%;
	margin:0 auto;
	position: relative;
  	max-height: 100vh;
	overflow:hidden;
}
.mainVisual, .slider, .slick-img {
  height: 100vh;
  opacity: 0;
  transition: opacity 0.3s;
}
.slick-img {
  	width: 100%;
  	height: 100%;
  	object-fit: cover;
	position:relative;
}
.slick-img picture {
  display: block;
  width: 100%;
  height: 100%;
}
.slick-img img {
 	width: 100%;
  	height: 100%;
  	object-fit: cover;
	object-position: center top;
}
.slick-img::after {
  	content: "";
  	position: absolute;
  	inset: 0;
  	background: rgba(255,255,255,0.15);
  	pointer-events: none;
  	z-index: 2;
}
.slider {
  	width: 100%;
  	height: 100%;
  	position: relative;
  	overflow: hidden;
  	transition: opacity 0.5s ease;
}
.mainTxtWrapper{
	position:absolute;
	/*width:100%;
	max-width:140px;
	max-width:900px;
  	margin:auto;
	right:12%;
	top:24%;*/
	left:4%;
	bottom:10%;
	z-index:800;
	text-shadow: 0 0 12px rgba(255,255,255,0.9);
}
.mainWhTxt{
	position: relative;
	font-family: "Noto Serif JP", "Shippori Mincho", sans-serif, serif;
	/*-ms-writing-mode: tb-rl;
	writing-mode: vertical-rl;
	font-size: 2.9rem;*/
	font-size: 2.8rem;
	line-height: 1.9;
	letter-spacing: 0.6rem;
	font-weight: 500;
	color:var(--basecolor);
	/*text-shadow: 0 0 10px rgba(255,255,255,0.9);*/
	text-shadow: 
  0 0 6px rgba(255,255,255,1),
  0 0 12px rgba(255,255,255,0.9),
  0 0 18px rgba(255,255,255,0.8);
}
.mainWhTxt .line,
.mainWhTxt .sub{
	display:block;
	opacity:0;
	transform: translateX(20px);
	animation: slideFade 1s ease forwards;
}
.mainWhTxt .line:nth-of-type(1){ animation-delay:0.1s; }
.mainWhTxt .line:nth-of-type(2){ animation-delay:0.3s; }

.mainWhTxt .sub{
	font-size:1.95rem;
	/*margin:70px 0 0 0;*/
	margin:5px 0 0 0;
	animation-delay:0.9s;
}
@keyframes slideFade{
	to{
		opacity:1;
		transform: translateX(0);
	}
}
@media screen and (max-width: 1300px) {
.mainWhTxt{
	font-size: 2.6rem;
}
.mainWhTxt .sub{
	font-size:1.8rem;
}
}
@media screen and (max-width: 1200px) {
.mainTxtWrapper{
	right:unset;
	left:3%;
	bottom:13%;
}
.mainWhTxt{
	font-size: 2.4rem;
}
.mainWhTxt .sub{
	font-size:1.7rem;
}
}
@media screen and (max-width: 800px) {
/*.mainVisual {
    aspect-ratio: auto;
   	height: 100%;
  	overflow: hidden;
  	position: relative;
}
.slick-img img {
  	object-fit: cover;
	height: 100%;
	object-position:100% 100%;
}*/
.mainTxtWrapper {
  	right: unset;
	left:5%;
	top:10%;
  	width: auto;
	max-width: none;
}
.mainWhTxt{
	text-shadow:none;
	color:var(--basecolor);
	letter-spacing: 0.2rem;
	-ms-writing-mode: tb-rl;
	writing-mode: vertical-rl;
}
.mainWhTxt{
	font-size: 2.2rem;
}
.mainWhTxt .sub{
	font-size:1.6rem;
}
.mainWhTxt .line,
.mainWhTxt .sub{
	position: relative;
}
.mainWhTxt .mwtbg{
	background: rgba(255,255,255,0.9);
	border-radius: 6px;
	z-index: -1;
	padding:15px 2px;
	margin: 0 4px 8px 4px;
	display: inline-block;
}
.mainWhTxt .line{
	display:block;
	opacity:0;
	transform: translateX(20px);
	animation: slideFade 1s ease forwards;
}
.mainWhTxt .sub{
	display:block;
	opacity:0;
	transform: translateX(20px);
	animation: slideFade 1s ease forwards;
	animation-delay:.4s;
}
}
@media screen and (max-width: 640px) {
.mainTxtWrapper {
  	max-width: none;
}
.mainWhTxt{
	font-size: 1.9rem;
}
}
@media screen and (max-width: 480px) {
.mainTxtWrapper {
	top:14%;
	left:7%;
}
.mainWhTxt{
	font-size: 1.8rem;
}
.mainWhTxt .sub{
	font-size:1.5rem;
}
.mainWhTxt .mwtbg{
	padding:10px 1px;
}
.mainWhTxt .sub{
	margin:60px 0 0 0;
}
}


/******************
トップ・お知らせ
******************/
.topInfoWrapper{
	display:flex;
	justify-content:space-between;
	align-items:flex-start;
	width: 94%;
  	max-width: 1200px;
  	margin: 0 auto;
  	padding: 90px 0 60px 0;
	position:relative;
	z-index:100;
}
.topInfoMidashi{
	width:100%;
	max-width:300px;
}
.topMidashi{
	font-family:var(--enLg);
	font-size:3.2rem;
	font-weight:400;
	line-height:1.4;
	letter-spacing:0.4rem;
	margin:0 auto 50px auto;
}
.tmc{
	text-align:center;
}
.topMidashi br{
	display:none;
}
.topMidashi span{
	display:block;
	font-size:1.6rem;
	font-weight:400;
	letter-spacing:0.2rem;
	font-family: "Noto Sans JP", "Noto Serif JP", "Shippori Mincho", 'ヒラギノ角ゴシック','Hiragino Sans','メイリオ','Hiragino Kaku Gothic ProN','ヒラギノ角ゴ ProN W3','Osaka' ,'Yu Gothic','Arial', sans-serif , serif;
}
.topInfoMore{
	width:100%;
	max-width:260px;
	margin:40px 0 0 0;
}
.topInfoMore a {
	display: block;
	width: 100%;
	background: #e2eed3;
	color: var(--basecolor);
	position: relative;
	padding: 10px 5%;
	box-sizing: border-box;
	text-decoration: none;
	overflow: hidden;
	border-radius:5px;
	text-align:center;
	box-shadow: 3px 3px 6px 0px rgba(0, 0, 0, 0.15);
	transition: all 0.3s ease;
}
.topInfoMore a::before {
	font-family: 'Material Icons';
	content: '\e315';
	position: absolute;
	right: 5%;
	top: 21%;
	color: var(--basecolor);
	font-weight: 400;
	transition: 0.3s;
	font-size:1.9rem;
}
.topInfoMore a:hover{
	text-decoration:none;
	background:#74c487;
	color:#fff;
	transform: translateY(-3px);
	box-shadow: 6px 6px 12px rgba(0,0,0,0.2);
}
.topInfoMore a:hover::before{
	right: 3%;
	color:#fff;
}
.topInfoBox {
    overflow: hidden;
	width:calc(100% - 370px);
	margin:0 0 0 70px;
}
.topInfoBox ul li{
	width:100%;
	padding:20px 0;
	border-bottom:1px solid #868686;
	display:flex;
	align-items:center;
	justify-content:space-between;
}
.topInfoBox ul li:first-child{
	padding:0 0 15px 0;
}
.topInfoBox .infoDate{
	font-size:1.5rem;
	font-weight:500;
	width:100px;
}
.topInfoBox .infoTitle{
	width:calc(100% - 140px);
	margin:0 0 0 40px;
}
@media screen and (max-width: 1260px) {
.topInfoWrapper{
	width: 90%;
  	max-width: 90%;
  	padding: 70px 0 40px 0;
}
.topInfoMidashi {
    max-width: 260px;
}
.topInfoBox {
    width: calc(100% - 330px);
}
.topMidashi {
    font-size: 2.8rem;
    letter-spacing: 0.2rem;
    margin: 0 auto 30px auto;
}
.topInfoMore a {
    font-size: 1.5rem;
}
}
@media screen and (max-width: 1060px) {
.tmc{
	text-align:left;
}
}
@media screen and (max-width: 1000px) {
.topInfoWrapper {
    display: block;
	padding: 50px 0 30px 0;
}
.topInfoMidashi {
    max-width: 100%;
	display:flex;
	justify-content:space-between;
	margin:0 auto 15px auto;
}
.topInfoMidashi .topMidashi{
	margin:0 0 30px 0;
}
.topInfoMore {
    max-width: 200px;
    margin:10px 0 0 0;
}
.topInfoMore a {
    padding: 8px 5%;
}
.topInfoBox {
    width: 100%;
    margin: 0 auto;
}
}
@media screen and (max-width: 800px) {
.topInfoBox ul li {
    display:block;
}
.topInfoBox .infoDate {
    width: 100%;
	display:block;
	font-size:1.4rem;
}
.topInfoBox .infoTitle {
    width: 100%;
    margin: 0 auto;
	display:block;
	line-height:1.6;
}
}
@media screen and (max-width: 640px) {
.topInfoWrapper {
    width: 86%;
    max-width:86%;
	padding: 50px 0 20px 0;
}
.topMidashi {
    font-size: 2.6rem;
	margin:0 auto 20px auto;
}
.topMidashi span {
    font-size: 1.4rem;
	letter-spacing: 0.05rem;
}
.topInfoMore {
    max-width: 160px;
}
.topInfoMore a {
    padding: 5px 3% 5px 7%;
	border-radius: 7px;
	text-align:left;
}
.topInfoMore a::before {
    right: 4%;
    top: 17%;
    font-size: 1.8rem;
}
}
@media screen and (max-width: 480px) {
.topInfoMidashi {
        margin: 0 auto ;
}
.topInfoMore {
    max-width: 140px;
}
.topMidashi br{
	display:block;
}
}
@media screen and (max-width: 350px) {

}

/******************
トップ・診療時間
******************/
.topHours{
	width:100%;
	margin:0 auto;
	position:relative;
}


/******************
トップ・当院について
******************/
.topAboutWrapper{
 	position: relative;
}
.topAboutWrapper::after{
  	content:"";
  	position:absolute;
  	left:0;
  	top:50%;
  	width:100%;
  	height:100%;
  	background:url(./images/top/top-bg2.webp) no-repeat left top;
	-webkit-mask-image: linear-gradient(
    to bottom,
    transparent 0%,
    #fefff5 30%,
    #fefff5 85%,
    transparent 100%);
  	mask-image: linear-gradient(
    to bottom,
    transparent 0%,
    #fefff5 30%,
    #fefff5 85%,
    transparent 100%);
  	z-index:0;
}
.topAboutWrapper > *{
  	position:relative;
  	z-index:1;
}
.topAbout{
	width:90%;
	max-width:1400px;
	margin:0 auto;
	padding:0 0 100px 0;
}
.topAboutContent{
	width:100%;
	display:flex;
	justify-content:space-between;
	align-items:center;
}
.topAboutContentL{
	width:48%;
}
.topAboutContentR{
	width:45%;
}
.topAboutContentR img{
	width:100%;
	display:block;
	border-radius:15px;
}
.topAboutTtl{
	font-size:2.2rem;
	margin:0 auto 20px auto;
}
.topAboutTxt{
	margin:0 auto 10px auto;
}
.topAboutBtn{
	width:100%;
	margin:40px auto 0 auto;
	overflow:hidden;
}
.topAboutBtn ul{
	width:96%;
	display:flex;
	justify-content:flex-start;
	margin:10px auto;
	padding: 0 2% 10px 2%;
	gap:30px;
}
.topAboutBtn ul li{
	width:47%;
	position:relative;
}
.topAboutBtn ul li a{
	position:relative;
	display: block;
	width: 100%;
	background: #fce0b6;
	color: var(--basecolor);
	position: relative;
	padding: 10px 5%;
	box-sizing: border-box;
	text-decoration: none;
	overflow: hidden;
	border-radius:5px;
	font-size:1.7rem;
	text-align:center;
	box-shadow: 3px 3px 6px 0px rgba(0, 0, 0, 0.15);
	transition: all 0.3s ease;
}
.topAboutBtn ul li:nth-child(2) a{
	background: #d4e5bc;
}
.topAboutBtn ul li a::before {
	font-family: 'Material Icons';
	content: '\e315';
	position: absolute;
	right: 5%;
	top: 21%;
	color: var(--basecolor);
	font-weight: 400;
	transition: 0.3s;
	font-size:1.9rem;
}
.topAboutBtn ul li a:hover{
	text-decoration:none;
	background:#fcb556;
	color:#fff;
	transform: translateY(-3px);
	box-shadow: 6px 6px 12px rgba(0,0,0,0.2);
}
.topAboutBtn ul li:nth-child(2) a:hover{
	background: #74c487;
}
.topAboutBtn ul li a:hover::before{
	right: 3%;
	color:#fff;
}
.topMediInfoWrapper{
 	position: relative;
}
.topMediInfoWrapper::after{
  	content:"";
  	position:absolute;
  	left:0;
  	top:60%;
  	width:100%;
  	height:100%;
  	background:url(./images/top/top-bg3.webp) no-repeat left top;
	-webkit-mask-image: linear-gradient(
    to bottom,
    transparent 0%,
    #fefff5 30%,
    #fefff5 85%,
    transparent 100%);
  	mask-image: linear-gradient(
    to bottom,
    transparent 0%,
    #fefff5 30%,
    #fefff5 85%,
    transparent 100%);
  	z-index:0;
}
.topMediInfoWrapper > *{
  	position:relative;
  	z-index:1;
}
.topMediInfo{
	width:90%;
	max-width:1400px;
	margin:0 auto;
	padding:0 0 100px 0;
}
.topMediInfoContent{
	width:100%;
	display:flex;
	justify-content:space-between;
	align-items:center;
	flex-direction: row-reverse;
}
.topMediInfoContentL{
	width:48%;
}
.topMediInfoContentR{
	width:45%;
}
.topMediInfoContentR img{
	width:100%;
	display:block;
	border-radius:15px;
}
.topJihi{
	width:90%;
	max-width:1400px;
	margin:0 auto;
	padding:0 0 100px 0;
}
.topJihiContent{
	width:100%;
	display:flex;
	justify-content:space-between;
	align-items:center;
}
.topJihiContentL{
	width:48%;
}
.topJihiContentL .topAboutBtn ul li:first-child a{
	background: #d4e5bc;
}
.topJihiContentL .topAboutBtn ul li:first-child a:hover{
	background: #74c487;
}
.topJihiContentR{
	width:45%;
}
.topJihiContentR img{
	width:100%;
	display:block;
	border-radius:15px;
}
.topMediinftoUnder{
  	display:flex;
  	justify-content:center;
	align-items:stretch;
  	gap:40px;
	width:100%;
	margin:80px auto 20px auto;
	overflow:hidden;
}
.topMediinfoUnderOne{
  	width:18%;
	margin:0 0 20px 0;
}
.topMediinfoUnderOne a{
	display:block;
  	width:100%;
	border-radius:15px;
  	overflow:hidden;
  	background:#fdf8ea;
  	box-shadow: 3px 3px 6px rgba(0,0,0,0.15);
	transition:.3s;
}
.topMediinfoUnderOne:nth-child(2) a{
  	background:#e2f4f1;
}
.topMediinfoUnderOne:nth-child(3) a{
  	background:#f4efe8;
}
.topMediinftoUnderIcon{
  	position:relative;
}
.topMediinftoUnderTxt{
  	text-align:center;
  	font-size:1.7rem;
  	letter-spacing:0.1em;
	padding:30px 2%;
	line-height:1.6;
}
.topMediinftoUnderTxt br{
	display:none;
}
.topMediinfoUnderOne a:hover{
	transform: translateY(-5px);
	box-shadow: 6px 6px 12px rgba(0,0,0,0.15);
	text-decoration:none;
	color:var(--basecolor);
}
.topJihi .topMediinfoUnderOne a{
  	background:#e2f4ff;
}
.topJihi .topMediinfoUnderOne:nth-child(2) a{
  	background:#fff0f0;
}
.topJihi .topMediinfoUnderOne:nth-child(3) a{
  	background:#f5f0fc;
}
.topJihi .topMediinfoUnderOne:nth-child(4) a{
  	background:#e9f5e8;
}
@media screen and (max-width: 1340px) {
.topMediInfo {
    padding: 0 0 80px 0;
}
.topJihi{
	padding: 0 0 70px 0;
}
}
@media screen and (max-width: 1260px) {
.topAboutTtl{
	font-size:2rem;
	margin:0 auto 15px auto;
}
}
@media screen and (max-width: 1060px) {
.topAboutContent {
    align-items: flex-start;
}
.topMediInfoContent{
	align-items: flex-start;
}
.topJihiContent{
	align-items: flex-start;
}
.topAboutBtn {
    margin: 15px auto 0 auto;
}
.topAboutBtn ul{
	display:block;
	gap:unset;
}
.topAboutBtn ul li {
	width:94%;
	margin:15px auto;
}
.topMediinftoUnder{
  	gap:30px;
	margin:60px auto 20px auto;
}
.topMediinfoUnderOne{
  	width:23%;
}
.topMediinftoUnderTxt {
    letter-spacing: 0;
	padding: 25px 5%;
	font-weight:500;
	font-size:1.6rem;
}
.topMediInfo {
    padding: 0 0 60px 0;
}
.topJihi{
	padding: 0 0 60px 0;
}
}
@media screen and (max-width: 800px) {
.topAbout{
	padding:0 0 60px 0;
}
.topAboutContent{
	display:block;
}
.topAboutContentL{
	width:100%;
	margin:0 auto 25px auto;
}
.topAboutContentR{
	width:100%;
	margin:0 auto;
}
.topAboutBtn ul{
	display:flex;
	gap:30px;
}
.topAboutBtn ul li{
	width:47%;
	margin:0 auto ;
}
.topAboutTtl{
	font-size:1.9rem;
	margin:0 auto 10px auto;
	font-weight:500;
}
.topMediInfoContent{
	display:block;
}
.topMediInfoContentL{
	width:100%;
	margin:0 auto 25px auto;
}
.topMediInfoContentR{
	width:100%;
	margin:0 auto;
}
.topMediinftoUnder {
    width: 100%;
    margin: 40px auto 0 auto;
	flex-wrap:wrap;
	gap:0 20px;
	align-items:stretch;
}
.topMediinfoUnderOne {
    width: 45%;
}
.topMediinfoUnderOne a{
	display:flex;
	flex-direction:column;
	justify-content:space-between;
	height:100%;
	text-decoration:none;
}
.topJihiContent{
	display:block;
}
.topJihiContentL{
	width:100%;
	margin:0 auto 25px auto;
}
.topJihiContentR{
	width:100%;
	margin:0 auto;
}
}
@media screen and (max-width: 640px) {
.topAbout{
	max-width: 86%;
}
.topAboutContentL {
    margin: 0 auto 15px auto;
}
.topAboutBtn ul{
	display:block;
	gap:unset;
}
.topAboutBtn ul li {
	width:94%;
	margin:15px auto ;
}
.topMediInfo {
    padding: 0 0 50px 0;
	max-width: 86%;
}
.topMediInfoContentL{
	margin:0 auto 15px auto;
}
.topJihiContentL{
	margin:0 auto 15px auto;
}
.topJihi {
    padding: 0 0 40px 0;
	max-width: 86%;
}
}
@media screen and (max-width: 480px) {
.topMediinftoUnderTxt{
	min-height: 3em;
	display:flex;
	align-items:center;
	justify-content:center;
	text-align:center;
	line-height:1.5;
}
.topMediinftoUnderTxt br{
	display:block;
}
}