@charset "utf-8";

/* メインエリア
-------------------------------------------*/
#main_area{overflow: hidden;}
#main_area > div{
	position: relative;
	aspect-ratio: 1/.43;
	background: url("../images/top/main_cloud.webp") left 22% bottom 20% / 355px auto no-repeat;
}
.main_img > img{
	position: absolute;
	animation: main_img 1s ease-out forwards;
	opacity: 0;
}
@keyframes main_img{
	0% {
		transform: scale(1.2);
		filter: blur(10px);
	}
	100% {
		transform: scale(1);
		filter: blur(0);
		opacity: 1;
	}
}
.main_img > img:first-child{
	left: 10%;
	top: 0;
	max-width: 295px;
	width: 16%;
}
.main_img > img:nth-child(2){
	left: 2%;
	bottom: 0;
	max-width: 380px;
	width: 21%;
	animation-delay: .9s;
}
.main_img > img:nth-child(3){
	/*right: 30%;
	top: 0;
	max-width: 410px;
	width: 23%;
	animation-delay: .6s;*/
	right: 35%;
	bottom: 0;
	max-width: 505px;
	width: 27%;
	animation-delay: .3s;
}
.main_img > img:nth-child(4){
	/*right: 35%;
	bottom: 0;
	max-width: 505px;
	width: 27%;
	animation-delay: .3s;*/
	right: 30%;
	top: 0;
	max-width: 410px;
	width: 23%;
	animation-delay: .6s;
}
.main_img > img:nth-child(5){
	right: 3%;
	top: 20%;
	max-width: 320px;
	width: 18%;
	animation-delay: 1.2s;
}
.main_copy,.main_copy > span{animation: main_copy .5s ease-out forwards;}
.main_copy,.main_subcopy{position: absolute;}
.main_copy{
	writing-mode: vertical-rl;
	top: 10%;
	left: 31%;
	opacity: 0;
}
.main_copy > span{
	display: inline-block;
	opacity: 0;
	font-size: 28px;
	line-height: 1.5;
	color: #5E8E00;
	letter-spacing: .3em;
}
/* -- safari only -- */
_::-webkit-full-page-media, _:future, :root .main_copy > span{
	padding-right: .2em;
}
/* -- safari only -- */
@keyframes main_copy {
	0% {
		transform: scale(1.5);
		filter: blur(10px);
	}
	100% {
		transform: scale(1);
		filter: blur(0);
		opacity: 1;
	}
}
.main_copy > span:nth-child(1){animation-delay: 2s;}
.main_copy > span:nth-child(2){animation-delay: 2.1s;}
.main_copy > span:nth-child(3){animation-delay: 2.2s;}
.main_copy > span:nth-child(4){animation-delay: 2.3s;}
.main_copy > span:nth-child(5){animation-delay: 2.4s;}
.main_copy > span:nth-child(6){animation-delay: 2.5s;}
.main_copy > span:nth-child(7){animation-delay: 2.6s;}
.main_copy > span:nth-child(8){animation-delay: 2.7s;}
.main_copy > span:nth-child(9){animation-delay: 2.8s;}
.main_copy > span:nth-child(10){animation-delay: 2.9s;}
.main_copy > span:nth-child(11){animation-delay: 3s;}
.main_subcopy{
	font-family: 'poppins';
	font-size: 14px;
	border-bottom: 1px solid #ADC44B;
	padding-bottom: .5em;
	color: #ADC44B;
	top: 43%;
	right: 25%;
	letter-spacing: .4em;
}
#main_hour{
	position: absolute;
	bottom: 0;
	right: 4%;
	width: clamp(340px,22vw,420px);
}
#main_hour > span{
	color: #5E8E00;
	background: #fff;
	padding: .6em 2em;
	border-radius: 10px;
	position: relative;
	display: block;
	width: fit-content;
	margin: 0 auto 1em;
}
#main_hour > span::after{
	content: "";
	width: .7em;
	height: .6em;
	background: #fff;
	clip-path: polygon(100% 0, 0 0, 50% 100%);
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	top: 100%;
}
#main_hour .hour{width: 100%;}
#main_hour .hour thead th:first-child,#main_hour .hour tbody th{width: 115px;}
#main_hour .hour thead th,#main_hour .hour tbody th{font-size: 15px;}
#main_hour .hour tbody td{font-size: 13px;}

