@charset "utf-8";

/* ----------------------------------------------------------------------------
	トップページ
	index.html
---------------------------------------------------------------------------- */
#content img,
#visual img{
	width:100%;
}


/* --------------------
	visual
--------------------*/
#visual {
	width:100%;
	height: 100vh;
	margin: 0 0 0 0;
	padding: 0 0 0 0;
	position:relative;
}
#visual .video-box {
	position: fixed;
    z-index: -2;
    top: 0;
    right:0;
    left:0;
    bottom:0;
    overflow: hidden;
	background:#000;
	height: calc(100%);
	margin: 0 0 0 0;
}
#visual iframe{
	position: absolute;
    z-index: -2;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 177.77777778vh;
    height: 56.25vw;
    min-height: 100%;
    min-width: 100%;
}
#visual #action{
	width:100%;
	margin: 0 0 0 0;
	padding: 0 0 0 0;
	position: absolute;
	bottom: 0;
	left: 0;
	background: -webkit-linear-gradient(#040B14 0%, #0C1E35 40%, #112B45 70%, #1E3B55 100%);
	background: -o-linear-gradient(#040B14 0%, #0C1E35 40%, #112B45 70%, #1E3B55 100%);
	background: linear-gradient(#040B14 0%, #0C1E35 40%, #112B45 70%, #1E3B55 100%);;

}
#visual #action h3{
	padding: 0.4em 0 0.2em 0;
	font-size: 2.125rem;
	font-weight: 600;
	text-align: center;
	letter-spacing: 0.1em;
	background: linear-gradient(180deg, #daaf08 0%, #fff9e6 50%, #daaf08 100%); 
	-webkit-background-clip: text; 
	-webkit-text-fill-color: transparent; 
}
#visual #action h3 span{
	font-size: 70%;
}
#visual #action h4{
	padding: 0.15em 0 0.5em;
	font-size: 2.00rem;	
	text-align: center;
	color: #FFF;
}
#visual #action h4 span{
	font-weight: 300;
}
#visual #action h4 strong{
	font-size: 1.3636363636363635em;
}
#visual #action h4 small{
	font-size: 0.7727272727272727em;
}
#visual #action br.tb{
	display: none;
}
@media only screen and (max-width: 999px) {
	#visual #action{
	}
	#visual #action h3{
		font-size: 2.00rem;
	}
	#visual #action h4{
		font-size: 1.625rem;
	}
}
@media only screen and (max-width: 768px) {
	#visual #action h3{
		font-size: 1.75rem;
		line-height: 1.5;
		letter-spacing: 0.1em;
	}
	#visual #action h4{
		font-size: 1.500rem;
	}
	#visual #action br.tb{
		display: block;
	}
}
@media only screen and (max-width: 480px) {	
	#visual #action h3{
		font-size: 1.5rem;
		letter-spacing: 0.1em;
	}
	#visual #action h4{
		font-size: 1.375rem;
	}
}


#scroll_icon{
	width: 28px;
	height: 44px;
	position: fixed;
	bottom: 115px;
	left: 50%;
	margin: 0 0 0 -14px;
	z-index: 300;
}
#scroll_icon #roll{
	width: 6px;
	height: 20px;
	background: rgba(255,255,255,1.00);
	border-radius: 6px;
	position: absolute;
	top: 0;
	left: 50%;
	margin: 0 0 0 -3px;
}
#scroll_icon #i_under{
	width: 20px;
	height: 20px;
	border: 1px solid;
	border-color:  transparent transparent #FFF #FFF;
	transform: rotate(-45deg);
	position: absolute;
	bottom: 15px;
	left: 50%;
	margin: 0 0 0 -10px;
	animation-name:scrollAnime;
	animation-duration:2s;
	animation-delay:.2s;
	animation-fill-mode:backwards;
	animation-timing-function:ease-out;
	animation-iteration-count: infinite;
}
@media only screen and (max-width: 768px) {
	#scroll_icon{
		bottom: 165px;
	}
}
@media only screen and (max-width: 480px) {	
	#scroll_icon{
		bottom: 165px;
	}
}
@keyframes scrollAnime{
	0% {
		bottom: 15px;
		opacity: 0;
	}
	80% {
		bottom: 0px;
		opacity: 1;
	}
	100% {
		bottom: 0px;
		opacity: 0;
	}
}


