@charset "UTF-8";
/*@import url(https://fonts.googleapis.com/css?family=Montserrat:400,700);*/
@import url('https://fonts.googleapis.com/css2?family=Jost:ital,wght@0,100..900;1,100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Zen+Kaku+Gothic+New:wght@200;400;500;700;900&display=swap');
/* @import url('https://fonts.googleapis.com/css2?family=Zen+Kaku+Gothic+New&display=swap'); */

:root {
	--font-min: 'Shippori Mincho B1', 'Noto Serif JP', "ヒラギノ明朝 ProN", "HiraMinProN", "HG明朝E", "ＭＳ Ｐ明朝", "MS PMincho", "MS 明朝", 'Noto Serif JP', serif;
	--font-go: "Zen Kaku Gothic New", 'Noto Sans JP', 'YuGothic', 'Yu Gothic', 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', 'メイリオ', 'Meiryo', 'ＭＳ ゴシック', sans-serif;
	--font-titm: 'Shippori Mincho B1', 'Noto Serif JP', "ヒラギノ明朝 ProN", "HiraMinProN", "HG明朝E", "ＭＳ Ｐ明朝", "MS PMincho", "MS 明朝", 'Noto Serif JP', serif;
	--font-titg: 'Roboto Condensed', 'Urbanist', 'YuGothic', 'Yu Gothic', 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', 'メイリオ', 'Meiryo', 'ＭＳ ゴシック', sans-serif;
	--font-en: "Jost", "futura-pt-condensed", 'Barlow', 'Shippori Mincho B1', 'Noto Serif JP', "ヒラギノ明朝 ProN", "HiraMinProN", "HG明朝E", "ＭＳ Ｐ明朝", "MS PMincho", "MS 明朝", 'Noto Serif JP', serif;
	--font-en2: 'Roboto Condensed', 'Urbanist', 'YuGothic', 'Yu Gothic', 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', 'メイリオ', 'Meiryo', 'ＭＳ ゴシック', sans-serif;
	--font-sizeS: 9px;
	--font-sizeM: 14px;
	--font-sizeL: 18px;

	--font-sizeL: 30px;
	--color-base: #ffffff;
	--color-main: #3C3C3C;
	--color-accent1: #00B1FF;
	--color-accent2: #FFE02D;
	--color-accent3: #AAAAAA;
	--color-accent4: #0073FF;
	/* --color-accent5: #aaa; */
	--color-accent6: linear-gradient(90deg, #001d7e, #0073ff);
	/* --color-accent6: linear-gradient(90deg, #001d7e, #5751ff); */
	--color-sub1:linear-gradient(90deg, #b2e5f8, #b5e7f9);
	--color-sub2: #b5e7f9;
	--color-sub3: #ececec;
	--color-sub4: #B5D6E7;

	--shadow: drop-shadow(5px 5px 10px rgba(0, 8, 63, 0.2));
	--br-s: 10px;
	--br-m: 15px;
	--br-l: 30px;

}


body {
	/*	background:url(http://thekitemap.com/images/feedback-img.jpg) no-repeat;*/

	/*	background: radial-gradient(#fad96e, #f15266);*/
	/* 	background: linear-gradient(125deg, rgba(217, 175, 217, 0.7) 0%, rgba(151, 217, 225, 0.7) 100%),url(test_img.jpg); */
	/* background: radial-gradient(ellipse at right top , rgba(85, 239, 255, 0.82), transparent),linear-gradient(125deg, rgb(255, 0, 255) 0%, rgb(0, 4, 255) 25%,rgb(0, 231, 255) 50%,rgba(32, 255, 0, 0.7) 75%,rgb(0, 183, 255) 100%); */

	background-size: cover;
	height: 100%;
	/* font-family: Helvetica, Arial, "ryo-gothic-plusn",sans-serif; */
	font-family: var(--font-go);
	font-size: 1.4rem;
	line-height: 2.8rem;
	/* 	background-color: #031d56; */
	color: var(--color-main);
	text-align: center;
}

* {
	box-sizing: border-box;
}

/*コンテンツ間上下マージン*/
body section {
	padding-top: 50px;
	padding-bottom: 50px;
	text-align: center;
}

article.left,
article.right {
	display: none;
}


br.dis {
	display: inherit;
}
br.sp {
	display: initial;
}

.pc {
	display: none;
}
.sp {
	display: initial;
}


h2 {
	font-size: 3.0rem;
	line-height: 1.5em;
	font-weight: 500;
	letter-spacing: .2em;
	margin-bottom: 30px;
}

h2:has(+ .subtitle) {
	margin-bottom: 15px;
}

h2+.subtitle {
	margin-bottom: 30px;
}

h3 {
	font-size: 3.0rem;
	line-height: 4.5rem;
	font-weight: bolder;

}

h3.eng_font {
	font-size: 5em;
	line-height: 2em;
}

h3.eng_fontbold {
	font-size: 5em;
	line-height: 1.4em;
}

h3.eng_fontbold .jancomm {
	font-size: 0.2em;
	line-height: 1em;
}

h3 {
	display: block;
	width: 100%;
	/*			height: 30px;*/
	text-align: center;
	line-height: 1.4em;

}

h3>span {
	display: block;
	margin-bottom: 30px;
}

h4 {
	font-size: 1.2em;
	line-height: 1.2em;
	font-weight: bolder;
}

h5 {
	font-size: 1em;
	line-height: 1em;
	font-weight: bolder;
}

/*******************************************/


#gotoTop img {
	position: fixed;
	bottom: 5px;
	right: 5px;
	width: 50px;
	z-index: 100;
	filter: drop-shadow(1px 1px 2px rgba(0, 0, 0, 0.5));
	-webkit-filter: drop-shadow(1px 1px 2px rgba(0, 0, 0, 0.5));

}



aside.loading {
	position: fixed;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	background: #fff;
	z-index: 90;

}
aside.loading img {
	width: 100px;
	height: 100px;
	position: fixed;
	top: -10%;
	bottom: 0;
	left: 0;
	right: 0;
	margin:  auto;
	width: 50px;
	height: 50px;
/* 	background: url(../img/common_lodinganime.gif) no-repeat center ;
	background-size: 50px 50px; */
	z-index: 99;
	animation: loading 3s  ease ;
	animation-iteration-count:infinite;
	opacity: 1;
	transition: all 3s;
}

@keyframes loading {
 0% {
		transform: rotate(0deg); 
 }
 to {
		transform: rotate(360deg); 
 }
}

/*******************************************/





.headerlp {
	/* display: none; */
	position: absolute;
	top: 0;
	left: 0;
	width: 100px;
	height: 40px;
	z-index: 100;
	padding: 1em 0;

	.inner {
		width: 100px;
		/* max-width: 1200px; */
		margin: 0 auto 0 0;
		display: flex;
		justify-content: space-between;
		align-items: center;


		.logo {
			display: inline-block;
			width: 100px;
			height: 40px;
			filter: var(--shadow);
			& img {
				 height: 40px;
			}
		
		}
	}
}



.headerlp nav {
	display: inline-block;
}

.headerlp nav ul {
	display: flex;
	list-style: none;
	margin: 0;
	padding: 0;
}

.headerlp nav li {
	margin: 0 1em;
}

.headerlp nav a {
	color: #fff;
	text-decoration: none;
	font-size: 1em;
	font-weight: bold;
}

.headerlp nav a:hover {
	color: #f7ff00;
}

.headerlp nav a.active {
	color: #f7ff00;
}

.headerlp .btn {
	display: inline-block;
	padding: 0.5em 1em;
	border-radius: 5px;
	background: #f7ff00;
	color: #000;
	font-size: 1em;
	font-weight: bold;
	text-decoration: none;
}

.headerlp .btn:hover {
	background: #fff;
	color: #f7ff00;
}

.headerlp .btn:active {}








/*********************************************************************************/

aside.telbtn {
	position: absolute;
	width: 45%;
	height: 10vw;
	inset: 10px 10px 0 auto;

	z-index: 101;


	& a ,
	& a:link ,
	& a:visited {
		transition: .3s;
		text-decoration: none;
		display: block;
		height: 100%;
		filter: var(--shadow);

		& img {
			height: 100% ;
		}
	}
	& a:hover ,
	& a:active ,
	& a:focus {
		filter: none;
	}

}

aside.bottombtn.bottombtn_on {
	bottom: 0px;
}
aside.bottombtn {
	position: fixed;
	bottom: -100px;
	width: 100%;
	margin:  0 auto;
	padding: 0;
	z-index: 10;
	transform: .5s;



		.btnwrap {
			width: 100%;
			/* max-width: 370px; */
			margin: 0 auto;
			display: flex;

			gap: 0px;

			& a ,
			& a:link ,
			& a:visited {
				flex: 1;
				display: flex;
				justify-content: center;
				align-items: center;
				gap: 10px;
				height: 50px;
				transition: .3s;
				text-decoration: none;

				& img {
					height: 15px;
					display: inline-block;
					transition: .3s;

					&:hover {
						
					 }
				}
			}
			& a:hover ,
			& a:active ,
			& a:focus {
			}

			& a.cta-button-mail,
			& a.cta-button-mail:link ,
			& a.cta-button-mail:visited	{
				border-radius: 10px 0 0 0;
				background: var(--color-accent2);
				color: var(--color-accent1);

				& img {

					&:hover {
						
					 }
				}
			}

			& a.cta-button-mail:hover ,
			& a.cta-button-mail:active ,
			& a.cta-button-mail:focus {
				background: var(--color-base);
			}


			& a.cta-button-reserve,
			& a.cta-button-reserve:link ,
			& a.cta-button-reserve:visited	{
		
				background: var(--color-base);
				color: var(--color-accent1);
				border-radius: 0 10px  0 0;

				& img {

					&:hover {
						
					 }
				}
			}

			& a.cta-button-reserve:hover ,
			& a.cta-button-reserve:active ,
			& a.cta-button-reserve:focus {
				background: var(--color-accent2);
			}

		}
	


  }


.mv.mv_off {


	&:before {


		left: -20%;
	}
	& .croud {
		right: -20%;
	}

	.container {

		& h1 {
				translate: 0px 50px;
				filter: blur(50px);
				transition: .3s ;
			& img {
				width: 100%;

			}
		}

		.catch {
			& li {
				translate: -200px 20px;
				transition:  .3s ;

			}
		}

	}
	
}
.mv {
	width: 100%;
	height: 200vw;
	background: url(../clinic_img/mv_frontA.png) no-repeat center bottom, 
				url(../clinic_img/mv_woman.png) no-repeat,
				url(../clinic_img/mv_shadow.png) no-repeat,
				url(../clinic_img/mv_back.jpg) no-repeat,
				var(--color-sub1);
	background-size:  100% auto,  80% auto, 50% auto, 100% auto;
	background-position: center bottom,center bottom 60%,right bottom 40%,center bottom 0%;
	padding: 0;
	position: relative;
	overflow: hidden;

	&:before {
		content: "";
		background: url(../clinic_img/mv_partA.png) no-repeat;
		background-size: contain;
		width: 30%;
		height: 200px;
		top: 100px;
		left: -10%;
		position: absolute;
		display: block;
		transition: left 1s 1.2s ;
		z-index: 2;
	}
	& .croud {
		/* content: "";
		background: url(../clinic_img/mv_partB.png) no-repeat;
		background-size: contain; */
		width: 180px;
		/* height: 185px; */
		position: absolute;
		top: 58%;
		right: -10%;
		display: block;
		transition: right 1s 1.2s ;
		z-index: 2;
	}



	.container {
		width: 100%;
		/* max-width: 460px; */
		height: 100%;
		margin: 0 auto;
		/* padding-top: 15vh; */
		display: flex;
		justify-content: center;
		/* align-items: center; */
		flex-wrap: wrap;
		position: relative;

		& h1 {
			width:  22%;
			margin: 50px 30px auto auto;
			z-index: 5;

			translate: 0px 0px;
			filter: blur(0);
			transition: filter .3s .3s;
			

			& img {
				width: 100%;

			}
		}

		.catch {
			position: absolute;
			left: 0%;
			top: 40%;
			/* bottom: 10vh; */
			display: flex;
			flex-direction: column;
			align-items: flex-start;
			transform: skewY(-5deg);
			
			& li {
				background: var(--color-accent2);
				margin-bottom: .5em;
				display: inline-block;
				padding: .5em 1em ;
				font-size: 20px;
				color: var(--color-base);
				font-weight: bold;
				border-radius: 0 5px 5px 0;
				translate: 0px 0px;
				transition: translate .3s  ;
			}
			& li:nth-of-type(1){
				transition-delay: .5s;
			}
			& li:nth-of-type(2){
				transition-delay: .65s;
			}
			& li:nth-of-type(3){
				transition-delay: .8s;
			}
			& li:nth-of-type(4){
				transition-delay: .95s;
			}
		}
	}
}

.secA {
	padding: 0 10% 10% ;
	& h2 {
		font-size: 26px;
		color: var(--color-accent1);
		text-align: left;
	}
	& .honbun {
		text-align: left;
	}
}

section.cta {
	background: var(--color-accent1);
	color: var(--color-base);
	width: 90%;
	margin:  0 auto;
	padding: 20px 5%;
	border-radius: var(--br-s);
	position: relative;
	z-index: 9;

	.container {
		width: 94%;
		margin: 0 auto;
		/* padding: 20px 5%; */

		& h2 {
			width: 100%;
		}

		& p {
			width: 100%;
			margin-bottom: 20px;
		}

		.btnwrap {
			width: 100%;
			/* max-width: 370px; */
			margin: 0 auto;
			display: flex;
			justify-content: space-around;
			/* align-items: ; */
			gap: 20px;
			flex-direction: column;

		 	
			& a.cta-button-mail,
			& a.cta-button-mail:link ,
			& a.cta-button-mail:visited	{
				display: flex;
				justify-content: center;
				align-items: center;
				gap: 10px;
				height: 50px;
				border-radius: var(--br-s);
				background: var(--color-accent2);
				color: var(--color-accent1);
				transition: .3s;
				text-decoration: none;

				& img {
					height: 15px;
					display: inline-block;

					transition: .3s;

					&:hover {
						

					 }
				}
			}

			& a.cta-button-mail:hover ,
			& a.cta-button-mail:active ,
			& a.cta-button-mail:focus {
				background: var(--color-base);
			}

			& .cta-tel {
				font-size: var(--font-sizeL);

				/* margin-top: .5em; */
				& img {
					
					height: .7em;
					margin: 0 .5em 0 0;
				}
				& span.tel {
					font-family: var(--font-en);
					letter-spacing: .05em;

					


				}
				& .time {
					font-size: var(--font-sizeM);
					margin: 0;

				}
			}
			& a.cta-button-reserve,
			& a.cta-button-reserve:link ,
			& a.cta-button-reserve:visited	{
				display: flex;
				justify-content: center;
				align-items: center;
				gap: 1em;
				height: 50px;
				background: var(--color-base);
				color: var(--color-accent1);
				text-decoration: none;
				border-radius: var(--br-s);
				transition: .3s;
				text-decoration: none;

				& img {
					height: 20px;
					line-height: 1;
					display: inline-block;
					transition: .3s;

					&:hover {
						

					 }
				}
			}

			& a.cta-button-reserve:hover ,
			& a.cta-button-reserve:active ,
			& a.cta-button-reserve:focus {
				background: var(--color-accent2);
			}

		}
	}
}

.sectionwrap {
	position: relative;
}

section.secA_A {
	position: sticky;
	top: 5%;
	width: 90%;
	/* height: 100vh; */
	aspect-ratio: 1/1.5;
	/* padding:  50px 10%; */
	padding: 1px 0 0;
	max-height: 700px;
	margin: 20px auto;
	text-align: left;
	background: rgb(162, 214, 238);
	background-size: contain;
	background-position: 50% bottom;
	border-radius: var(--br-l);
	transform: rotate(2deg);
	color: var(--color-base);

	&:before {
		content: "";
		position: absolute;
		width: calc( 100% - 20px);
		height: calc( 100% - 20px);
		border: 3px solid var(--color-base);
		border-radius: 25px;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
		margin: auto;
	}
	&:after {
		content: "Check Point1";
		position: absolute;
		border: 3px solid var(--color-base);
		border-radius: 0 25px 0 25px;
		right: 8px;
		top: 8px;
		padding: 0 1.75em 0 2em;
		background: var(--color-base);
		color:  rgb(162, 214, 238);
		font-family: var(--font-en);
		letter-spacing: .2em;
	}

	& h2 {
		font-size: 3.0rem;
		font-weight: 900;
		margin: 50px 10% .5em;
	}
	& .comment {
		margin: 0px 10% .5em;
	}
	& img {
		width: 100%;
		margin-top: auto;
		border-radius: var(--br-l);
		display: block;
	}
}

section.secB {
	position: sticky;
	top: 5%;
	width: 90%;
	/* height: 100vh; */
	aspect-ratio: 1/1.5;
	/* padding:  50px 10%; */
	padding: 1px 0 0;
	max-height: 700px;
	margin: 20px auto;
	text-align: left;
	background: rgb(228, 233, 239);
	background-size: cover;
	background-position: center bottom;
	border-radius: var(--br-l);
	color: var(--color-accent1);
	transform: rotate(-2deg);

	&:before {
		content: "";
		position: absolute;
		width: calc( 100% - 20px);
		height: calc( 100% - 20px);
		border: 3px solid var(--color-accent1);
		border-radius: 25px;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
		margin: auto;
	}
	&:after {
		content: "Check Point2";
		position: absolute;
		border: 3px solid var(--color-accent1);
		border-radius: 0 25px 0 25px;
		right: 8px;
		top: 8px;
		padding: 0 1.75em 0 2em;
		background: var(--color-accent1);
		color: var(--color-base);
		font-family: var(--font-en);
		letter-spacing: .2em;
	}

	& h2 {
		font-size: 2.6rem;
		font-weight: 900;
		margin: 50px 10% .5em;


		& br {
			/* display: none; */
		}
	}

	.comment {
		margin: 0px 10% .5em;
	}
	& img {
		width: 100%;
		border-radius: var(--br-l);
		display: block;

	}

}

section.secC {
	position: sticky;
	top: 5%;
	width: 90%;
	/* height: 100vh; */
	aspect-ratio: 1/ 1.5;
	/* padding: 60px  10% 40px; */
	padding: 1px 0 0;
	max-height: 700px;
	margin: 20px auto 50px;
	text-align: left;
	background: rgb(176, 233, 253);
	background-size: cover;
	background-position: center bottom;
	border-radius: var(--br-l);
	transform: rotate(1deg);
	color: var(--color-base);



	&:before {
		content: "";
		position: absolute;
		width: calc( 100% - 20px);
		height: calc( 100% - 20px);
		border: 3px solid var(--color-base);
		border-radius: 25px;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
		margin: auto;
	}
	&:after {
		content: "Check Point3";
		position: absolute;
		border: 3px solid var(--color-base);
		border-radius: 0 25px 0 25px;
		right: 8px;
		top: 8px;
		padding: 0 1.75em 0 2em;
		background: var(--color-base);
		color: var(--color-sub2);
		font-family: var(--font-en);
		letter-spacing: .2em;
	}

	& h2 {
		font-size: 2.8rem;
		font-weight: 900;
		margin: 50px 10% .5em;


		& br {
			/* display: none; */
		}
	}

	.comment {
		margin: 0px 10% .5em;
	}
	& img {
		width: 100%;
		border-radius: var(--br-l);
		display: block;
	}
}

section.secE {
	width: 100%;
	margin: -200px 0 0 ;
	padding:  300px  0 20px;
	max-height: 700px;
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	flex-wrap: wrap;
	text-align: left;
	background: url(../clinic_img/secE_img.png) no-repeat,
				var(--color-sub2);	
	background-size: 55%;
	background-position: right -90% top 300px;
	z-index: 0;
	position: relative;
	overflow: hidden;
	transition: .5s;


	& h2 {
		flex: 5;
		font-size: 3rem;
		font-weight: 900;
		padding-left: 10%;
		margin-bottom: 0;
		transform:translate(-100% , 50px);
		opacity: 0;
		transition: .5s;
	}
	& .img {
		flex: 4;
		& img {
			width: 100%;
		}
	}
	& .comment {
		width: 100%;
		padding: 20px 10%;
		opacity: 0;
		transition: .5s;
		transform:translate( 0% , 100px);
	}
}
section.secE.anime_on {

	background: url(../clinic_img/secE_img.png) no-repeat,
				var(--color-sub2);	
	background-size: 55%;
	background-position: right 0% top 300px;

	& h2 {
		transform: translate(0%, 0px);
		opacity: 1;
		/* transition: .5s; */
	}
	& .img {
		flex: 4;
		& img {
			width: 100%;
		}
	}
	& .comment {
		transform: translate(0%, 0px);
		opacity: 1;
		/* transition: .5s; */
	}
}




section.secD.set_off {

	& .img {
		left: -50%;

		&:before {
			content: "";
			left: -100% ;
			transform: rotate(-90deg);
		}
		& img {
		}
	}

	& h2 {
		transform: translate(100%,0);
		opacity: 0;
	}
	& .comment {
		transform: translate(0,100%);
		opacity: 0;
	}
}


section.secD {
	width: 100%;
	margin: 0;
	padding:  20px 10% 0 0;
	max-height: 700px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 20px 0;
	flex-wrap: wrap;
	text-align: left;
	position: relative;
	/* color: var(--color-base); */
	background: var(--color-sub2);	
	background-size: 55%;
	background-position: right top 50px;
	overflow: hidden;


	& .img {
		flex: 4;
		position: relative;
		left: 0%;
		transition: .5s;
		&:before {
			content: "";
			width: 80%;
			height: 300px;
			position: absolute;
			left: 0 ;
			bottom: 0;
			transform: rotate(0deg);
			background: url(../clinic_img/secD_img.png) no-repeat,
						url(../clinic_img/secD_shadow.png) no-repeat;
			background-size: contain, 100% 20%;
			background-position: left bottom,left bottom;
			transition: .5s;
		}
		& img {
			width: 100%;
		}
	}
	& h2 {
		flex: 1;
		writing-mode: vertical-rl;
		font-size: 3rem;
		font-weight: 900;
		margin-bottom: 0;
		/* margin-right: 10%; */
		transform: translate(0,0);
		transition: .5s;
	}
	& .comment {
		width: 100%;
		padding: 20px 0 20px 10%;
		transform: translate(0,0);
		transition: .5s;
	}
}









section.secF.set_off {


	& h2 {
		transform: translate(-100%,0);
		opacity: 0;
	}
	& .comment {
		transform: translate(-100%,0);
		opacity: 0;
	}

	& .img {
		transform: translate(0,0);
		opacity: 1;
		transition: .5s;
		&:before {
			transform: translate(0,0);
			opacity: 1;
			transition: .5s;
		}

		& img.biru {
			width: 100%;
			position: absolute;
			bottom: 0;
		}
	}

}

section.secF {
	width: 100%;
	margin: 0 0 20px;
	padding:  50px  0 0;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 0px 0;
	flex-wrap: wrap;
	text-align: left;
	/* color: var(--color-base); */
	background: var(--color-sub2);	
	overflow: hidden;

	& h2 {
		width:  80%;
		font-size: 2.6rem;
		font-weight: 900;
		margin-bottom: 0;
		margin-right: 10%;
		margin: 0 auto;
		transform: translate(0,0);
		opacity: 1;
		transition: .5s;
	}
	& .comment {
		width: 80%;
		margin: 0 auto;
		padding: 20px 0;
		transform: translate(0,0);
		opacity: 1;
		transition: .5s;
	}

	& .img {
		flex: 100%;
		height: 80vw;
		position: relative;
		z-index: 1;
		&:before {
			content: "";
			width: 100%;
			height: 90vw;
			position: absolute;
			left: 0 ;
			bottom: 0;
			/* aspect-ratio: 1/1; */
			background: url(../clinic_img/secF_partB.png) no-repeat;
			background-size: cover;
			background-position: center bottom;
			z-index: -1;
			transform: translate(0px,0);
			opacity: 1;
		}

		& img.biru {
			width: 100%;
			position: absolute;
			/* margin: auto; */
			left: 50%;
			bottom: 0;
			transform: translateX(-50%);
		}
		& img.croud {
			width: 20%;
			/* height: 20vw; */
			position: absolute;
			right: -10% ;
			bottom: 80%;
			z-index: -1;
			transform: translate(0px,0);
			opacity: 1;
			transition: .5s;
		}
	}

}



section.price {


	& h2 {

		font-weight: bold;
		transform: scale(0.8);


	}

	.subtitle {}

	.inner {
		display: flex;
		justify-content: center;
		align-items: stretch;
		gap: 20px 5% ;
		flex-wrap: wrap;
		width: 100%;
		/* max-width: 1200px; */
		margin: 50px auto 0;


		& input {
			display: none;
		}



		.checkitem {
			width:  42.5%;
			min-width: 9em;
			/* max-width: 180px; */
			background: var(--color-base);
			aspect-ratio: 6/2;
			border: 3px solid var(--color-accent3);
			border-radius: var(--br-s);
			/* margin-left: 20px; */
			padding: 0;
			z-index: 1;

			& label {
				position: relative;
				width: 100%;
				height: 100%;
				display: flex;
				justify-content: center;
				align-items: center;
				cursor: pointer;

				&:before {
					content: "";
					display: inline-block;
					width: 16px;
					height: 16px;
					position: relative;
					background: var(--color-accent1);
					border:  solid 8px var(--color-sub3);
					box-sizing: border-box;
					/* outline: solid 8px var(--color-sub3);
					outline-offset: -8px; */
					border-radius: var(--br-m);
					margin-right: .5em;
					transition: .3s;
				}
			}
		}



		& input#planA:checked ~.checkitem:nth-of-type(1),
		& input#planB:checked ~.checkitem:nth-of-type(2) {
				border: solid 4px var(--color-accent1);
		}
		& input#planA:checked ~.checkitem:nth-of-type(1) label:before,
		& input#planB:checked ~.checkitem:nth-of-type(2) label:before {
			content: "";
			display: block;
			background: var(--color-accent1);
			border-radius: var(--br-m);
			border: solid 2px var(--color-sub3);
			/* outline: solid 2px var(--color-sub3);
			outline-offset: -2px; */
		}



		.planarea {
			width: 100%;
			margin: 0 auto;
			padding: 5% 5%;
			background: var(--color-base);
			border-radius: var(--br-m);
			display: flex;
			justify-content: space-between;
			/* flex-wrap: wrap; */
			gap: 20px 5% ;
			position: relative;
			overflow: hidden;
			touch-action: pan-y;

			& input {

			}
			& label.cardback {
				display: none;
				background: url(../clinic_img/plan_arrow.svg) no-repeat;
				background-size: contain;
				width: 50px;
				height: 50px;
				position: absolute;
				top: 50%;
				left: 5%;
				z-index: 1;
			}
			& label.cardnext {
				display: none;
				background: url(../clinic_img/plan_arrow.svg) no-repeat;
				background-size: contain;
				transform: scaleX(-100%);
				width: 50px;
				height: 50px;
				position: absolute;
				top: 50%;
				right: 5%;
				z-index: 1;
			}

			.planitem {
				/* width: 80%; */
				flex: 1 0 70%;
				position: relative;
				animation: planitems .3s;


				&:nth-of-type(2),
				&:nth-of-type(5) {
					animation-duration: 0.9s;
				}
				&:nth-of-type(3),
				&:nth-of-type(6) {
					animation-duration: 1.6s;
				}

				& img {
					width: 100%;
					filter: var(--shadow);
				}
			}


			& input#cardsliderA:checked~ label[for="cardsliderB"].placeA,
			& input#cardsliderB:checked~ label[for="cardsliderA"].placeB,
			& input#cardsliderB:checked~ label[for="cardsliderC"].placeB,
			& input#cardsliderC:checked~ label[for="cardsliderB"].placeC {
					display: block;
			}

			& input#cardsliderA:checked~ .planitem {
					left: 0%;
					transition: .3s;
			}
	
			& input#cardsliderB:checked~ .planitem {	
					left: -60%;
					transition: .3s;
			}
	
			& input#cardsliderC:checked~ .planitem {
					left: -120%;
					transition: .3s;
			}
	

		}



		& input#planA:checked~.planarea .planitem:nth-of-type(1),
		& input#planA:checked~.planarea .planitem:nth-of-type(2),
		& input#planA:checked~.planarea .planitem:nth-of-type(3) {
				display: none;
				visibility: hidden;
				opacity: 0;
		}

		& input#planB:checked~.planarea .planitem:nth-of-type(4),
		& input#planB:checked~.planarea .planitem:nth-of-type(5),
		& input#planB:checked~.planarea .planitem:nth-of-type(6) {
				display: none;
			    transform: translateY(5px);
				visibility: hidden;
				opacity: 0;
		}

	}
}

