@charset "UTF-8";

/* レスポンシブ用CSS */

/* ------------------------------------------
	BASIC
--------------------------------------------- */



@media(max-width:10800px) and (min-width:600px){
	html{
		scroll-behavior:smooth;
	}
	
	body{
		font-size:16px;
	}
}

@media(max-width:767px){
	html{
		scroll-behavior:smooth;
	}

	body{
		font-size:16px;
	}
}

/* ------------------------------------------
	main
--------------------------------------------- */

/* --- 全ページ共通 -------------------------------- */

@media(max-width:1239px) {
	body, header, footer {
		min-width: 100%;
		width: 100%;
	}
	.content-width {
        width: 94%;
        padding: 40px 20px 80px;
        margin: 0 auto;
    }
}
@media(max-width:960px){
	.content-width {
		width: 90%;
		padding: 30px 0;
		margin-bottom: 40px;
        padding-bottom: 50px;
	}
	main > article > section:last-child .content-width{
		padding-bottom: 10px;
		margin-bottom: 10px;
	}
	.sub-flexbox{
		width: 100%;
		margin: 0 auto;
	}
}

@media(max-width:767px){

	.content-width{
        padding: 0 0 48px;
    }
	h2 {
		font-size: var(--sp-h2-font-size);
		margin-bottom: 30px;
	}
	.flex-wapper {
		width: 100%;
	}
	main {
		padding-top: 0 !important;
	}
	.content-top.fuwa-fade {
		animation: none;
		animation-duration: unset;
		opacity: 1;
	}
	p {
		text-align: justify;
	}
	h3 {
		font-size: 1.2em;
        text-align: left;
	}
}


/* --- index ---------------------------- */
@media(max-width:1080px) {
	.bg-gry::before {
		top: -15px;
	}
	.bg-gry::after {
		top: 15px;
	}
}

@media(max-width:960px){

	.slider-item h1 {
		font-size: 26px;
        top: 50%;
        left: 0;
        padding-left: 20px;
        width: 90%;
	}

	.flex1,.flex2 {
		flex-wrap: wrap;
	}
	.flex1 .img,.flex1 .text,
	.flex2 .img,.flex2 .text{
		width: 100%;
	}
	.flex1.fadein-time2 .img {
		width: 100%;
	}
	.bg-gry {
		padding: 10px 0;
	}

	.news{
		padding-bottom: 20px;
		margin-bottom: 20px;
	}
	.news h2 {
		padding-left: 0;
	}
	.news div article {
		margin: 20px auto;
	}
	.news-head {
		justify-content: left;
	}

	.news-title {
		width: 100%;
		padding-left: 0;
		padding-top: 0;
		margin-top: 10px;
		margin-left: 0;
	}


}

@media(max-width:767px){

	#mv {
		margin-top: 80px;
	}
	.slider {
		height: 90vh;
	}
	.slider-item {
		height: 90vh;
	}
	
	.pcnone {
		display:block !important;
	}
	.spnone {
		display:none !important;
	}

}

/* --- sub --------------------------------------------- */

@media(max-width:767px){
    #submv {
        padding-bottom: 48px;
    }
    .introduction .child_room .text {
        padding: 32px 0 0;
    }
    .introduction .child_room .grid {
        height: auto;
        margin: 0 auto 32px;
    }
}