#content #information{
	width: 100%;
	text-align: center;
	margin: 0 auto;
	padding: 90px 0 130px;
	background:#0F233F;
}
#content #information h4{
	width: 100%;
	text-align: center;
	margin: 0 auto;
	padding: 0 0 45px 0;
	font-size: 0.750rem;
	letter-spacing: 0.1em;
	line-height: 1.4;
	color: #FFF;
}
#content #information dl{
	width: 100%;
	margin: 0 auto 20px auto;
	color: #FFF;
	padding: 0 0 20px 0;
}
#content #information dl dt{
	width: 10em;
	margin: 0 auto;
	font-size: 0.875rem;
	text-align-last: justify;
  	text-justify:inter-ideograph; 
	word-wrap: break-word;
	letter-spacing: 0.2em;
	line-height: 1.4;
	padding: 16px 0 16px 0;
	float: left;
}
#content #information dl dd{
	width: auto;
	margin: 0 auto;
	font-size: 1.000rem;
	letter-spacing: 0.15em;
	text-align: left;
	padding: 15px 0 15px 0;
	line-height: 1.4;
	border-bottom: rgba(255,255,255,0.10) 1px solid;
}
#content #information dl dd br{
	display: none;
}

#content .txt_area{
	width: 100%;
	position: relative;
}
#content .txt_area h3{
	font-size: 2.0rem;
	text-align: center;
	letter-spacing: 0.07em;
	color: #FFF;
	padding: 0 0 65px 0;
}
#content .txt_area h2{
	padding: 0 0 65px 0;
	margin: 0 auto;
}
#content a.more{
	width: 250px;
	background: #bca474;
	display: block;
	margin: 0 auto;
	border-radius: 40px;
	text-decoration: none;
}
#content a.more p{
	font-size: 1.00rem;
	padding: 0.4em 0;
	text-align: center;
	color: #FFF;
	letter-spacing: 0.075em;
}


#content #mid_video{
	height: 400px;
	position: relative;
	width: 100%;
	overflow: hidden;
	margin: 120px 0 0 0;
}
#content #mid_video video{
	/*position: absolute;
    z-index: 0;
    top: 0%;
    left: 0%;
    transform: translate(0%,0%);
    min-height: 100%;
    min-width: 100%;*/
}
#content #mid_video figcaption{
	position: absolute;
	bottom: 8px;
	right: 10px;
}
#content #mid_video .cover{
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	background: rgba(0,0,0,0.30);
}
.simpleParallax{
	height: 100%;
}
@media only screen and (max-width: 999px) {	
	#content #information{
		padding: 80px 0 120px;
	}
	#content #information h4{
		padding: 0 0 45px 0;
		font-size: 0.750rem;
	}
	#content #information dl{
		margin: 0 auto 20px auto;
		padding: 0 0 20px 0;
	}
	#content #information dl dt{
		width: 10em;
		margin: 0 auto;
		font-size: 0.813rem;
		line-height: 1.4;
		padding: 16px 0 16px 0;
		float: left;
	}
	#content #information dl dd{
		font-size: 0.938rem;
		letter-spacing: 0.15em;
		padding: 15px 0 15px 0;
		border-bottom: rgba(255,255,255,0.10) 1px solid;
	}

	#content .txt_area{
	}
	#content .txt_area h3{
		font-size: 1.875rem;
		padding: 0 0 55px 0;
	}
	#content .txt_area h2{
		padding: 0 0 55px 0;
	}
	#content a.more{
		width: 250px;
		border-radius: 40px;
		text-decoration: none;
	}
	#content a.more p{
		font-size: 0.938rem;
	}


	#content #mid_video{
		height: 370px;
		margin: 120px 0 0 0;
	}
}
@media only screen and (max-width: 768px) {
	#content p br{
		display: none;
	}
	
	#content #information{
		padding: 60px 0 90px;
	}
	#content #information h4{
		padding: 0 0 35px 0;
		font-size: 0.688rem;
	}
	#content #information dl{
		margin: 0 auto 15px auto;
		padding: 0 0 15px 0;
	}
	#content #information dl dt{
		width: 100%;
		font-size: 0.750rem;
		padding: 16px 0 0px 0;
		float: none;
	}
	#content #information dl dd{
		font-size: 0.875rem;
		padding: 5px 0 15px 0;
	}

	#content .txt_area{
	}
	#content .txt_area h3{
		font-size: 1.625rem;
		padding: 0 0 40px 0;
	}
	#content .txt_area h2{
		padding: 0 0 40px 0;
	}
	#content a.more{
		width: 200px;
		border-radius: 40px;
	}
	#content a.more p{
		font-size: 0.875rem;
	}


	#content #mid_video{
		height: 300px;
		margin: 90px 0 0 0;
	}
}
@media only screen and (max-width: 480px) {	
	#content .txt_area h3{
		font-size: 1.472rem;
		padding: 0 0 30px 0;
	}
	
	#content #mid_video{
		height: 250px;
		margin: 90px 0 0 0;
	}
}

