@charset "UTF-8";
/*
 * ================================================
 *
 * [home]
 *
 * ================================================
 */

/**
 * homeWrapper
 */
#homeWrapper {
	position: relative;
	width: 1000px;
	margin: 0 auto;
	/*padding: 10px 0;*/
}





/**********************************
 * Slide Movie
**********************************/
.slideMovie{
	margin: 0 auto;
	height: auto;
	display: block;
	line-height: 100%;
}
vido {
	weidh: 100%;
	display: block;
	line-height:100%;
	background-color: #ffffff;
}


/**********************************
 * イメージ
**********************************/
.titleImage{
	display: block;
	margin:  0 auto;
	}




/**********************************
 * PC ブランドエリア
**********************************/
.brandContainer{
	width: 100%;
	margin: 0 auto;
	background-color: rgba(251,239,76,1);
	display: flex;
	flex-direction: column;
}

.flexContainer{
	display: flex;
	flex-direction: row;
	justify-content: center;
	margin-bottom: 25px;
	position: relative; top:-100px;
}
.itemBox{
	width: 300px;
	height: auto;
	margin: 0 5px;
	background-color: #ffffff;
	border-radius: 1rem;
	
}
.brandimg{
	
}
.brandtext{
	background-color: #ffffff;
	font-size: 2.2rem;
	font-weight: 500;
	text-align: center;
	line-height: 2.7rem;
	margin-bottom: 10px;
	padding-bottom: 10px;
}
.brandtext p{
	color: #eb5930;
	font-size: 2.4rem;
	font-weight: 500;
	margin-top: 10px;
	margin-bottom: 10px;
	line-height: 2.8rem;
}


.contentPark{
	height: 900px;
	background: url("../../images/content/pc/img_park.jpg")no-repeat;
}

.contentWhy01{
	width: 880px;
	height: 540px;
	margin:  0 60px;
	background: url("../../images/content/pc/img_why_01.jpg")no-repeat;
}

.contentWhy02{
	width: 880px;
	height: 540px;
	margin:  15px 60px 40px 60px;
	background: url("../../images/content/pc/img_why_02.jpg")no-repeat;
}
.contentWhy03{
	width: 1000px;
	height: 300px;
	margin:  0;
	background: url("../../images/content/pc/img_why_03.jpg")no-repeat;
}
.arrowBox{
	margin-bottom:990px; 
}

.spcbox{
	width: 1000px;
	height: 1100px;
	padding-bottom: 50px;
	display: flex;
	flex-direction: row;
	justify-content: center;
	background: url("../../images/content/pc/img_space_line2.png")no-repeat;
	background-position: top center;
	object-fit: contain;
}

.spaceBox{
	width: 480px;
	height: 1050px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	text-align: center;
}
.spacelogo{
	width: 460px;
	height: 200px;
/*	margin-bottom: 30px;*/
	text-align: center;
}
.spacelogoImg{
	display: inline-block;
}
.spacePhotoAreaAsobio{
	width: 460px;
	height: 300px;
	padding: 0 20px 20px 0;
	display: inline-block;
}
.spacePhotoAreaAsobier{
	width: 460px;
	height: 300px;
	padding: 0 0  20px 20px;
	display: inline-block;
}
.arrow{
	margin: 60px auto;
	display: block;
}



/**********************************
 * PC フッター　エリア
***********************************/	
	.footerWrapper{
	width: 1000px;
	background-color: rgba(251,239,76,1);
	margin: 0 auto;
	margin-top: 80px;
	padding: 50px 0;
		display: flex;
		flex-direction: column;
		justify-content: center;
	}
	.footerTitle{
	font-size: 3.0rem;
	font-weight: 400;
	padding-top: 20px;
    padding-bottom: 20px;
	text-align: center;
	}

    /**********************************
	*ボタン
	***********************************/	
	.footerBtnContainer{
		display: flex;
		flex-direction: row;
		justify-content: center;
	}
	.contact {
		/*width: 400px;
		height: 114px;
		margin: 10px;
		display: block;*/
		/*background-image: url("../../images/content/pc/img_contact_button_01.png");*/	
	}
.contact a {
	width: 400px;
	height: 114px;
	margin: 10px;
	display: block;
	background: url("../../images/content/pc/img_contact_button_01.png") no-repeat;
	text-indent: -9999px;
}
.contact a:hover {
	background:url("../../images/content/pc/img_contact_button_02.png") no-repeat;
}

	.webcat {
	}