/* 歯科矯正治療の目的
-------------------------------------------*/
.purpose_title{margin-left: -1.8em;}
.intro_wrap > p:first-child span{
	position: relative;
	color: #5E8E00;
	font-size: 22px;
	font-family: 'zkgn-m';
	line-height: 2.5;
	letter-spacing: .15em;
}
.intro_wrap > p:first-child span::after{
	content: "";
	background: rgba(255,255,255,.5);
	width: 100%;
	height: 1em;
	position: absolute;
	left: .5em;
	top: .8em;
	z-index: -1;
}
.intro_wrap > p:last-child{
	width: calc(95% - 550px);
	margin-top: 5em;
}
.risk_title::before{
	content: "";
	width: 2.5em;
	aspect-ratio: 1/.875;
	display: block;
	margin: 0 auto 1em;
	background: url("../images/top/risk_title.webp") center / contain no-repeat;
}
.risk_li{padding: 50px 35px;}
.risk_li > li{
	width: calc(100% / 4);
	padding: 7px 35px 25px;
}
.risk_li > li:not(:last-child){border-right: 1px dashed #ADC44B;}
.risk_li > li > img{
	display: block;
	margin: 0 auto 30px;
}
.risk_li > li > h4{
	font-size: 20px;
	font-family: "zkgn-m";
	color: #5C8C00;
	margin-bottom: 1em;
	text-align: center;
}
.risk_li > li > p{line-height: 1.7;}

/* 歯科矯正の治療方法
-------------------------------------------*/
.treatment_wrap{
	max-width: 1650px;
	width: 95%;
	margin: 0 auto;
	position: relative;
	z-index: 2;
}
.treatment_wrap > p{
	width: 40%;
	height: auto;
}
.treatment_wrap > p img{
	object-fit: cover;
	border-radius: 20px;
	width: 100%;
	height: 100%;
}
.treatment_wrap > div{
	width: 47%;
	padding: 50px 0;
}
.treatment_li{
	padding: 160px 80px 90px;
	border-radius: 20px;
	margin-top: -70px;
}
.treatment_li li{
	width: 31%;
	position: relative;
	z-index: 2;
}
.treatment_li li > div{margin-bottom: 40px;}
.treatment_li li > div > img{
	display: block;
	margin: 0 auto 40px;
}
.treatment_li li h3{
	font-size: 20px;
	font-family: "zkgn-m";
	color: #5c8c00;
	text-align: center;
}
.treatment_li li > p{
	line-height: 2;
	/*margin-bottom: 2em;*/
}
.treatment_li .btn2{
	display: block;
	margin: 0 0 0 auto;
	width: fit-content;
}
.treatment_li > a{
	margin: 0 auto;
}

/* 院長からのごあいさつ
-------------------------------------------*/
#message > div{
	padding-top: 75px;
	position: relative;
}
.message_r{
	position: absolute;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	max-width: 1400px;
	width: 80%;
	margin: 0 auto;
}
.message_r > div{
	width: 25%;
	margin: 0 0 0 auto;
}
.doctor_name{text-align: right;}
.doctor_name,.doctor_name span{
	color: #5e8e00;
	font-family: "zkgn-m";
	letter-spacing: .2em;
}
.doctor_name span{
	font-size: 16px;
	margin-right: .7em;
}
.message_r .btn{margin: 0 0 0 auto;}
.message_bg{
	width: calc(100% - 150px);
	margin: 0 auto;
	position: relative;
}
.message_bg::before,.message_bg::after{
	font-family: 'poppins';
	color: #69a00a;
	font-size: 14px;
	writing-mode: vertical-rl;
	position: absolute;
	top: 50%;
}
.message_bg::before{
	content: "MESSAGE";
	transform: translateY(-50%) rotate(180deg);
	left: -3em;
}
.message_bg::after{
	content: "FROM Dr.NAKAGAWA";
	right: -3em;
	transform: translateY(-50%);
}
.message_bg > div{
	position: relative;
	overflow: hidden;
	border-radius: 170px;
	background: #e8efda;
}
.message_bg > div::before,.message_bg > div::after{
	content: "";
	background: url("../images/uneven_bg.webp");
	position: absolute;
	opacity: .4;
}
.message_bg > div::before{
	width: 30%;
	aspect-ratio: 1/.8;
	left: 0;
	top: 0;
	border-bottom-right-radius: 270px;
}
.message_bg > div::after{
	width: 40%;
	aspect-ratio: 1/ .6;
	right: 0;
	bottom: 0;
	border-top-left-radius: 320px;
}
.message_l{
	max-width: 1400px;
	width: 89%;
	margin: 0 auto;
}
.message_l > div{
	width: 65%;
	position: relative;
	z-index: 2;
	padding-bottom: 60px;
}
.message_l > div > p{font-size: clamp(25px,1.9vw,28px);}
.readmore-content{
	height: 120px;
	overflow: hidden;
	position: relative;
}
.readmore-content p{
	font-size: 18px;
	line-height: 1.8;
}
.readmore-content p:not(:last-child){margin-bottom: 1.5em;}
.readmore-content.open{height: auto;}
.readmore-content::before{
	position: absolute;
	display: block;
	content: "";
	bottom: 0;
	left: 0;
	width: 100%;
	height: 100px;
	background: linear-gradient(to bottom,rgba(232,239,218,0),rgba(232,239,218,1));
	transition: .2s;
}
.readmore-content.open::before{opacity: 0;}
.readmore{
	display: block;
	transition: .2s;
	position: absolute;
	bottom: 0;
	left: 50%;
	transform: translateX(-50%);
	cursor: pointer;
	background: transparent;
	font-family: 'poppins';
	color: #6b6d52;
	border: none;
	font-size: 16px;
	letter-spacing: .15em;
	padding-right: 3.5em;
}
.readmore::after{
	content: "";
	background: #a1b23b url("../images/open_btn.webp") center / 10px no-repeat;
	width: 2.7em;
	aspect-ratio: 1/1;
	border-radius: 50%;
	position: absolute;
	right: 0;
	top: 50%;
	transform: translateY(-50%);
	transition: .2s;
}
.readmore:hover::after{transform: translateY(-50%) scale(.8);}
.readmore-content.open+.readmore::after{transform: translateY(-50%) rotate(45deg);}