/* holiday */
#content #holiday{
	width: 1000px;
	text-align: center;
	color: #333;
	margin: 0 auto 30px auto;
	padding: 15px;
	background: #fff;
	box-sizing: border-box;
}
#content #holiday h4{
	font-size: 1.125rem;
	font-weight: 600;
}
#content #holiday p{
	width: 100%;
	text-align: center;
	margin: 0 auto;
	padding: 10px 0 0 0;
	font-size: 1.000rem;
	line-height: 1.6;
}

@media only screen and (max-width: 999px) {
	#content #holiday{
		width: 90%;
	}
	#content #holiday h4{
		font-size: 1.125rem;
	}
	#content #holiday p{
		font-size: 1.000rem;
	}
}
@media only screen and (max-width: 768px) {
	#content #holiday h4{
		font-size: 1.062rem;
	}
	#content #holiday p{
		font-size: 0.937rem;
		text-align: left;
	}
}
@media only screen and (max-width: 480px) {	
	
}



/* TEL */

#content #tel-area{
	width: 1000px;
	text-align: center;
	margin: 0 auto 30px auto;
	padding: 15px 0	;
	border:#fff 2px solid;
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	align-items: center;
	box-sizing: border-box;
}
#content #tel-area p{
	width: 100%;
	text-align: center;
	margin: 0 auto;
	padding: 0 0 10px 0;
	font-size: 1.125rem;
	color: #fff;
}
#content #tel-area .tel{
	width: 100%;
	text-align: center;
	margin: 0 auto;
	padding: 0 0 20px 0;
	font-size: 2.5rem;
	letter-spacing: 0.1em;
	color: #fff;
}
#content #tel-area .time{
	font-size: 0.813rem;
	line-height: 1.6;
	padding: 0 0 0 0;
	margin: 0 auto 0 0;
}

@media only screen and (max-width: 999px) {
	#content #tel-area{
		width: 98%;
	}
	#content #tel-area p{
		font-size: 1.125rem;
	}
	#content #tel-area .tel{
		padding: 0 0 20px 0;
		font-size: 2.5rem;
	}
	#content #tel-area .time{
		font-size: 0.812rem;
		line-height: 1.6;
	}
}
@media only screen and (max-width: 768px) {
	#content #tel-area{
		width: 90%;
	}
	#content #tel-area p{
		font-size: 1.000rem;
	}
	#content #tel-area .tel{
		padding: 0 0 20px 0;
		font-size: 1.875rem;
	}
	#content #tel-area .tel a,
	#content #tel-area .tel a:hover,
	#content #tel-area .tel a:active,
	#content #tel-area .tel a:visited{
		color: #FFF;
		text-decoration: none;
	}
}
@media only screen and (max-width: 480px) {	
	#content #tel-area .tel{
		padding: 0 0 15px 0;
	}
}



