@charset "utf-8";

/**
 *
 *  ページ用CSS
 *　care
 * 
 */

/*--------------------------------------------------------------------------
   Overwright
---------------------------------------------------------------------------*/
.page-ttl{
	background-image: url(../img/care/img_pagetitle_pc.jpg);	
}	



/*--------------------------------------------------------------------------
   Content
---------------------------------------------------------------------------*/

/* support
-----------------------------------------------------------------*/
.support{
	scroll-margin-top: 140px;
  padding: 100px 0 220px;
}
.support .sec-hd{
  margin-bottom: 80px;  
}
.support .pic-sec-main{
  margin-bottom: 80px;  
}
.support .layout-box{
  align-items: center;
  gap: 30px;  
  margin-bottom: 80px;
}
.support .layout-box .txt-area{
  display: grid;
  gap: 25px;
  max-width: 600px;
}
.support .layout-box h3{
  font-size: 3rem;
}
.support .hospital{
  width: 32.4%;
  padding: 30px;
  border-radius: 4px;
  background: var(--gray);
}
.support .hospital > div{
  width: fit-content;
  margin-inline: auto;  
}
.support .hospital h3{
  margin-bottom: 20px;
  font-size: 2rem;
  color: var(--gold);  
}
.support .hospital ul{
  display: grid;
  gap: 20px;  
}
.support .hospital ul small{
  display: block;
  font-size: 1.6rem;  
}
.support .hospital ul span{
  display: block;
  font-size: 2rem;  
}
.support .support-list{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;  
}
.support .support-list li{
  position: relative;
  width: calc(50% - 5px);
  padding: 30px 40px;
  border-radius: 4px;
  background: var(--lightgold);  
}
.support .support-list li:nth-child(3){
  width: 100%;
}
.support .support-list .num{
  position: absolute;
  right: 0;
  top: 0;
  line-height: .8;
  font-size: 8rem;
  color: var(--gold);
  opacity: .1;  
}
.support .support-list h3{
  padding-right: 35px;
  margin-bottom: 10px;
  font-size: 2.4rem;
}


/* nursing
-----------------------------------------------------------------*/
.nursing{
	scroll-margin-top: 140px;
  padding: 160px 0 0;
}
.nursing .sec-hd{
  margin-bottom: 160px;  
}
.nursing .change{
  margin-bottom: 160px; 
}
.nursing .change .layout-box{
  gap: 40px;
  margin-bottom: 80px;
  align-items: center;  
}
.nursing .change .layout-box .txt-area{
  max-width: 420px;
}
.nursing .change .layout-box .txt-area h3{
  margin-bottom: 25px;
  font-size: 3rem;  
}
.nursing .change .layout-box .txt-area .note{
  margin-top: 25px;  
}
.nursing .change .layout-box .pic{
  position: relative;
  max-width: 480px;
}
.nursing .change-summary{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 20px;
  padding: 40px 48px 30px;
  background: var(--lightgold);
  border-radius: 4px;  
}
.nursing .change-summary h3{
  flex-shrink: 0;
  width: 200px;
  text-align: center;
  font-size: 2.2rem;  
}
.nursing .change-summary figure{
  max-width: 665px;
  width: calc(100% - 220px);  
}
.nursing .change-summary .note{
  width: 100%;
  text-align: right;  
}
.nursing .smile-life{
  padding: 60px 80px;
  background: var(--gray);
  border-radius: 4px; 
}
.nursing .smile-life h3{
  margin-bottom: 80px;
  text-align: center;  
}
.nursing .smile-life .layout-box{
  align-items: center;
  gap: 30px;  
}
.nursing .smile-life .layout-box .txt-area{
  max-width: 440px;
}
.nursing .smile-life .layout-box .txt-area h3{
  margin-bottom: 25px;
  text-align: left;
  font-size: 3rem;  
}
.nursing .smile-life .layout-box .business{
  max-width: 460px;
  text-align: center;
}
.nursing .smile-life .layout-box .business h3{
  margin-bottom: 20px;
  font-size: 2.2rem;
  color: var(--gold); 
}
.nursing .smile-life .layout-box .business-list{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 10px;
}
.nursing .smile-life .layout-box .business-list li{
  width: calc(50% - 5px);
  padding: 35px 15px;
  background: var(--light);
  border-radius: 4px;  
}
.nursing .smile-life .layout-box .business-list .ico{
  margin-bottom: 10px; 
}
.nursing .smile-life .layout-box .business-list .txt{
  line-height: 1.6;  
}
.closing-area{
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 160px 0 120px 4.69vw;
}
.closing-area .txt-area{
	flex-shrink: 0;
	order: 2;
	width: fit-content;
}
.closing-area .txt-area h3{
	margin-bottom: 25px;
	font-size: 3.5rem;
	color: #42A995;
}
.closing-area .pic-main{
	position: relative;
	order: 1;
}
.closing-area .pic-main img{
	position: relative;
	width: 26.56vw;
	border-radius: 20px;
}
.closing-area .pic-main::before{
	position: absolute;
	right: 0;
	top: 0;
	transform: translate(50%,-30%);
	display: block;
	width: 32.81vw;
	height: 32.81vw;
	content: "";
	background:url(../img/care/bg_blur01.png) no-repeat center / cover;
}
.closing-area .pic-sub-area{
	position: relative;
	order: 3;
	width: fit-content;
}
.closing-area .pic-sub01{
	position: relative;
	width: fit-content;
	margin-right: 18.75vw;
}
.closing-area .pic-sub01 img{
	position: relative;
	z-index: 10;
	width: 14.06vw;
	border-radius: 20px;
}
.closing-area .pic-sub01 .caption{
	z-index: 11;
}
.closing-area .pic-sub02{
	position: relative;
	width: fit-content;
	margin: -20px 0 0 auto;
}
.closing-area .pic-sub02::before{
	position: absolute;
	left: 0;
	top: 0;
	transform: translate(-50%,-40%) scale(.6);
	display: block;
	width: 45.31vw;
	height: 43.28vw;
	content: "";
	background:url(../img/care/bg_blur02.png) no-repeat center / cover;
	opacity: .7;
}
.closing-area .pic-sub02 img{
	position: relative;
	width: 17.19vw;
	border-radius: 20px 0 0 20px;
}
.closing-area .btn-square{
	position: absolute;
	left: 0;
	bottom: 0;
	width: 220px;
}
.closing-area .btn-square._small._blank a{
	justify-content: flex-start;
	padding-left: 30px;
}