/* 1300px以下から
------------------------------------------------------------*/
@media only screen and (max-width:1300px){
	
	/* メインエリア
	-------------------------------------------*/
	#main_area > div{background-size: 230px auto;}
	.main_copy span{font-size: 22px;}
	.main_subcopy{font-size: 12px;}
	#main_hour{width: clamp(260px,22vw,340px);}
	#main_hour > span{border-radius: 6px;}
	#main_hour .hour thead th:first-child,#main_hour .hour tbody th{width: 95px;}
	#main_hour .hour thead th,#main_hour .hour tbody th{font-size: 13px;}
	#main_hour .hour tbody td{font-size: 12px;}
	
	
	/* 歯科矯正治療の目的
	-------------------------------------------*/
	.intro_wrap > p:first-child span{font-size: 18px;}
	.intro_wrap > p:last-child{width: calc(95% - 450px);}
	.risk_li{padding: 35px 20px;}
	.risk_li > li{padding: 4px 20px 15px;}
	.risk_li > li > img{
		margin-bottom: 20px;
		width: 90px;
	}
	.risk_li > li > h4{font-size: 16px;}
	
	/* 歯科矯正の治療方法
	-------------------------------------------*/
	.treatment_wrap > p img{border-radius: 15px;}
	.treatment_wrap > div{padding: 35px 0;}
	.treatment_li{
		padding: 120px 50px 60px;
		border-radius: 15px;
		margin-top: -40px;
	}
	.treatment_li li > div{margin-bottom: 30px;}
	.treatment_li li > div > img{
		margin-bottom: 30px;
		width: 110px;
	}
	.treatment_li li h3{font-size: 16px;}
	
	/* 院長からのごあいさつ
	-------------------------------------------*/
	#message > div{padding-top: 50px;}
	.doctor_name span{font-size: 14px;}
	.message_bg{width: calc(100% - 110px);}
	.message_bg::before,.message_bg::after{font-size: 12px;}
	.message_bg > div{border-radius: 110px;}
	.message_bg > div::before{border-bottom-right-radius: 140px;}
	.message_bg > div::after{border-top-left-radius: 190px;}
	.message_l > div{padding-bottom: 40px;}
	.message_l > div > p{font-size: clamp(18px,1.9vw,22px);}
	.readmore-content{height: 90px;}
	.readmore-content p{font-size: 14px;}
	.readmore-content::before{height: 70px;}
	.readmore{font-size: 14px;}
	.readmore::after{background-size: 7px;}
}