/* --------------------
	concept
--------------------*/
#concept{
	width: 100%;
	height: 600px;
	padding: 0 0 0 0;
}
#concept .txt_area{
	width: 100%;
	position: relative;
}
#concept .txt_area h3{
}
#concept .txt_area h2{
	width: 229px;
}
#concept figcaption{
	position: absolute;
	bottom: 8px;
	right: 10px;
	color: #FFF;
	text-shadow: 0 0 3px rgba(0,0,0,1.00);
}


@media only screen and (max-width: 999px) {
	#concept{
		height: 500px;
	}
	#concept .txt_area{
	}
	#concept .txt_area h3{
	}
	#concept .txt_area h2{
		width: 229px;
	}
}
@media only screen and (max-width: 768px) {
	#concept{
		height: 400px;
	}
	#concept .txt_area{
	}
	#concept .txt_area h3{
	}
	#concept .txt_area h2{
		width: calc(229px * 0.8);
	}
}
@media only screen and (max-width: 480px) {	
	#concept{
		height: 300px;
	}
	#concept .txt_area{
	}
	#concept .txt_area h3{
	}
	#concept .txt_area h2{
		width: calc(229px * 0.7);
	}
}

/* --------------------
	design
--------------------*/
#design{
	width: 100%;
	padding: 120px 0 0 0;
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	align-content: center;
	align-items: center;
	position: relative;
}
#design .in-box{
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	align-content: center;
	align-items: center;
	position: relative;
}
#design .in-box figure{
	width: 740px;
	margin: 0 0 0 -240px;
}
#design .txt_area{
	width: 380px;
	padding: 0 0 0 0;
	position: relative;
}
#design .txt_area h3{
	text-align: left;
}
#design .txt_area h2{
	width: 289px;
	margin: 0 0 0 0;
}
#design a.more{
	margin: 0 0 0 0;
}

@media only screen and (max-width: 1480px) {
	#design{
		padding: 120px 0 0 0;
	}
	#design .in-box{
		width: 100%;
	}
	#design .in-box figure{
		width: 50%;
		margin: 0 0 0 0%;
	}
	#design .txt_area{
		width: calc(70% - 380px);
		padding: 0 0 0 0;
		position: relative;
	}
	#design .txt_area h3{
		text-align: left;
	}
	#design .txt_area h2{
		width: 289px;
		margin: 0 0 0 0;
	}
	#design a.more{
		margin: 0 0 0 0;
	}
}
@media only screen and (max-width: 999px) {
	#design{
		padding: 120px 0 0 0;
	}
	#design .in-box{
		width: 100%;
	}
	#design .in-box figure{
		width: 100%;
		margin: 0 0 60px 0%;
	}
	#design .txt_area{
		width: 80%;
		padding: 0 0 0 0;
		position: relative;
		margin: 0 auto;
	}
	#design .txt_area h3{
		text-align: left;
	}
	#design .txt_area h2{
		width: 289px;
		margin: 0 0 0 0;
	}
	#design a.more{
		margin: 0 0 0 0;
	}
}
@media only screen and (max-width: 768px) {
	#design{
		padding: 90px 0 0 0;
	}
	#design .in-box{
		width: 100%;
	}
	#design .in-box figure{
		width: 100%;
		margin: 0 0 40px 0%;
	}
	#design .txt_area h3{
		text-align: left;
	}
	#design .txt_area h2{
		width: calc(289px * 0.8);
		margin: 0 0 0 0;
	}
	#design a.more{
		margin: 0 0 0 0;
	}
}
@media only screen and (max-width: 480px) {	
	#design{
		padding: 70px 0 0 0;
	}
	#design .in-box figure{
		margin: 0 0 30px 0%;
	}
	#design .txt_area h2{
		width: calc(289px * 0.7);
		margin: 0 0 0 0;
	}
	#design a.more{
		margin: 0 0 0 0;
	}
}


