@charset "utf-8";

@media only screen and (max-width: 767px) {
	/*-----------------------------------------------------
		common
	-----------------------------------------------------*/
	body {
		font-size: 14px;
	}
	.pc {
		display: none;
	}
	.sp {
		display: block;
	}
	img.sp,
	span.sp {
		display: inline-block;
	}
	.inner {
		padding-left: 0;
		padding-right: 0;
		width: auto;
	}
	.btn_efc a:hover img {
		transform: translateY(1vw);
	}
	.tbl01,
	#contact table {
		font-size: 14px;
	}
	.ttl01 {
		font-size: 6vw;
	}

	/* ラジオボタン
	-----------------------------------------------------*/
	input[type="radio"] + label::before {
		top: 1px;
	}
	input[type="radio"]:checked + label::after {
		top: 4px;
		left: 3px;
		width: 8px;
		height: 8px;
	}

	/* チェックボックス
	-----------------------------------------------------*/
	input[type="checkbox"]:checked + label:after {
		top: 3px;
	}

	/*-----------------------------------------------------
		header
	-----------------------------------------------------*/
	header:not(.fixed):not(.fixed_sp) {
		position: relative;
	}
	header:not(.fixed):not(.fixed_sp):not(.ws) {
		position: absolute;
	}
	header.fixed,
	header.fixed_sp {
		position: fixed;
		z-index: 9999;
		top: 0;
		left: 0;
		right: 0;
	}
	header .inner {
		height: auto;
	}
	header h1 {
		padding-left: 3%;
	}
	header h1 img, header .logo__hdr img {
		height: 8vw;
	}
	header .info .tel {
		order: 2;
	}
	header .info .button {
		order: 1;
	}
	header .info .button01 {
		order: 3;
	}
	header .info .tel img,
	header .info .button img,
	header .info .button01 img
	{
		height: 15vw;
	}

	/*-----------------------------------------------------
		content
	-----------------------------------------------------*/
	#mainvisual,
	.sec,
	.cv {
		background: none !important;
	}
	#mainvisual {
		min-height: 125vw;
	}
	.sec,
	.cv {
		min-height: 33vw;
	}
	.ttlbox {
		background: none !important;
	}

	/* .cv コンバージョンエリア
	-----------------------------------------------------*/
	.cv01 .inner {
		padding: 0;
	}
	.cv01 .cntbox {
		background: url(../img/sp/cv01_bg.jpg) no-repeat center center / cover !important;
		padding: 16vw 6% 11vw;
	}
	.cv01 .title {
		margin: 0 6% 3vw;
	}
	.cv01 .cmp {
		margin-bottom: 4vw;
	}
	.cv01 .acc {
		padding-top: 1vw;
		max-width: inherit;
		font-size: 2.6vw;
	}
	.cv01 .cnt-tbl {
		flex-direction: column;
	}
	.cv01 .cnt-tbl .cnt {
		order: 1;
		width: auto;
	}
	.cv01 .button00 {
		margin: 2vw auto 0;
		display: block;
	}
	.cv01 .sp_mt img {
		margin-top: 2vw;
	}
	.cv01 .cnt-tbl .infobox {
		order: 2;
		margin-top: 4vw;
	}
	.cv01 .info {
		max-width: inherit;
		align-items: center;
		margin-bottom: 1vw;
	}
	.cv01 .info dt {
        flex: 0 0 30%;
        max-width: 30%;
    }
	.cv01 .info dd {
	    flex: 0 0 68%;
		max-width: 68%;
		font-size: 2.6vw;
		line-height: 1.25;
	}
	.cv01 .timetable {
		order: 3;
		width: auto;
		margin: 3vw 0 0;
	}
	.cv01 .timetable table th,
	.cv01 .timetable table td {
		padding: 2.5vw 1%;
		font-size: 2.6vw;
	}
	.cv01 .timetable .note {
		margin-top: 2vw;
		font-size: 2.6vw;
	}
	.cv01 .timetable .note br {
		display: block;
	}
	.cv01 .timetable table th {
		width:20%;
	}

	/* .link
	-----------------------------------------------------*/

	.sec_link {
		max-width: inherit;
	}

    .sec_link .button00 {
        position: absolute;
        left: 5%;
        right: 5%;
        top: 9%;
        margin: 0 auto;
    }
    .sec_link .button01 {
        position: absolute;
        left: 5%;
        right: 5%;
        top: 36.5%;
    }
	.sec_link .button02 {
        position: absolute;
        left: 5%;
        right: 5%;
        top: 64%;
    }

	#sec01 {
		margin-top: -5vw;
	}

	/* #sec02 大阪つつい矯正歯科ではすべてを矯正専門の担当医 筒井万里子が責任をもって治療を致します */
	#sec02 {
		/* background: url(../img/sp/sec02_bg.jpg) no-repeat center top / 100% auto !important; */
	}
	#sec02 .inner {
		/* padding: 17vw 5% 11vw; */
	}
	#sec02_01 {
		flex-direction: column;
	}
	#sec02_01 .txtbox {
		padding: 0;
		max-width: inherit;
	}
	#sec02_01 .txtbox .cap {
		text-align: center;
	}
	#sec02_01 .txtbox .cap .ini {
		font-size: 4.2vw;
	}
	#sec02_01 .txtbox .cap .ymi {
		font-size: 6vw;
	}
	#sec02_01 .txtbox .txt {
		margin: 8vw 8% 0;
		font-size: 3.1vw;
		line-height: 1.5;
	}
	#sec02_01 .picbox {
		max-width: inherit;
		margin: 10vw -5vw 0;
	}
	#sec02_01 .picbox .pic:nth-of-type(n+2) {
		margin-top: 10vw;
	}
	#sec02_01 .picbox .pic:nth-of-type(2n+1) {
		margin-right: 14%;
		text-align: left;
	}
	#sec02_01 .picbox .pic:nth-of-type(2n) {
		margin-left: 13%;
		text-align: right;
	}
	#sec02_02 {
		margin-top: 16vw;
		flex-direction: column;
	}
	#sec02_02 .picbox {
		max-width: 95%;
		margin-left: -5vw;
		padding-bottom: 5vw;
	}
	#sec02_02 .picbox .pic {
		max-width: 68%;
	}
	#sec02_02 .picbox .pic.ctf {
		left: inherit;
		right: 0;
		max-width: 36%;
	}
	#sec02_02 .txtbox {
		max-width: inherit;
		padding-top: 6vw;
		margin: 0 8%;
		padding-right: 0;
	}
	#sec02_02 .txtbox .prf dt {
        font-size: 3vw;
        margin-bottom: 2vw;
    }
    #sec02_02 .txtbox .prf dd .kanji {
    	font-size: 6vw;
    }
    #sec02_02 .txtbox .prf dd .kana {
    	font-size: 3vw;
    	letter-spacing: normal;
    }
	#sec02_02 .txtbox .txt {
        margin-top: 6vw;
        font-size: 3.1vw;
        line-height: 1.6;
    }
    #sec02_03 {
    	margin: 1vw 5% 9vw;
    	padding: 10vw 7%;
    }
    #sec02_03 .blc {
    	padding: 7vw 0;
    }
	#sec02_03 .title {
		margin-bottom: 5vw;
		font-size: 4.1vw;
	}
	#sec02_03 .row {
		margin: 0;
		padding: 0;
	}
	#sec02_03 table {
        font-size: 2.8vw;
    }
	#sec02_03 table th {
        padding: 0.5vw 1% 0.5vw 0;
        width: 24%;
    }
	#sec02_03 table td {
	    padding: 0.5vw 0;
		width: 76%;
	}
	#sec02_03 .blc.society table tr {
		display: -webkit-box;
		display: -webkit-flex;
		display: flex;
		flex-wrap: wrap;
	}
	#sec02_03 .blc.society table td {
		display: block;
		flex: 0 0 50%;
		max-width: 50%;
		text-align: center;
	}
	#sec02_03:after {
		top: 4px;
		right: -3px;
		bottom: -4px;
		left: 4px;
	}
	#sec_pp .inner {
    padding-bottom: 0;
	}

	/* #sec04 歯について、こんなお悩みありませんか？ */
	#sec04 {
		margin-top: -5.5vw;
	}

	#sec10_01 .inner .button {
		top: 33.5%;
		left: 6%;
		max-width: 43%;
	}
	#sec10_01 .inner .tel {
		top: 33.5%;
		right: 6%;
		left: auto;
		max-width: 43%;
	}
	#sec10_01 .inner .button01 {
    top: 38.5%;
    left: 6%;
	max-width: 88%;
	}

	/* #faq よくある質問
	-----------------------------------------------------*/
	#faq .ttlbox .inner {
		padding-top: 14vw;
		padding-bottom: 10vw;
	}
	#faq .cntbox .inner {
		padding: 0 5% 12vw;
	}
	#faq .exp {
		margin-bottom: 20px;
	}
	#faq ul li {
		padding: 6vw 0;
	}
	#faq ul li:nth-child(n+2) {
		margin-top: 10px;
	}
	#faq ul li .que {
		align-items: center;
	}
	#faq ul li .ans {
	    margin-top: 2vw;
	}
	#faq ul li .que .ini, #faq ul li .ans .ini {
		margin-right: 3%;
		flex: 0 0 11%;
	}
	#faq ul li .que .txt,
	#faq ul li .ans .txt {
		font-size: 3.6vw;
	}
	#faq ul li .que .txt {
		padding-top: 0;
	}
	#faq ul li .ans .txt {
		padding: 2.3vw 0;
	}
	#faq ul.pdown li .que:before, #faq ul.pdown li .que:after {
		right: 3%;
		width: 20px;
		height: 20px;
		background-size: 100% auto;
	}

	/* #info 医院のご案内 / #access 医院へのアクセス
	-----------------------------------------------------*/
	#info .ttlbox .inner {
		padding: 17vw 4% 8vw;
	}
	#info .ttlbox h2 img,
    #law .ttlbox h2 img {
    	height: 5vw;
    }
	#info .cntbox .inner {
		padding: 0 4% 6vw;
	}
	#info .cntbox .logo {
		margin: 0 32% 6vw;
	}
	#info .cntbox .adr {
		font-size: 2.9vw;
	}
	#access .ttlbox .inner {
		padding: 6vw 5% 10vw;
	}
	#access .cntbox .inner {
		padding: 0 5vw 12vw;
	}
	#access .gmap {
		margin: 0 -5vw 10vw;
	}
	#access .gmap iframe {
		height: 92vw;
	}
	#access .cntbox .txtbox {
		margin-bottom: 7vw;
		text-align: left;
	}
	#access .cntbox .txtbox::after {
		right: -3vw;
		top: -7vw;
		width: 21vw;
	}
	#access .cntbox .cap {
		font-size: 3.8vw;
		margin-bottom: 5vw;
	}
	#access .cntbox .acc {
		font-size: 3.4vw;
		margin-bottom: 3vw;
	}
	#access .cntbox .txt {
		font-size: 2.8vw;
	}
	#access .cntbox .cmp {
		margin-bottom: 4vw;
	}
	#access .cntbox .tel {
		margin-bottom: 7vw;
	}
	#access .cntbox table {
		border-left: 1px solid #d6d6d6;
		border-top: 1px solid #d6d6d6;
	}
	#access .cntbox table tbody {
		display: -webkit-box;
		display: -webkit-flex;
		display: flex;
	}
	#access .cntbox table tr,
	#access .cntbox table th,
	#access .cntbox table td {
		display: block;
	}
	#access .cntbox table tr {
		width: 65%;
	}
	#access .cntbox table tr:first-of-type {
		width: 35%;
	}
	#access .cntbox table th,
	#access .cntbox table td {
		width: 100%;
		border-left: 0;
		border-top: 0;
		font-size: 4vw;
	}
	#access .cntbox table th {
		padding: 6vw 3%;
    }
	#access .cntbox table td {
		padding: 2.75vw 3%;
	}
	#access .cntbox .note {
		margin-top: 5vw;
		font-size: 2.9vw;
	}

	/*-----------------------------------------------------
		footer
	-----------------------------------------------------*/
	footer {
		padding: 5vw 3%;
	}
	footer .copyright {
		font-size: 2.8vw;
	}
	#page-top {
		bottom: 27vw;
		width: 69px;
		right: 1%;
	}
	.floatbox:not(.fixed):not(.fixed_sp) {
		position: static;
	}
	.floatbox.fixed,
	.floatbox.fixed_sp {
		position: fixed;
		z-index: 9999;
		bottom: 0;
		left: 0;
		right: 0;
	}

	/*-----------------------------------------------------
		confirm 内容確認 / thanks 送信完了
	-----------------------------------------------------*/
	.confirm #contact .exp,
	.thanks #contact .exp {
		text-align: left;
	}
	.confirm #contact .btnbox {
		display: block;
	}
	.confirm #contact button[type="submit"] {
		order: 1;
		margin-left: auto;
		margin-right: auto;
	}
	.confirm #contact button[type="button"] {
		order: 2;
		margin-top: 10px;
		margin-left: auto;
		margin-right: auto;
	}
	.confirm footer,
	.thanks footer {
		padding: 10px 3%;
	}
}