/*--------------------------------------------------------------------------
   mobile
---------------------------------------------------------------------------*/
@media screen and (max-width: 834px) {

	.page-ttl{
		background-image: url(../img/care/img_pagetitle_sp.jpg);	
	}


/* support
-----------------------------------------------------------------*/
	.support{
		scroll-margin-top: 50px;
		padding: 70px 0 100px;
	}
	.support .sec-hd{
		margin-bottom: 60px;  
	}
	.support .pic-sec-main{
		margin-bottom: 60px;  
	}
	.support .layout-box{
		display: block;
		margin-bottom: 60px;
	}
	.support .layout-box .txt-area{
		gap: 20px;
		max-width: none;
		margin-bottom: 30px;
	}
	.support .layout-box h3{
		font-size: 2.6rem;
	}
	.support .hospital{
		width: 100%;
	}
	.support .support-list{
		flex-direction: column;
	}
	.support .support-list li{
		width: 100%;
	}


/* nursing
-----------------------------------------------------------------*/
	.nursing{
		scroll-margin-top: 50px;
		padding: 80px 0 0;
	}
	.nursing .sec-hd{
		margin-bottom: 80px;  
	}
	.nursing .change{
		margin-bottom: 100px; 
	}
	.nursing .change .layout-box{
		display: block;
		margin-bottom: 80px;
	}
	.nursing .change .layout-box .txt-area{
		max-width: none;
		margin-bottom: 30px;
	}
	.nursing .change .layout-box .txt-area h3{
		margin-bottom: 20px;
		font-size: 2.6rem;  
	}
	.nursing .change .layout-box .txt-area .note{
		margin-top: 20px;  
	}
	.nursing .change .layout-box .pic{
		max-width: none;
	}
	.nursing .change-summary{
		display: block;
		padding: 40px 20px 20px; 
	}
	.nursing .change-summary h3{
		width: auto;
		margin-bottom: 30px;
	}
	.nursing .change-summary figure{
		max-width: none;
		width: auto;  
	}
	.nursing .change-summary .note{
		margin-top: 20px;
		text-align: left;  
	}
	.nursing .smile-life{
		padding: 40px 20px;
	}
	.nursing .smile-life h3{
		margin-bottom: 40px;
	}
	.nursing .smile-life h3 img{
		max-width: 335px;
	}
	.nursing .smile-life .layout-box{
		display: block;
	}
	.nursing .smile-life .layout-box .txt-area{
		max-width: auto;
		margin-bottom: 40px;
	}
	.nursing .smile-life .layout-box .txt-area h3{
		margin-bottom: 20px;
		font-size: 2.2rem;  
	}
	.nursing .smile-life .layout-box .txt-area .txt{
		text-align: justify;
	}
	.nursing .smile-life .layout-box .business{
		max-width: none;
	}
	.nursing .smile-life .layout-box .business-list{
		gap: 6px;
	}
	.nursing .smile-life .layout-box .business-list li{
		width: calc(50% - 3px);
		padding: 15px 10px;
	}
	.nursing .smile-life .layout-box .business-list .ico{
		margin-bottom: 5px; 
	}
	.nursing .smile-life .layout-box .business-list .ico img{
		width: auto;
		height: 30px;
	}
	.nursing .smile-life .layout-box .business-list .txt{
		line-height: 1.4;
		font-size: 1.6rem;  
	}
	.closing-area{
		display: block;
		padding: 100px 12vw 70px;
		overflow: hidden;
	}
	.closing-area .txt-area{
		width: 100%;
		margin: 40px 0 30px;
	}
	.closing-area .txt-area h3{
		margin-bottom: 15px;
		font-size: 2.6rem;
	}
	.closing-area .pic-main img{
		width: 100%;
	}
	.closing-area .pic-main::before{
		transform: translate(50%,-10%);
		width: 100vw;
		height: 100vw;
	}
	.closing-area .pic-sub-area{
		width: calc(100% + 12vw);
	}
	.closing-area .pic-sub01{
		margin-right: 2.6vw;
	}
	.closing-area .pic-sub01 img{
		width: 37.3vw;
	}
	.closing-area .pic-sub02{
		margin: -10vw 0 0 auto;
	}
	.closing-area .pic-sub02::before{
		transform: translate(-50%,-40%);
		width: 100vw;
		height: 96vw;
	}
	.closing-area .pic-sub02 img{
		width: 48vw;
	}
	.closing-area .btn-square{
		position: static;
		width: 260px;
		margin: 0 auto 60px;
		transform: translateX(-6vw);
	}

}