@charset "utf-8";

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

/*
########################################################
	ページ全体情報
########################################################
*/
	body {
		background: #ffffff;
		min-width: 0;
	}
	.pc { display: none !important; }
	.sp { display: block !important; }
	.sp2 { display: inline-block !important; 
	}

	.page, .pageIn { width: 100%; }
	
	section > p { width: 97%; }
	h2 { font-size: 1.643em !important; }

	.flexBox .item1{order: 1;}
	.flexBox .item2{order: 2;}
	.flexBox .item3{order: 3;}
	.flexBox .item4{order: 4;}

	a.blue_btn {
		width: 90vw;
		padding: 10px 0;
	}
	.menu_index:before,
	.menu_index:after,
	#topAboutBox:after,
	#pageAboutBox:after { /* 雲背景 */
		content: none;
	}
	.left_mainImg { /* 左画像 */
		width: 100%;
		height: 320px;
		position: relative;
		margin: 0 auto;
		left: 0;
		border-radius: 70px 70px 0 0;
		-webkit-border-radius: 70px 70px 0 0;
		-moz-border-radius: 70px 70px 0 0;
	}
	.right_box { /* 右ブロック */
		width: 100%;
		float: none;
		padding: 0;
	}
	.right_box p {
		font-size: 1em;
		margin-top: 20px;
		width: 100%;
		text-align: justify;
	}
	.schedule_table th { /* 診察テーブル */
		padding: 7px 0;
		font-size: 3vw;
	}
	.schedule_table td {
		padding: 7px 0;
		font-size: 1.143em;
		width: 10%;
	}

/*
########################################################
	ヘッダー
########################################################
*/
	#sp_head {
		width: 100%;
		height: 60px;
		background-color: white;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 9999;
		padding: 10px 15px;
	}
	#hamburger_logo {
		width: auto;
		height: 100%;
	}
	#sp_tel {
		display: inline-block;
		width: 60px;
		height: 60px;
		position: fixed;
		top: 0;
		right: 60px;
		z-index: 9999;
		background-color: #f6f6f6;
	}
	#sp_tel a {
		display: block;
		width: 60px;
		height: 60px;
		padding: 20px;
	}
	#sp_tel img {
		width: auto;
		height: 20px;
	}
	#nav-open {
		display: inline-block;
		width: 60px;
		height: 60px;
		position: fixed;
		top: 0;
		right: 0;
		z-index: 9999;
		background-color: #009fe8;
		padding: 20px;
	}



/*
########################################################
	ハンバーガーメニュー
########################################################
*/
	/*ハンバーガーアイコン*/
	#nav-open span, #nav-open span:before, #nav-open span:after {
		position: absolute;
		transition: all 0.4s;
		height: 3px;
		width: 25px;
		background: white;
		display: block;
		content: '';
		cursor: pointer;
		z-index: 9999;
		border-radius: 10px;
		-webkit-border-radius: 10px;
		-moz-border-radius: 10px;
	}
	#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: 60px;
		left: 0;
		z-index: 9998;
		width: 100%;
		height: 100%;
		overflow: hidden;/*ブラー効果でボヤけた部分を非表示*/
		color: white;
		background-color: #23b6bc;
	}

	/*:beforeにぼかし効果を設定する*/
	#nav-content.open:before {
		content: '';
		overflow: hidden;
		-webkit-filter: blur(10px);
		-moz-filter: blur(10px);
		-o-filter: blur(10px);
		-ms-filter: blur(10px);
		filter: blur(10px);
		z-index: -1;/*重なり順序を一番下にしておく*/
	}

	/*チェックが入ったら表示する内容*/
	.category {
		margin-bottom: 10px;
	}
	.category-title {
		position: relative;
		border-bottom: 1px solid #f5f4f2;
	}
	.category-title a {
		padding: 12px 10%;
		display: block;
		color: white;
	}
	.category_content {
		width: 100%;
		background-color: #0b9095;
		border-bottom: 1px solid #f5f4f2;
	}
	.category_content li {
		width: 50%;
		text-align: center;
		border-bottom: 1px solid #f5f4f2;
	}
	.category_content li:nth-child(1n) {
		border-right: 1px solid #f5f4f2;
	}
	.category_content li:last-child {
		border-bottom: none;
	}
	.category_content a {
		padding: 12px 0;
		display: block;
		color: white;
	}
	.nav_info {
		text-align: center;
		margin: 15px 0;
	}
	.nav_info .tel {
		text-shadow: none;
	}
	.nav_info .tel a {
		color: white !important;
	}
	.nav_info p {
		margin-top: 7px;
	}


	/* 三本線を動かす */
	#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);
	}