@media(max-width:960px){
	.sub h2 {
        font-size: var(--sp-h2-font-size);
        margin-bottom: 10px;
        text-align: left;
    }
	.subtitle {
		max-width: 380px;
		padding: 20px 30px 20px 120px;
		font-size: 32px;
		width: 100%;
	}
	
}
@media(max-width:767px){
	.submv{
		height: 60vh;
	}
	.subtitle {
		max-width: 280px;
		padding: 15px 10px 15px 55px;
		font-size: 24px;
		text-align: left;
	}
	.sub h2{
		margin-bottom: 30px;
	}
	.flex1, .flex2 {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		align-items: center;
		width: 100%;
		gap: 10px;
		margin-top: 0;
	}
	/* ============ cavity ====================== */

	.mushiba_chiryou2 .flex1 {
		justify-content: space-between;
	}
	.mushiba_chiryou2 .flex1 .text{
		width:100%;
	}
	.mushiba_chiryou2 .flex1 .img{
		width: 100%;
	}
	.mushiba_chiryou2 .flex1 .img img,
	.kinouteika .flex1 .img,
	.kinouhattatuhuzen .flex1 .img {
		margin: 0 auto;
	}
	.kinouteika .flex1 .text,
	.kinouhattatuhuzen .flex1 .text{
		width: 100%;
	}
	.pmtc_nagare .pmtc_flow.text {
		width: 100%;
	}
	.treatment_01 .pmtc_flow li::after {
		left: 50%;
	}
	.treatment_01 .pmtc_flow li:last-child{
		padding: 0;
	}
	.pmtc_nagare .img {
		width: 100%;
        height: auto;
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 80px;
	}
	.pmtc_nagare .img img {
		width: 30%;
		height: auto;
		object-fit: cover;
	}
	.flow-flex{
		width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
	}
	.flow-flex .text{
		width: 63%;
	}
	.flow-flex .img{
		width: 33%;
        height: auto;
		margin-bottom: 20px;
	}
	.flow-flex .img img{
		width: 100%;
	}
	.cavity .pmtc_flow li::after{
		left: 50%;
	}
	/* ============ dentures ====================== */
	.img.flex {
		margin-top: 0;
	}

	.whitening h2{
		margin-bottom: 30px;
	}
	.whitening .flex2{
		margin-top: 0;
	}
	/* ============ facilities ====================== */

	.facilities .flex{
		flex-direction: column;
		gap: 8px;
		margin-top: 0;
	}
	.facilities .flex .col{
		width: 100%;
	}
	.facilities .flex .flex2 .img{
		width: 30%;
	}
	.innai_gallery p, .setubi_gallery p {
		margin-bottom: 30px;
	}
	.bottom10 p{
		margin-bottom: 10px;
	}
	/* ============ staff ====================== */
	.staff .incho, .staff .fukuincho{
		margin-top: 40px;
	}
	.staff .fukuincho{
		margin-bottom: 40px;
	}
	.staff .flex {
		flex-wrap: wrap-reverse;
	}
	.staff .flex .col {
		width: 100%;
	}

	/* ============ price ====================== */
	.table-wrap {
		overflow-x: auto;   /* 横スクロールを許可 */
		-webkit-overflow-scrolling: touch; /* iPhoneでもスムーズスクロール */
	}
	.price_table h3::after{
		content: "▶︎ 横にスクロール";
		font-size: 0.8em;
		color: #777;
		display: block;
	}

	.table-wrap table {
		min-width: 1000px;   /* テーブルが潰れないように最小幅を確保 */
		width: 100%;
	}

}

/* ------------------------------------------
	footer
--------------------------------------------- */

@media screen and (max-width: 1024px) {
	footer {
        display: block;
        max-width: 540px;
    }
}
@media(max-width:960px){
	footer {
		padding-top: 48px;
		padding-bottom: 10px;
	}
	.f-content-width {
		width: 90%;
		margin: 0 auto;
	}
	
	.f-flexbox{
		width: 100%;
		justify-content: center;
	}

	.footer-main {
		width: 100%;
	}
    .footer-map {
        width: 80vw;
    }
	.f-logo a img {
		width: 55%;
		margin: 0 auto 10px;
	}
	.f-addr{
		margin-top: 20px;
		letter-spacing: 0;
	}
	.f-addr p{
		text-align: center;
	}
	.footer-schedule {
		width: 100%;
        align-items: center;
	}
	.footer-schedule .calendar {
		width: 100%;
	}
	.footer-schedule .time {
		width: 100%;
		text-align: left;
		margin-top: 20px;
	}

	small.copyright.font-sans {
        margin: 10px auto 0;
    }

}
@media(max-width:767px) {
    footer {
        padding-bottom: 10px;
    }
    .footer-info.f-content-width {
        padding: 0;
    }
	.f-logo a {
		width: 100%;
	}
	.f-logo a img {
		width: 60%;
	}
	.f-addr-tel {
		width: 90%;
		margin: 0 auto;
		text-align: center;
	}
	.f-addr-tel p{
		text-align: center;
	}
	.f-addr-tel p a.tel{
		font-size: 24px;
		display: inline;
	}
	.time {
		width: 80vw;
		margin: 24px auto;
	}
    .footer-card {
        width: 80vw;
        max-width: 80vw;
		margin: 24px auto 0;
	}
    .copyright {
        letter-spacing: 0;
        padding: 0 0 8px;
    }
}

@media(max-width:767px) {
    .flex-text-img {
        flex-direction: column;
    }
    .flex-text-img p {
        padding-right: 0;
        padding-bottom: 16px;
    }
}