@charset "utf-8";

/* -----------------------------
	intro-area
-------------------------------- */

.intro-area {
	margin: 300px 0 0;
	position: relative;
	padding: 0 0;
}
.intro-area::before{
	content: '';
	position: absolute;
	width: 1221px;
	height: 1041px;
	top: -500px;
	right: -500px;
	background: url("../img/bg-right.png")  no-repeat top right / contain;
	z-index: -1;
}
.intro-area > div{
	display: flex;
	align-items: center;
}

.intro-area .img-block{
	position: absolute;
	left: 0;
	width: 976px;
}
.intro-area .img-block > div{
	position: relative;
	display: flex;
    gap: 7px 11px;
    flex-wrap: wrap;
}
.intro-area .img-block > div::before{
	content: '';
	position: absolute;
	width: 976px;
	height: 144px;
	top: 0;
	right: 0;
	background: url("../img/curve-top01.svg") no-repeat top center / contain;
	z-index: 2;
}
.intro-area .img-block > div::after{
	content: '';
	position: absolute;
	width: 976px;
	height: 110px;
	bottom: 0;
	right: 0;
	background: url("../img/curve-bottom01.svg") no-repeat top center / contain;
	z-index: 2;
}

.intro-txt-block{
	width: 500px;
	margin: 0 0 0 auto;
	position: relative;
}
.intro-area .txt-block{
	padding: 30px 0 0;

}
.intro-area .basic-txt{
	padding: 30px 0 0;

}
.intro-area li{
	border-bottom: solid 3px var(--purple);
	padding: 20px 0 0;
	display: table;
}

.intro-area .btn-more{
	margin: 50px 0 0;
}

@media screen and (max-width: 1600px){
	.intro-area .img-block{
		left: -200px;
	}
	.intro-txt-block{
		margin: 0 230px 0 auto;
		width: 450px;
	}
}

@media screen and (max-width: 768px){
	.intro-area {
		padding: 0;
		margin: 40px 0 0;
	}
	.intro-area::before{
		width: 358px;
        height: 320px;
		top: 250px;
		right: -200px;
	}
	.intro-area > div{
		display: block;
	}

	.intro-area .img-block{
		width: calc(100% - 20px);
		position: inherit;
		margin:0 auto 0 0;
	}
	.intro-area .img-block > div{
		gap: 7px 7px;
	}
	.intro-area .img-block > div::before{
		width: 103%;
		right: -2px;
	}
	.intro-area .img-block > div::after{
		width: 100%;
		background-position: bottom center;
		bottom: -1px;
	}
	.intro-area .photoArea figure{
		height: 145px;
	}
	.intro-area .img-block figure:nth-child(2){
		width: 58%;
	}
	.intro-area .img-block figure:nth-child(3){
		width: 40%;
	}
	.intro-txt-block{
		width: 100%;

	}
	.intro-area .txt-block{
		padding: 0 0 0;
	}
	.intro-area .basic-txt{
		padding: 20px 0 0;
	}
	.intro-area li{
		padding: 10px 0 0;
	}
	
	.intro-area .btn-more{
		margin: 20px auto 0;
		display: inline-block;
	}
	

}

/* -----------------------------
	salary-area
-------------------------------- */
.grade-bg{
	position: relative;
	padding: 200px 0 280px;
	margin: 300px 0 0;
}
.grade-bg::before{
	content: '';
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	right: 0;
	background: url("../img/grade-bg.png") no-repeat top center / cover;
	z-index: -1;
}
.salary-area .ttl-l{
	text-align: center;
}
.salary-area{
	margin: 0 0 0;
}

.salary-area ul{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	margin: 80px 0 0;
}

.salary-area ul li{
	width: calc((100% / 2) - 30px);
	border: solid 1px var(--purple);
	position: relative;
	border-radius: 5px;
	background: #fff;
}
.salary-area ul li:nth-child(n + 3){
	margin: 80px 0 0;
}
.salary-area ul li img{
	position: absolute;
	border: solid 10px #fff;
	border-radius: 100px;
	background: #fff;
	top: -30px;
	right: 50px;
}

