@charset "utf-8";

body{
	margin:0px;
	padding:0px;
	color: #333;
	background-image: url("../img/top/bg.webp");
	background-repeat: repeat;
	font-family: 'Zen Kaku Gothic New', sans-serif;
	font-weight: 500;
}
a:hover img,a:hover{
 opacity:.5;
  -webkit-transition: .3s ease-in-out;
  transition: .3s ease-in-out;
	color: inherit;
 }

p,a{line-height: 2;letter-spacing: 0.05em;font-family: 'Zen Kaku Gothic New', sans-serif;color: #333;font-weight: 500;}

h1,h2,h3,h4,h5,h6{color: #333;font-family: 'Zen Kaku Gothic New', sans-serif;}

/*==================common==================*/

ul.lidisc{padding: 0 0 0 20px;margin: 0;}
ul.lidisc li{list-style: disc;margin: 0 0 5px;font-family: 'Zen Kaku Gothic New', sans-serif!important;}
.fontg1{font-family: 'Zen Kaku Gothic New', sans-serif!important;}
.fontg2{font-family: "Shippori Mincho", serif!important;}
.fontg3 {font-family: 'Zen Maru Gothic', sans-serif!important;}


.flbox{
  display: -ms-flexbox;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -ms-flex-wrap: wrap;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
}
.flbox2{
  display: -ms-flexbox;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -ms-flex-wrap: wrap;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
	flex-direction: column;
}

.flend{
	align-self: flex-end;
}

.flcenter{
  align-self: center;
}

.fljcenter{
  justify-content: center;
}


/*==================inview==================*/

.up {
	overflow: hidden;
	position: relative;
	opacity: 0;
	bottom: -50px;
}
.upstyle{
	opacity: 1;
	bottom: 0px;
	transition: 1s 0.3s;
}
.left {
	overflow: hidden;
	position: relative;
	opacity: 0;
	left: -200px;
}
.leftstyle{
	opacity: 1;
	left: 0px;
	transition: 1s 0.3s;
}
.right {
	overflow: hidden;
	position: relative;
	opacity: 0;
	right: -200px;
}
.rightstyle{
	opacity: 1;
	right: 0px;
	transition: 1s 0.3s;
}

/*==================header==================*/

header {
	margin-bottom: 0;
	width: 100%;
	position: fixed;
	top: 0;
	z-index: 9999;
	font-weight: 600!important;
	font-family: 'Zen Kaku Gothic New', sans-serif!important;
}

.hbg{
	background: #fff;
	box-shadow: 0 2px 10px 0 rgba(45,45,45,0.36);
	transition: 0.3s;
}

.logo{
	text-align: left;
	padding-left: 10px;
}
.logo a{
	display: block;
	width: 300px;
}

.reseve{
	background-image: url("../img/top/hresbg.webp");
	background-repeat: repeat;
	text-align: center;
}
.reseve:hover{
	transition: .5s;
}
.reseve a,.reseve a:hover{
	padding:20px 0;
	display: flex;
	flex-direction: column;
	color: #fff!important;
	height:100%;
	line-height: 30px;
	font-size: 20px;
	width: 140px;
}
.htel{
	display: flex;
	background-image: url("../img/top/htelbg.webp");
	background-repeat: repeat;
	text-align: center;
}
.htel:hover{
	transition: .5s;
}
.htel a,.htel a:hover{
	padding:20px 0;
	display: flex;
	flex-direction: column;
	color: #fff!important;
	height:100%;
	line-height: 30px;
	font-size: 22px;
	width: 170px;
}


@media only screen and (max-width: 1400px) {
.htel a,.htel a:hover{
	padding:20px 0;
	width: 140px;
	font-size: 20px;
}
.reseve a,.reseve a:hover{
	padding:20px 0; 
	width: 120px;
	font-size: 20px;
}
}
@media only screen and (max-width: 1300px) {
.logo a,.logo a:hover{
	width: 220px;
}
}

@media screen and (max-width:1200px){
header {
	margin-bottom: 0;
	width: 100%;
	height: 60px;
}
.logo{
	width: calc(100% - 300px);
	padding-left: 10px;
}
.logo a{
	width: 300px;
}
.htel a,.htel a:hover{
	display: block;
	padding: 15px 0;
	width: 180px;
}
.reseve{
	margin: 0 60px 0 0;
}
.reseve a,.reseve a:hover{
	display: block;
	padding: 15px 0;
	width: 150px;
}
}
@media screen and (max-width:576px){	
header {
	padding: 5px 0;
}
.logo{
	width: 100%;
	padding-left: 10px;
}
.logo a,.logo a:hover{
	width: 280px;
}
.reseve{display: none;}
.htel{display: none;}
}

/*==================slide==================*/

.slidebg{
	background-image: url("../img/top/slidebg.webp");
	background-repeat: no-repeat;
	background-position: top;
	background-size: auto;
	overflow: hidden;
}

.slidein{
	position: relative;
	max-width: 1500px;
	padding-right: var(--bs-gutter-x, 0.75rem);
	padding-left: var(--bs-gutter-x, 0.75rem);
	margin: auto;
	z-index: 3;
}

#slider-area{
	position: relative;
	z-index: 0;
    width:100%;
    height: 700px;
	overflow: hidden;
	background-color: #fff;
}

#slider-area #slider{
	position: relative;
	z-index: 0;
    width:100%;
    height: 700px;
	overflow: hidden;
}

