@charset "utf-8";
/* CSS Document */
@media screen and (max-width:900px){
	
	html {
		font-size: 8px;
	}
	body {
		max-width: 900px;
	}
	.sp-only {
		display: block;
	}
	.pc-only {
		display: none;
	}
	
	
	#header {
		width:100%;
		height: 100px;
		background:#fff;
	}
	#header .inner {
		position: absolute;
		top: 8vw;
		left: 50%;
		transform: translateX(-50%);
	}
	#header .inner h1 {
		width: 300px;
	}
	

	/*mainvisual*/
	#mainvisual {
		width: 100%;
		height: 70vh;
		margin: 0 auto;
	}
	#mainvisual::before {
		content: "";
		width: 100%;
		height: 40px;
	}
	.catch-copy {
		width: 95%;
		bottom: 100px;
		left: 50%;
		transform: translateX(-50%);
	}

	
	/*news-info*/
	#news-info .container {
		width: 95%;
	}
	.ni-con {
		width: 48%;
	}
	.ttl01 {
		font-size: 20px;
	}
	.ttl01 span {
		font-size: 16px;
	}
	.index-wrap {
		width: 95%;
	}
	.index-wrap dl {
		padding-bottom: 2rem;
		padding-left: 40px;
		font-size: 15px;
	}
	.news-dl,
	.blog-dl {
		position: relative;
	}
	.news-dl::before {
		content: "";
		width: 30px;
		height: 30px;
		background: url("../img/deco01.png");
		background-size: cover;
		position: absolute;
		top: 10px;
		left: 0;
	}
	.blog-dl::before {
		content: "";
		width: 30px;
		height: 30px;
		background: url("../img/deco02.png");
		background-size: cover;
		position: absolute;
		top: 10px;
		left: 0;
	}


	/*feature*/
	.sec-ttl {
		font-size: 28px;
	}
	.sec-ttl::before {
		content: "";
		width: 120px;
		height: 120px;
		opacity: 0.5;
	}
	.feature-wrap ul li {
		height: auto;
		flex-direction: column;
	}
	.feature-wrap ul li .txt,
	.feature-wrap ul li .img {
		width: 100%;
	}
	.feature-wrap ul li .txt {
		padding-top: 10rem;
		padding-bottom: 10rem;
		box-sizing: border-box;
	}
	.f-ttl-flex {
		justify-content: center;
		gap: 2rem;
		align-items: center;
	}
	.fno {
		font-size: 90px;
		letter-spacing: 3px;
	}
	.f-ttl {
		font-size: 24px;
		line-height: 1.8;
	}
	.f-txt {
		width: 70%;
		margin: 2rem auto 0 auto;
		line-height: 2;
		font-size: 18px;
	}

	
	
	/*treatment*/
	#treatment {
		margin: 15rem 0;
	}
	#treatment::before {
		content: "";
		width: 100%;
		height: 40px;
		top: -40px;
		left: 50%;
		transform: translateX(-50%);
	}
	#treatment::after {
		content: "";
		width: 100%;
		height: 40px;
		bottom: -40px;
		left: 50%;
		transform: translateX(-50%);
	}

	.tre-wrap-top {
		width: 95%;
	}
	.tre-wrap-top ul {
		justify-content: center;
		gap: 2rem;
	}
	.tre-wrap-top ul li {
		width: 45%;
	}
	.treatment-item {
		background: #fff;
		border-radius: 3rem;
		padding: 2rem 0 3rem 0;
		box-shadow: 0 2px 5px rgba(0,0,0,0.2);
	}
	.treatment-img {
		width: 95%;
		margin: 0 auto 3rem auto;
	}
	.tre-link {
		width: 70%;
	}
	.tre-wrap-top .tre-link {
		font-size: 20px;
		letter-spacing: 2.5px;
	}
	.tre-wrap-bottom {
		width: 90%;
	}
	.tre-wrap-bottom ul {
		justify-content: center;
		gap: 1rem;
	}
	.tre-wrap-bottom ul li {
		width: 30%;
	}
	.tre-wrap-bottom .tre-link {
		font-size: 16px;
		letter-spacing: 1.5px;
	}

	
	/*greeting*/
	#greeting .inner {
		width: 95%;
		flex-direction: column;
		gap: 3rem;
	}
	#greeting .inner .left {
		width: 70%;
	}
	#greeting .inner .right {
		width: 100%;
	}
	.greeting-b {
		font-size: 22px;
	}
	.greeting-s {
		font-size: 16px;
	}
	.greeting-name {
		font-size: 26px;
	}

	.page-link {
		width: 300px;
	}
	.page-link a {
		font-size: 18px;
	}


	/*insta*/
	.insta-index-wrap {
		max-width: 1000px;
		width: 95%;
		align-items: flex-start;
		justify-content: center;
		gap:1rem;
		margin: 10rem auto 5rem auto;
	}
	.insta-index-wrap .item {
		width: 30%;
	}

	.page-link a i {
		font-size: 20px;
	}


	/*footer*/
	#footer {
		margin-bottom: 60px;
	}
	.foot-logo {
		width: 300px;
		margin: auto;
	}
	.foot-adress {
		font-size: 16px;
	}
	.foot-adress i {
		font-size: 20px;
	}
	.foot-timetable {
		width: 95%;
	}
	.blog-link {
		align-items: center;
		justify-content: center;
		gap: 2rem;
	}
	.blog-link .item {
		width: 200px;
	}
	.foot-map {
		width: 100%;
		margin-top: 5rem;
	}
	.foot-map iframe {
		width: 100%;
	}


	#sp-btn {
		position: fixed;
		bottom: 0;
		left: 50%;
		z-index: 980;
    width: 100%;
		transform: translateX(-50%);
	}
	#sp-btn ul {
		justify-content: center;
    max-width: 900px;
    padding-bottom: 0;
    margin: 0 auto;
    position: relative;
	}
	#sp-btn .type1 ul::before {
		background: rgba(76, 190, 227, 0.7);
	}
	#sp-btn ul::before {
		content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: -1;
		background:#857659;
		backdrop-filter: blur(2px);
	}
	#sp-btn ul li {
		width: calc(100% / 4);
    margin: 0;
    padding: 10px 0 6px;
    text-align: center;
    line-height: 1.2;
    position: relative;
	}
	#sp-btn ul li a {
		display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 1;
		text-align: center;
	}
	#sp-btn ul li i {
		font-size: 3.6rem;
    font-family: "Font Awesome 5 Free";
    display: block;
    color: #fff;
    font-weight: 600;
    margin-bottom: 3px;
		text-align: center;
	}
	#sp-btn ul li span {
		display: block;
    font-size: 1.8rem;
    color: #fff;
		text-align: center;
	}
}