/* --------------------
	haseko
--------------------*/
#haseko{
	width: 100%;
	padding: 160px 0 0 0;
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	align-content: center;
	align-items: center;
	position: relative;
}
#haseko .in-box{
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	align-content: center;
	align-items: center;
	position: relative;
}
#haseko .in-box .txt_area{
	width: 100%;
	padding: 0 0 100px 0;
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	align-content: top;
	align-items: top;
	position: relative;
}
#haseko .in-box .txt_area h3{
	width: 50%;
	line-height: 1.4;
	text-align: left;
}
#haseko .in-box .txt_area h2{
	width: 50%;
	text-align: left;
}
#haseko .in-box .txt_area h2 img{
	width: 309px;
}

#haseko .in-box .logo_area{
	width: 100%;
	padding: 0 0 100px 0;
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	align-content: center;
	align-items: stretch;
	position: relative;
}
#haseko .in-box .logo_area i{
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	align-content: stretch;
	align-items: stretch;
}
#haseko .in-box .logo_area i h4{
	width: 100%;
	color: rgba(255,255,255,1.00);
	font-size: 0.875rem;
	text-align: left;
	padding: 0 0 15px 0;
}
#haseko .in-box .logo_area i.com1{
	width: 202px;
}
#haseko .in-box .logo_area i.com2{
	width: 125px;
}
#haseko .in-box .logo_area i.com3{
	width: 216px;
}
#haseko .in-box .logo_area i.peke{
	width: 70px;
	height: 70px;
	margin: auto 0 0 0;
}

@media only screen and (max-width: 999px) {
	#haseko{
		padding: 140px 0 0 0;
	}
	#haseko .in-box{
	}
	#haseko .in-box .txt_area{
		width: 80%;
		margin: 0 auto;
		padding: 0 0 90px 0;
	}
	#haseko .in-box .txt_area h3{
		width: 50%;
	}
	#haseko .in-box .txt_area h2{
		width: 50%;
	}
	#haseko .in-box .txt_area h2 img{
		width: 309px;
	}

	#haseko .in-box .logo_area{
		padding: 0 0 90px 0;
	}
	#haseko .in-box .logo_area i.com1{
		width: 20.2%;
	}
	#haseko .in-box .logo_area i.com2{
		width: 12.5%;
	}
	#haseko .in-box .logo_area i.com3{
		width: 21.6%;
	}
	#haseko .in-box .logo_area i.peke{
		width: 7%;
	}
}
@media only screen and (max-width: 768px) {
	#haseko{
		padding: 100px 0 0 0;
	}
	#haseko .in-box{
	}
	#haseko .in-box .txt_area{
		width: calc(309px * 0.8);
		margin: 0 auto;
		padding: 0 0 60px 0;
	}
	#haseko .in-box .txt_area h3{
		width: 100%;
	}
	#haseko .in-box .txt_area h2{
		width: 100%;
	}
	#haseko .in-box .txt_area h2 img{
		width: calc(309px * 0.8);
	}

	#haseko .in-box .logo_area{
		padding: 0 0 60px 0;
		display: flex;
		justify-content: center;
		flex-wrap: wrap;
		align-content: center;
		align-items: center;
		position: relative;
		flex-direction: column;
	}
	#haseko .in-box .logo_area i h4{
		font-size: 0.813rem;
		text-align: center;
		padding: 0 0 15px 0;
	}
	#haseko .in-box .logo_area i.com1{
		width: calc(20.2% * 2);
	}
	#haseko .in-box .logo_area i.com2{
		width: calc(12.5% * 2);
	}
	#haseko .in-box .logo_area i.com3{
		width: calc(21.6% * 2);
	}
	#haseko .in-box .logo_area i.peke{
		width: calc(7% * 2);
		height: auto;
		margin: 40px 0 40px 0;
	}
}
@media only screen and (max-width: 600px) {	

	#haseko .in-box .logo_area{
		width: 100%;
		margin: 0 auto;
		padding: 0 0 60px 0;
		display: flex;
		justify-content: center;
		flex-wrap: wrap;
		align-content: center;
		align-items: center;
		position: relative;
		flex-direction: column;
	}
	#haseko .in-box .logo_area i.com1{
		width: calc(309px * 0.76);
	}
	#haseko .in-box .logo_area i.com2{
		width: calc(309px * 0.5);
	}
	#haseko .in-box .logo_area i.com3{
		width: calc(309px * 0.8);
	}
	#haseko .in-box .logo_area i.peke{
		width: calc(309px * 0.2);
		margin: 30px 0 30px 0;
	}
}
@media only screen and (max-width: 480px) {	

	#haseko .in-box .txt_area{
		width: calc(309px * 0.7);
		margin: 0 auto;
		padding: 0 0 60px 0;
	}
}


