@charset "utf-8";

@media screen and (max-width: 991.98px) {

/*
#################################
	common
#################################
*/
	body {
		background: #ffffff;
		min-width: 0;
	}
	.pc { display: none !important; }
	.sp { display: block !important; }
	.sp2 { display: inline-block !important; 
	}

	.page, .pageIn {
		width: 90%;
		margin-left: auto;
		margin-right: auto;
	}
	
	section > p { width: 97%; }

	.flexBox .item1{order: 1;}
	.flexBox .item2{order: 2;}



/*
#################################
	header
#################################
*/
	.header_content {
		padding-top: 1.5rem;
	}
	.header_content h1, .sp_fixLogo {
		width: 220px;
		display: block;
		margin-left: auto;
		margin-right: auto;
	}
	.header_leftBlock {
		margin-top: 2rem;
	}
	.header_rightBlock__leftBox, .header_rightBlock__rightBox {
		margin: 0 auto;
	}
	.fix-header {
		background-color: white;
		top: -66px;
		left: 0;
		width: 100%;
		margin: 0;
		padding:10px 0;
		position: fixed;
		opacity:0;
		z-index: 100;
	}



/*
########################################################
	drawer menu
########################################################
*/
	#nav-open {
		display: inline-block;
		width: 33px;
		height: 22px;
		vertical-align: middle;
		position: fixed;
		top: 25px;
		left: 30px;
		z-index: 9999;
	}
	
	/*ハンバーガーアイコンをCSSだけで表現*/
	#nav-open span, #nav-open span:before, #nav-open span:after {
		position: absolute;
		transition: all 0.4s;
		height: 2px;
		width: 33px;
		background: #7d7060;
		display: block;
		content: '';
		cursor: pointer;
		z-index: 9999;
	}
	#nav-open span:before {
		bottom: -8px;
	}
	#nav-open span:after {
		bottom: -16px;
	}
	
	/*中身*/
	#nav-content {
		display: none;
		position: fixed;
		width: 100%;
		height: 100%;
		top: 0;
		left: 0;
		transition: .2s ease-in-out;
	}
	#nav-content.open {
		display: block;
		opacity: 1;
		overflow: auto;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 9997;
		width: 100%;
		height: 100%;
		background: white;
		overflow: hidden;/*ブラー効果でボヤけた部分を非表示*/
		text-align: left;
		overflow-y: scroll;
	}
	
	/*チェックが入ったら表示する内容*/
	.category {
		margin-top: 4.5rem;
	}
	.category li {
		padding: 1rem;
		border-bottom: #ea962f solid 1px;
		margin: 0 5%;
	}
	.category li a {
		display: block;
		width: 100%;
	}
	
	/*三本線を動かす*/
	#nav-open.active span {
		-webkit-transform: translateY(8px) rotate(-45deg);
		transform: translateY(8px) rotate(-45deg);
	}
	#nav-open.active span:before {
		-webkit-transform: translateY(-8px) rotate(45deg);/*打ち消す*/
		transform: translateY(-8px) rotate(45deg);/*打ち消す*/
		opacity: 0;
	}
	#nav-open.active span:after {
		-webkit-transform: translateY(-16px) rotate(45deg);
		transform: translateY(-16px) rotate(90deg);
	}



/*
#################################
	contents
#################################
*/
	.brown_bg {
		padding: 2rem;
		font-size: 1.5em;
		line-height: 1.3;
	}

/*　北村鍼灸整骨院で改善できます
-------------------------------------*/
	.improvement_block h2, .cause_block h2 {
		background-position: bottom left;
		background-size: 120px auto;
		padding: 8rem 2rem;
		font-size: 1.579em;
		line-height: 1.2;
	}
	.improvement_block h2:after, .cause_block h2:after {
		margin-left: 0;
	}
	.improvement_block h2:before {
		top: 20%;
	}
	.improvement_inner-box {
		padding: 2rem 2rem 15rem;
		background-size: 40% auto;
	}
	.improvement_inner-box h3 {
		font-size: 1.5em;
	}
	.improvement_inner-box p {
		width: 100%;
	}

/*　これまでに調整（施術）し改善した実例
-------------------------------------*/
	.example_box h3 {
		padding: 2rem 0;
		margin-bottom: 8rem;
	}
	.example-resolution_item {
		background-position: bottom right;
		padding-bottom: 10rem;
	}
	.example-resolution_item:before {
		width: 82px;
		height: 94px;
		top: -94px;
	}
	.example-resolution_inner-item {
		width: 100%;
		border-radius: 20px 20px 0 0;
		margin: 0 0 2rem 0;
		padding: 2rem;
	}
	.example-resolution_inner-item:before {
		top: 100%;
		left: 50%;
		margin-left: -35px;
		border: 55px solid transparent;
		border-top: 35px solid #f2deab;
	}
	.example-resolution_p {
		width: 90%;
		margin: 0 auto;
		font-size: 1.5em;
	}
	img.example-after_left-item, .example-after_right-item {
		width: 100%;
	}
	.example-after_right-item {
		margin: 5rem 0 10rem;
	}
	.example-after_right-item h4:before {
		left: 20%;
	}
	.example-after_right-item h4:after {
		right: 20%;
	}
	.example-voice::before{
		left: 40px;
	}
	.example-voice::after{
		left: 38px;
	}
	.example-voice_img img {
		width: 150px;
	}

