/*					*/
/*		about		*/
/*					*/
main .about{
	position: relative;
	width:100%;
	z-index:100;
}
main .about .last{
	display: flex;
	flex-direction: column;
}
main .about h2{
	font-size:1.3em;
	margin: 0 0 1.3em 0;
	position: relative;
	z-index:1;
}
main .about img{
	width:100px;
	float:left;
	margin-right:1.5em;
	margin-bottom:1em;
}
main .about h4{
	margin-bottom:0;
}

main .about .last svg{
	order:1;
}

@media screen and (min-width: 568px){
	main .about .last{
		display:block;
		margin-top:2em;
	}

	main .about h2{
		text-align:center;
		font-size:1.8em;
	}
	main .about img{
		width:128px;
		margin-right:1.5em;
		margin-bottom:1.5em;
	}
}
@media screen and (min-width: 768px){
	main .about {
		font-size:1.1em;
	}
	main .about img{
		width:156px;
		margin-right:3em;			
	}
}

@media screen and (min-width: 1024px) {
	main .about {
		font-size:1.2em;
	}
	main .about img{
		width:188px;/*		なんとなくとと揃えている	*/
	}
	
}

@media screen and (min-width: 1320px) {
	
	main .about.treatment img{
		top:0;
	}
	
}


/*					*/
/*		treatment	*/
/*					*/

main .treatment-block{
	margin-top:1em;
	margin-bottom:0;
}


main .treatment-contents{
	position: relative;
}


#svg_back_a{
	position: absolute;
	width:600px;
	top:0;
	margin-left:-40%;
}
#svg_img_a{
	width:100%;
	margin:0 2.5% 1.5em 0;
	position: relative;	
	z-index:1;
}
#svg_img_b{
	width:80%;
	margin:0 -40% 0 1em;
	float:right;	
}
#svg_img_c{
	width:100%;
	margin:-1em 0 2em 0;
	position: relative;
	z-index:1;
}
#svg_deco_a{
	width:60%;;
	position: absolute;
	right:-30%;
	top:0;
	margin-top:-60vw;	
}
#svg_deco_b{
	width:40%;;
	position: absolute;
	left:-20%;
	top:0;	
	margin-top:40vw;			
}

.seitai #svg_back_a,
.seitai #svg_deco_a,
.seitai #svg_deco_b{
	fill:#8dd4ad;
}

.pilates #svg_back_a,
.pilates #svg_deco_a,
.pilates #svg_deco_b{
	fill:#b59dd4;
}


@media screen and (min-width: 568px){
	main .treatment-block{
		margin-top:-2em;
	}
	main .treatment-contents{
		width:360px;
		max-width:inherit;
	}
	main .pilates .treatment-contents ul{
		width:320px;
	}
	
	#svg_back_a{
		width:640px;
		margin-left:-12em;
	}
	#svg_img_a{
		width:240px;
		float:right;
		margin:0 0 1.5em 3em;
	}
	#svg_img_b{
		position: absolute;
		width:360px;
		right:0;
		margin:-3em -10em 0 0;
	}
	#svg_img_c{
		width:240px;
		float:left;
		margin:0 3em 1.5em 0;
	}
	#svg_deco_a{
		width:200px;
		right:-20%;
		margin-top:0;
	}
	#svg_deco_b{
		width:100px;
		left:-10%;
		margin-top:8em;
	}
}

@media screen and (min-width: 768px){
	main .treatment-block{
		margin-top:-8em;
	}	
	main .treatment-contents{
		width:400px;
	}
	main .pilates .treatment-contents ul{
		width:350px;
	}
	
	#svg_back_a{
		margin-left:-10em;		
		width:680px;
	}	
	#svg_img_a{
		width:320px;
		margin:0 0 0 4em;
	}
	#svg_img_b{
		width:440px;
		margin:-3em -5em 0 0;
	}
	#svg_img_c{
		width:320px;
		margin:0 4em 2em 0;
	}
	#svg_deco_a{
		width:280px;
		right:-28%;
	}
	#svg_deco_b{
		width:200px;
		left:-20%;
		margin-bottom:-20em;
	}
}
@media screen and (min-width: 1024px) {
	main .treatment-block{
		margin-top:-12em;
	}	
	main .treatment-contents{
		width:515px;
	}
	main .pilates .treatment-contents ul{
		width:380px;
	}
	
	#svg_back_a{
		margin-left:-8em;
		width:800px;		
	}
	#svg_img_a{
		width:360px;
	}
	#svg_img_b{
		width:540px;
		margin-right:0;
	}
	#svg_img_c{
		width:360px;
	}
	
	#svg_deco_a{
		right:-14%;
	}
	#svg_deco_b{
		left:-10%;
	}
}

