@charset "UTF-8";
/* CSS Document */





/* レスポンシブ-----------------------------------------------------------------------*/

@media screen and (max-width:768px){
	
	.sp{display: initial;}
	.pc{display: none;}
	
	
  .br-pc { display:block; }
  .br-sp { display:none; }

  .br-pc { display:none; }
  .br-sp { display:block; }
	
	
	
	footer{padding: 40px 0 90px;}
	footer section{
		width: 100%;
		display: block;
		padding: 0;
		margin-bottom: 10px;
		background: none;
		transform: none;}
	footer section .map{
		position: static;}
	footer section .map iframe{width: 100%;}
	footer section .map p{display: none;}
	
	footer section .footer_info{
		padding: 15px;
		width: 100%;
		margin-bottom: 30px;}
	footer section .footer_info .f_logo{margin: 20px 0;}
	footer section .footer_info div{
		display: flex;
		flex-wrap: wrap;
		align-content: center;
		margin-bottom: 30px;}
	footer section .footer_info div p{flex-basis: 100%;}
	footer section .footer_info div p.tel{order: 0;margin: 20px 0;}
	footer section .footer_info div p:not([class="tel"]){order: 1;}
	
	footer section .footer_info table{
		background: #956767;
		color: #fff;}
	footer section .footer_info table tr:first-child{border-top: none;}
	footer section .footer_info table tr{border-bottom: 1px solid #fff;}
	footer section .footer_info table + p{color: #000;}
	
	footer .foot_nav{display: none;}
	footer .pagetop{right: 20px;bottom: 1100px;}
	
	.sp_nav{
		display: flex;
		width: 100%;
		justify-content: center;
		background: #956767;
		position: fixed;
		left: 0;
		bottom: 0;
	    z-index: 1000;
	}
	.sp_nav li{
		flex-basis: calc(100%/2);
		text-align: center;}
	.sp_nav li:not(:last-child){border-right: 1px solid #fff;}
	.sp_nav li a{
		display: block;
		background: #956767;
		color: #fff;
		font-size: 0.9em;
		font-weight: bold;
		padding: 10px;}	    
	.sp_nav li img{
		display: block;
		margin:0 auto 3px;}
	
	
	
	/* MVまわり-------------*/
	#main:before{height: 1050px;}

	#main .head-logo .logo img{
	margin-right: 0;
	padding-top: 8px;
	width: 285px;
	}
	
	#main .head-logo {
    height: 60px;
}
	
	#main .head-logo .logo{
	margin-left: 10px;
	height: 63px;
}
	
	#main .head-logo .menu_btn{
	display: inline-block;
	position: fixed;
	right: 0;
	top: 0;
	z-index: 100000;
	}

    #main .head-logo .menu_btn a{
	display: block;
	background: #956767;
	text-align: center;
	color: #fff;
	box-sizing: border-box;
	width: 60px;
	height: 60px;
	padding: 6px;}

    #main .head-logo .menu_btn a img{
	display: block;
	margin:6px auto 7px;
	}
	
	#main .head-logo .tel {
	display: none;
}

	
	#main .top-mv .mv{
	height: 300px;
}


#main .top-mv .mv img{
	width: calc(100% - 0px);
    }
	
	#main .top-mv .mv .txt{
    width: 60px;
	margin-left:auto;
    }
	
	
	#main .top-mv .mv .copy{
  left: 45%;
  text-shadow: 10px  10px 10px rgba(255,255,255,0.5),
            -10px  10px 10px rgba(255,255,255,0.5),
             10px -10px 10px rgba(255,255,255,0.5),
            -10px -10px 10px rgba(255,255,255,0.5);
  }


#main .top-mv .mv .copy .copy1{
  font-size: 2rem;
  text-align: center;
}

#main .top-mv .mv .copy2{
  font-size: 1.2rem;
  text-align: center;
}
	

	
	
	#main .top-mv .eng {
    right: 30px;
    top: 380px;
}
	
	
	
	

	/* 営業時間とお知らせ-------------*/
	
	.top-info {
    background: #f2efe8;
    padding: 40px 0 60px;
}
		
	.top-info .flex {
    display: block;
}
	
	.top-info .shop-hour{
	width: 100%;
}
	
	.top-info .left{
	padding-right: 0;
	padding-bottom: 20px;
}
	
	.top-info .shop-hour + p {
    margin-right: 0;
}
	
	.top-info .right {
    padding-left: 0;
}
	
	.top-info .right .right-box {
    width: 100%;
}

    /* お車でお越しの方---------*/
	
	.car_access .both {
    display: block;
	background: none;
    padding-right: 4vw;
    padding-left: 4vw;
    width: 100%;
	}
	
	
	.car_access .both .right-img,
	.car_access .both .left-txt {
    width: 100%;
	background: #ffffff;
    margin: 0 auto;
}
	
	.car_access .both .left-txt {
    padding: 20px 20px 5px 20px;
}

	.car_access .both .right-img {
    padding: 5px 20px 20px 20px;
}
	