/*
########################################################
	トップページ
########################################################
*/
	/*　メインイメージ
	-----------------------------------------------*/
	#image_window {
		width: 100%;
		margin-top: 60px;
		height: 350px;
	}
	.top_img {
		border-radius: 0;
		height: 350px;
	}
	.center-item {
		width: 95%;
		top: 45%;
	}
	.center-item li {
		color: white;
		border-radius: 10px;
		-webkit-border-radius: 10px;
		-moz-border-radius: 10px;
		width: 31%;
		height: auto;
		font-size: 1.214em;
		padding: 15px 0;
	}
	.center-item div {
		text-align: center;
		line-height: 1.8;
		margin-top: 10px;
	}
	.tel {
		padding-left: 3vw;
		font-size: 6.5vw;
	}
	.tel a {
		color: #009fe8 !important;
	}
	.center-item div p, .tel {
		text-shadow: 0px 0px 3px white;
	}
	.top_copy {
		width: 90%;
		font-size: 6.5vw;
	}

	/*　お知らせ
	-----------------------------------------------*/
	#info_Block {
		margin-top: 30vw;
		padding: 30px 5%;
	}
	#infoBox h2 {
		margin: 0 auto 15px;
	}
	.top_entry, .top_entry li p {
		width: 100%;
	}
	.top_entry li {
		margin-bottom: 25px;
	}

	/*　当院の施術内容
	-----------------------------------------------*/
	.topMenu_Block,
	.pageMenu_Block {
		margin-top: 60px;
	}
	#topMenuBox p {
		margin: 10px auto 40px;
	}
	.menu_index {
		width: 90%;
		margin: 0 auto 20px;
	}
	.menu_index li {
		width: 47%;
		margin-bottom: 60px;
	}
	.menu_index li:nth-child(4),
	.menu_index li:last-child {
		margin: 0
	}
	/*.menu_index li:last-child {
		margin-top: 7vw;
		margin-left: 27%;
	}*/
	.menu_index li img {
		height: 170px;
		border-radius: 40px 40px 0 0;
		-webkit-border-radius: 40px 40px 0 0;
		-moz-border-radius: 40px 40px 0 0;
	}
	.menu_index_ttl {
		width: 95%;
		padding: 7px 0;
		font-size: 5vw;
		top: 150px;
	}

	/*　交通事故治療
	-----------------------------------------------*/
	.topAccident_Block {
		margin-top: 80px;
		padding: 50px 0;
	}
	#accident_index h2 {
		margin-bottom: 30px;
	}
	#accident_index {
		width: 75%;
		margin: 0 auto 20px;
	}
	#accident_index li {
		width: 47%;
		margin-bottom: 30px;
	}
	#accident_index img {
		width: 100%;
		height: auto;
		margin-bottom: 10px;
	}

	/*　にじぞら整骨院について
	-----------------------------------------------*/
	.topAbout_Block {
		margin-top: 80px;
	}
	#topAboutBox {
		margin: 40px auto 0;
		width: 90%;
		min-height: auto;
	}
	.top_timeS_area {
		margin-top: 20px;
	}
	.top_timeS {
		position: relative;
		left: 0;
		padding: 0;
		width: 100%;
	}

	/* 患者様の声 */
	.voice_Block {
		padding: 40px 5%;
	}
	.voice_title h3 {
		display: block;
		margin-bottom: 50px;
		padding: 10px 0;
		border-radius: 50px;
		-webkit-border-radius: 50px;
		-moz-border-radius: 50px;
		font-size: 5vw;
	}
	.voice_img li {
		width: 47%;
		margin-bottom: 30px;
	}
	.voice_img img {
		height: 200px;
		border-radius: 5px;
		-webkit-border-radius: 5px;
		-moz-border-radius: 5px;
	}

	/*　よくあるご質問
	-----------------------------------------------*/
	.topFaq_Block {
		margin: 80px auto 0;
		width: 90%;
	}
	.topFaq_Block h2 {
		margin-bottom: 25px;
	}
	.faq_Box {
		padding: 20px 20px 20px 50px;
		margin-bottom: 20px;
	}
	.faq_Box dt {
		font-size: 1.143em;
		margin-bottom: 15px;
	}
	.faq_Box dt:before {
		top: -5px;
		left: -35px;
	}
	.topFaq_Block .center_btnBox {
		margin-top: 40px;
	}