@media screen and (max-width:1200px){
#slider-area{height: 600px;}
#slider-area #slider{height: 600px;}
}

@media screen and (max-width:576px){
#slider-area{
	position: relative;
	z-index: 0;
	left: 2.5%;
    width:95%;
    height: 120vw;
	overflow: hidden;
	background-color: #fff;
}
#slider-area #slider{
    height:120vw;
}
}

.slidertxt{
	position: absolute;
	height: calc(100% - 120px);
	padding: 40px;
	top: 120px;
	right: 80px;
	-ms-writing-mode: tb-rl;
	writing-mode: vertical-rl;
	letter-spacing: 0.1em;
	color:#fff;
	background-color: rgba(0,0,0,0.8);
	z-index: 2;
}
.slidertxt::before{
	content: "";
	position: absolute;
	top:calc(100% - 160px) ;
	left: calc(100% - 120px);
	width: 300px;
	height: 300px;
	background-image: url("../img/top/slidetxtbg.webp");
	background-repeat: no-repeat;
	background-size: contain;
	z-index: 4;
}
@media screen and (max-width:576px){
.slidertxt{
	padding: 20px;
	top:80px;
	right:inherit;
	left:20px;
	height: calc(100% - 80px);
}
.slidertxt::before{
	top:calc(100% - 60px) ;
	left: calc(100% - 230px);
	width: 240px;
	height: 240px;
}
}



/*==================main==================*/

.main{
	position: relative;
	background-image: url("../img/top/messbg.webp");
	background-repeat: no-repeat;
	background-position:top left;
	background-size: 20%;
	z-index: 1;
}
.main::before{
	content: "";
	position: absolute;
	top: -800px;
	right: -600px;
	width: 1600px;
	height: 1600px;
	background-image: url("../img/top/mainbg.webp");
	background-repeat: no-repeat;
	background-size: 100%;
	z-index: -1;
}
.main::after{
	content: "";
	position: absolute;
	bottom: -600px;
	right: 0;
	width: 840px;
	height: 490px;
	background-image: url("../img/top/messbg2.webp");
	background-repeat: no-repeat;
	background-size: 100%;
	z-index: -1;
}

.name::after{
	content: "";
	position: absolute;
	bottom:0;
	right: 0;
	width: 500px;
	height:312.5px;
	background-image: url("../img/top/name.webp");
	background-position: bottom right;
	background-size: contain;
	background-repeat: no-repeat;
	z-index: 1;
}

@media screen and (max-width:1600px){
.main{
	background-size: 20%;
	background-position:top left -100px;
}
.main::after{
	bottom: -600px;
	width: 720px;
	height: 420px;
}
.name::after{
	width: 400px;
}
}

@media screen and (max-width:1200px){
.main::after{
	width: 600px;
	height: 350px;
}
}

@media screen and (max-width:991px){
.main{
	background-image: url("../img/top/messbgsp.webp");
	background-position:top 500px right -50px;
	background-size: 40%;
}
.main::after{
	bottom: -560px;
	width: 480px;
	height: 280px;
}
}

@media screen and (max-width:576px){
.main{
	background-image: url("../img/top/messbgsp.webp");
	background-position:top 400px right -50px;
	background-size: 50%;
}
.main::before{
	top: -140px;
	right: inherit;
	left: -500px;
	width: 1000px;
	height: 1000px;
}
.main::after{
	bottom: -40px;
	right: inherit;
	left: 0;
	width: 360px;
	height: 210px;
	background-image: url("../img/top/messbg2sp.webp");
}
.name::after{
	width: 80%;
	height:100%;
}
}

/*==================clinic==================*/

.clinic{
	position: relative;
	z-index: 2;
}

.clinicb{
	position: absolute;
	top: calc(50% - 150px);
	left: 0;
	right:0;
	margin: auto;
	z-index: 9;
}

.infiniteslide ul{
	margin: 0;
	padding: 0;
}
.infiniteslide li{
	list-style: none;
	float: left;
	margin: 0;
}

@media screen and (max-width:576px){
.clinicb{
	bottom:calc(100% - 120px) ;
}
}

/*==================service==================*/

.serv{
	position: relative;
	display: block;
	background-color: #fff;
	padding: 10px;
	clip-path: polygon(0% 0%, 100% 0, 100% calc(100% - 20px), calc(100% - 20px) 100%, 0% 100%);
	z-index: 1;
}
.serv::after{
	content: "";
	position: absolute;
	bottom: -1px;
	right: -1px;
	width:0 ;
	height: 0;
	border-style: solid;
	border-width: 20px 20px 0 0;
	border-color:#BFBCBC transparent transparent transparent;
	z-index: 1;
}


/*==================child==================*/