.webcat a {
	width: 400px;
	height: 114px;
	margin: 10px;
	display: block;
	background: url("../../images/content/pc/img_webcatalog_button_01.png") no-repeat;
	text-indent: -9999px;
}
.webcat a:hover {
	background: url("../../images/content/pc/img_webcatalog_button_02.png") no-repeat;
}

	.companyBox{
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-top: 50px;
		margin-bottom: 50px;
	}	
	.corp{
		display: block;
		margin: 10px auto;
	}
	.url{
		font-size: 2.8rem;
		font-weight: 400;
		width: 300px;
		display: block;
		margin:  20 auto;
		padding: 0;
		text-align: center;
	}
	.address{
		font-size:2.5rem;
		font-weight: 400;
		display: block;
		margin: 0 auto;
		padding: 0;
	}
	.tel{
		font-size: 2.5rem;
		font-weight: 400;
		display: block;
		margin: 0 auto;
		padding: 0;
	}
	.snsContainer{
		display: flex;
		flex-direction: row;
		justify-content: center;
	}
	.snsBtn{
		padding: 20px;
	}
.snsimg img:hover{
	transition: 1.0s ;
}


/**********************************
	 * サイドバー エリア
**********************************/
	#sidebar {
		position: fixed;
		right: 10px;
		bottom: 50px;
		/*z-index: 99;*/
	}
	#pagetop {
		width: 100%;
		height: auto;
		cursor: pointer;
	}
	#form-link{
		width: 100%;
		height: auto;
	}
	#ca-link{
		width: 100%;
		height: auto;
	}
　　.kidsdsign {
	  width: 500px;
	  height: 500px;
	  margin: 0 auto;
	  background-color: aqua;
	}


/**********************************
	 * 特設バナー
**********************************/

.flexContainer_banner{
	display: flex;
	flex-direction: row;
	justify-content: center;
	margin-top: 100px;
	margin-bottom: 100px;
	/*position: relative; top:-100px;*/
}



/**
 ****************************************************
 *
 * screens larger than 767
 *
 ****************************************************
 */
@media only screen and (min-width: 768px) {
	.pcDspNone {
		display: none;
	}
}
/**
 ****************************************************
 *
 * screens smaller than 768
 *
 ****************************************************
 */