/*
########################################################
	ページ
########################################################
*/
	#image_window.page_image {
		height: auto;
		padding: 0;
	}
	.page_title {
		height: 150px;
		border-radius: 0;
		-webkit-border-radius: 0;
		-moz-border-radius: 0;
		background-position: 150% bottom;
		background-size: 300px auto;
		padding-top: 55px;
		margin-bottom: 0;
	}
	h4.ttl_content {
		font-size: 1.714em;
	}
	.gray_bgArea {
		padding: 40px 0 10px;
		width: 100%;
		margin: 0 0 80px;
	}
	.gray_bgArea li {
		width: 90%;
		margin: 0 auto 30px;
	}

	/*　にじぞら整骨院について
	-----------------------------------------------*/
	.pageAbout_Block {
		margin-top: 50px;
	}
	#pageAboutBox {
		margin: 40px auto 0;
		width: 90%;
		min-height: auto;
	}
	#pageAboutBox .right_box {
		margin-top: 50px;
	}
	#pageAboutBox h4 {
		margin-bottom: 20px;
	}
	.voice_comment {
		padding: 0;
	}
	.voice_comment li {
		width: 48%;
		margin: 0 4% 20px 0;
	}
	.voice_comment li:nth-child(2n) {
		margin-right: 0;
	}
	.voice_comment li:nth-child(3n) {
		margin-right: 4%;
	}

	/*　当院の施術内容
	-----------------------------------------------*/
	.content_listBlock_left img,
	.pageMenu_con_Block .content_listBlock_left img {
		width: 200px;
		height: 200px;
		margin: 0 auto;
	}
	.content_listBlock_con {
		margin: 20px 5%;
	}
	.content_listBlock_con p {
		font-size: 1em;
		line-height: 1.6;
	}

	/*　当院の施術内容	詳細ページテンプレート	
	-----------------------------------------------*/
	.menu_con_ttl {
		margin: 0 auto 40px;
		width: 80%;
	}
	.ttl_pointBg2 {
		font-size: 1.571em;
		margin: 0 auto 20px;
		width: 90%;
	}
	.ttl_pointBg2:before {
		width: 25px;
	}
	.pageMenu_con_Block #pageAboutBox {
		margin-bottom: 80px;
	}

	/*　交通事故治療
	-----------------------------------------------*/
	#pageAccident {
		margin-top: 40px;
	}
	.content_acciBox h3 {
		font-size: 1.643em;
		padding-top: 45px;
		margin-bottom: 20px;
		height: 150px;
	}
	.content_acciBox h3:after {
		height: 150px;
		width: 150px;
	}
	.content_acciBox img {
		width: 290px;
	}
	#accident_con1 {
		margin: 80px 0 120px;
	}
	#accident_con2 {
		margin: 120px 0;
	}

	/*　施術の流れ
	-----------------------------------------------*/
	.content_flowBox {
		padding: 20px 0 0;
	}
	.content_flowBox .content_listBlock_left {
		padding: 40px 0;
	}
	.content_flowBox .content_listBlock_left:after {
		bottom: -50px;
		width: 70px;
		height: 44px;
	}
	.content_flowBox img {
		width: 290px;
		margin-top: 10px;
	}
	.content_flowBox h4 {
		font-size: 1.571em;
	}
	.content_flowBox h4:before {
		width: 60px;
		height: 60px;
		margin-right: 20px;
	}

	/*　アクセス
	-----------------------------------------------*/
	.content_priceBox {
		margin-top: 40px;
	}
	.price_table {
		width: 90%;
		margin: 0 auto 50px;
	}
	.price_table th {
		padding: 10px 0;
		width: 100%;
		text-align: center;
		display: block;
	}
	.price_table td {
		display: block;
		width: 100%;
		border-left: 1px solid #dbdbdb;
		padding: 10px 0;
	}

	/*　アクセス
	-----------------------------------------------*/
	.map_box {
		padding: 0;
		height: 380px;
	}
	.map_info {
		margin-left: auto;
		margin-right: auto;
		width: 90%;
	}
	.map_info a.blue_btn {
		width: 90vw;
		padding: 10px 0;
		margin-top: 20px;
	}
	.map_access.gray_bgArea {
		padding: 30px 0;
	}
	.map_access_train, .map_access_car {
		width: 90%;
		margin: 0 auto;
	}
	.map_access_car {
		margin-top: 50px;
	}
	.map_access h4 {
		margin-bottom: 10px;
	}
	a.white_btn {
		width: 90vw;
		padding: 10px 0;
	}
	.content_aroundBox {
		margin-top: 100px;
	}
	.around_leftImg, .around_rightImg {
		width: 100%;
	}
	.around_leftImg,
	.around_rightImg img {
		height: 240px;
	}
	.around_rightImg {
		height: 480px;
	}
	.content_aroundBox p {
		width: 90vw;
		margin-left: auto;
		margin-right: auto;
	}

	/*　よくあるご質問
	-----------------------------------------------*/
	.content_faqBox {
		width: 90%;
		margin: 50px auto 0;
	}



	/* 404 */
	.block404 {
		padding: 100px 0 !important;
		text-align: center;
		line-height: 200%;
		text-align: center !important;
	}
	.block404 p {
		margin-bottom: 45px;
	}


/*
########################################################
	フッター
########################################################
*/
	#footer {
		margin-top: 120px;
	}
	#goTopPage {
		width: 40px;
		height: 40px;
		top: -20px;
		right: 5%;
	}
	#fotInfo {
		padding: 30px 2.5%;
	}
	.fot_leftArea, .fot_rightArea {
		width: 100%;
	}
	.fot_leftArea {
		margin-bottom: 30px;
	}
	.fot_leftArea img {
		width: 70%;
		height: auto;
		margin: 0 auto 20px;
		display: block;
	}
	.fot_rightArea {
		height: 250px;
		overflow-y: hidden;
	}
}


@media screen and (min-width:770px) and (max-width: 1060px) {
	.center-item {
		width: 70%;
	}
}
/** レスポンシブの終了 **/