@media screen and (max-width:768px){
	header {
		padding: 0;
		box-shadow:none;
	}
	header .menu_box{
		background-color: #fff;
    height: 50px;
    z-index: 2147483647;
	}
	header .sp > div {
		position:relative;
		z-index:1001;
		background:#ffffff;
		padding:0em;
	}
	header .sp nav.menu {
		position:fixed;
		width:100%;
		background:#999999;
		z-index:2;
	}
	header nav.menu {
		left:0;
		top:-100%;
		/*-webkit-transform-origin:100% 0;
		-webkit-transform:scale3d(0, 1, 1) ;
				transform:scale3d(0, 1, 1) ;*/
		-webkit-transition:all 0.5s ease-in-out;
				transition:all 0.5s ease-in-out;
		height: 100%;
		padding-top: 2em;
	}
	header nav.menu.active {
		left:0;
		top:50px !important;
	}
	header nav > *  {
		width:100%;
	}
	header nav a{
		font-size: 16px;
		font-size: 1.6rem;
		letter-spacing: 0.1em;
		color: #ffffff;
		display:block;
		padding:1.5em 0;
		text-align:center;
		position:relative;
	}
	header nav a.active{
		background:#828282;
	}
	header nav a:hover{
		background:#828282;
	}
	header nav+div .logo img{
		width: 140px;
	}
	header nav.active+div .logo {
		opacity:1;
	}
	header nav a img {
		min-width:50%;
		max-width:100%;
	}
	header .tel {
		background: #333333;
		color:#ffffff;
		font-size: 25px;
		font-size: 2.5rem;
		margin:0 0 0 auto;
	}
	header .toggle {
		background: #fff;
		position: absolute;
		right: 0;
	}
	.hamburger-label {
    float: left;
    text-align: center;
    width: 100%;
	}
	.hamburger-label {
    font-size: 8px;
    font-weight: bold;
    margin-top: 0;
    line-height: 10px;
	}
	figure#headerImg {
		min-height:75px;
		height:initial;
	}
	figure {
		width:100%;
		height:auto;
	}
	figure.top_img {
		height: 250px;
    margin: -10px auto 10px;
    width: 250px;
	}
	figure.top_img .top_img_box {
		min-width:120px;
		min-height:120px;
	}
	figure.gallery_img {
    width: 100%;
    height: auto;
    background: #f8f8f8;
	}
	.gallerylist ul{
		width: 100%;
		padding: 0 0px;
	}
	.gallerylist ul li{
		margin: 10px 0px;
		width: 45%;
		background: #f8f8f8;
		display: -webkit-box;
		display: -ms-flexbox;
		display: -webkit-flex;
		display: flex;
		-webkit-align-items: center;
		-ms-flex-align: center;
		align-items: center;
	}
	.gallerylist ul li:nth-child(odd){
		margin-right: 10%;
	}
	.topgallery_sp{
		min-height:125px;
	}
	section#contents, div#contents {
		padding-top:50px;
	}
	#contact dl dt, #contact dl dd {
		width:100%;
	}
	#ContactBtn img{
		display:none;
	}
	figure.lead {
	  max-height: 290px;
	}
	#news ul li a{
		flex-flow: column wrap;
	}
	#menu .nav{
		width: 100%;
	}
	#menu .nav li{
		width: 32%;
	}
	#menu .nav li a{
		width: 100%;
		margin: 0;
		line-height: 13px;
	}
	#news ul{
		width: 100%;
		padding: 0 3em;
	}
	#menu ul.area .f_box {
    flex-flow: row wrap;
	}
	#menu ul.area .f_box .col.w50{
		width: 50%;
	}
	#menu ul.area .p_txt.f_box{
		flex-flow: column wrap;
	}
	#menu ul.area .p_txt.f_box .col.w50{
		width: 100%;
	}
	#menu ul.area .p_txt.f_box .col{
		margin-top: 15px;
	}
	#menu ul.area .p_txt.f_box .col:first-child{
		margin-top: 0px;
	}
	.shopinfo .info .f_box,
	.shopinfo .staff .f_box{
		flex-flow: column wrap;
	}
	.shopinfo .info .f_box img:first-child{
		margin-bottom: 20px;
	}
	.shopinfo .staff ul{
		display:-webkit-box;
		display:-ms-flexbox;
		display: -webkit-flex;
		display:flex;
		margin-bottom: 20px;
	}
	.shopinfo .staff ul li{
		width: 50%;
	}
	.shopinfo ul li:first-child{
		margin-right:10px;
	}
	.gmap {
    height: 200px;
	}
	.shopinfo dl.access dt {
    width: 100%;
	}
	.shopinfo dl.access dd {
    width: 75%;
	padding:0;
	}
	#post .list a {
		width:100%;
	}
	#post .list a figure {
		width: 100%;
		height:200px;
	}
	#post .list li {
    width: 100%;
    margin-right: 0px;
	}
	#question article h3, #question .article h3 {
		padding:1.5em 1em 1.5em 1em;
	}
	figure.make {
		width:40%;
		margin:0 auto;
	}
	#blog figure {
		width:100%;
		height:110px;
	}
	.blog_parts {
    margin-top: 10px;
    margin-bottom: 10px;
	}
	#blog ul li:first-child a {
    padding-left: 1em;
	}
	#blog ul li:last-child a {
    padding-right: 1em;
	}
	#blog ul li {
		width:50%;
	}
	.btn.main{
		width:100%;
	}
	.sbi_item {
		width:50% !important;
	}
	.blog_title, section.cta div.area{
		width: 100%;
	}
	h2.title {
    padding: 40px 40px 0px 40px;
    background-position: 0 45px;
    margin-top: 30px;
    margin-bottom: 30px;
	}
	h2.title.type2 {
    padding: 10px 40px 0px 40px;
	}
	h2.title.type3 {
    padding: 0px 0px 10px;
    margin-bottom: 30px;
	}
	h2.title span{
		width: 100%;
		line-height: 28px;
		font-size: 30px;
		font-size: 3.0rem;
	}
	.title_sub {
    width: 100%;
    line-height: 1.5;
	}
	.w1400{
		padding: 30px 0;
	}
	.btn.type2,.btn.type3 {
    width: 220px;
    height: 50px;
    margin: 20px auto 40px;
	}
	.gallery_box{
		width: 100%;
		text-align: center;
	}
	.gallery_box img{
		width: 90%;
	}
	.gallery_box img.lastimg{
		width: 50%;
	}
	#blog ul {
    width: 100%;
    margin: 0 auto;
	}
	#blog ul{
		flex-flow: row wrap;
	}
	.btn.blog{
		width: 150px;
	}
	ul li .b_title{
		display: block;
	}
	.trans .f_box{
		display: block;
	}
	.blog_txt{
		display: block;
	}
	#blog ul li::after {
    top: 40%;
	}
	ul.list li .col{
		display: flex;
		flex-flow: row wrap;
		-webkit-align-items: center;
		-ms-flex-align: center;
		align-items: center;
	}
	ul.list li .step_title{
		margin: 0;
	}
	ul.list li .step_txt{
		margin: 15px 0;
	}
	#post nav, #menu nav{
		width: 100%;
	}
	#menu nav{
		width: 100%;
	}
	#menu .menuimgbox {
  	margin: 0 auto;
	}
	#menu ul.menutextbox{
		width: 100%;
		padding: 0;
		margin-top: 30px;
	}
	#menu ul.list li > div:first-child{
		margin: 10px auto 20px;
	}
	.content_wrap.menucontents .f_box{
		flex-flow: column wrap;
	}
	.content_wrap .blankx2:last-child{
		padding-bottom: 0px !important;
	}
	.faq > div {
	  padding: 14px 10px;
	}
	#contact .mw_wp_form_preview .contact_preview_btn {
    width: 100%;
	}
	#contact .mw_wp_form_preview .btn:first-child{
	  margin-right: 10px;
	}
	.footer_box{
		width: 100%;
		text-align: center;
		padding: 0 30px;
		flex-flow: column wrap;
		-webkit-align-items: center;
		-ms-flex-align: center;
		align-items: center;
	}
	footer {
    padding: 2rem 0 0px;
	}
	footer .navi article, footer .navi .article {
		display:-webkit-flex;
		display:flex;
	}
	footer h1 {
		margin-bottom: 20px;
	}
	footer div{
		font-size: 10px;
		font-size: 1.0rem;
		color: #666666;
	}
	footer nav {
		width: 100%;
		margin-bottom: 2rem;
	}
	footer nav a {
		width:100%;
		padding:0.8em;
	}
	footer nav a:nth-child(2) {
		padding-top:0;
	}
	footer .sns{
		margin-top: 20px;
	}
	footer ul.dropmenu.f_box{
		flex-flow: column wrap;
	}
	footer ul.dropmenu li {
    width: 100%;
    height: auto;
    padding: 10px 0;
    text-align: center;
	}
	section.cta div.area > div {
    padding: 15px 0;
    width: 100%;
    height: auto;
  }
  section.cta {
		height:auto;
		padding: 0 
	}
	section.cta nav {
    width: 100%;
    margin: 0px auto 60px;
	}
	section.cta h3 {
		font-size:30px;
		font-size:3rem;
		line-height: 1em;
	}
	section.cta h3 p {
		font-size:0.6em;
	}
	section.cta h3 span {
		font-size:14px;
		font-size:1.4rem;
	}
  section.cta .tel{
    border-right: none;
    border-bottom: 1px solid #d3d3d3;
    font-size: 20px;
    font-size: 2rem;
	}
	section.cta .tel p:first-child {
    font-size: 12px;
    font-size: 1.2rem;
    line-height: 0;
	}
	section.cta .web p:first-child {
    font-size: 12px;
    font-size: 1.2rem;
    line-height: 0;
	}
	section.cta div.area{
		padding: 1em 3em;
	}
	section.cta .cta_title span {
    font-size: 15px;
    font-size: 1.5rem;
	}
	section.cta > article, section.cta > .article {
		padding: 2.5em 3em;
	}
	section.cta .btn_cta{
		width: 250px;
		margin-top: 10px;
	}
	section.cta .web {
		margin-top: 20px;
    font-size: 20px;
    font-size: 2rem;
	}
	section.cta .area .f_box{
		-webkit-box-direction:column;
		-webkit-flex-direction:column;
		flex-direction:column;
	}
	section.cta .area .cta_title{
		height: auto;
		margin-bottom: 0px;
	}
}

