@charset "utf-8";
/* CSS Document */
main .button{
	background: transparent linear-gradient(100deg, #61BADB 0%, #416FC7 100%) 0% 0% no-repeat padding-box;
}
hgroup{
	display: flex;	
	align-items: baseline;
	color: #3C3C3C;
}
hgroup h2{
	letter-spacing: 0.1em;
	font-size: min(6.13vw,40px);
}
hgroup h3{
	letter-spacing: 0.1em;
	font-size: min(8.53vw,40px);
}
hgroup span{
	letter-spacing: 0.1em;
	font-size: min(2.67vw,15px);
	display: block;
}
hgroup p{
	font-family: "notore";
	letter-spacing: 0.15em;
	font-size: min(2.93vw,18px);
	margin-left: min(calc(3% + 1px),20px);
}
@media screen and (min-width: 768px) {
	hgroup h2{
		font-size: min(5.21vw,58px);
	}
	hgroup h3{
		font-size: min(5.21vw,62px);
	}
	hgroup p{
		font-size: min(2.34vw,28px);
	}
}
@media screen and (min-width: 1280px) {
	main{
		padding-top: 159px;
	}
	.products .products_list .aesthetic hgroup h3{
		font-size: 53px;
	}
}
@media screen and (min-width: 1600px) {
	main {
		padding-top: 145px;
	}
	.products .products_list .aesthetic hgroup h3{
		font-size: 62px;
	}
}
/*=========================================
01.MAINVISUAL
=========================================*/
.mainvisual{
	position: relative;
}
.mainvisual::before,.mainvisual::after{
	content:"";
	display: block;
	background-repeat: no-repeat;
	background-size: contain;
	position: absolute;
	top: 0;
}
.mainvisual::before{
	background-image: url("/assets/img/top/mv_sp_right_bgi.webp");
	left: auto;
	right: 0;
	mix-blend-mode: multiply;
	width: 97%;
	padding-bottom: 77%;
	z-index: 2;
}
.mainvisual::after{
	background-image: url("/assets/img/top/mv_sp_left_bgi.webp");
	padding-bottom: 68%;
	width: 39%;
}
.mainvisual .inner{
	position: relative;
	padding-bottom: 147.8%;
}
.mainvisual .inner::before{
	content: "";
	display: block;
	width: 100%;
	padding-bottom: 166.8%;
	background-image: url("/assets/img/top/sp_mv.webp");
	background-size: cover;
	background-repeat: no-repeat;
	position: absolute;
	top: 0;
	margin-top: -16%;
}
.mainvisual .copy{
	position: absolute;
	top: 0;
	left: 0;
	margin-top: min(calc(13% - 3px),184px);
	margin-left: min(8%,50px);
	width: 47%;
	z-index: 3;
}
.mainvisual .scroll{
	position: absolute;
	width: 15px;
	right: 0;
	left: 0;
	bottom: 0;
	margin-right: 12px;
	margin-left: auto;
}
@media screen and (min-width: 768px) {
	.mainvisual::before {
		width: 84%;
  		padding-bottom: 67%;
	}
	.mainvisual::after {
		width: 46%;
	}
	.mainvisual .inner{
		padding-bottom: 144.8%;
	}
	.mainvisual .inner::before {
		margin-top: -27%;
	}
	.mainvisual .copy{
		width: min(calc(30% + 3px),338px);
		margin-top: min(calc(15% - 6px),184px);
	}
}
@media screen and (min-width: 1270px) {
	.mainvisual{
		background-image:none;
		padding-bottom: min(49.8%,956px);
	}
	.mainvisual::before {
		background-image: url("/assets/img/top/mv_pc_right_bgi.webp");
		background-position: right;
		width: 41%;
    	padding-bottom: min(53%,952px);
    	margin-right: 0;
    	margin-left: auto;
    	left: auto;
    	right: 0;
	}
	.mainvisual::after{
		display: none;
	}
	.mainvisual .inner{
		padding-bottom: 0;
	}
	.mainvisual .inner::before {
		background-image: url("/assets/img/top/pc_mv.webp");
		padding-bottom: 48.8%;
		margin-top: 0;
		z-index: 2;
		max-width: 1920px;
		margin-right: auto;
		margin-left: auto;
		left: 0;
    	right: 0;
    	background-size: contain;
	}
	.mainvisual .copy{
		max-width: 384px;
		margin-top: 4%;
		margin-left: 4%;
		width: 25%;
	}
	.mainvisual .scroll{
		display: none;
	}
}
@media screen and (min-width: 1920px) {
	.mainvisual{
		background-size: cover;
	}
	.mainvisual .copy{
		margin-top: 107px;
		margin-left: 145px;
	}
}
/*=========================================
02.INTRODUCTION
=========================================*/
.introduction{
	margin-top: min(calc(18% - 2.5px),90px);
}
.introduction .flex_box{
	position: relative;
	margin-left: calc(6% - 2.5px);
}
.introduction .flex_box .text_box{
	padding-top: 13%;
}
.introduction .flex_box .text_box h2{
	width: calc(35% + 1px);
}
.introduction .flex_box .text_box p{
	color:#7E7E7E;
	font-size: min(3.2vw,16px);
	letter-spacing: 0.05em;
	line-height: 2.08;
	margin-top: min(calc(27% + 3px),150px);
}
.introduction .flex_box .img_box{
	position: absolute;
	top: 0;
	width: calc(57% + 2.5px);
	left: 0;
	right: 0;
	margin-left: auto;
}
.introduction .button{
	margin-top: min(calc(9%+0.5px),50px);
}
@media screen and (min-width: 768px) {
	.introduction{
		margin-top: min(12%,170px);
	}
	.introduction .flex_box .text_box h2{
		width: calc(30% - 2px);
	}
	.introduction .flex_box .text_box p{
		font-size: min(2.08vw,17px);
		width: 74%;
	}
	.introduction .flex_box .img_box{
		width: 66%;
		max-width: 900px;
	}
}
@media screen and (min-width: 1270px) {
	.introduction .flex_box{
		display: flex;
		width: 98%;
		max-width: 1670px;
		margin-left: auto;
	}
	.introduction .flex_box .text_box{
		padding-top: 0;
	}
	.introduction .flex_box .text_box h2{
		width: 84%;
		max-width: 662px;
	}
	.introduction .flex_box .text_box p{
		margin-top: 65px;
		line-height: 2.5;
		max-width: 653px;
		width: 102%;
		font-size: min(1.33vw,20px);
	}
	.introduction .flex_box .text_box .button{
		margin-top: min(6%,63px);
	}
	.introduction .flex_box .img_box{
		position: static;
		width: 55%;
	}
}
@media screen and (min-width: 1920px) {
	.introduction .flex_box .text_box h2{
		width: 100%;
	}
	.introduction .flex_box .text_box p{
		font-size: 20px;
	}
	.introduction .flex_box .text_box .button{
		margin-top: 63px;
	}
}
@media screen and (min-width: 1921px) {
	.introduction .flex_box{
		margin-right: auto;
	}
}


/*=========================================
03.PRODUCTS
=========================================*/
.products{
	background-color: #EDF2F7;
	padding-top: min(calc(18% - 1.5px),83px);
	padding-bottom: min(11%,66px);
	margin-top: min(16%,150px);
	position: relative;
	overflow-x: clip;
}
.products .bg-decorations,.topics .bg-decorations{
	position: absolute;
	top: 0;
	right: 0;
	margin-top: 5px;
	margin-right: -44px;
	width: 47%;
	max-width: 275px;
}
.products .bg-decorations .decorationcircle:last-of-type,.topics .bg-decorations .decorationcircle:last-of-type{
	margin-top: 10px;
}
.products .inner{
	margin-left: min(6%,50px);
}
.products p.bridge{
	font-family: "notore";
	color: #105C79;
	letter-spacing: 0.12em;
	line-height: 1.86;
	margin-top: calc(9% + 4px);
	font-size: min(4vw,20px);
}
.products .products_list{
	margin-top: min(10%,65px);
	color: white;
}
.products .products_list li{
	position: relative;
	display: flex;
}
.products .products_list .medical{
	background-color: #7DBDD5;
}
.products .products_list .dental{
	background-color: #B5A8E2;
}
.products .products_list .ndt{
	background-color: #ADCECD;
}
.products .products_list .aesthetic{
	background-color: #D8A9C6;
}
.products .products_list .text_box{
	width: calc(51% - 1px);
	position: absolute;
	z-index: 3;
}
.products .products_list li:nth-of-type(odd) .text_box{
	margin-top: min(calc(7% - 1px),38px);
	margin-left: 20px;
}
.products .products_list li:nth-of-type(even) .text_box{
  	right: 0;
  	left: 0;
	margin-right: 20px;
	margin-left: auto;
	padding-top: 4%;
}
.products .products_list li.ndt .text_box{
	margin-top: min(calc(3% - 1px),38px);
}
.products .products_list .text_box hgroup{
	display: block;
	text-align: center;
	color: white;
	text-shadow: 0px 0px 10px #FFFFFF6C;
}
.products .products_list .text_box hgroup p{
	font-family: "notobo";
	font-size: min(2.93vw,12px);
	margin-top: 5px;
}
.products .products_list .text_box>p{
	font-size: min(2.93vw,16px);
	letter-spacing: 0.08em;
	line-height: 1.81;
	margin-top: min(8%,23px);
	position: relative;
}
.products .products_list .ndt .text_box p{
	letter-spacing: 0.1em;
}
.products .products_list .img_box{
	width: 51%;
	mix-blend-mode: multiply;
}
.products .products_list .medical .img_box{
	margin-left: auto;
	width: 50%;
}
.products .products_list .ndt .img_box{
	margin-left: auto;
	width: 50%;
}
.products .button{
	margin-top: min(calc(11% - 1px),50px);
	margin-right: auto;
	margin-left: auto;
}
@media screen and (min-width: 768px) {
	.products{
		padding-top: min(calc(11% - 1px),157px);
		margin-top: min(calc(20% - 3px),330px);
	}
	.products p.bridge{
		margin-top: 64px;
		font-size: min(2.6vw,25px);
	}
	.products .bg-decorations{
		margin-top: 32px;
		margin-right: 0;
	}
	.products .bg-decorations .decorationcircle:last-of-type{
		margin-top: 26px;
	}
	.products .products_list{
		display: flex;
		flex-wrap: wrap;
	}
	.products .products_list li{
		width: 50%;
		flex-flow: column;
	}
	.products .products_list li .text_box{
		position: static;
		width: 80%;
		margin-right: auto;
		margin-left: auto;
	}
	.products .products_list li:nth-of-type(2n+1) .text_box{
		margin-top: min(calc(10% - 2px),60px);
		margin-right: auto;
		margin-left: auto;
	}
	.products .products_list li:nth-of-type(2n) .text_box{
		padding-top: 0;
		margin-top: min(calc(6% + 1px),41px);
		margin-right: auto;
		order: 1;
	}
	.products .products_list li.aesthetic .text_box{
		margin-top: min(calc(3% + 2px),43px);
	}
	.products .products_list .text_box hgroup p{
		font-size: min(1.56vw,21px);
	}
	.products .products_list .text_box > p{
		max-width: 310px;
		font-size: min(2.08vw,18px);
  		margin-left: auto;
  		margin-right: auto;
	}
	.products .products_list .ndt .text_box>p{
		letter-spacing: 0.08em;
	}
	.products .products_list .img_box{
		width: 100%;
		margin-top: auto;
	}
	.products .products_list li:nth-of-type(2n) .img_box{
		order: 0;
		margin-top: 0;
	}
	.products .products_list .medical .img_box,.products .products_list .ndt .img_box{
		margin-top: 30px;
		width: 100%;
	}
	.products .button{
		margin-top: 50px;
	}
}
@media screen and (min-width: 850px) {
	.products .products_list li:nth-of-type(2) .text_box{
		margin-top: 10px;
	}
}
@media screen and (min-width: 1270px) {
	.products{
		padding-bottom: 100px;
	}
	.products p.bridge{
		margin-top: 60px;
	}
	.products .bg-decorations{
		max-width: 1033px;
		width: 69%;
		display: flex;
		margin-top: 134px;
		margin-right: 0;
    	left: 0;
    	margin-left: 63%;
	}
	.products .bg-decorations .decorationcircle:last-of-type{
		margin-top: 0;
		margin-left: 40px;
	}
	.products .inner{
		margin-left: 19.2%;
		max-width: 540px;
	}
	.products .products_list li{
		width: 25%;
	}
	.products_list .ndt .img_box{
		margin-top: 45px;
	}
	.products .products_list li:nth-of-type(2n+1) .text_box{
		margin-top: 60px;
	}
	.products .products_list li:nth-of-type(2n) .text_box{
		margin-top: 40px;
	}
	.products .products_list .text_box hgroup span{
		font-size: 22px;
	}
	.products .products_list .text_box > p{
		max-width: 385px;
		margin-top: 48px;
	}
	.products .products_list .ndt .text_box > p{
		margin-top: 38px;
	}
	.products .products_list .medical .img_box{
		margin-top: auto;
	}
	.products .button{
		padding: 0;
		height: 74px;
		line-height: 74px;
	}
}
@media screen and (min-width: 1920px) {
	.products .outer{
		position: relative;
	}
	.products .inner{
		margin-left: 21.6%;
	}
	.products .products_list{
		margin-top: 53px;
	}
}
/*=========================================
04.TOPICS
=========================================*/
.topics {
	margin-top: min(calc(16% - 2px),100px);
	position: relative;
}
.topics .bg-decorations{
	margin-top: 63%;
  	margin-bottom: auto;
	margin-left: -33px;
	top: 0;
	bottom: 0;
	left: 0;
}
.topics .bg-decorations .decorationcircle:last-of-type{
	margin-top: 25px;
}
.topics .text_box{
	width: calc(91% - 1px);
	margin-left: 5%;
}
.topics dl{
	margin-top: min(calc(12% + 2px),50px);
	font-size: min(2.67vw,16px);
	letter-spacing: 0.05em;
}
.topics dl .topics_item{
	padding-bottom: 5px;
	border-bottom: solid 1px #CCCCCC;
	display: flex;
	margin-top: 4%;
}
.topics dl .topics_item:first-of-type{
	margin-top: 0;
}
.topics dl .topics_item dt{
	font-weight: normal;
}
.topics dl .topics_item dd{
	margin-left: 4%;
	width: calc(67% - 2px);
	line-height: 1.5;
	position: relative;
	top: -1px;
}
.topics .img_box{
	margin-top: min(12%,80px);
	position: relative;
}
@media screen and (min-width: 768px) {
	.topics{
		margin-top: 0;
	}
	.topics .bg-decorations{
		left: 0;
  		margin-top: 18%;
  		margin-right: 0;
  		margin-left: auto;
		max-width: 325px;
		width: calc(36% - 1px);
	}
	.topics>.inner{
		width: calc(76% + 5px);
    	position: relative;
		padding-top: calc(13% + 1px);
		background-color: #F7FCFF;
	}
	.topics .text_box{
		width: 100%;
		margin-left: 0;
	}
	.topics .text_box .inner{
		width: calc(84% - 2px);
		margin-right: auto;
		margin-left: auto;
	}
	.topics dl {
		margin-top: min(calc(10% + 1px),55px);
		max-width: 646px;
	}
	.topics dl .topics_item{
		padding-bottom: 10px;
	}
	.topics dl .topics_item dt,.topics dl .topics_item dt{
		font-size: min(2.08vw,18px);
	}
	.topics dl .topics_item dd{
		width: 78%;
		line-height: 1.62;
	}
	.topics .img_box{
		margin-top: 80px;
	}
}
@media screen and (min-width: 1270px) {
	.topics .bg-decorations{
		width: 68%;
    	margin-top: 700px;
    	margin-left: -16%;
		max-width: 1280px;
		display: flex;
	}
	.topics .bg-decorations .decorationcircle{
		max-width: 495px;
	}
	.topics .bg-decorations .decorationcircle:last-of-type{
		margin-top: 0;
		margin-left: 40px;
	}
	.topics>.inner{
		max-width: 1512px;
		width: 95%;
		display: flex;
		align-items: center;
		justify-content: space-between;
  		margin-right: 0;
  		margin-left: auto;
		background-color: transparent;
	}
	.topics .text_box{
		margin-left: 0;
		max-width: 746px;
		padding-top: min(4%,37px);
		padding-left: 57px;
		padding-bottom: min(3%,63px);
		background-color: #F7FCFF;
		position: absolute;
		z-index: 2;
		height: 500px;
	}
	.topics .text_box .inner{
		margin-left: 0;
		width: calc(94% - 1px);
	}
	.topics .img_box{
		width: 69%;
		max-width: 760px;
		margin-top: 0;
		margin-left: auto;
	}
	.topics dl .topics_item{
		font-size: 18px;
		padding-bottom: 10px;
		margin-top: 25px;
	}
	.topics dl .topics_item dt{
		width: 20%;
	}
	.topics dl .topics_item dd{
		width: 80%;
		margin-left: 14%;
	}
}
@media screen and (min-width: 1921px) {
	.topics .inner{
		margin-right: auto;
	}
}