@charset "utf-8";


/**************************************************
 Responsive
**************************************************/
	@media screen and (max-width: 690px){
		
		
		
	/**************************************************
	common
	**************************************************/
	.btnHanger{margin-top: 30px;}
	.btnHanger a{
		width: 100%;
		height: 60px;
		font-size: 1.7rem;
		letter-spacing: 1px;
		border-radius: 10px;
	}
	.btnHanger a::before{
		width: 20px;
		height: 20px;
		top: calc(50% - 10px);
		background-size: 100%;
		right: 10px;
	}
		
		
		
	/**************************************************
	visualHanger
	**************************************************/
	.visualHanger{
		padding-bottom: 60px;
	}
	.visualPhoto{
		position: relative;
		width: calc(100% - 10px);
		height: 55vw;
		min-height: auto;
		border-top-right-radius: 20px;
		border-bottom-right-radius: 20px;
	}

	.visualCopy{
		width: 292px;
		/*height: 292px;*/
		height: 305px;
		right: calc(50% - 146px);
		bottom: -165px;
		padding-right: 0;
	}
	.visualCopy img{
		width: 100px;
		margin-top: -55px;
	}
	.visualCopy p{
		font-size: 2.0rem;
		letter-spacing: 1px;
		padding-top: 15px;
	}
	.visualCopy p small{
		font-size: 1.4rem;
		letter-spacing: 1px;
		margin-bottom: 12px;
	}
		
		
		
	/**************************************************
	topInner_wh
	**************************************************/
	.topInner_wh{
		width: calc(100% - 20px);
		/*margin: 40px auto 60px auto;*/
		margin: 30px auto 60px auto;
		padding: 50px 20px 70px 20px;
		border-radius: 20px;
	}
	.topInner_wh::before{
		width: 64px;
		height: 124px;
		left: 10px;
		bottom: -70px;
		transform: rotate(1deg) translate3d(0, 0, 0);
	}
	.topInner_wh::after{
		width: 71px;
		height: 126px;
		right: 10px;
		bottom: -70px;
	}

	.intro h2{
		/*font-size: 1.8rem;*/
		font-size: 4.5vw;
		letter-spacing: 1px;
	}
	.intro h2 span{padding: 0 45px;}
	.intro h2 span::before,
	.intro h2 span::after{
		width: 28px;
		height: 43px;
		bottom: -10px;
		background-size: 100% auto;
	}
	.intro h2 span strong:first-of-type{margin-bottom: 15px;}
	.intro h2 span strong::after{height: 13px;}

	.intro p{
		font-size: 1.6rem;
		padding-top: 40px;
	}

	.movieHanger{
		margin-top: 50px;
		padding: 20px 25px;
		border-radius: 10px;
		background-size: 100% auto;
	}
	.movieHanger::before,
	.movieHanger::after{
		width: 12px;
		height: 32px;
		top: -12px;
		background: url("../../img/showroom/top/intro_obj2.svg") no-repeat center bottom;
		background-size: 100% auto;
	}
	.movieHanger::before{left: 10px;}
	.movieHanger::after{right: 10px;}

	.s_news{margin-top: 100px;}

	.newsHeader h2{
		font-size: 1.8rem;
		font-weight: 700;
		letter-spacing: 1px;
		padding-left: 25px;
	}
	.newsHeader h2::before{
		width: 16px;
		height: 16px;
		top: calc(50% - 8px);
	}
	.newsHeader h2::after{display: none;}

	.newsHeader nav{
		width: 100%;
		padding: 20px 10px 0 10px;
	}
	.newsHeader nav button{
		width: calc(50% - 5px);
		height: 48px;
		margin: 10px 0 0 0;
		font-size: 1.6rem;
	}
	.newsHeader nav button:first-of-type{width: 100%;}
	.newsHeader nav button:nth-of-type(2){margin-right: 10px;}

	.newsList{
		margin-top: 0;
		padding: 10px 10px 0 10px;
	}
	.newsList ul li{
		width: 100%;
		margin: 20px 0 0 0;
	}
	/* .newsIndex ul li{
		width: 100%;
		margin: 20px 0 0 0;
	}
	.newsIndex ul li a{
		padding: 30px 25px;
		font-size: 1.6rem;
	}
	.newsIndex ul li a div{
		width: 86%;
		margin: 0 auto;
	}
	.newsIndex ul li a small{
		font-size: 1.4rem;
		padding-left: 16px;
	}
	.newsIndex ul li a small::before{
		width: 12px;
		height: 12px;
		top: 4px;
	}
	.newsIndex ul li a strong{margin: 10px 0 5px 0;}
	.newsIndex ul li a:hover{box-shadow: 0 0 10px rgba(0,0,0,0.16);} */

	.news .btnHanger a{
		width: calc(100% - 20px);
		margin: 30px auto 0 auto;
		background: #FFEE74;
	}



	/**************************************************
	topInner_obj
	**************************************************/
	.topInner_obj{
		padding: 150px 20px 230px 20px;
		background: url("../../img/showroom/top/bg2.jpg") repeat center center;
		background-size: 60% auto;
	}
	.topInner_obj::before{
		height: 72px;
		background: url("../../img/showroom/top/wave.svg") repeat-x center top;
		background-size: auto 100%;
	}

	.twoColumn{
		width: 100%;
		margin: 80px auto 0 auto;
		
	}
	.twoColumn .inner{width: 100%;}
	.twoColumn.facility .inner,
	.twoColumn.cooking .inner{order: 1;}
	.twoColumn .inner dl dt img{
		width: 40px;
		height: 40px;
		margin: 0 auto 10px auto;
	}
	.twoColumn .inner dl dt span{
		font-size: 1.8rem;
		letter-spacing: 3px;
		white-space: nowrap;
	}
	.twoColumn .inner dl dd{
		font-size: 1.6rem;
		padding-top: 30px;
	}
	.twoColumn .inner .btnHanger a{
		width: 90%;
		margin: 0 auto;
	}
	.twoColumn.cooking .inner .btnHanger a{font-size: 4.3vw;}
	.twoColumn .photoHanger{
		width: 100%;
		margin-top: 40px;
	}
	.twoColumn.facility .photoHanger,
	.twoColumn.cooking .photoHanger{order: 2;}

	.movieCorner{
		width: 100%;
		margin: 110px auto 0 auto;
		padding: 20px 20px 0 20px;
		background: #FFE3E3;
		border-radius: 20px;
	}
	.movieCorner::before{
		width: 64px;
		height: 134px;
		top: -65px;
		right: 25px;
	}
	.movieCorner::after{
		width: 80px;
		height: 121px;
		bottom: -75px;
		left: 10px;
	}
	.mcInner{padding: 40px 30px;}
	.mcInner h2{
		font-size: 1.8rem;
		letter-spacing: 2px;
	}
	.mcInner h2 img{
		width: 40px;
		height: 40px;
		margin-right: 10px;
	}
	.mcInner p{
		font-size: 1.6rem;
		letter-spacing: 0;
		padding-top: 25px;
	}

	.movieCorner .btnHanger{margin-top: 0;}
	.movieCorner .btnHanger a{width: 75%;}



	/**************************************************
	snsWrapper
	**************************************************/
	.snsWrapper{padding: 50px 10px 10px 10px;}
	.snsWrapper h2{
		width: calc(100% - 140px);
		height: 71px;
		top: -70px;
		left: 70px;
		font-size: 1.8rem;
		letter-spacing: 3px;
		border-top-left-radius: 20px;
		border-top-right-radius: 20px;
	}
	.snsWrapper h3{
		font-size: 1.8rem;
		padding-left: 0;
	}
	.snsWrapper h3 img{
		width: 40px;
		height: 40px;
	}
	.snsWrapper ul{margin-top: 10px;}
	.snsWrapper ul li{
		width: calc(50% - 5px);
		margin: 10px 10px 0 0;
	}
	.snsWrapper ul li:nth-of-type(2n){margin: 10px 0 0 0;}
	.snsWrapper ul li:last-of-type{display: none;}

	.snsWrapper .btnHanger{margin-top: 30px;}
	.snsWrapper .btnHanger a{
		font-size: 1.8rem;
		width: 85%;
	}
	.snsWrapper .btnHanger a::before{
		width: 40px;
		height: 40px;
		top: calc(50% - 20px);
	}



	/**************************************************
	access
	**************************************************/
	.access{padding: 140px 15px 80px 15px;}
	.access::before{
		height: 72px;
		background-size: auto 100%;
	}

	.access section{width: 100%;}
	.access section h2{
		font-size: 1.8rem;
		letter-spacing: 2px;
		padding-left: 24px;
	}
	.access section h2::before{
		width: 16px;
		height: 16px;
		top: 2px;
	}
	.access section p{
		position: static;
		font-size: 1.8rem;
		letter-spacing: 0;
		padding-top: 20px;
		line-height: 1.6;
	}

	.accessInner{padding-top: 20px;}
	.accessInner dl{
		width: 100%;
		margin: 30px 0 0 0;
	}
	.accessInner dl:nth-of-type(2n){margin: 30px 0 0 0;}
	.accessInner dl dt{font-size: 1.6rem;}
	.accessInner dl dd{font-size: 1.6rem;}

	.mapHanger{
		margin-top: 30px;
		height: 75vw;
	}
		
	
	
}