/*　なんだか、身体も心もしんどい・・・
-------------------------------------*/
	.sick_block {
		background-size: 95% auto, cover;
		margin: 3rem 0 5rem;
		padding: 5rem 0;
	}
	.sick_box {
		width: 90%;
	}
	ul.sick_list li {
		font-size: 1.125em;
		margin-bottom: 2rem;
		padding-left: 3rem;
	}
	ul.sick_list li:before {
		top: 30%;
		left: 3%;
	}
	ul.sick_list li:nth-child(2), ul.sick_list li:nth-child(3) {
		margin-left: 0;
	}
	.sick_box p {
		text-align: left;
	}

/*　初めての方限定
-------------------------------------*/
	.customers_box {
		padding: 1em;
	}
	.customers_box h2, .reserve_box h3 {
		font-size: 1.375em;
	}
	.customers_box h2:after {
		right: 0%;
	}
	.coupon_item {
		text-align: left;
		padding: 2rem;
	}
	.coupon_item img {
		width: 100%;
		margin-top: 1.5rem;
	}
	.tel-reserve_box, .line-reserve_box {
		width: 100%;
	}
	.line-reserve_box {
		margin-top: 2rem;
	}
	.reserve_box h3:before {
		left: 0;
	}
	.reserve_box h3:after {
		right: 0;
	}

/*　当院の特徴
-------------------------------------*/
	.features_block h3 {
		text-align: left;
		font-size: 1.5em;
	}
	p.features_copy, .features-case_item p {
		text-align: left;
	}
	.features_item img {
		width: 80%;
		margin: 0 auto 3rem;
	}
	.features_item p {
		width: 100%;
	}
	.features_item, .features-case_item {
		padding: 2rem;
	}
	.features-case_item h4 {
		width: 70%;
	}
	.features-case_list li {
		width: 100%;
		padding: 1.5rem 1.5rem 1.5rem 4.5rem;
	}
	.features-case_list li:before {
		left: 8%;
	}

/*　本当の原因とは
-------------------------------------*/
	.cause_block h2 {
		padding: 2rem 1.5rem;
	}
	p.cause_red {
		padding: .5rem 1.5rem;
		border-radius: 10px;
	}
	.cause_inner-item, .cause_inner-item li, .cause_item img {
		width: 100%;
	}
	.cause_inner-item {
		margin: 1.5rem;
	}


/*　当院の施術
-------------------------------------*/
	.treatment_block:after {
		top: 0;
		width: 99px;
		height: 169px;
		z-index: 0;
	}
	.treatment_box, .treatment_box .treatment_inner {
		width: 100%;
		padding: 2rem;
		margin-top: 2rem;
	}
	.treatment_inner {
		margin-top: 0;
	}
	.treatment_inner h3 {
		font-size: 1.25em;
		margin-bottom: 1.5rem;
	}

/*　このような方が来院
-------------------------------------*/
	.reason_block h2 img, .reason_list li {
		width: 100%;
	}
	.reason_box {
		padding: 5rem 0 3rem;
	}
	.reason_list li {
		min-height: 5rem;
		font-size: initial;
		margin-bottom: 1.5rem;
	}

/*　このようなお声
-------------------------------------*/
	.voice_block {
		padding: 5rem 0 10rem;
	}
	.voice_block h2 {
		font-size: 1.5em;
		line-height: 1.2;
		margin-bottom: 2rem;
	}
	.voice_block h2:before, .voice_block h2:after {
		top: 0;
		z-index: -1;
	}
	.voice_block h2:before {
		left: 0;
	}
	.voice_block h2:after {
		right: 0;
	}
	.voice_box.page {
		width: 100%;
		margin: 0;
	}
	.voice_box:before {
		top: 90%;
		bottom: 0;
		left: 70%;
		right: 0;
		width: 100px;
		height: 118px;
	}

/*　医療用語解説
-------------------------------------*/
	.terminology_box dt {
		font-size: 1em;
	}
	.terminology_box dd {
		font-size: 0.875em;
	}
	.terminology_box blockquote {
		padding: 1.5rem 2rem;
	}

/*　当院について
-------------------------------------*/
	.about_box table :is(th, td) {
		display: block;
		width: 100%;
	}
	.about_box table th {
		padding-bottom: 0;
	}
	.about_box img {
		width: 50%;
	}
	.access_item {
		width: 100%;
		margin-bottom: 3rem;
	}
	.access_item:last-child {
		margin-bottom: 0;
	}



/*
#################################
	footer
#################################
*/
	.goTopPage {
		position: fixed;
		display: block;
		bottom: 0;
		left: 0;
	}
	.goTopPage a {
		position: relative;
		display: inline-block;
		padding: 1rem 0;
		opacity: initial;
		border-radius: initial;
		background-color: initial;
		width: 100%;
		height: 100%;
		bottom: initial;
		right: initial;
		text-align: center;
		cursor: pointer;
	}
	.foot_nav {
		display: flex !important;
		width: 100vw;
	}
	.foot_tel, .foot_line {
		width: 50%;
	}
	.foot_tel {
		background-color: #ea962f;
	}
	.foot_tel p strong {
		font-size: 120%;
	}
	.foot_line {
		background-color: #7d7060;
	}
	.foot_line img {
		width: 70%;
	}
	.footer_content h1 {
		width: 90%;
	}
	.footer_info {
		width: 100%;
		margin-top: 2rem;
		font-size: 0.813em;
	}
	.footer_copy {
		font-size: 0.75em;
		margin-bottom: 8rem;
	}


/** レスポンシブの終了 **/