.car_access .shadow:after {
    width: 335px;
    height: 60px;
	bottom: 210px;
}

	

	/* POLICY---------*/	
	
	.policy .left {
    background: none;
    margin-bottom: 0;
}
	
	.policy .left .left_in .txt {
    width: 100%;
}

	.policy .left .left_in {
    padding-right: 0;
	}
	
	.policy .left img{
	width: 100%;
	position: relative;
	z-index: -1
	}
		
    #main .policy .left .left_in .title{
    margin-top: -60px;
	z-index: 1;
    padding-bottom: 20px;
	}
	
	#main .policy .left h3 {
    padding-bottom: 20px;
}
	
	#main .policy .btn {
    padding: 20px 0;
}
	
	#main .policy .btn p{ 
	text-align: center;
}
	#main .policy .read_btn img {
    margin: 0 7px 0 -63px;
}
	
	/* 内装---------*/
	
	#main .naisou img {
    height: 200px;
    object-fit: cover;
	}
	

	
	/* MOVIE---------*/	

	#main .movie {
	background: #f2efe8;
	padding: 45px 5px;
}
	
	
	
	/* FEATURE--------*/
	
	#main .feature {
    padding: 50px 0 50px;
}
	
	#main .feature .title {
    padding-bottom: 80px;
}
	
	#main .feature div[class*="t_0"] p {
    margin-top: -65px;
}	
	
	#main .feature div[class*="t_0"] {
    width: 60%;
    padding: 20px;
}
	
	#main .feature .feature1,
	#main .feature .feature2,
	#main .feature .feature3,
	#main .feature .feature4,
	#main .feature .feature5{
    background-size: auto 100%;
}
	
	#main .feature .feature1 {
    background: url(../img/main/feature1_sp.jpg) no-repeat center right;
	background-size: auto 100%;
	}
	
	#main .feature .feature2 {
    background: url(../img/main/feature6_sp.jpg) no-repeat center right;
	background-size: auto 100%;
	}
	
	#main .feature .feature3 {
    background: url(../img/main/feature3_sp.jpg) no-repeat center;
	background-size: auto 100%;
	}
	
	#main .feature .feature4 {
    background: url(../img/main/feature4_sp.jpg) no-repeat center;
	background-size: auto 100%;
	}
	
	#main .feature .feature5 {
    background: url(../img/main/feature5_sp.jpg) no-repeat center;
	background-size: auto 100%;
	}
	
	
	
	
	.feature .shadow:after {
	width: 335px;
	}
	
	
	
	/* EQUIPMENT--------*/
	
#main .equipment .equipment_card {
    width: 48%;
    margin: 2px;
}
	
	#main .equipment .equipment_card img {
    width: 100%;
    margin-bottom: 10px;
}
	
	#main .equipment .equipment_card div[class*="equipment_in"]{
	     margin: 0;
	}
	
	#main .equipment .equipment_card h3 {
    margin-bottom: 15px;
	font-size: 1rem;
}
	
	#main .equipment {
    padding: 50px 0 50px;
}
	
	/* FACILITY--------*/
	
    #main .facility {
    padding: 50px 0 50px;
}	
	
	/* VIDEO--------*/