/* --------------------
	residence
--------------------*/
#residence{
	width: 100%;
	padding: 160px 0 160px 0;
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	align-content: center;
	align-items: center;
	position: relative;
}
#residence .in-box{
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	align-content: center;
	align-items: center;
	position: relative;
}
#residence .in-box figure{
	width: 740px;
	margin: 0 -240px 0 0;
	order: 2;
}
#residence .txt_area{
	width: 500px;
	padding: 0 0 0 0;
	position: relative;
	order: 1;
}
#residence .txt_area h3{
	text-align: left;
}
#residence .txt_area h2{
	width: 226px;
	margin: 0 0 0 0;
}
#residence a.more{
	margin: 0 0 0 0;
}

@media only screen and (max-width: 1480px) {
	#residence{
		padding: 160px 0 160px 0;
	}
	#residence .in-box{
		width: 100%;
	}
	#residence .in-box figure{
		width: 50%;
		margin: 0 0 0 0%;
	}
	#residence .txt_area{
		width: 500px;
		padding: 0 0 0 0;
		position: relative;
		margin: 0 0 0 auto;
	}
	#residence .txt_area h3{
		text-align: left;
	}
	#residence .txt_area h2{
		width: 226px;
		margin: 0 0 0 0;
	}
	#residence a.more{
		margin: 0 0 0 0;
	}
}
@media only screen and (max-width: 999px) {
	#residence{
		padding: 120px 0 120px 0;
	}
	#residence .in-box{
		width: 100%;
	}
	#residence .in-box figure{
		width: 100%;
		margin: 0 0 60px 0%;
		order: 1;
	}
	#residence .txt_area{
		width: 80%;
		padding: 0 0 0 0;
		position: relative;
		margin: 0 auto;
		order: 2;
	}
	#residence .txt_area h3{
		text-align: left;
	}
	#residence .txt_area h2{
		width: 226px;
		margin: 0 0 0 0;
	}
	#residence a.more{
		margin: 0 0 0 0;
	}
}
@media only screen and (max-width: 768px) {
	#residence{
		padding: 90px 0 90px 0;
	}
	#residence .in-box{
		width: 100%;
	}
	#residence .in-box figure{
		width: 100%;
		margin: 0 0 40px 0%;
	}
	#residence .txt_area h3{
		text-align: left;
	}
	#residence .txt_area h2{
		width: calc(226px * 0.8);
		margin: 0 0 0 0;
	}
	#residence a.more{
		margin: 0 0 0 0;
	}
}
@media only screen and (max-width: 480px) {	
	#residence{
		padding: 70px 0 70px 0;
	}
	#residence .in-box figure{
		margin: 0 0 30px 0%;
	}
	#residence .txt_area h2{
		width: calc(226px * 0.7);
		margin: 0 0 0 0;
	}
}


/* --------------------
	location
--------------------*/
#location{
	width: 100%;
	position: relative;
}
#location #loc_top{
	width: 100%;
	height: 600px;
	padding: 0 0 0 0;
}