@media screen and (max-width:480px) {
	
	html {
		font-size: 6px;
	}
	body {
		max-width: 430px;
	}
	.spbr {
		display: block;
	}
	
	
	#header {
		width:100%;
		height: 80px;
		background:#fff;
	}
	#header .inner {
		position: absolute;
		top: 10vw;
		left: 50%;
		transform: translateX(-50%);
	}
	#header .inner h1 {
		width: 200px;
	}
	

	/*mainvisual*/
	#mainvisual {
		width: 100%;
		height: 35vh;
		margin: 0 auto;
	}
	#mainvisual::before {
		content: "";
		width: 100%;
		height: 15px;
		background-position: center;
	}
	.catch-copy {
		width: 95%;
		bottom: 50px;
		left: 50%;
		transform: translateX(-50%);
	}

	
	/*news-info*/
	#news-info .container {
		width: 95%;
		flex-direction: column;
		gap:5rem;
	}
	.ni-con {
		width: 100%;
	}
	.ttl01 {
		font-size: 20px;
	}
	.ttl01 span {
		font-size: 16px;
	}
	.index-wrap {
		width: 95%;
	}
	.index-wrap dl {
		padding-bottom: 2rem;
		padding-left: 40px;
		font-size: 15px;
	}
	
	


	/*feature*/
	.sec-ttl {
		font-size: 20px;
	}
	.sec-ttl::before {
		content: "";
		width: 80px;
		height: 80px;
		opacity: 0.5;
	}
	.fno {
		font-size: 50px;
	}
	.f-ttl {
		font-size: 17px;
		line-height: 1.8;
	}
	.f-txt {
		width: 90%;
		font-size: 16px;
	}

	
	
	/*treatment*/
	#treatment::before {
		content: "";
		width: 100%;
		height: 20px;
		top: -20px;
		left: 50%;
		transform: translateX(-50%);
	}
	#treatment::after {
		content: "";
		width: 100%;
		height: 20px;
		bottom: -20px;
		left: 50%;
		transform: translateX(-50%);
	}

	.tre-wrap-top {
		width: 95%;
	}
	.tre-wrap-top ul {
		flex-direction: column;
		gap: 2rem;
	}
	.tre-wrap-top ul li {
		width: 100%;
	}
	.tre-link {
		width: 70%;
	}
	.tre-wrap-top .tre-link {
		font-size: 20px;
		letter-spacing: 2.5px;
	}
	.tre-wrap-bottom {
		width: 95%;
	}
	.tre-wrap-bottom ul {
		justify-content: center;
		gap: 1rem;
	}
	.tre-wrap-bottom ul li {
		width: 45%;
	}
	.tre-wrap-bottom .tre-link {
		font-size: 16px;
		letter-spacing: 1.5px;
	}

	
	/*greeting*/
	#greeting .inner {
		width: 95%;
		flex-direction: column;
		gap: 3rem;
	}
	#greeting .inner .left {
		width: 90%;
	}
	#greeting .inner .right {
		width: 100%;
	}
	.greeting-b {
		font-size: 18px;
		text-align: center;
	}
	.greeting-s {
		font-size: 14px;
	}
	.greeting-name {
		font-size: 20px;
		text-align: center;
	}

	.page-link {
		width: 300px;
	}
	.page-link a {
		font-size: 18px;
	}



	/*footer*/
	#footer {
		margin-bottom: 50px;
	}
	.foot-logo {
		width: 300px;
		margin: auto;
	}
	.foot-adress {
		font-size: 14px;
	}
	.foot-adress i {
		font-size: 18px;
	}
	.foot-timetable {
		width: 95%;
	}
	.blog-link {
		align-items: center;
		justify-content: center;
		gap: 2rem;
	}
	.blog-link .item {
		width: 200px;
	}
	.foot-map {
		width: 100%;
		margin-top: 5rem;
	}
	.foot-map iframe {
		width: 100%;
	}
	.flex-3
{
    width: 100%;
    margin-bottom: 3%
}
    .flex-4
{
    width: 42%;
    margin-bottom: 3%;
}
	.price_box li {
  width: 100%;
        margin-bottom: 1rem;
}
    .flex-img {
  width: 100%;
        margin-bottom: 30px;
        text-align: center;
}
    .flex-txt {
  width: 100%;
        margin-bottom: 3%;
}
    .check_list li {
  width: 100%;    
}
}