.childbg{
	position: relative;
	background-image: url("../img/top/chibg.webp");
	background-repeat: repeat;
	z-index: 1;
}
.childbg::after{
	bottom:100%;
	background-image: url("../img/top/chibgt.webp");
	background-position: bottom;
}
.childbg::before{
	top:100%;
	background-image: url("../img/top/chibgb.webp");
	background-position: top;
}
.childbg::after,.childbg::before{
	content: "";
	position: absolute;
	left: 0;
	width:100%;
	height: 600px;
	background-repeat: no-repeat;
	background-size: auto;
	z-index: -1;
}

.child{
	position: relative;
	z-index: 1;
}
.child::after{
	bottom:80%;
	left: -120px;
	width: 1200px;
	height: 1200px;
	background-image: url("../img/top/chibgw1.webp");
	background-repeat: no-repeat;
	background-size: contain;
	z-index: -1;
}
.child::before{
	top:40%;
	right: 0;
	width: 1200px;
	height: 1800px;
	background-image: url("../img/top/chibgw2.webp");
	background-repeat: no-repeat;
	background-position: right;
}
.child::after,.child::before{
	content: "";
	position: absolute;
	background-size: contain;
	z-index: -1;
}

.childsbg1 {background-color: #F9F0E4 ;background-image: url("../img/top/chilbg1.webp");}
.childsbg2 {background-color: #F1F7EA ;background-image: url("../img/top/chilbg2.webp");}
.childsbg3 {background-color: #E8F1F5 ;background-image: url("../img/top/chilbg3.webp");}

.childsbg1,.childsbg2,.childsbg3{
	background-repeat: no-repeat;
	background-position: bottom right;
	background-size: 80% auto;
}

.childimg1,.childimg2,.childimg3{
	position: relative;
	z-index: 1;
}
.childimg1::after{background-image: url("../img/top/childo1.webp");}
.childimg2::after{background-image: url("../img/top/childo2.webp");}
.childimg3::after{background-image: url("../img/top/childo3.webp");}
.childimg1::after,.childimg2::after,.childimg3::after{
	content: "";
	position: absolute;
	bottom: -80px;
	right: 0px;
	width: 130px;
	height: 130px;
	background-repeat: no-repeat;
	background-size: contain;
	z-index: 1;
}

.childb1 {background-color: #fff ;border:2px solid #D6A059;}
.childb2 {background-color: #fff ;border:2px solid #82AA52;}
.childb3 {background-color: #fff ;border:2px solid #5F97B0;}

.childc1 {color: #D6A059 ;}
.childc2 {color: #82AA52 ;}
.childc3 {color: #5F97B0 ;}

.stfcc1{background-color: #D6A059;}.stfcc1:before{border-color:  #D6A059 transparent transparent transparent;}
.stfcc2{background-color: #82AA52;}.stfcc2:before{border-color:  #82AA52 transparent transparent transparent;}
.stfcc3{background-color: #5F97B0;}.stfcc3:before{border-color:  #5F97B0 transparent transparent transparent;}

.childt{
	position: relative;
	color:#fff;
}
.childt::before{
	content: "";
	position: absolute;
	top:55%;
	left: 45%;
	transform: translate(-50%, -50%);
	width: 2em;
	height: 2em;
	background-image: url("../img/top/childt.webp");
	background-size: contain;
	background-repeat: no-repeat;
	z-index: -1;
}

@media screen and (max-width:1600px){
.child::after{
	bottom:90%;
	left: -120px;
	width: 1000px;
	height: 1000px;
	background-image: url("../img/top/chibgw1.webp");
}
.child::before{
	top:40%;
}
.childimg1::after,.childimg2::after,.childimg3::after{
	right: -20px;
}
}

@media screen and (max-width:1200px){
.childimg1::after,.childimg2::after,.childimg3::after{
	bottom: -60px;
	right: -20px;
	width: 100px;
	height: 100px;
}
}

@media screen and (max-width:991px){
.child::before{
	top:60%;
}
}

@media screen and (max-width:576px){
.child::after{
	bottom:inherit;
	top:-300px;
	left: 0;
	width: 100%;
	height: 600px;
	background-image: url("../img/top/chibgw1.webp");
	background-size: contain;
	z-index: -1;
}
.child::before{
	top:inherit;
	bottom:-180px;
	right: 0;
	width: 100%;
	height: 5000px;
	background-image: url("../img/top/chibgw2sp.webp");
	background-repeat: no-repeat;
	background-size: contain;
	background-position: bottom right;
}
.childimg1::after,.childimg2::after,.childimg3::after{
	bottom: -60px;
	right: 0px;
	width: 120px;
	height: 120px;
}
}

.kobito{
	position: relative;
}

.kobitot{
	position: relative;
	display: inline-block;
	padding: 20px 20px 20px 0;
	color:#fff;
}
.kobitot::before{
	content: "";
	position: absolute;
	width: 500px;
	height: 100%;
	top:0;
	right: 0;
	background-color: #A99D89;
	z-index: -1;
}


/*==================point==================*/

.pointtxt1,.pointtxt2{
	position: relative;
	z-index: 1;
}
.pointtxt1::before,.pointtxt2::before{
	content: "";
	position: absolute;
	top: 0;
	width: 200vw;
	height: calc(100% - 20px);
	background: #fff;
	z-index: -1;
}
.pointtxt1::before{left: -50vw;}
.pointtxt2::before{right: -50vw;}
.pointtxt1::after{
	left: -300px;
	background-image: url("../img/top/pointbg1.webp");
	background-position:center right;
}
.pointtxt2::after{
	right: -300px;
	background-image: url("../img/top/pointbg2.webp");
	background-position:center left;
}
.pointtxt1::after,.pointtxt2::after{
	content: "";
	position: absolute;
	top: 0;
	width: 300px;
	height: calc(100% - 20px);
	background-repeat: no-repeat;
	background-size: auto 100%;
	z-index: -1;
}
@media screen and (max-width:1600px){
.pointtxt1::after{left: -150px;}
.pointtxt2::after{right: -150px;}
}
@media screen and (max-width:1400px){
.pointtxt1::after{left: -170px;}
.pointtxt2::after{right: -170px;}
}
@media screen and (max-width:1300px){
.pointtxt1::after{
	width: 150px;
	background-image: url("../img/top/pointbg1md.webp");
	left: -100px;
}
.pointtxt2::after{
	width: 150px;
	background-image: url("../img/top/pointbg2md.webp");
	right: -100px;
}
}
@media screen and (max-width:1200px){
.pointtxt1::after{
	width: 200px;
	left: -150px;
}
.pointtxt2::after{
	width: 200px;
	right: -150px;
}
}
@media screen and (max-width:991px){
.pointtxt1::after,.pointtxt2::after{
	width: 100vw;
	left: 50%;
	transform: translate(-50%,0);
	background-image:url("../img/top/pointbg1md.webp"), url("../img/top/pointbg2md.webp");
	background-position:center left -100px,center right -100px;
	background-repeat: no-repeat;
	background-size: auto 100%;
}
}
@media screen and (max-width:576px){
.pointtxt1::after,.pointtxt2::after{
	width: 100%;
	height: 100%;
	left: 0;
	transform: translate(0);
	background-image: url("../img/top/pointbgsp.webp");
	background-size: contain;
	background-position:bottom right;
}
}

/*==================info==================*/

.info{
	background-image:url("../img/top/infobg.webp");
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
}

.btnlink {
	display: block;
	position: relative;
	border: #DDCE99 solid 1px;
	clip-path: polygon(0% 0%, 100% 0, 100% calc(100% - 20px), calc(100% - 20px) 100%, 0% 100%);
	z-index: 1;
}
.btnlink::after{
	content: "";
	position: absolute;
	bottom: -1px;
	right: -1px;
	width:0 ;
	height: 0;
	border-style: solid;
	border-width: 20px 20px 0 0;
	border-color:#CEBD82 transparent transparent transparent;
	z-index: 1;
}


/*==================footer==================*/

footer {
	margin:0;
	position: fixed;
    bottom:0;
	width:100%;
	padding:0;
	z-index: 9999;
}

ul.foot{display: none;}

#sidelink{display: none;}

@media screen and (max-width:576px){

ul.foot{
	list-style: none;
	display: block;
	margin: 0;
	padding: 0;
}
	
ul.foot li{
	float: left;
	width: 50%;
	margin: 0;
	padding: 0;
}

#sidelink{display: none;}
	
}

/*==================back top==================*/

.back-top{
	position: fixed;
	bottom: 0;
	right: 40px;
	z-index: 9999;
	opacity: 0;
  -webkit-transition: .3s ease-in-out;
  transition: .3s ease-in-out;
}
.back-top a{
	width: 120px;
	height: 120px;
	display: block;
	color: #fff;
	text-align: center;
	text-decoration: none;
}

.bt-visible{
	opacity: 1!important;
  -webkit-transition: .3s ease-in-out;
  transition: .3s ease-in-out;
}

@media screen and (max-width:576px){
	.back-top{
		position: fixed;
		bottom: 50px;
		right: 1.5%;
		z-index: 9999;
	}
	.back-top a{
		width: 70px;
		height: 70px;
		display: block;
		color: #fff;
		text-align: center;
		text-decoration: none;
	}
}


/*==================info==================*/ 
.intro{width: 30%;}
.map{width: 70%;}

.time {
	width: 100%;
	margin: 0 auto;
	font-weight: 600;
	font-family: 'Zen Kaku Gothic New', sans-serif!important;
}
.time th {
	padding:0 4px 10px;
	word-break: break-all;
	text-align: center;
	font-weight: 600;
	font-size: 18px!important;
	color: #333;
	letter-spacing: .2em;
}
.time td {
	padding:10px 4px;
	word-break: break-all;
	text-align: center;
	font-size: 18px!important;
	border-top: 2px solid #D1D1CE;
	color: #333;
	font-weight: bold;
}
.timea {
	width: 100%;
	margin: 0 auto;
	font-weight: 600;
	font-family: 'Zen Kaku Gothic New', sans-serif!important;
}
.timea th {
	padding:0 4px 10px;
	word-break: break-all;
	text-align: center;
	font-weight: 600;
	font-size: 18px!important;
	color: #333;
	letter-spacing: .2em;
}
.timea td {
	padding:10px 4px;
	word-break: break-all;
	text-align: center;
	font-size: 18px!important;
	border-top: 1px solid #9E9E9E;
	color: #333;
	font-weight: bold;
}
@media only screen and (max-width: 1800px) {
.intro{width: 35%;}
.map{width: 65%;}
}
@media only screen and (max-width: 1600px) {
.intro{width: 40%;}
.map{width: 60%;}
}
@media only screen and (max-width: 1400px) {
.intro{width: 50%;}
.map{width: 50%;}
}
@media only screen and (max-width: 991px) {
.intro{width: 100%;}
.map{width: 100%;}
	.time th,.timea th {
		padding:10px 2px;
		font-size: 16px!important;
		letter-spacing: 0.2;
	}
	.time td,.timea td {
		padding:10px 2px;
		font-size: 16px!important;
	}
}

.five{
	background:url("../img/top/fivebg.webp"),rgba(226,217,199,1.00);
	background-repeat: no-repeat;
	background-size: 40%,auto;
	background-position: top left;
}

.fivest{
	overflow: hidden;
	width: 100%;
}
.fivest span{
	position: relative;
	color: rgba(55,41,15,1.00);
}
.fivest span::before,.fivest span::after{
	content: "";
	position: absolute;
	top:50%;
	width: 600px;
	height: 1px;
	background-color: rgba(170,155,126,1.00);
}
.fivest span::before{left: calc(100% + 20px);}
.fivest span::after{right: calc(100% + 20px);}

@media only screen and (max-width: 991px) {
.five{
	padding-right:20px;
	padding-left:20px; 
	background-size:auto 100%,auto;
	background-position: center;
}
}


/*==================内部ページ==================*/

.title{
	position: absolute;
	height:100%;
	padding: 40px;
	top: 0;
	left: 40px;
	-ms-writing-mode: tb-rl;
	writing-mode: vertical-rl;
	letter-spacing: 0.1em;
	color:#fff;
	background-color: rgba(0,0,0,0.5);
	z-index: 2;
}

.titleimg{
	position: relative;
	top:0;
	left: 0;
	width: 100%;
	height: 350px;
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
}

@media only screen and (max-width: 576px) {
.title{
	padding: 20px 20px 0;
	top: 0;
	left: 0;
}
.titleimg{
	height: 250px;
}
}

.sec{
	position: relative;
	background-image: url("../img/top/chibg.webp");
	background-repeat: repeat;
	z-index: 1;
}
.sec::after{
	bottom:100%;
	background-image: url("../img/top/chibgt.webp");
	background-position: bottom;
}
.sec::before{
	top:100%;
	background-image: url("../img/top/chibgb.webp");
	background-position: top;
}
.sec::after,.sec::before{
	content: "";
	position: absolute;
	left: 0;
	width:100%;
	height: 600px;
	background-repeat: no-repeat;
	background-size: auto;
	z-index: -1;
}

@media only screen and (max-width: 576px) {
.sec::after,.sec::before{
	height: 300px;
	background-size: auto 100%;
}
}

.st{
	display: inline-block;
	position: relative;
	padding: 30px 30px 30px 0;
	color:#fff;
	line-height: 1.5;
}
.st::before{
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	width: 100vw;
	height: 100%;
	background-color: #A99D89;
	clip-path: polygon(0% 0%, 100% 0, 100% calc(100% - 20px), calc(100% - 20px) 100%, 0% 100%);
	z-index: -1;
}
.st::after{
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	width: 100%;
	height: 100%;
	background-image: url("../img/top/stbg.webp");
	background-repeat: no-repeat;
	background-size: auto 100%;
	background-position: center right;
	clip-path: polygon(0% 0%, 100% 0, 100% calc(100% - 20px), calc(100% - 20px) 100%, 0% 100%);
	z-index: -1;
}

.st-2{
	display: inline-block;
	position: relative;
	padding: 30px 0 30px 30px;
	color:#fff;
	line-height: 1.5;
}
.st-2::before{
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100%;
	background-color: #A99D89;
	clip-path: polygon(0% 0%, 100% 0, 100% 100%, calc(0% + 20px) 100%, 0 calc(100% - 20px));
	z-index: -1;
}
.st-2::after{
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	width: 100%;
	height: 100%;
	background-image: url("../img/top/stbg2.webp");
	background-repeat: no-repeat;
	background-size: auto 100%;
	background-position: center left;
	clip-path: polygon(0% 0%, 100% 0, 100% 100%, calc(0% + 20px) 100%, 0 calc(100% - 20px));
	z-index: -1;
}


@media only screen and (max-width: 576px) {
.st{
	padding: 20px 20px 20px 0;
}
.st-2{
	padding: 20px 20px 20px 0;
}
.st-2::before{
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	left: inherit;
	width: 100vw;
	height: 100%;
	background-color: #A99D89;
	clip-path: polygon(0% 0%, 100% 0, 100% calc(100% - 20px), calc(100% - 20px) 100%, 0% 100%);
	z-index: -1;
}
.st-2::after{
	content: "";
	position: absolute;
	top: 0;
	left: inherit;
	right: 0;
	width: 100%;
	height: 100%;
	background-image: url("../img/top/stbg.webp");
	background-repeat: no-repeat;
	background-size: auto 100%;
	background-position: center right;
	clip-path: polygon(0% 0%, 100% 0, 100% calc(100% - 20px), calc(100% - 20px) 100%, 0% 100%);
	z-index: -1;

}
}

.st2{
  position: relative;
  padding: 1rem 1rem calc(1rem + 10px);
}

.st2:before {
  position: absolute;
  top: 5px;
  left: 5px;
  width: 100%;
  height: calc(100% - 10px);
  content: '';
  border-top: 1px solid #fff;
  border-bottom: 1px solid #fff;
}

.bg-color-primary-light .st2{
  background: #fff;
}

.st3{
	position: relative;
	z-index: 1;
	padding: 0.5em;
	text-align: center;
}
.st3::before{
  content: "";
  position: absolute;
	height: 2px;
	width: 100%;
  bottom: -5px;
	left: 0;
	background-color: #444;
}
.st3::after{
  content: "";
  position: absolute;
  top: calc(100% + 3px);
  left: 50%;
  margin-left: -15px;
  border: 15px solid transparent;
  border-top: 15px solid #444;
}

.st3-2{
	position: relative;
	z-index: 1;
	padding: 0.5em;
	text-align: center;
}
.st3-2::before{
  content: "";
  position: absolute;
	height: 2px;
	width: 100%;
  bottom: -5px;
	left: 0;
	background-color: #b7ac9b;
}
.st3-2::after{
  content: "";
  position: absolute;
  top: calc(100% + 3px);
  left: 50%;
  margin-left: -15px;
  border: 15px solid transparent;
  border-top: 15px solid #b7ac9b;
}

.st4{
	display: inline-block;
  position: relative;
	padding: 1em;
	line-height: 2;
}
.st4:after {
  position: absolute;
  content: " ";
  border-top: double 4px #B19656;
  border-bottom: double 4px #B19656;
  border-left: double 4px #B19656;
  bottom: 0;
	left: 0;
  width: 2em;
	height: 100%;
}
.st4::before {
  position: absolute;
  content: " ";
  border-top: double 4px #B19656;
  border-bottom: double 4px #B19656;
  border-right: double 4px #B19656;
  bottom: 0;
	right: 0;
  width: 2em;
	height: 100%;
}

.st5{
	padding: 0 0 0 10px;
	border-left: 4px solid #b7ac9b;
}

.st6 {
	position: relative;
	z-index: 1;
}
.st6::before{
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 100vw;
	height: 2px;
	background-color: #b7ac9b;
	z-index: -1;
}
.st6 span{
	padding: 0.3em 0.7em;
	background-color: #b7ac9b;
	color:#fff;
}



.stf{
    position: relative;
    padding: 0.5em 1em;
	letter-spacing: 0.1em;
	line-height: 1.5;
	color: #fff;
	border-radius: 10px;
	z-index: 1;
}
.stf:before{
	content: "";
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 1.5em 1.4em 1.5em 1.4em;
	position: absolute;
	bottom:-2em;
	left: 1em;
	z-index: -1;
}

.stfc1{background-color: #b7ac9b;}.stfc1:before{border-color:  #b7ac9b transparent transparent transparent;}
.stfc2{background-color: #645142;}.stfc2:before{border-color:  #645142 transparent transparent transparent;}
.stfc3{background-color: #444;}.stfc3:before{border-color:  #444 transparent transparent transparent;}

.sttip{
	position: relative;
	margin: -2em 0.5em 0.5em;
	background-color: #fff;
	border: 2px solid #A28A60;
	padding: 10px 20px 15px;
	font-family: 'Kosugi Maru', sans-serif;
	border-radius: 0 5px 20px 20px;
}
.sttip::before {
  position: absolute;
  content: '';
  top: -2px;
  left: -12px;
  border: none;
  border-top: solid 1.2em transparent;
  border-right: solid 10px #A28A60;
}
@media only screen and (max-width: 480px) {
.sttip{
	position: relative;
	margin: 0 0 0.8em -1.7em;
	background-color: #fff;
	border: 2px solid #A28A60;
	padding: 0.8em 0.8em 0.8em 1.2em;
	font-size: 20px;
	border-radius: 0 20px 20px 0;
}
.sttip::before {
  position: absolute;
  content: '';
  top: 100%;
  left: -0.1em;
  border: none;
  border-bottom: solid 1em transparent;
  border-right: solid 0.7em #A28A60;
}
}

table.com{
	font-size: 14px;
	margin:0;
	padding: 4px;
	width:100%;
    border-collapse:separate;
	border-spacing:4px;
	empty-cells:show;
	font-family: 'Zen Kaku Gothic New', sans-serif!important;
}
.com th,.com td{
	font-weight: 500;
    padding:10px;
}
.com th{
	text-align: center;
}

table.comno{
	margin:0;
	padding: 4px;
	width:100%;
    border-collapse:separate;
    border-spacing:4px;
    empty-cells:show;
	font-family: 'Zen Kaku Gothic New', sans-serif!important;
}
.comno th,.comno td{
	font-weight: 500;
    padding:10px;
}

table.comnod{
	margin:0;
	padding: 4px;
	width:100%;
    border-collapse:separate;
    border-spacing:4px;
    empty-cells:show;
	font-family: 'Zen Kaku Gothic New', sans-serif!important;
}
.comnod th,.comnod td{
	font-weight: 500;
    padding:10px;
	font-size: 14px;
}

table.com2{
	font-size: 14px;
	margin:0;
	padding: 4px;
	width:100%;
    border-collapse:collapse;
    border-spacing:0;
    empty-cells:show;
	border-top: solid 1px #ccc;
	border-left: solid 1px #ccc;
	font-family: 'Zen Kaku Gothic New', sans-serif!important;
}
.com2 th,.com2 td{
	font-size: 16px;
	font-weight: 500;
    padding:10px;
	border-bottom: solid 1px #ccc;
	border-right: solid 1px #ccc;
}

table.com2no{
	margin:0;
	padding: 4px;
	width:100%;
    border-collapse:collapse;
    border-spacing:0;
    empty-cells:show;
	border-top: solid 1px #ccc;
	border-left: solid 1px #ccc;
	font-family: 'Zen Kaku Gothic New', sans-serif!important;
}
.com2no th,.com2no td{
	font-size: 16px;
	font-weight: 500;
    padding:10px;
	border-bottom: solid 1px #ccc;
	border-right: solid 1px #ccc;
}


table.price{
	margin:0;
	padding: 4px;
	width:100%;
    border-collapse:collapse;
    border-spacing:0;
    empty-cells:show;
	border-top: solid 1px #ccc;
	border-left: solid 1px #ccc;
	font-family: 'Zen Kaku Gothic New', sans-serif!important;
}
.price th,.price td{
	font-size: 14px;
	font-weight: 500;
    padding:10px;
	border-bottom: solid 1px #ccc;
	border-right: solid 1px #ccc;
}

@media only screen and (max-width: 480px) {
.com td,.com th,.com2 td,.com2 th {
	width: 100%;
  display: block;
  padding: 10px;
}
	
}

.listimg{width: 50%;height: 100%;}
.listr{
    background: -moz-linear-gradient(0deg, rgba(228,236,241,1.00)0%, rgba(228,236,241,0)40%);
    background: -webkit-linear-gradient(0deg, rgba(228,236,241,1)0%, rgba(228,236,241,0)40%);
    background: linear-gradient(90deg, rgba(228,236,241,1)0%, rgba(228,236,241,0)40%);
}
.listl{
    background: -moz-linear-gradient(180deg, rgba(252,250,243,1.00)0%, rgba(252,250,243, 0)40%);
    background: -webkit-linear-gradient(180deg, rgba(252,250,243, 1)0%, rgba(252,250,243, 0)40%);
    background: linear-gradient(-90deg, rgba(252,250,243, 1)0%, rgba(252,250,243, 0)40%);
}

@media only screen and (max-width: 991px) {
.listimg{width: 100%;height: 450px;}
.listr{
    background: -moz-linear-gradient(90deg, rgba(228,236,241,)0%, rgba(228,236,241,0)40%);
    background: -webkit-linear-gradient(90deg, rgba(228,236,241,1)0%, rgba(228,236,241,0)40%);
    background: linear-gradient(0deg, rgba(228,236,241,1)0%, rgba(228,236,241,0)40%);
}
.listl{
    background: -moz-linear-gradient(90deg, rgba(252,250,243, 1)0%, rgba(252,250,243, 0)40%);
    background: -webkit-linear-gradient(90deg, rgba(252,250,243, 1)0%, rgba(252,250,243, 0)40%);
    background: linear-gradient(0deg, rgba(252,250,243, 1)0%, rgba(252,250,243, 0)40%);
}
}

@media only screen and (max-width: 991px) {
.listimg{width: 100%;height: 250px;}
}
	
.infobox{
	position: relative;
	top:0;
	z-index: -1;
	margin: 0 20px;
	padding: 20px;
	border-radius: 0 0 20px 20px;
	background-color: #fff;
	overflow: hidden;
}

.infoboxt{
	position: relative;
	bottom:0;
	z-index: -1;
	margin: 0 20px;
	border-radius:20px 20px 0 0 ;
	padding: 10px 10px 20px;
	text-align: center;
	background-color: #fff;
}
.infoboxt span{
	position: relative;
	padding: 0 0 5px;
	background-color: #fff;
	color: #655144;
	border-bottom: 4px dotted #ccc0a2;
	font-weight: 600;
}

.flow{
	position: relative;
	padding:20px 15px;
	background-color: rgba(255,255,255,1.00);
	margin: 0 0 40px
}
.flow::after {
  position: absolute;
  top: 100%;
  left: calc(50% - 30px);
  content: '';
  width: 0;
  height: 0;
  border: 30px solid transparent;
	border-top: 30px solid #fff;
}
.flow2{
	position: relative;
	padding:20px 15px;
	background-color: #E4DEC7;
	margin: 0 0 40px
}
.flow2::after {
  position: absolute;
  top: 100%;
  left: calc(50% - 30px);
  content: '';
  width: 0;
  height: 0;
  border: 30px solid transparent;
	border-top: 30px solid #E4DEC7;
}

.infost{
  font-weight: 600;
  color: #fff;
  padding: 0.3em 1em calc(0.3em + 16px);
  position: relative;
	border-radius: 0 0 20px 20px;
	text-align: center;
}
.infost::after {
  content: '';
  background-color: #fff;
  width: 100%;
  height: 4px;
  position: absolute;
  bottom: 16px;
  left: 0;
}

.eqst{
	position: relative;
	z-index: 1;
	padding: 1em 0.5em;
	text-align: center;
}
.eqst::before{
  content: "";
  position: absolute;
	height: 100%;
	width: 100%;
  top: 0;
	left: 0;
	border-top:solid 2px #3fbde0;
	border-bottom:solid 2px #3fbde0;
}
.eqst::after{
  content: "";
  position: absolute;
	height: calc(100% - 8px);
	width: 100%;
  top: 4px;
	left: 0;
	border-top:dotted 2px #3fbde0;
	border-bottom:dotted 2px #3fbde0;
}

.list-box {
	position: relative;
	margin: 20px 0 0;
	width: 100%;
	height: 100%;
    background-color: rgba(255,255,255,1.00);
	box-shadow: -15px 15px 30px 0 rgba(100,100,100,0.3);
}

.list-box:before {
	top:10px;
	right: 10px;
	position: absolute;
	content: "";
	border: 6px dotted #D5EDFB;
	width: calc(100% - 20px);
	height: calc(100% - 20px);
	pointer-events: none;
}


.doc{
	position: relative;
	padding:0 20px 0 0;
	z-index: 1;
}
.doc::after{
	content: "";
	position: absolute;
	top:150px;
	left: 0;
	width:100%;
	height: calc(100% - 300px);
	border-radius: 50px;
	z-index: -1;
}
.doc::after{background-color: #73C0D6;}
@media screen and (max-width:1200px){
.doc{
	padding: 0;
}
.doc::after{
	top:160px;
	left:0;
	height: calc(100% - 140px);
	border-radius: 50% 50% 0 0 / 150px 150px 0 0;
}
}

.docgree {
  position: relative;
  background-image:
  linear-gradient(90deg, rgba(0,0,0,0.00) 0%, rgba(0, 0, 0, 0) 50%, #eaf6fd 0%, #eaf6fd 100%), linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 95%, rgba(198,198,198,1.00) 100%);
  background-size: 8px 100%,100% 2em;
}
.docgree2 {
  position: relative;
  background-image:
  linear-gradient(90deg, rgba(0,0,0,0.00) 0%, rgba(0, 0, 0, 0) 50%, #fff 0%, #fff 100%), linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 95%, rgba(198,198,198,1.00) 100%);
  background-size: 8px 100%,100% 2em;
}

.docp{
	background-image: url("../img/doc/docbg.webp");
	background-size: 700px;
	background-repeat: no-repeat;
	background-position: bottom left -100px;
}
@media screen and (max-width:576px){
.docp{
	background-image: url("../img/doc/docbg.webp");
	background-size: 400px;
	background-repeat: no-repeat;
	background-position: bottom 300px right -100px;
}
}

/*==================comparison==================*/ 

.comp1,.comp2{
	position: relative;
	background-repeat: no-repeat;
	background-size: contain;
	background-position:center right;
}
.comp1{background:rgba(227,227,227,1.00);}
.comp2{background:rgba(255,255,255,1);}

.comp1::after,.comp2::after{
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
.comp1::after{
	background: url("../img/den/comp1.webp");
	background-position:center right;
	background-repeat: no-repeat;
	background-size: contain;
}
.comp2::after{
	background: url("../img/den/comp2.webp");
	background-position:center right;
	background-repeat: no-repeat;
	background-size: contain;
}
.comp1 p,.comp2 p{
	position: relative;
	line-height: 1.5;
	z-index: 2;
}
@media only screen and (max-width: 1400px) {
.comp1::after{
	background: url("../img/den/comp1.webp");
	background-position:center right;
	background-repeat: no-repeat;
	background-size: 80%;
}
.comp2::after{
	background: url("../img/den/comp2.webp");
	background-position:center right;
	background-repeat: no-repeat;
	background-size: 80%;
}
}
@media only screen and (max-width: 1200px) {
.comp1::after{
	background: url("../img/den/comp1.webp");
	background-position:center right;
	background-repeat: no-repeat;
	background-size: 70%;
}
.comp2::after{
	background: url("../img/den/comp2.webp");
	background-position:center right;
	background-repeat: no-repeat;
	background-size: 70%;
}
}
@media only screen and (max-width: 991px) {
.comp1::after{
	background: url("../img/den/comp1.webp");
	background-position:center right;
	background-repeat: no-repeat;
	background-size: contain;
}
.comp2::after{
	background: url("../img/den/comp2.webp");
	background-position:center right;
	background-repeat: no-repeat;
	background-size: contain;
}
}

@media only screen and (max-width: 576px) {
.comp1::after{
	background-position:bottom right;
	z-index: 1;
}
.comp2::after{
	background-position:bottom right;
	z-index: 1;
}
}