#location .in-box{
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	align-content: center;
	align-items: center;
	position: relative;
}
#location .txt_area{
	width: 100%;
	padding: 60px 0 0 0;
	box-sizing: border-box;
}
#location .txt_area h3{
	text-align: left;
	color: rgba(255,255,255,1.00);
}
#location .txt_area h2{
	width: 420px;
	margin: 0 0 0 0;
}
#location #loc_top figcaption{
	position: absolute;
	bottom: 8px;
	right: 10px;
	color: #000;
	text-shadow: 0 0 3px rgba(255,255,255,1.00);
}


#location #map_area{
	display: flex;
	justify-content: flex-end;
	flex-wrap: wrap;
	align-content: center;
	align-items: center;
	position: relative;
	padding: 10px 0 190px 0;
}
#location #map_area #base{
	width: 604px;
	position: relative;
	margin: 0 auto 0 80px;
}
#location #map_area #base figure{
	position: absolute;
	display: block;
	line-height: 0;
	overflow: hidden;
}
#location #map_area #base figure p{
	width: 0%;
	height: 100%;
	transition: all .3s ease;
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	overflow: hidden;
}
#location #map_area #base figure p.right{
	left: auto !important;
	right: 0 !important;
}
#location #map_area #base figure p.ani_l{
	width: 100%;
	height: 100%;
	transition: all .7s ease;
}
#location #map_area #base figure span{
	width: 100%;
	height: 100%;
	display: block;
}
#location #map_area #base figure img{
	width: auto !important;
	height: 100%;
	display: block;
}
#location #map_area #base figure p.right img{
	float: right;
}
#location #map_area #base figure#a01{
	width: 62.41721854304636%;
	top: 11.2%;
	left: 44.70198675496689%;
}
#location #map_area #base figure#a01::before{
	content: "";
	display: block;
	padding-top: 44.03183023872679%;
}

#location #map_area #base figure#a02{
	width: 87.25165562913907%;
	top: 23.4%;
	left: 44.70198675496689%;
}
#location #map_area #base figure#a02::before{
	content: "";
	display: block;
	padding-top: 19.93852%;
}

#location #map_area #base figure#a03{
	width: 70.86092715231788%;
	top: 34.6%;
	left: 44.5364238410596%;
}
#location #map_area #base figure#a03::before{
	content: "";
	display: block;
	padding-top: 14.7196261682243%;
}

#location #map_area #base figure#a04{
	width: 55.79470198675497%;
	top: 2.2%;
	left: -13.57615894039735%;
}
#location #map_area #base figure#a04::before{
	content: "";
	display: block;
	padding-top: 62.9080118694362%;
}

#location #map_area #base figure#a05{
	width: 50.33112582781457%;
	top: 20.6%;
	left: -8.112582781456954%;
}
#location #map_area #base figure#a05::before{
	content: "";
	display: block;
	padding-top: 39.50263157894737%;
}

#location #map_area #base figure#a06{
	width: 65.89403973509934%;
	top: 36.6%;
	left: -24.00662251655629%;
}
#location #map_area #base figure#a06::before{
	content: "";
	display: block;
	padding-top: 13.01658291457286%;
}

#location #map_area #base figure#a07{
	width: 41.72185430463576%;
	top: 47.4%;
	left: -1.158940397350993%;
}
#location #map_area #base figure#a07::before{
	content: "";
	display: block;
	padding-top: 64.28571428571429%;
}

#location #map_area #base figure#c01{
	width: 16.22516556291391%;
	top: 48%;
	left: 45.86092715231788%;
}
#location #map_area #base figure#c01::before{
	content: "";
	display: block;
	padding-top: 43.87755102040816%;
}

#location #map_area .under_txt_area{
	position: absolute;
	bottom: 190px;
	right: 0;
}
#location #map_area .under_txt_area h4{
	font-size: 1.375rem;
	line-height: 2.0;
	text-align: left;
	color: #FFF;
	letter-spacing: 0.07em;
	padding: 0 0 1.8em 0;
}
#location #map_area .under_txt_area a.more{
	margin: 0 0 0 0;
}

