@charset "UTF-8";

@media screen and (min-width: 751px) {
    .btn a:hover{background: #AD904C; color: #fff;}
    .btn a:hover::after{color: #fff;}
	.btn-nav-kousiki:hover{background-color: #1c1c1c; color: #998058;}
    .btn-nav-kousiki:hover::after{color: #998058;}
	.btn-nav-beauty-f:hover{ background-color: #355b46; color: #fff;}
	.btn-nav-beauty-f:hover::after{color: #fff;}
    .btn-nav-beauty-m:hover{ background-color: #f091b8; color: #fff;}
    .btn-nav-beauty-m:hover::after{color: #fff;}
	.btn-nav-line:hover{background: #06C755; color: #fff;}
	.btn-nav-line:hover::after{color: #fff;}
	.footer-btn-area .btn.btn-green a:hover{background: #355b46; color: #fff;}
	.footer-btn-area .btn.btn-green a:hover::after{color: #fff;}
	.footer-btn-area .btn.btn-pink a:hover{background: #f091b8; color: #fff;}
	.footer-btn-area .btn.btn-pink a:hover::after{color: #fff;}
	.footer-btn-area .btn.btn-blue a:hover{background: #fff; color: #4da1f7;}
	.footer-btn-area .btn.btn-blue a:hover::after{color: #4da1f7;}
	.btn-line a:hover{background: #06C755; color: #fff;}
	.btn-line a:hover::after{color: #fff;}
	.sns-circle:hover{opacity: .5;}

	.faq .accordion-title:hover::after {color: #fff;}
	.faq .accordion-title:hover {background: #998058; color: #fff;}
	.rs-btn.btn-web:hover{background-color: #AD904C; color: #fff;}
	.rs-btn.btn-web:hover::after{color: #fff;}
	.rs-btn.btn-line:hover{background-color: #06C755; color: #fff;}
	.rs-btn.btn-line:hover::after{color: #fff;}
	.btn-nav-web:hover{background: #AD904C; color: #fff;}
	.btn-nav-web:hover::after{color: #fff;}
	.nav-links a:hover{color: #AD904C;}

	.news .flex li:hover img{transform: translate(-50%, -50%) scale(1.2);}
	.bannerBox > a:hover{opacity: 0.7;}
}
@media screen and (max-width: 1100px) {
	.home .worry-list ul::before{width: 24%;}
	.home .worry-list ul::after{width: 24%;}
	.home .worry-list ul li{width: 24%;}
	.home .worry-list ul li .txt-area .btn a{font-size: 1.4rem;}
	.header-actions{display: none;}
}
@media screen and (max-width: 800px) {
    .header-actions{display: none;}
	.bannerBox > a{width: 80px;}
}
@media screen and (max-width: 768px) {
	.w1100{padding: 0 15px;}
	.logo-icon{width: 195px;}
	header.scrolled .logo-icon{width: 150px;}
	header { padding: 0 15px; height: 70px; }
	header.scrolled { height: 55px; }
	.home section{padding: 10% 0;}
	.fv{margin-top: 70px;}
	.fv .sp{display: block;}
	.fv .pc{display: none;}
	.nav-item{width: 100%;}
	
	.rs-btn span { display: none; } /* スマホはテキスト消す */
	/* スマホ用にボタンを円形にしてアイコンとして扱う場合 */
	.rs-btn { 
		padding: 0 10px; 
		width: 40px; 
		height: 40px; 
		border-radius: 50%; 
	}
	.rs-btn::after { display: none; } /* スマホの円形ボタンでは矢印を消す */
	
	/* もしスマホでアイコン画像を表示したい場合はここに指定 */
	/* 現在は色丸だけになります */

	header.scrolled .rs-btn { width: 36px; height: 36px; }
	.low-page .hosoku{font-size: 1.2rem; padding-left: 12px; text-indent: -12px;}
	
	.rs-btn span { display: none; }
	.rs-btn { padding: 0 10px; width: 40px; height: 40px;  border-radius: 50%;  }
	.rs-btn::after { display: none; }

	/* ドロワーメニュー調整 */
	.nav-inner { padding: 0 20px; flex-direction: column; }
	.nav-logo-area { width: 100%; text-align: center; margin-bottom: 30px; padding-bottom: 20px;}
	.nav-logo-icon { margin: 0 auto 10px; } /* 中央寄せ */
	.nav-content-area { width: 100%; display: flex; flex-direction: column; }
	
	/* 並び替え設定 */
	.nav-col { display: contents; }
	.nav-group-guide { order: 1; margin-bottom: 40px; }
	.nav-group-info { order: 2; margin-bottom: 40px; }
	.nav-group-reserve { order: 3; margin-bottom: 40px; }
	.nav-group-related { order: 4; margin-bottom: 40px; }
	.nav-group-sns { order: 5; margin-bottom: 40px; }
	
	/* スマホでのボタンフォントサイズ調整 */
	.nav-btn { font-size: 16px; }
	.nav-menu{padding-top: 30px;}

    .btn a{font-size: 1.6rem;}

	.home section.about{padding-top: 18%;}
	.home .flex .img{width: 100%; margin-bottom: 10px;}
	.home .flex .txt{width: 100%;}
	.home .flex .txt .btn{justify-content: center;}
	.medical .flex .item {width: 100%; margin-bottom: 20px;}
	.medical-menu .flex .item {width: 100%; margin-bottom: 20px;}
	.campaign .flex{margin-bottom: 20px;}
	.news .flex{margin-bottom: 20px;}
	.news .flex li{width: 100%; margin-bottom: 15px;}
	.news .flex li .txt-area{padding: 10px;}
	.news .flex li .title{font-size: 1.6rem; margin-bottom: 0;}
	.home .worry-list ul li .thum{width: 80%; margin-inline: auto;}
	.home .worry-list ul li .txt-area .btn a{font-size: 1.4rem; height: 40px;}
	.home .worry-list ul li .txt-area .btn a::after{content: none;}
	.home .worry-list ul li p{font-size: 1.2rem; margin-top: 0;}
	.home .about h1{font-size: 2.5rem;}
	.home .about p{font-size: 1.4rem;}
	.home h2{font-size: 2.8rem; margin-bottom: 15px;}
	.home .campaign .item{width: 49%; margin-bottom: 5px;}
	.home .worry-list ul li{width: 49%;}

	/* フッター   */
	.access .info-label{font-size: 1.2rem;}
	.access .info-content{font-size: 1.4rem;}
	.footer-inner .flex .left{width: 100%;}
	.footer-inner .flex .right{width: 100%;}
	.footer-inner .flex .right .item{width: 100%;}
	.access{padding: 15% 0;}
	.access .img{width: 100%;}
	.access .txt{width: 100%;}
	.access .map iframe{height: 250px;}
	.access .info-list{gap: 10px;}
	.access .btn{justify-content: center;}
	.access .schedule-details{margin-bottom: 20px;}
	.access .reverse{flex-direction: column-reverse;}
	.access .info-content p{font-size: 1.4rem;}

    /* 下層ページ */
	.low-page .contents section{padding: 10% 0;}
	.low-header {height: 130px; margin-top: 70px; background-position: right;}
	.low-header .logo{width: 100px;}
    .breadcrumb{margin-bottom: 45px;}
    .low-header h1{font-size: 2rem; left: 15px;}
    .low-header h1 br{display: block;}
	.low-page h2{font-size: 2.5rem; margin-bottom: 15px;}
	.low-page h2::after {height: 20px; top: -20px;}
	.low-page h2.small{font-size: 1.8rem;}
	.low-page h2 br.sp-block{display: block;}
	.low-page h2.small br.sp-block{display: block;}
	.low-page .contents h3{font-size: 2rem;}
	.low-page .contents h4{font-size: 1.8rem;}

	.low-page .flex.reverse{flex-direction: column-reverse;}
	.low-page .contents .flex .img{width: 100%; margin-bottom: 10px;}
	.low-page .contents .flex .txt{width: 100%;}
	.low-page .contents .list ul.flex li{width: 100%;}
	.low-page .contents p{font-size: 1.4rem;}
	.low-page .contents .list ul li{font-size: 1.4rem;}
	.low-page .contents .page-link.flex .btn{width: 100%;}
	.low-page .contents th, .low-page .contents td {padding: 10px 10px; font-size: 1.2rem;}
	.low-page .box .item{width: 100%!important;}

	.low-page .campaign ul li{width: 49%; margin-bottom: 5px;}

	.faq .accordion-title{align-items: baseline; padding: 10px 30px 10px 10px;}
	.faq .accordion-title span{margin-top: 0; width: 6%;}
	.faq .accordion-title p{width: 90%;}
	.faq .accordion-content{align-items: baseline;}
	.faq .accordion-content span{font-size: 1.4rem; width: 6%;}
	.faq .accordion-content p{font-size: 1.4rem; width: 90%;}
	.faq .accordion-title::after{right: 10px;}

	.loop ul{width: 200vw;}
	.loop li{width: 50vw;}
	
	.btn-flex .btn{margin: 5px;}
	.dermapen .biyou-seibun .item{width: 100%;}
	.flow .flex{gap: 0; justify-content: space-between;}
	.flow .flex .item{width: 48.5%;}
	.flow .flex .item .flow-img::after{border-width: 10px 15px; right: -5px;}
	.flow .flex .item h4{font-size: 1.6rem; letter-spacing: -0.03em;}
	.gakureki .flex .item ul li{font-size: 1.4rem;}

	.matrix .case .flex .item{width: 100%; margin-bottom: 30px;}
	.matrix .case .flex .item::after{width: 100%; height: 1px; top: inherit; bottom: -20px; right: 0;}

	.guide .flex .btn{margin: 5px;}
	.beauty-price .sp-block{display: block;}
	.beauty-price h2 span{font-size: 1.6rem;}
	.access a.tel{
		pointer-events: all;
	  }
	.footer-address{margin-bottom: 20px;}
	.footer-address a{
		pointer-events: all;
	  }
}
@media screen and (max-width: 500px) {
	.bannerBox{display: none;}
	.sp-cta{display: flex; z-index: 10;}
	footer {padding-bottom: 15%;}
}