/* 950px以下から
------------------------------------------------------------*/
@media only screen and (max-width:950px){
	
	/* メインエリア
	-------------------------------------------*/
	#main_area > div{
		aspect-ratio: inherit;
		padding-top: 60px;
	}
	.main_img > img:first-child{
		top: 5%;
		left: 10%;
		max-width: 190px;
		width: 27%;
	}
	.main_img > img:nth-child(2){
		top: auto;
		bottom: 6%;
		right: auto;
		left: 2%;
		max-width: 230px;
		width: 28%;
	}
	.main_img > img:nth-child(3){
		bottom: auto;
		left: -6%;
		top: 35%;
		max-width: 220px;
		width: 30%;
	}
	.main_img > img:nth-child(4){
		top: 16%;
		bottom: auto;
		right: 4%;
		width: 30%;
	}
	.main_img > img:nth-child(5){
		top: auto;
		bottom: 30%;
		width: 24%;
		right: 0;
	}
	.main_copybox{
		display: flex;
		justify-content: center;
		margin-bottom: 50px;
	}
	.main_copybox > *,#main_hour{
		position: inherit;
		left: auto;
		top: auto;
		right: auto;
	}
	.main_copy{margin-right: 30px;}
	.main_subcopy{
		writing-mode: vertical-rl;
		border-bottom: none;
		border-left: 1px solid #ADC44B;
		padding: 0 0 0 .5em;
		margin-top: 60px;
	}
	#main_hour{
		width: 100%;
	}
	#main_hour .hour{
		width: 260px;
		margin: 0 auto;
	}
	#main_hour > p{text-align: center;}
	
	/* 歯科矯正治療の目的
	-------------------------------------------*/
	.intro_wrap > p:first-child{margin-bottom: 45px;}
	.intro_wrap > p:last-child{
		width: 100%;
		margin: 0;
	}
	.risk_li > li{
		width: calc(100% / 2);
		padding: 30px 15px;
	}
	.risk_li > li:nth-child(2){border-right: none;}
	.risk_li > li:not(:nth-last-child(-n+2)){border-bottom: 1px dashed #ADC44B;}
	
	/* 歯科矯正の治療方法
	-------------------------------------------*/
	.treatment_wrap > p{
		max-width: 600px;
		width: 100%;
		margin: 0 auto 50px;
	}
	.treatment_wrap > div{
		padding: 0;
		width: 90%;
		margin: 0 auto;
	}
	.treatment_li{
		margin-top: -20px;
		padding: 60px 25px 45px;
	}
	.treatment_li li{
		max-width: 500px;
		margin: 0 auto;
		width: 100%;
	}
	.treatment_li li:not(:last-child){margin-bottom: 50px;}
	
	/* 院長からのごあいさつ
	-------------------------------------------*/
	#message > div{padding-top: 0;}
	.message_l > div{width: 100%;}
	.message_bg{width: 95%;}
	.message_bg::before,.message_bg::after{
		writing-mode: inherit;
		left: 50%;
		width: fit-content;
	}
	.message_bg::before{
		transform: translateX(-50%) rotate(0);
		top: -2.5em;
	}
	.message_bg::after{
		transform: translateX(-50%);
		top: auto;
		bottom: -2.5em;
	}
	.message_bg > div{padding-bottom: 490px;}
	.message_r{
		width: 90%;
		top: auto;
		bottom: 80px;
	}
	.message_r > div{
		margin: 0 auto;
		width: 100%;
	}
	.message_r > div > div{margin-bottom: 40px!important;}
	.message_r > div > div > img{
		width: 190px;
		margin: 0 auto;
		display: block;
	}
	.doctor_name{text-align: center;}
	.message_r .btn{margin: 0 auto;}
}

/* 500px以下から
------------------------------------------------------------*/
@media only screen and (max-width:500px){
	
	/* メインエリア
	-------------------------------------------*/
	.main_img > img:first-child{left: 6%;}
	.main_img > img:nth-child(2){bottom: 29%;}
	.main_img > img:nth-child(4){top: 23%;}
	
	/* 歯科矯正治療の目的
	-------------------------------------------*/
	.purpose_title{margin-left: 0;}
	.intro_wrap > p:first-child{margin-bottom: 30px;}
	.intro_wrap > p:first-child span{
		font-size: 15px;
		letter-spacing: .1em;
		line-height: 3;
	}
	.risk_li{padding: 15px;}
	.risk_li > li{
		width: 100%;
		border-right: none!important;
	}
	.risk_li > li:not(:last-child){border-bottom: 1px dashed #ADC44B;}
}