@media only screen and (max-width: 767px) {
	.spDspNone { display: none !important; }
	#homeWrapper {
	position: relative;
	width: 750px;
	/*width:100%;*/
	margin: 0 auto;
	/*padding: 10px 0;*/
}
	video{
		width: 100%;
		max-width: 750px; /* 最大でも750px以下に */
	}
	b{
		color: #eb5930;
	}
	.arrow_spbrand{
	margin-bottom: 75px;
	margin-right: auto;
	margin-left: auto;
	padding-top: 100px;
	display: block;
    }
	.arrow{
	margin-top: 100px;
	margin-bottom: 75px;
	margin-right: auto;
	margin-left: auto;
	display: block;
    }
	
	.arrowBox{
	margin-bottom:893px; 
}
	/**
	 * homeWrapper
	 */
	/*.homeWrapper {
		width: 100%;
		padding: 25px 0 40px;
	}
		.homeWrapper h2 {
			font-size: 1.8rem;
			border-left: 2px solid #006934;
		}
	/**
	 * contentBrand
	 */	
	.brandContainer{
	margin: 0 auto;
	/*width: 750px;*/
	height: auto;
	background-color: rgba(251,239,76,1);
	display: block;
	}
	.titleImage{
	display: block;
	margin:  0 auto;
	margin-bottom: 50px;
	}
	.titleImage_spspace{
	display: block;
	margin:  15px auto;
	}
	
	.arrowBrand{
    padding-top: 100px;
	margin-bottom: 75px;
	margin-right: auto;
	margin-left: auto;
	display: block;
	}
	
	
	
	.spbrand{
		display: block;
	}
	.spbrandbox{
	background-color:rgba(251,239,76,1);
	display: flex;
	flex-direction: row;
	justify-content: center;
	}
	.spbrandimg{
	display: inline-block;
	height: 240px;
	width:350px;
	margin-bottom: 10px;
	}
	.spbrandtext{
	font-size: 3.0rem;
	font-weight: 400;
	display: inline-block;
	height: 240px;
	background-color: white;
	width:350px;
	vertical-align: middle;
	margin-bottom: 10px;
	text-align: center;
	padding-top: 75px;
	border-radius: 0 1rem 1rem 0/0 1rem 1rem 0;
	}
	.spbrandspc{
	height: 50px;
	width: 750px;
	background-color: rgba(251,239,76,1);
	}
	
	.spcontentPark{
	height: 1238px;
	background: url("../../images/content/sp/img_park.jpg")no-repeat;
}
.spcontentWhy01{
	/*width: 700px;*/
	height: 1100px;
	margin:  0 25px;
	background: url("../../images/content/sp/img_why_01.jpg")no-repeat;
}
.spcontentWhy02{
	/*width: 700px;*/
	height: 940px;
	margin:  15px 25px 40px 25px;
	background: url("../../images/content/sp/img_why_02.jpg")no-repeat;
}
.spcontentWhy03{
	/*width: 750px;*/
	height: 295px;
	margin:  0;
	background: url("../../images/content/sp/img_why_03.jpg")no-repeat;
}
	
	#contentSpace{
	display: none;
}
	.spspcbox{
	display: block;
	}
	.arrow3{
	display: none;
}
	.arrow_spspace{
	margin: 5px auto;
	margin-top: 60px;
	display: block;
}
	.splogo{
	margin: 0 auto;
	margin-bottom: 30px;
	margin-top: 60px;
	display:block;
	}
	.splogoAsobio{
	margin: 0 auto;
	margin-bottom: 30px;
	margin-top: 20px;
	display:block;
	}
	/**
	 * footer
	 */	
	.footerWrapper{
	width: 750px;
	background-color: rgba(251,239,76,1);
	margin: 0 auto;
	margin-top: 80px;
	padding: 50px 0;
	padding-bottom: 100px;
	}
	.footerTitle{
	font-size: 3.0rem;
	font-weight: 400;
	padding-top: 20px;
    padding-bottom: 20px;
	text-align: center;
	}
	.footerBtnContainer{
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	.contact {
		width: 480px;
		height: 130px;

	}
	.companyBox{
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-top: 50px;
		margin-bottom: 50px;
	}	
	.corp{
		display: block;
		margin: 10px auto;
	}
	.url{
		font-size: 2.8rem;
		font-weight: 400;
		width: 300px;
		display: block;
		margin:  20 auto;
		padding: 0;
		text-align: center;
	}
	.address{
		font-size:2.8rem;
		font-weight: 400;
		display: block;
		margin: 0 auto;
		padding: 0;
	}
	.tel{
		font-size: 2.8rem;
		font-weight: 400;
		display: block;
		margin: 0 auto;
		padding: 0;
	}
	.snsContainer{
		display: flex;
		flex-direction: row;
		justify-content: center;
	}
	.snsBtn{
		padding: 20px;
	}
	
 
/*********************************
/* フッターバー
**********************************/
	#footerbar{
		position: fixed;
		bottom: 0;
	}
	#sppagetop{
		width: 100%;
		height: auto;
		text-align: right;
		position: fixed;
		right: 10px;
		bottom: 160px;
		opacity: 0.8;
		
		
	}
	#footerbtn_container{
		display: flex;
		flex-direction: row;
	}
	#spform-link{
		width: 100%;
		height: auto;
		opacity: 0.8;
	}
	#spca-link{
		width: 100%;
		height: auto;
		opacity: 0.8;
	}
	
	/**********************************
	 * 特設バナー
**********************************/

.flexContainer_banner{
	display: flex;
	flex-direction: row;
	justify-content: center;
	margin-top: 100px;
	margin-bottom: 100px;
	/*position: relative; top:-100px;*/
}
	
	
}
/**
 ****************************************************
 *
 * screens smaller than 480
 *
 ****************************************************
 */