.salary-area ul li .catch-m{
	color: #fff;
	background: var(--gradation);
	height: 74px;
	line-height: 74px;
	padding: 0 0 0 20px;
}
.salary-area ul li > div{
	padding: 20px;
}

.salary-area ul li .basic-txt{
	position: relative;
	padding: 0 0 5px;
	margin: 0 0 5px;
}
.salary-area ul li .basic-txt::before{
	content: '';
    position: absolute;
    width: 100%;
    height: 1px;
    bottom: 0;
    left: 0;
    background-image: linear-gradient(to right, #bb7db1 1px, transparent 1px);
    background-size: 5px 1px;
    background-repeat: repeat-x;
    background-position: left bottom;
}
.salary-area ul li .basic-txt:last-of-type::before{
	display: none;
}

.salary-area ul li .btn-more{
	margin: 20px auto 0;
	display: block;
}
.salary-area ul li .btn-more a{
	margin: 0 auto;
}

@media screen and (max-width: 768px){
	.grade-bg{
		margin: 40px 0 0;
        padding: 20px 0 60px;
	}
	.grade-bg::before{
		background: url("../img/grade-bg-sp.png") no-repeat top center / cover;
	}
	.salary-area{
		margin: 50px 0 0;
	}

	.salary-area ul{
		display: block;
		margin: 30px 0 0;
	}

	.salary-area ul li{
		width: 100%;
	}
	.salary-area ul li:nth-child(2){
		margin: 20px 0 0;	
	}
	.salary-area ul li:nth-child(n + 3){
		margin: 20px 0 0;
	}
	.salary-area ul li img{
		width: 100px;
		top: -10px;
		right: 10px;
	}

	.salary-area ul li .catch-m{
		height: 60px;
		line-height: 60px;
	}
	.salary-area ul li > div{
	}

	.salary-area ul li .basic-txt{
	}
	.salary-area ul li .basic-txt::before{
	}
	.salary-area ul li .basic-txt:last-of-type::before{
	}
}

/* -----------------------------
	system-area
-------------------------------- */
.system-area{
	margin: 100px 0 0;	
	
}
.system-area .ttl-l{
	text-align: center;
}
.system-area .txt-block{
	margin: 30px 0 0;
	display: flex;
}
.system-area .txt-block .basic-txt{
	flex: 1;
	margin: 0 0 0 50px;
}

.system-block{
	margin: 50px 0 0;
	display: flex;
	justify-content: space-between;
}
.system-block .box{
	border: solid 1px var(--purple);
	border-radius: 5px;
	background: #fff;
}
.system-block .box01{
	width: 450px;
}
.system-block .box02{
	width: 660px;
}
.system-block .box > div{
	padding: 20px;
}
.system-block .box ul li{
	font-size: 1.8rem;
	line-height: 2;
	font-weight: bold;
}
.system-area .system-block .catch-s{
	background: var(--gradation);
	color: #fff;
	padding: 10px 20px;
}
.system-area .system-block .catch-s span{
	font-size: 1.5rem;
}

.system-area .total{
	font-size: 2rem;
	line-height: 2;
	font-weight: bold;
	text-align: right;
	position: relative;
	padding: 10px 0 0;
}
.system-area .total .num{
	font-size: 3rem;
}
.system-area .total::before{
	content: '';
    position: absolute;
    width: 100%;
    height: 1px;
    top: 0;
    left: 0;
    background-image: linear-gradient(to right, #bb7db1 1px, transparent 1px);
    background-size: 5px 1px;
    background-repeat: repeat-x;
    background-position: left bottom;
}

.cp_arrows {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
	transform: rotate(-90deg);
	left: -20px;
}
.cp_arrows .cp_arrow {/*矢印を配置するベースの設定*/
  position: absolute;
  width: 60px;
  height: 10px;
  opacity: 0;/*スタートは透明*/
  transform: scale(0.3);/*スタートは30%に縮小*/
  animation: arrow-move07 3s ease-out infinite;
}
.cp_arrows .cp_arrow:first-child {/*1秒ずらしてアニメーション*/
  animation: arrow-move07 3s ease-out 1s infinite;
}
.cp_arrows .cp_arrow:nth-child(2) {/*2秒ずらしてアニメーション*/
  animation: arrow-move07 3s ease-out 2s infinite;
}
.cp_arrows .cp_arrow:before,
.cp_arrows .cp_arrow:after {/*矢印全体の設定*/
  position: absolute;
  content: '';
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 50%;
  height: 100%;
  background: var(--purple);
  border-radius: 2px;
}
.cp_arrows .cp_arrow:before {/*矢印左の線の位置と傾斜*/
  left: 1px;
  transform: skewY(30deg);
}
.cp_arrows .cp_arrow:after {/*矢印左の線の位置と傾斜*/
  right: 1px;
  transform: skewY(-30deg);
}
@keyframes arrow-move07 {
   25% { opacity: 0.6;}
   43% { transform: translateY(1em); opacity: 0.8;}
   62% { transform: translateY(2em); opacity: 1;}
  100% { transform: translateY(3em) scale(0.5); opacity: 0;}
}
@media screen and (max-width: 768px){
	.system-area{
		margin: 50px 0 0;
	}
	.system-area .txt-block{
		display: block;
		margin: 20px 0 0;
	}
	.system-area .txt-block .basic-txt{
		margin: 20px 0 0;
	}

	.system-block{
		display: block;
		margin: 20px 0 0;
	}
	.system-block .box{
		padding: 0;
	}
	.system-block .box01{
		width: 100%;
	}
	.system-block .box02{
		width: 100%;
		margin: 20px 0 0;
	}
	.system-block .box ul li{
		font-size: 1.6rem;
	}
	.system-block .box > div{
		padding: 10px;
	}
	
	.system-area .system-block .catch-s span {
		font-size: 1.3rem;
	}

	.system-area .system-block .catch-m{
	}
	.system-area .system-block .catch-m span{
	}
	
	.system-area .total{
		font-size: 1.8rem;
		line-height: 1;
	}
	
	.cp_arrows{
		transform: rotate(0deg);
		left: 0;
		transform: scale(0.5);
        top: -10px;
	}
}

/* -----------------------------
	treatment-area
-------------------------------- */
.treatment-area{
	margin: 100px 0;
	position: relative;
}
.treatment-area::after{
	content: '';
	position: absolute;
	width: 100%;
	height: 729px;
	top: -260px;
	right: 0;
	background: url("../img/white-bg-curve.png") no-repeat top center / cover;
}
.treatment-area .inner{
	position: relative;
	z-index: 1;
}
.treatment-area ul{
	margin: 30px 0 0;
}
.treatment-area ul li{
	padding: 20px;
	display: flex;
	align-items: center;
	background: var(--light-gradation);
	border-radius: 5px;
	background: #fff;
	border: solid 1px var(--purple);
}
.treatment-area ul li:nth-child(n + 2){
	margin: 20px 0 0;
}
.treatment-area ul li img{
	width: 200px;
}
.treatment-area ul li .catch-m{
	padding: 0 30px;
	width: 200px;
}
.treatment-area ul li .basic-txt{
	flex: 1;

}
@media screen and (max-width: 768px){
	.treatment-area{
		margin: 50px 0;
	}
	.treatment-area::after{
		width: 100%;
		height: 170px;
		top: -90px;
	}
	.treatment-area ul{
		margin: 20px 0 0;
	}
	.treatment-area ul li{
		display: block;
		padding: 15px;
	}
	.treatment-area ul li:nth-child(n + 2){
	}
	.treatment-area ul li .catch-m{
		padding: 10px 0 0;
		text-align: center;
		width: 100%;
	}
	.treatment-area ul li .basic-txt{
	}
	
	.treatment-area ul li img{
		width: 100%;
		height: 150px;
        object-fit: cover;
	}
}