@media screen and (min-width: 1320px) {
	main .treatment-block{
		margin-top:-15em;
	}	
	main .treatment-contents{
		margin-left:calc((100% - 980px) / 2);
	}
	#svg_back_a{
		margin-left:-4em;
		width:880px;		
	}
	#svg_img_a{
		width:400px;
	}
	#svg_img_b{
		width:580px;
	}
	
	#svg_img_c{
		width:400px;
	}
}

@media screen and (min-width: 1320px){
}


/*					*/
/*		after		*/
/*					*/
main .after{
	position: relative;
	margin:1.5em 0 3em 0;
}
main .after p{
	position: relative;
	z-index:1;	
}
@media screen and (min-width: 568px){
	main .after{
		margin:3em 0 5em 0;		
	}
	main .after p:first-of-type{
		padding-top:12em;
	}

}
@media screen and (min-width: 768px){
	main .after {
		font-size:1.1em;
	}
	
	main .after p:first-of-type{
		padding-top:13em;
	}
	
}
@media screen and (min-width: 1024px) {
	main .after {
		font-size:1.2em;
		margin-bottom:6em;		
	}
	main .after p:first-of-type{
		padding-top:16em;
	}
}
@media screen and (min-width: 1320px) {
	main .after{
		margin-bottom:8em;
	}
	main .after p:first-of-type{
		padding-top:19em;
	}
}



/*					*/
/*		link		*/
/*					*/
main .treatment_link{
	display: flex;
	justify-content: center;
	margin-bottom:0;
}

main  h3.treatment_link{
	font-size:1.3em;
	text-align:center;
	margin-bottom:1em;
	margin-top:3em;	
}

main .treatment_link ul{
	list-style:none;
	margin:0;
	padding:0;	
	display:flex;
	flex-wrap: wrap;
    gap: 1em; /* アイテム間に1emのスペースを追加 */	
}


main .treatment_link .link{
	position: absolute;
	bottom:0;
	left:0;
	margin:0 0 1em 1em;
}

main .treatment_link a{
	text-decoration: none;
	display:block;
	margin-top:1em;
}
main .treatment_link h4{
	background-color:rgb(255,64,73);
	color:#fff;
	display:inline-block;
	padding:0 0.5em;
	white-space: nowrap;
	border-radius: 0.15rem;	
	margin:0;
}
main .treatment_link h4 span{
	color:#fff;
	font-family: "M PLUS Rounded 1c", sans-serif;
	font-weight: 400;
}


main .treatment_link li{
	position: relative;
	margin:0;
	background-color:#e8f6ef;
	border-radius:.9rem;
	overflow: hidden;
	display: flex;
	justify-content: flex-end;
}

/*		seitai 			*/
main .seitai .treatment_link li{
	flex: 0 0 calc(50% - 0.5em); /* gapを考慮した幅の計算 */
}

main .seitai .treatment_link img{
	position: relative;
	display: block;
	margin:1em 1em 0.5em 2em;
	width:calc(100% - 3em);
}

main .seitai .treatment_link li:nth-child(3) img, 
main .seitai .treatment_link li:nth-child(4) img{
	position: relative;
	margin-bottom:0;
	height:55vw;
	width:auto;
}

/*		pilates 			*/
main .pilates .treatment_link li{
	flex: 1
}
main .pilates .treatment_link li img{
	width:calc(100% - 3em);
	height: auto;
	margin:1em 1.5em;
}