@media screen and (max-width: 480px){

	.spDspNone { display: none !important; }
	#homeWrapper {
	position: relative;
	width: 480px;
	/*width:100%;*/
	margin: 0 auto;
	/*padding: 10px 0;*/
}
	video{
		width: 100%;
		max-width: 480px; /* 最大でも750px以下に */
	}
	b{
		color: #eb5930;
	}
	.arrow_spbrand{
	margin-bottom: 75px;
	margin-right: auto;
	margin-left: auto;
	padding-top: 100px;
	display: block;
    }
	.arrow{
	margin-top: 100px;
	margin-bottom: 75px;
	margin-right: auto;
	margin-left: auto;
	display: block;
    }
	
	.arrowBox{
	margin-bottom:893px; 
}
	/**
	 * homeWrapper
	 */
	/*.homeWrapper {
		width: 100%;
		padding: 25px 0 40px;
	}
		.homeWrapper h2 {
			font-size: 1.8rem;
			border-left: 2px solid #006934;
		}
	/**
	 * contentBrand
	 */	
	.brandContainer{
	margin: 0 auto;
	/*width: 750px;*/
	height: auto;
	background-color: rgba(251,239,76,1);
	display: block;
	}
	.titleImage{
	display: block;
	margin:  0 auto;
	margin-bottom: 50px;
	}
	.titleImage_spspace{
	display: block;
	margin:  15px auto;
	}
	
	.arrowBrand{
    padding-top: 100px;
	margin-bottom: 75px;
	margin-right: auto;
	margin-left: auto;
	display: block;
	}
	
	
	
	.spbrand{
		display: block;
	}
	.spbrandbox{
	background-color:rgba(251,239,76,1);
	display: flex;
	flex-direction: row;
	justify-content: center;
	}
	.spbrandimg{
	display: inline-block;
	height: 240px;
	/*width:350px;*/
	width: 100%;
	margin-bottom: 10px;
	}
	.spbrandtext{
	font-size: 3.0rem;
	font-weight: 400;
	display: inline-block;
	height: 240px;
	background-color: white;
	width:350px;
	vertical-align: middle;
	margin-bottom: 10px;
	text-align: center;
	padding-top: 75px;
	border-radius: 0 1rem 1rem 0/0 1rem 1rem 0;
	}
	.spbrandspc{
	height: 50px;
	width: 750px;
	background-color: rgba(251,239,76,1);
	}
	
	.spcontentPark{
	width: 100%;
	height: auto;
	/*height: 1238px;*/
	background: url("../../images/content/sp/img_park.jpg")no-repeat;
}
.spcontentWhy01{
	/*width: 700px;*/
	width: 480px;
	/*height: 1100px;*/
	margin:  0 25px;
	background: url("../../images/content/sp/img_why_01.jpg")no-repeat;
}
.spcontentWhy02{
	/*width: 700px;*/
	height: 940px;
	margin:  15px 25px 40px 25px;
	background: url("../../images/content/sp/img_why_02.jpg")no-repeat;
}
.spcontentWhy03{
	/*width: 750px;*/
	height: 295px;
	margin:  0;
	background: url("../../images/content/sp/img_why_03.jpg")no-repeat;
}
	
	#contentSpace{
	display: none;
}
	.spspcbox{
	display: block;
	}
	.arrow3{
	display: none;
}
	.arrow_spspace{
	margin: 5px auto;
	margin-top: 60px;
	display: block;
}
	.splogo{
	margin: 0 auto;
	margin-bottom: 30px;
	margin-top: 60px;
	display:block;
	}
	.splogoAsobio{
	margin: 0 auto;
	margin-bottom: 30px;
	margin-top: 20px;
	display:block;
	}
	/**
	 * footer
	 */	
	.footerWrapper{
	width: 750px;
	background-color: rgba(251,239,76,1);
	margin: 0 auto;
	margin-top: 80px;
	padding: 50px 0;
	padding-bottom: 100px;
	}
	.footerTitle{
	font-size: 3.0rem;
	font-weight: 400;
	padding-top: 20px;
    padding-bottom: 20px;
	text-align: center;
	}
	.footerBtnContainer{
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	.contact {
		width: 480px;
		height: 130px;

	}
	.companyBox{
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-top: 50px;
		margin-bottom: 50px;
	}	
	.corp{
		display: block;
		margin: 10px auto;
	}
	.url{
		font-size: 2.8rem;
		font-weight: 400;
		width: 300px;
		display: block;
		margin:  20 auto;
		padding: 0;
		text-align: center;
	}
	.address{
		font-size:2.8rem;
		font-weight: 400;
		display: block;
		margin: 0 auto;
		padding: 0;
	}
	.tel{
		font-size: 2.8rem;
		font-weight: 400;
		display: block;
		margin: 0 auto;
		padding: 0;
	}
	.snsContainer{
		display: flex;
		flex-direction: row;
		justify-content: center;
	}
	.snsBtn{
		padding: 20px;
	}
/**********************************
* 特設バナー
**********************************/

	.flexContainer_banner{
		display: flex;
		flex-direction: row;
		justify-content: center;
		margin-top: 100px;
		margin-bottom: 100px;
		/*position: relative; top:-100px;*/
	}
 
/*********************************
/* フッターバー
**********************************/
	#footerbar{
		position: fixed;
		bottom: 0;
	}
	#sppagetop{
		width: 100%;
		height: auto;
		text-align: right;
		position: fixed;
		right: 10px;
		bottom: 160px;
		opacity: 0.8;
		
		
	}
	#footerbtn_container{
		display: flex;
		flex-direction: row;
	}
	#spform-link{
		width: 100%;
		height: auto;
		opacity: 0.8;
	}
	#spca-link{
		width: 100%;
		height: auto;
		opacity: 0.8;
	}
}