@media only screen and (max-width: 999px) {
	#location{
	}
	#location #loc_top{
		height: 500px;
	}
	#location .in-box{
		width: 100%;
	}
	#location .txt_area{
		width: 80%;
		padding: 55px 0 0 0;
		margin: 0 auto;
	}
	#location .txt_area h2{
		width: 420px;
		margin: 0 0 0 0;
	}


	#location #map_area{
		padding: 10px 0 160px 0;
	}
	#location #map_area #base{
		width: 60.4%;
		margin: 0 auto 0 17%;
	}

	#location #map_area .under_txt_area{
		position: absolute;
		bottom: 100px;
		right: 0;
	}
	#location #map_area .under_txt_area h4{
		font-size: 1.250rem;
	}
	#location #map_area .under_txt_area a.more{
		margin: 0 0 0 0;
	}
}
@media only screen and (max-width: 768px) {
	#location{
	}
	#location #loc_top{
		height: 400px;
	}
	#location .txt_area{
		padding: 40px 0 0 0;
	}
	#location .txt_area h2{
		width: calc(420px * 0.8);
		margin: 0 0 0 0;
	}


	#location #map_area{
		padding: 10px 0 120px 0;
	}
	#location #map_area #base{
		width: 60.4%;
		margin: 0 auto 0 17%;
	}

	#location #map_area .under_txt_area{
		position: relative;
		bottom: auto;
		right: auto;
		width: 100%;
		margin: 0 auto;
		padding: 30px 0 0 0;
	}
	#location #map_area .under_txt_area h4{
		font-size: 1.125rem;
		text-align: center;
	}
	#location #map_area .under_txt_area a.more{
		margin: 0 auto 0 auto;
	}
}
@media only screen and (max-width: 480px) {	
	#location #loc_top{
		height: 300px;
	}
	#location .txt_area{
		padding: 40px 0 0 0;
	}
	#location .txt_area h2{
		width: calc(420px * 0.68);
		margin: 0 0 0 0;
	}


	#location #map_area{
		padding: 10px 0 90px 0;
	}
	#location #map_area #base{
		width: 60.4%;
		margin: 0 auto 0 17%;
	}

	#location #map_area .under_txt_area{
		padding: 30px 0 0 0;
	}
	#location #map_area .under_txt_area h4{
		font-size: 1.000rem;
		text-align: center;
	}
	#location #map_area .under_txt_area a.more{
		margin: 0 auto 0 auto;
	}
}

/* --------------------
	バナー
--------------------*/
.banner-container {
  width: 1000px;
  margin: 0 auto 20px auto;
  display: flex;
  justify-content: space-between;
  gap: 20px; /* 画像の間に20pxのスペース */
}

.banner {
  width: 100%;
  max-width: 490px;
  height: auto;
  display: block;
}

@media only screen and (max-width: 1000px) {
	.banner-container {
		width: 100%;
		padding: 0 10px;
		box-sizing: border-box;
		gap: 20px; 
		flex-wrap: nowrap;
		justify-content: space-between;
	}
	.banner {
		width: calc(50% - 10px);
		max-width: none;
	}
}

@media only screen and (max-width: 768px) {
	.banner-container {
		width: 90%;
		padding: 0;
		flex-direction: column;
	}
	.banner {
		width: 100% !important;
	}
}

@media only screen and (max-width: 480px) {	
}


.banner-single {
	width: 1000px;
	margin: 0 auto 20px auto;
	box-sizing: border-box;
}
.banner-single img{
	border: 1px solid #fff;
}
.banner-single img.pcb {
	display: block;
}
.banner-single img.spb {
	display: none;
}

@media only screen and (max-width: 1000px) {
	.banner-single {
		width: 98%;
		margin: 0 auto 20px auto;
	}
}

@media only screen and (max-width: 768px) {
	.banner-single {
		width: 90%;
	}
}

@media only screen and (max-width: 480px) {	
	.banner-single img.pcb {
		display: none;
	}
	.banner-single img.spb {
		display: block;
	}
}