@media screen and (min-width: 568px){
	
	main  h3.treatment_link{
		margin-top:4em;	
		margin-bottom:2em;
	}
	
	main .treatment_link ul{
		width:100%;
		gap: 2em;
	}
	main .treatment_link .link{
		margin:0 0 1.5em 1.5em;
	}
	main .treatment_link h4{
		padding:0 1em;
		margin-right:1em;
	}
	
	/*		seitai 			*/
	main .seitai .treatment_link li{
		flex: 0 0 calc(50% - 1em); /* gapを考慮した幅の計算 */
		height:255px;
	}

	main .seitai .treatment_link img{
		margin:1em 1em 1em 5em;;
		width:calc(100% - 6em);
		height:100%;
		object-fit: contain;
	}
	main .seitai .treatment_link li:nth-child(3) img, 
	main .seitai .treatment_link li:nth-child(4) img{
		height:360px;
	}	
	main .seitai .treatment_link li:nth-child(4) img{
		margin-right:0.5em;
	}

	/*		pilates 		*/
	main .pilates .treatment_link li{
		padding:1.5em;
	}
	main .pilates .treatment_link h5{
		position: relative;
		font-size:1.8em;
		font-weight: bold;
		writing-mode: vertical-rl;
		letter-spacing:0.2em;
		width:1em;
		margin:0 1.5em 0 0;
	}
	
	main .pilates .treatment_link h5.good{
		color:#ff4049;
		height:6em;
		margin-left:1em;
	}
	main .pilates .treatment_link h5.bad{
		color:#5072c2;
		height:4.8em;
	}
	main .pilates .treatment_link h5::after {
		content: '';
		position: absolute;
		width: 10px;
		height: 80%;
		top: 0;
		margin: 10% auto 0 auto;
		z-index: -1;
	}	
	main .pilates .treatment_link h5.good::after{
		background-color:#ffb3b6;
	}
	main .pilates .treatment_link h5.bad::after{
		background-color:#b9c7e7;
	}

	main .pilates .treatment_link li img{
		position: relative;		
		height:350px;
		width:auto;
		margin:0
	}
	
	main .pilates .treatment_link h4{
		padding:0.08em 0.8em;
		font-size:1.2em;
	}
}

@media screen and (min-width: 768px){
	main  h3.treatment_link{
		font-size:1.6em;
	}

	main .treatment_link ul{
		width:100%;
		gap: 1em;
	}	
	main .treatment_link .link{
		margin:0 0 1em 1em;
	}
	main .treatment_link h4{
		padding:0 0.6em;
		margin-right:0.5em;
	}
	
	/*		seitai 		*/
	main .seitai .treatment_link li{
		flex: 0 0 calc(25% - 0.75em); /* gapを考慮した幅の計算 */
	}
	
	main .seitai .treatment_link img{
		margin:1em 0.5em 0.5em 0.5em;  
		width:calc(100% - 1em);
		height:auto;
	}

	main .seitai .treatment_link li:nth-child(3) img, 
	main .seitai .treatment_link li:nth-child(4) img{
		height:330px;
	}	
	main .seitai .treatment_link li:nth-child(4) img{
		margin-right:0;
	}
	
	/*		pilates 		*/
	
	main .pilates .treatment_link ul{
		max-width:580px;
	}
	main .pilates .treatment_link .link{
		margin:0 0 1.5em 1.5em;
	}
	main .pilates .treatment_link h4{
		font-size:1.3em;
	}
	
	main .pilates .treatment_link h5.good{
		margin-left:0;
	}
	main .pilates .treatment_link img.arrow{
		height:50px;
		width:auto;
		margin:150px 1.5em 0 0.5em;
	}		
}

@media screen and (min-width: 1024px) {	
	main  h3.treatment_link{
		font-size:1.8em;
		margin-top:5em;	
	}
	
	main .treatment_link ul{
		gap: 2em;
	}
	main .treatment_link .link{
		margin:0 0 1.5em 1.5em;
	}
	
	
	/*		seitai 			*/	
	main .seitai .treatment_link li{
		flex: 0 0 calc(25% - 1.5em); /* gapを考慮した幅の計算 */
		height:320px;
	}
	
	main .seitai .treatment_link img{
		margin:1em;
		width:calc(100% - 2em);
	}
	main .seitai .treatment_link li:nth-child(3) img, 
	main .seitai .treatment_link li:nth-child(4) img{
		margin-top:1em;
		height:400px;
	}		
	
	main .seitai .treatment_link h4{
		padding:0.08em 0.8em;
		margin-right:1em;
		font-size:1.2em;
	}
}
@media screen and (min-width: 1320px) {
	main .treatment_link ul{
		max-width:980px;
	}
}