@charset "utf-8";

@media screen and (min-width:768px){
/*pc・タブレットcss*/

#company-main{
	position:relative;
	margin-bottom:5vw;
	-js-display: flex; display: -webkit-box; display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: flex;
	-webkit-box-pack: justify; -ms-flex-pack: justify; -webkit-justify-content: space-between; justify-content: space-between;
	-ms-flex-wrap:wrap; -webkit-flex-wrap:wrap; flex-wrap:wrap;
	-webkit-box-align: flex-end; -ms-flex-align: flex-end; -webkit-align-items: flex-end; align-items: flex-end;
}
#company-main .ph{
	width:45%;
}
#company-main .txt{
	position:relative;
	z-index:2;
	width:50%;
	padding-right:20vw;
}
#company-main .txt .ttl{
	margin-bottom:10px;
	font-size:50px;
	font-weight:700;
	line-height:1.3;
	font-family: "M PLUS Rounded 1c", serif;
	color:#805E4E;
}
#company-main .deco{
	position:absolute;
	top:3vw;
	right:3vw;
	width:30%;
}

/* +++++++++++++++++++++++++ */

#kurashishop-gold{
	margin-bottom:8vw;
	position:relative;
	padding:100px 0;
}
#kurashishop-gold .content-area{
	position:relative;
	z-index:3;
	-js-display: flex; display: -webkit-box; display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: flex;
	-webkit-box-pack: justify; -ms-flex-pack: justify; -webkit-justify-content: space-between; justify-content: space-between;
	-ms-flex-wrap:wrap; -webkit-flex-wrap:wrap; flex-wrap:wrap;
}
#kurashishop-gold:before{
	content:"";
	position: absolute;
	top:0;
	left:0;
	width:50%;
	height:100%;
	background:#FCF9E2;
}
#kurashishop-gold:after{
	content:"";
	position: absolute;
	top:0;
	right:0;
	width:50%;
	height:100%;
	background:#715345;
}
#kurashishop-gold .kurashishop-box,
#kurashishop-gold .gold-box{
	width:46%;
}
#kurashishop-gold .kurashishop-box .ttl,
#kurashishop-gold .gold-box .ttl{
	margin-bottom:20px;
	font-size:30px;
	font-weight:700;
	line-height:1.3;
	font-family: "M PLUS Rounded 1c", serif;
}
#kurashishop-gold .kurashishop-box .ttl{
	color:#805E4E;
}
#kurashishop-gold .kurashishop-box .logo{
	width:370px;
	margin-bottom:30px;
}
#kurashishop-gold .gold-box{
	color:#fff;
}
#kurashishop-gold .gold-box .ttl{
	color:#FCF9E2;
}

#kurashishop-gold .btn{
}
#kurashishop-gold .btn a{
	position:relative;
	display:block;
	text-align:center;
	color: #715345;
	font-size:14px;
	background-color:#fff;
	border-radius:10px;
	text-decoration:none;
	-webkit-transition: all .4s;
	transition: all .4s;
}
#kurashishop-gold .btn a span{
	position:relative;
	display: inline-block;
	padding:10px 30px 10px 20px ;
}
#kurashishop-gold .btn a span:after{
	position:absolute;
	top:50%;
	right:0;
	content:"";
	width: 20px;
	height: 20px;
	margin-top:-10px;
	border:none;
	-webkit-transform: rotate(0deg);
	transform: rotate(0deg);
	background:url(../img/common/iocn_outlink_b.svg) no-repeat center top / 100% auto;
}

/* +++++++++++++++++++++++++ */

#philosophy{
	margin-bottom:8vw;
}
#philosophy .content-area{
	max-width:610px;
}
#philosophy .ph{
	margin-bottom:30px;
}

/* +++++++++++++++++++++++++ */

#guidelines{
	margin-bottom:8vw;
}
#guidelines .content-area{
	max-width:820px;
}
#guidelines .ph{
	margin-bottom:30px;
}

/* +++++++++++++++++++++++++ */

#profile{
	margin-bottom:8vw;
}
#profile .content-area{
	max-width:786px;
}


/* +++++++++++++++++++++++++ */

#history{
	margin-bottom:8vw;
}
#history .content-area{
	max-width:786px;
}

/* +++++++++++++++++++++++++ */

#access{
	margin-bottom:8vw;
}
#access .gmap {
	position: relative;
	width: 100%;
	height: 0;
	padding-top:40%;
	margin-bottom:30px;
}
#access .gmap iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}






}

@media screen and (min-width:768px) and ( max-width:1200px) {
	

}

