@charset "utf-8";

/******************************************************************** 
*/

.spOnly { display: none;}
.spMenu { display: none;}
.spHeader { display: none;}
.spNaviBox { display: none;}

@media screen and (max-width: 800px){
	.pcOnly { display: none;}
	br.spOnly { display: inline;}

	#wrapper { max-width: 100vw; overflow: hidden; padding-top: 64px;}
	#header { width: auto; margin-bottom: 30px; min-width: unset;}
	#header .m_nav { width: auto;}
	.section { width: auto;}

	#header .h_logo { display: none;}
	#header .h_logo img { max-width: 100%;}
	#header .right_box { right: unset; top: unset; bottom: 70px; left: 0; width: 100%; background: #fff; z-index: 100;}
	#header .star_box { width: 100vw; height: calc(100vw + 720px);}
	#header .sp-image-container { margin-bottom: calc(100vw - 350px);}

	#header .m_nav { padding-top: 20px; background: #fff;}
	#header .m_nav > li { padding: 0;}
	#header .m_nav > li > a > img,
	#header .m_nav > li > img { height: 55px;}
	#header .m_over { background: transparent; height: auto;}

	#header .m_img { position: absolute; left: 0; top: 0;}
	#header .sp-slide { background-color: #fff; border-radius: 180px 0 0 0;}
	#header .sp-layer { padding-left: 10px; padding-right: 10px; width: auto;}
	#header .sp-layer img { max-width: 100%;}

	#page_top { bottom: 15px;}

	.medical_list { min-width: unset; padding: 30px 0 0;}
	.medical_list ul { padding-left: 10px; padding-right: 10px;}
	.medical_list li { width: calc(50% - 5px); float: left; margin-right: 10px; padding-bottom: 30px;}
	.medical_list li:nth-child(2n) { margin-right: 0;}
	.medical_list li .txt { font-size: 16px; text-align: left; line-height: 1.7;}
	.medical_list li .info { padding: 0; font-size: 12px; line-height: 1.7;}
	.medical_list li p img { max-width: 100%;}

	.clinic_box { min-width: unset; padding-left: 10px; padding-right: 10px; width: auto;}
	.clinic_box img { max-width: 100%;}
	.clinic_box .abs_box { height: auto;}
	.clinic_box .abs_box .clinic1,
	.clinic_box .abs_box .clinic2,
	.clinic_box .abs_box .clinic3,
	.clinic_box .abs_box .clinic4,
	.clinic_box .abs_box .clinic5,
	.clinic_box .abs_box .clinic6 { position: static; padding-bottom: 20px;}
	.clinic_box .abs_box dd { font-size: 14px; letter-spacing: 0;}

	.copy_box { margin-bottom: 30px;}
	.copy_box h2 { margin-bottom: 10px;}
	.copy_box .gray_box .pic_left { display: block; padding-right: 0; text-align: center; margin-bottom: 15px;}
	.copy_box .gray_box .txt_right { display: block;}
	.copy_box .section .gray_box .txt_right { line-height: 1.7;}

	#footer { padding-bottom: 0; padding-top: 30px;}
	#footer .f_kamoku { width: auto; padding-left: 10px; padding-right: 10px;}
	#footer .flt_box .flt_l { width: auto;}
	#footer .flt_box .f_timetable { padding-left: 10px; padding-right: 10px;}
	#footer .flt_box .f_timetable dd { font-size: 14px; letter-spacing: 0;}
	#footer .flt_box .f_tel { padding-left: 10px; padding-right: 10px;}
	#footer .flt_box .f_tel dt { width: 78%;}
	#footer .flt_box .f_tel dd { width: 21%;}
	#footer img { max-width: 100%;}
	#footer .flt_box .flt_r { padding-right: 0;}
	#footer .flt_box .f_address { padding-left: 10px; padding-right: 10px; text-align: center;}
	#footer .flt_box .f_address li:first-child { float: none; text-align: left;}
	#footer .flt_box .f_address li { float: none;}
	#footer .flt_box .f_address li address span { display: block;}
	#footer .flt_box .f_address li address br { display: none;}
	#footer .flt_box .flt_r { width: auto;}
	#footer .flt_box .flt_r iframe { max-width: 100%;}
	#footer .f_sitemap { padding: 0; border-top: 1px solid #aaa; margin: 20px 0;}
	#footer .f_sitemap li { float: none; margin: 0; padding: 0 10px; border-bottom: 1px solid #aaa;}
	#footer .f_sitemap li a { line-height: 2.8; display: block;}
	#footer .f_memo { padding-left: 10px; padding-right: 10px;}
	#footer .f_memo br { display: none;}
	#footer .copyright { width: 100vw; height: auto; background: #52A277; font-size: 11px; position: static; margin-top: 20px;}
	#footer .copyright p { padding: 0; line-height: 2.2; text-align: center;}
	#footer .copyright br { display: none;}
	#footer .f_clinic_name dt:nth-child(2) { letter-spacing: 0;}
	#footer .f_clinic_name dd { padding-bottom: 20px;}

	#contentpage #header .m_over { display: none;}
	#contentpage #header .h_logo { display: none;}
	#contentpage #header .over_img { display: none;}
	#contentpage #header .right_box { display: none;}
	#contentpage #header { height: auto;}
	#contentpage #header .title_box { position: static;}

	.clinic_visit #header .title_box .section,
	.caries_treatment #header .title_box .section,
	.pediatric_dentistry #header .title_box .section,
	.periodontal_disease #header .title_box .section,
	.orthodontic_plate #header .title_box .section,
	.contact #header .title_box .section,
	.laser_treatment #header .title_box .section { padding-left: 0;}
	#header .title_box .section { width: auto;}
	#header .title_box .section h2 { padding-left: 10px; padding-top: 50px; padding-bottom: 50px;}
	#header .title_box .section h2 img { max-width: 100%;}

	.caries_treatment .progression { width: auto;}

	.section.progression ul { padding-left: 10px; padding-right: 10px;}
	.caries_treatment .progression ul li .left { width: 50px;}
	.caries_treatment .progression ul li .info { width: calc(100vw - 80px);}

	.periodontal_disease .treatment,
	.periodontal_disease .mouth,
	.periodontal_disease .progression,
	.periodontal_disease .age { width: auto; padding-left: 10px; padding-right: 10px;}
	.periodontal_disease .mouth p { padding-left: 0;}
	.periodontal_disease .mouth .relation { width: auto; margin-left: 0;}
	.periodontal_disease .mouth .relation .txt_l { width: auto; float: none; margin-bottom: 20px;}
	.periodontal_disease .mouth .relation .pic_r { width: auto; float: none; margin: 0; text-align: center;}
	.periodontal_disease .mouth .relation .txt_l.mt10 { margin-top: 0;}

	.periodontal_disease .treatment,
	.periodontal_disease .mouth,
	.periodontal_disease .progression,
	.periodontal_disease .age { margin-bottom: 30px;}
	.periodontal_disease .progression .pic_c.mb50 img { max-width: 100%;}

	.periodontal_disease .progression ul li .left { display: block; margin-bottom: 10px;}
	.periodontal_disease .progression ul li .info { display: block; width: auto; padding-left: 0;}
	.periodontal_disease .progression ul li h4 { font-size: 16px; width: 120px; padding: 0;}
	.periodontal_disease .progression ul { padding-left: 0; padding-right: 0;}
	.periodontal_disease .progression ul li h5 { margin-left: 0;}

	.periodontal_disease .age .txt_l { width: auto; float: none;}
	.periodontal_disease .age .pic_r { width: auto; float: none; margin: 0;}
	.periodontal_disease .age .pic_r p { text-align: center;}

	.ttl_green { font-size: 20px; line-height: 1.5; padding-left: 0;}
	.ttl_blue { font-size: 20px; line-height: 1.5; padding: 5px 0 5px 10px;}
	.ttl_pink02 { font-size: 20px; line-height: 1.5; padding: 2px 0 2px 10px;}
	.ttl_green02 { font-size: 20px; line-height: 1.5; padding: 2px 0 2px 10px;}

	.laser_treatment .about { width: auto; padding-left: 10px; padding-right: 10px;}

	.laser_treatment .treatment { padding-left: 10px; padding-right: 10px; width: auto; overflow: hidden;}
	.laser_treatment .treatment .box { width: auto;}
	.laser_treatment .treatment .box .pic_l { width: 140px;}
	.laser_treatment .treatment .box .txt_r { width: calc(100vw - 180px); float: none; padding-left: 160px;}
	.laser_treatment .treatment ul li { margin-left: 0; margin-bottom: 8px;}

	.artificial_tooth img { max-width: 100%;}
	.artificial_tooth .txt_box01 { width: auto; padding-left: 10px; padding-right: 10px;}
	.artificial_tooth .kind { width: auto; padding-left: 10px; padding-right: 10px;}
	.artificial_tooth .check { width: auto; padding-left: 10px; padding-right: 10px;}
	.artificial_tooth .check .txt_l { float: none; width: auto;}
	.artificial_tooth .care { width: auto; padding-left: 10px; padding-right: 10px; overflow: hidden;}
	.artificial_tooth .care .pic_r { float: none; width: auto; margin-left: 0; text-align: center;}
	.artificial_tooth .care .txt_l { float: none; width: auto;}

	.artificial_tooth .kind h4 { font-size: 18px; width: 200px; padding: 5px 0;}
	.artificial_tooth .kind ul li:first-child dl dd { padding: 5px 10px;}
	.artificial_tooth .kind ul li:nth-child(2) dl dd { font-size: 14px; line-height: 1.7; padding: 5px 10px;}
	.artificial_tooth .kind ul li:nth-child(2) dl dd .pic_l { display: block; float: none; text-align: center; margin-right: 0; margin-bottom: 10px;}

	.bad_breath_treatment .bad_breath { width: auto; padding-left: 10px; padding-right: 10px; overflow: hidden;}
	.bad_breath_treatment .bad_breath .txt_l { float: none; width: auto;}
	.bad_breath_treatment .bad_breath p { padding-left: 0;}
	.bad_breath_treatment .bad_breath .pic_r { float: none; width: auto; margin-left: 0; text-align: center;}

	.bad_breath_treatment .medical_devices { width: auto; padding-left: 10px; padding-right: 10px;}
	.bad_breath_treatment .medical_devices .pic2_l { width: auto; float: none;}
	.bad_breath_treatment .medical_devices .pic2_r { width: auto; float: none;}
	.bad_breath_treatment .treatment { width: auto; padding-left: 10px; padding-right: 10px;}
	.bad_breath_treatment .treatment ul li { background-position: 0 5px; margin-left: 0;}

	.implant_treatment img { max-width: 100%;}
	.implant_treatment .treatment { width: auto; padding-left: 10px; padding-right: 10px;}
	.implant_treatment .treatment .pic_treatment { width: auto; float: none; text-align: center;}
	.implant_treatment .treatment .txt_r { width: auto; float: none;}
	.implant_treatment .treatment .pic03 { width: auto;}

	.cadcam .about { width: auto; padding-left: 10px; padding-right: 10px;}
	.cadcam .about .pic_l.mb50 { float: none; width: auto; margin-right: 0; margin-bottom: 0 !important;}
	.cadcam .about .txt_r.mb50 { float: none; width: auto; margin-bottom: 0 !important;}
	.cadcam .about .pic02_l { float: none; width: auto; text-align: center;}
	.cadcam .about .txt02_r { float: none; width: auto;}

	.whitening img { max-width: 100%;}
	.whitening .about,
	.whitening .office,
	.whitening .home { width: auto; overflow: none; padding-left: 10px; padding-right: 10px;}

	.whitening .office .txt_l.mb50 { float: none; width: auto; margin-right: 0; margin-bottom: 0 !important;}
	.whitening .office .pic_r.mb50 { float: none; width: auto; margin-right: 0; margin-bottom: 20px !important; margin-left: 0; text-align: center;}
	.whitening .attention { width: auto;}
	.whitening .attention ul li { margin-left: 0;}
	.whitening .attention .cost { width: auto; margin-left: 0;}
	.whitening .attention .cost.txt_l { float: none; margin-bottom: 20px;}
	.whitening .attention .pic_r { float: none; margin-left: 0; text-align: center;}

	.clinic_visit img { max-width: 100%;}
	.clinic_visit .lead_box { width: auto; text-align: left; line-height: 1.7; padding-left: 10px; padding-right: 10px;}
	.clinic_visit .lead_box br { display: none;}

	.clinic_visit .area { width: auto;}
	.clinic_visit .area dd { font-size: 16px;}
	.clinic_visit .section { padding-left: 10px; padding-right: 10px;}
	.clinic_visit .section .title_box { width: auto;}
	.clinic_visit .section .title_box h3 { width: auto;}
	.clinic_visit .section .target { width: auto;}
	.clinic_visit .section .title_box h3 { font-size: 22px;}
	.clinic_visit .section .flow { width: auto;}
	.clinic_visit .section .flow p { padding-left: 0; font-size: 14px; line-height: 1.7;}
	.clinic_visit .section .download { width: auto; font-size: 16px; text-align: left;}
	.clinic_visit .section .download br { display: none;}
	.clinic_visit .section .download a { color: #fff; text-decoration: underline;}

	.clinic_visit .section .pic4 { width: auto;}
	.clinic_visit .section .pic4:after { content: ""; clear: both; display: block;}
	.clinic_visit .section .pic4 li { width: calc(50% - 2px); display: block; float: left;}
	.clinic_visit .medical_expenses { width: auto;}

	.clinic_visit .medical_expenses .bdr_btm .flt_l { width: auto; float: none;}
	.clinic_visit .medical_expenses .bdr_btm .flt_l table { width: 100%;}
	.clinic_visit .medical_expenses .bdr_btm .flt_r { width: auto; float: none;}
	.clinic_visit .medical_expenses .bdr_btm .flt_r table { width: 100%;}

	.clinic_visit .about { width: auto;}
	.clinic_visit .about p.pl25 { padding-left: 0;}
	.clinic_visit .about h3 { font-size: 18px; line-height: 1.5;}

	.pmtc .about,
	.pmtc .cost { width: auto; padding-left: 10px; padding-right: 10px;}
	.pmtc .cost .pic_l { float: none; width: auto; margin-right: 0; text-align: center;}
	.pmtc .cost .txt_r { float: none; width: auto;}
	.pmtc .cost h4 { margin-left: 0;}
	.pmtc .cost ul { margin-left: 20px;}

	.orthodontic_plate .about,
	.orthodontic_plate .flow { width: auto; overflow: hidden; padding-left: 10px; padding-right: 10px; margin-bottom: 20px;}
	.orthodontic_plate .about .pic_l { width: auto; float: none; margin-right: 0; text-align: center; margin-bottom: 10px;}
	.orthodontic_plate .about .box { width: auto;}
	.orthodontic_plate .about .box .txt_r { width: auto; float: none;}
	.orthodontic_plate .about ul li { font-size: 18px; margin-left: 0;}

	.orthodontic_plate .about .box02,
	.orthodontic_plate .case { width: auto;}
	.orthodontic_plate .about p { font-size: 14px; line-height: 1.7;}

	.orthodontic_plate .flow h4 { font-size: 18px; width: 200px; padding: 5px 0;}
	.orthodontic_plate .flow .box { width: auto;}
	.orthodontic_plate .flow .pic_l { float: none; width: auto; margin-bottom: 20px;}
	.orthodontic_plate .flow .pic_l p { text-align: center;}
	.orthodontic_plate .flow .box .txt_r { float: none; width: auto;}
	.orthodontic_plate .case { padding-left: 10px; padding-right: 10px;}
	.orthodontic_plate .case .txt_l { float: none; width: auto;}
	.orthodontic_plate .case .pic_r { float: none; width: auto; margin-left: 0; display: block; text-align: center;}

	.mouthpiece_correction .about { width: auto; padding-left: 10px; padding-right: 10px;}

	.kids_sitter .lead_box { width: auto;}
	.kids_sitter .lead_box img { max-width: 100%;}
	.kids_sitter .orange_box { width: auto; padding: 10px; margin-left: 10px; margin-right: 10px;}
	.kids_sitter .orange_box .white_box { padding: 10px;}
	.kids_sitter .orange_box p { padding-left: 0;}
	.kids_sitter .orange_box .pic_r { float: none; width: auto; margin-left: 0; text-align: center; margin-bottom: 10px;}

	.contact h1 { width: auto; padding-left: 10px; padding-right: 10px; margin-top: 30px; right: 0;}

	#inquiry { width: auto;}
	#inquiry .inner { width: auto;}

	.contact table.tbl1 { width: auto; display: block; margin-left: 10px; margin-right: 10px; border: none;}
	.contact table.tbl1 tbody { display: block;}
	.contact table.tbl1 tr { display: block; margin: 10px 0;}
	.contact table.tbl1 th { display: block; width: auto; padding: 0.25em 0.5em; font-size: 14px; font-weight: normal; border-bottom: none;}
	.contact table.tbl1 td { display: block; width: auto; padding: 0.5em 0.5em; border: 1px solid #aaa;}
	.contact table.tbl1 input[type=text] { width: calc(100% - 0.5em); line-height: 2;}
	.contact .btn_box_center { width: auto; text-align: center; height: auto;}
	.contact .inq_text_center .err { font-size: 14px;}
	.contact input.btn_submit { background-size: 100% auto; width: 220px; height: 55px; display: inline-block;}
	.contact input.btn_back { background-size: 100% auto; width: 220px; height: 55px; display: inline-block;}

	.spMenu { position: fixed; left: 12px; top: 12px; z-index: 6000; padding: 10px 8px 5px; border-radius: 20px; display: block; background: #014912;}
	.spMenu a,
	.spMenu a span { display: inline-block; transition: all .4s; box-sizing: border-box;}
	.spMenu a { position: relative; width: 22px; height: 18px;}
	.spMenu a span { position: absolute; left: 0; width: 100%; height: 2px; background-color: #fff; border-radius: 4px;}
	.spMenu a span:nth-of-type(1) { top: 0;}
	.spMenu a span:nth-of-type(2) { top: 8px;}
	.spMenu a span:nth-of-type(3) { bottom: 0;}
	.spMenu a.open span:nth-of-type(1) { -webkit-transform: translateY(12px) rotate(-315deg); transform: translateY(8px) rotate(-315deg);}
	.spMenu a.open span:nth-of-type(2) { opacity: 0;}
	.spMenu a.open span:nth-of-type(3) { -webkit-transform: translateY(-12px) rotate(315deg); transform: translateY(-8px) rotate(315deg);}

	.spNaviBox { display: block; position: fixed; left: 0; top: calc(-100vh - 10px); z-index: 5000; text-align: left; background: #fff; width: 100%; height: 100vh; transition: top 0.5s; box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);}
	.spNaviBox.open { top: 0;}
	.spNaviBox > ul { list-style: none; margin: 0; padding: 70px 0 0; font-size: 16px;}
	.spNaviBox > ul > li { border-bottom: 1px dashed #014912;}
	.spNaviBox > ul > li a { display: block; line-height: 2; padding: 0 1em 0 2.5em; background: url(../images/medical_arrow.png) no-repeat 0.75em 50%;}
	.spNaviBox > ul > li a.openMenu { background-image: url(../images/medical_arrow_bottom.png);}
	.spNaviBox > ul > li a.openMenu.open { background-image: url(../images/medical_arrow_up.png);}
	.spNaviBox > ul ul { display: none;}
	.spNaviBox > ul ul li { border-top: 1px dashed #014912;}
	.spNaviBox > ul ul li a { display: block; line-height: 2; padding: 0 1em 0 2em; background: url(../images/f_arrow.png) no-repeat 1.25em center;}
	.spNaviBox dl { padding-left: 50px; padding-right: 50px;}
	.spNaviBox dt { margin: 15px 0;}
	.spNaviBox img { max-width: 100%;}

	.spHeader { display: block; position: fixed; left: 0; top: 0; width: 100%; z-index: 5500; background: #fff; box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);}
	.spHeader img { max-width: 100%;}
	.spHeader p { margin: 0; padding: 7.5px 10px 7.5px 55px;}
}