.video{width: 100%; margin: 20px auto; padding: 0px; background-color: #fff;}
	

	
	
	/* FOOTER--------*/	
	
	#main nav label{
		display: flex;
		flex-wrap: wrap;
		position: fixed;
		background: #956767;
		color: #fff;
		font-weight: bold;
		font-size: 0.7em;
		text-align: justify;
		letter-spacing: 0.2em;
		padding:15px;
		box-sizing: border-box;
		top: 0;
		right: 0;
		z-index: 100000;
		transition-duration: .4s;
	    width: 60px;
		height: 60px;
	}
	
	#main nav label:before{
		flex-basis: 100%;
		content: "";
		display: block;
		height: 7px;
		border: solid #fff;
		border-width: 1px 0;
		order: -2;
		transition-duration: .4s;}
	#main nav label:after{
		flex-basis: 100%;
		content: "";
		display: block;
		height: 7px;
		border-bottom: 1px solid #fff;
		order: -1;
		margin-bottom: 5px;
		transition-duration: .4s;}
	
	#main nav ul{
		display: flex;
		flex-wrap: wrap;
		align-content: center;
		background: #956767;
		text-align: center;
		position: fixed;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		z-index: 99;
		opacity: 0;
		visibility: hidden;
		transition-duration: .3s;}
	
	#main nav li{
		flex-basis: 100%;
		margin: 15px 0;
		font-size: 1.3em;}
	#main nav li a{
		color: #fff;
		font-weight: bold;}
	
	#main nav input:checked ~ label{color:#956767;}
	
	#main nav input:checked ~ label:after{
		flex-basis: 25px;
		transform: rotate(45deg)translate(6px,-5px);}
	#main nav input:checked ~ label:before{
		flex-basis: 25px;
		border-top: none;
		transform: rotate(-45deg)translate(-4px,8px);}
	
	
	#main nav input:checked ~ ul{opacity: 1;visibility: visible;}
	
	
	#sub main.sub{width: 100%;}
	#sub main.sub section{width: 100%;}

	#sub .sub_common{
		display: flex;
		flex-direction: column;}
	#sub .h1_area{
		display: block;
		height: auto;
		order: 1;}
	
	#sub h1{
		text-align: left;
		padding: 0 15px;
		margin-bottom: 30px;}
	#sub h1 span{margin-bottom: 10px;}
	#sub .h1_area img{
		position: static;
		width: 100%;
		height: 375px;
		object-fit: cover;
		display: block;}
	#sub .h1_area .eng{display: none;}
	
	#sub h2,
	#sub h3,
	#sub h4{text-align: center;}
	
	#sub h3{margin-bottom: 20px;}
	#sub h4{margin-bottom: 20px;}
	
	#sub .pankuzu{
		width: 100%;
		order: 0;
		margin-bottom: 10px;
		padding: 0 15px;}
	
	#sub main.sub{
		padding: 0 15px;
		box-sizing: border-box;}
	
	#sub main.sub .catch{
		display: block;
		position: relative;
		padding-top: 120px;}
	#sub main.sub .catch .photo{
		width: calc(100% - 20px);
		height: 250px;
		transform: translateX(35px);
		margin-bottom: 70px;}
	
	#sub main.sub .catch h2{
		position: absolute;
		display: flex;
		align-items: center;
		justify-content: center;
		text-align: center;
		width: 100%;
		height: 100px;
		top: 0;
		left: 0;}
	#sub main.sub .catch .txt{padding: 0;}
	
	#sub main.sub ul.list li{padding-left: 20px;}
	#sub main.sub ul.list li:before{
		content: "";
		width: 10px;
		height: 10px;
		background: #956767;
		top: 5px;}
	
	#sub main.sub .price h2{
		text-align: left;
		margin-bottom: 50px;}
	#sub main.sub .price h3{text-align: left;}
	
	#sub main.sub .flow h2{
		text-align: left;
		margin-bottom: 50px;}
	#sub main.sub .flow .flow_box{display: block;}
	#sub main.sub .flow .flow_box .box h3{text-align: left;}
	#sub main.sub .flow .flow_box .box .photo{
		order: 2;
		flex-basis: calc(50vw - 30px);
		height: calc(50vw - 30px);}
	#sub main.sub .flow .flow_box .box .txt{
		order: 3;
		flex-basis: calc(50vw - 20px);
		flex-shrink: 2;
		font-size: 1.15em;}
}
/* iphone5----*/
@media screen and (max-width:340px){
	#sub header .logo img{width:calc(100% - 60px);}
	#sub header nav label{padding: 10px;}
	footer section .footer_info table th,
	footer section .footer_info table td{
		padding: 8px 6px;
		font-size: 0.9em;}
}
/* 201912/16----*/
@media screen and (max-width:768px){
span.seo {
    margin-bottom: 6vw;
    font-size: 12px;
}
input#gnav {
    display: none;
}
#main .top-mv .mv .tategaki {
    line-height: 5;
    }
}