@media (max-width: 768px) {
	
	
	#company-main{
		position:relative;
		margin-bottom:10vw;
	}
	#company-main .ph{
		width:90%;
	}
	#company-main .txt{
		width:100%;
		padding:5vw 5vw 0;
	}
	#company-main .txt .ttl{
		margin-bottom:10px;
		font-size:30px;
		font-weight:700;
		line-height:1.3;
		font-family: "M PLUS Rounded 1c", serif;
		color:#805E4E;
	}
	#company-main .deco{
		position:absolute;
		top:70vw;
		right:3vw;
		width:50vw;
	}
	
	/* +++++++++++++++++++++++++ */
	
	#kurashishop-gold{
		margin-bottom:10vw;
		position:relative;
	}
	#kurashishop-gold .content-area{
		position:relative;
		z-index:3;
		padding:0;
	}
	#kurashishop-gold .kurashishop-box{
		background:#FCF9E2;
		padding:10vw 5vw;
	}
	#kurashishop-gold .gold-box{
		background:#715345;
		padding:10vw 5vw;
	}
	#kurashishop-gold .kurashishop-box .ttl,
	#kurashishop-gold .gold-box .ttl{
		margin-bottom:3vw;
		font-size:24px;
		font-weight:700;
		line-height:1.5;
		font-family: "M PLUS Rounded 1c", serif;
	}
	#kurashishop-gold .kurashishop-box .ttl{
		color:#805E4E;
	}
	#kurashishop-gold .kurashishop-box .logo{
		margin-bottom:5vw;
		width:70%;
	}
	#kurashishop-gold .gold-box{
		color:#fff;
	}
	#kurashishop-gold .gold-box .ttl{
		color:#FCF9E2;
	}
	
	#kurashishop-gold .btn{
	}
	#kurashishop-gold .btn a{
		position:relative;
		display:block;
		text-align:center;
		color: #715345;
		font-size:14px;
		background-color:#fff;
		border-radius:10px;
		text-decoration:none;
		-webkit-transition: all .4s;
		transition: all .4s;
	}
	#kurashishop-gold .btn a span{
		position:relative;
		display: inline-block;
		padding:3vw;
	}
	#kurashishop-gold .btn a span:after{
		position:absolute;
		top:50%;
		right:0;
		content:"";
		width: 20px;
		height: 20px;
		margin-top:-10px;
		border:none;
		-webkit-transform: rotate(0deg);
		transform: rotate(0deg);
		background:url(../img/common/iocn_outlink_b.svg) no-repeat center top / 100% auto;
	}
	
	/* +++++++++++++++++++++++++ */
	
	#philosophy{
		margin-bottom:10vw;
	}
	#philosophy .content-area{
	}
	#philosophy .ph{
		margin-bottom:5vw;
	}
	
	/* +++++++++++++++++++++++++ */
	
	#guidelines{
		margin-bottom:10vw;
	}
	#guidelines .content-area{
	}
	#guidelines .ph{
		margin-bottom:5vw;
	}
	
	/* +++++++++++++++++++++++++ */
	
	#profile{
		margin-bottom:10vw;
	}
	#profile .content-area{
	}
	
	
	/* +++++++++++++++++++++++++ */
	
	#history{
		margin-bottom:10vw;
	}
	#history .content-area{
	}
	
	/* +++++++++++++++++++++++++ */
	
	#access{
		margin-bottom:10vw;
	}
	#access .gmap {
		position: relative;
		width: 100%;
		height: 0;
		padding-top:60%;
		margin-bottom:5vw;
	}
	#access .gmap iframe {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
	}
	
	


}



#company-main.ani-effect .ph{
	position:relative;
	opacity:0;
}
#company-main.ani-effect.active .ph{
	animation-name:company_main;
	animation-duration:1.5s;
	animation-fill-mode:forwards;
}
@keyframes company_main{
  from {
    opacity: 0;
    transform: translateX(-2%);
  }
  to {
    opacity: 1;
    transform: translateX(0%);
  }
}

#company-main .deco{
	opacity:0;
}
#company-main.ani-effect.active .deco{
	animation-name:company_deco;
	animation-duration:1.5s;
	animation-fill-mode:forwards;
	animation-delay: 0.6s;
}
@keyframes company_deco{
  from {
    opacity: 0;
    transform: translateX(2%);
  }
  to {
    opacity: 1;
    transform: translateX(0%);
  }
}


#company-main .ttl{
	opacity:0;
}
#company-main.ani-effect.active .ttl{
	animation-name:company_ttl;
	animation-duration:1.5s;
	animation-fill-mode:forwards;
	animation-delay: 0.9s;
}
@keyframes company_ttl{
  from {
    opacity: 0;
    transform: translateX(2%);
  }
  to {
    opacity: 1;
    transform: translateX(0%);
  }
}