@keyframes planitems{

	from{
		opacity: 0;
		transform: translateY(5px);
	}

	to{
		opacity: 1;
		transform: translateY(0px);
	}
}

section.contact {
	background: var(--color-sub1);

	color: var(--color-main);

	& h2 {
		color: var(--color-main);
	}
}


section.secCompany{
	width: 90%;
	margin: 0 auto;
	padding: 30px 10% 20px;
	border-radius: 10px 10px 0 0;
	background: var(--color-accent1);
	color: var(--color-base);
	& dl {
		display: flex;
		justify-content: flex-start;
		align-items: flex-start;
		gap: 1em;
		text-align: left;
		margin-bottom: .8em;

		&:nth-last-of-type(1) {
			margin-bottom: 0;
		}
		& dt {
			& img {
				height: 1em;
			}

		}
		& dd {
			line-height: 1.8em;

		}

	}
	& .name {

		& dd {
			font-weight: bold;
			font-family: var(--font-en);

		}
	}
	& .tel {
		& .num {
			font-weight: bold;
			/* font-size: 14px; */

		}
		& .time {
			font-weight: normal;
			font-size: var(--font-sizeS);
		}
		
	}
}



footer {
	padding: 1em 0 calc(50px + 1em);
	background: var(--color-main);
	color: var(--color-base);
	font-family: var(--font-en);
	font-size: var(--font-sizeS);

}