@media screen and (min-width:768px){
	header {
		position:fixed;
		height:180px;
	}
	header.hide {
		height:0;
		min-height:180px;
		overflow:hidden;
	}
	header > section, header+section {
		height:inherit;
		position:relative;
		max-width:100%;
		margin:0 auto;
	}
	header h1 .over {
		font-size: 10px;
		font-size: 1.0rem;
	}
	header h1 .under {
		font-size: 20px;
		font-size: 2.0rem;
	}
	header nav {
		width: 600px;
		height: 90px;
		margin: 0 auto;
	}
	header nav a{
		display:block;
		width:auto;
		height:90px;
		text-align:center;
		position:relative;
	}
	header nav a span{
		padding: 35px 0px;
	}
	nav a span:hover{
		color: #4cbcf0;
	}
	#header_box {
		width: 100%;
	}
	#header_box .header_top{
		width: 1000px;
		height:90px;
		margin: 0 auto;
		padding: 30px 0 0px;
		text-align: center;
	}
	main {
		position: relative;
	}
	section#contents, div#contents {
		padding-top:180px;
	}
	#blog .blog_parts {
		margin-bottom: 0;
	}
	figure#headerImg {
		height:240px;
		max-height:240px;
	}
	figure.top_img {
		width:300px;
		height:300px;
		border-radius: 50%;
		margin: -13px auto 0;
		border: 10px solid rgba(165,241,243,0.7);
	}
	figure.staff {
		width:350px;
	}
	figure.access {
		width:480px;
	}
	#contact dl dt {
		width:100%;
	}
	#contact dl dd {
		width:100%;
	}
	#cta {
		width:460px;
	}
	.cta > a {
		min-height:160px;
		padding:3.5em 0;
	}
	section.cta h3 {
		font-size:40px;
		font-size:4.0rem;
	}
	section.cta h3 p {
		font-size:0.6em;
	}
	section.cta > div article, section.cta > div .article {
		width:100%;
	}
	.btn.main {
		width:200px;
	}
}

.trans {
	-webkit-transition:all 0.3s ease-in-out;
	-moz-transition:all 0.3s ease-in-out;
	-ms-transition:all 0.3s ease-in-out;
			transition:all 0.3s ease-in-out;
}