.left{
	float:left;
	width:47%;
}
.right{
	float:right;
	width:47%;
}
@media screen and (max-width:600px) {

.left{
	width:100%;
}
.right{
	width:100%;
}
}


/***************************** 
          #main_img
*****************************/

.main_img{
	padding-bottom:0.1rem;
}
.main_img .inner{
	margin-top:2rem;
	margin-bottom:1rem;
}
.main_img h2{
	display:none;
}

.fade-img {
  position:relative;
}
.fade-img img {
  position: absolute;
  display:block;
}
@media screen and (max-width:600px) {
.main_img .inner{
	margin-top:4rem;
}
}


/***************************** 
          #concept
*****************************/

#concept{
	position:relative;
	clear:both;
}
#concept .green{
	position:absolute;
	background-color:#f2f7f3;
	height:580px;
	width:60%;
	left:40%;
	top:6rem;
	z-index:-3;
}
#concept .img1{
	position:absolute;
	width:43%;
	left:5%;
	top:9rem;
	z-index:-2;
}
#concept .img2{
	position:absolute;
	left:0;
	top:35rem;
	width:25%;
	max-width:450px;
	z-index:-1;
}
#concept .txt{
	float:right;
	width:48%;
}
#concept p{
	padding-top:2rem;
	text-align:left;
}
#concept .txt img{
	float:right;
	margin-top:5rem;
}
@media screen and (max-width:1800px) {
#concept .img2{
	top:30rem;
}
}
@media screen and (max-width:1350px) {
#concept .green{
	left:30%;
	width:70%;
}
#concept .img1{
	left:0;
}
#concept .img2{
	left:5%;
	top:30rem;
}
}
@media screen and (max-width:880px) {
#concept .img1{
	width:45%;
}
#concept .img2{
	left:0;
	top:25rem;
	width:45%;
}
#concept .txt img{
	margin-top:5rem;
	width:65%;
}
}
@media screen and (max-width:600px) {
#concept .img1,
#concept .img2{
	display:none;
}
#concept .green{
	left:5%;
	width:95%;
	top:4.5rem;
}
#concept .txt{
	width:100%;
}
#concept .txt p{
	padding:0.5rem 0 0 10%;
}
#concept .txt img{
	margin-top:2rem;
	width:100%;
}
}



/***************************** 
          #kodawari
*****************************/
#kodawari{
	margin-top:5rem;
}
#kodawari h3{
	padding: 10px 30px;
	position: relative;
	display:inline-block;
	font-size:210%;
	font-family: serif;
}

#kodawari h3::before, h3::after {
	content: '';
	width: 30px;
	height: 30px;
	position: absolute;
}

#kodawari h3::before {
	border-left: solid 1px #4b7f50;
	border-top: solid 1px #4b7f50;
	top: 0;
	left: 0;
}

#kodawari h3::after {
	border-right: solid 1px #4b7f50;
	border-bottom: solid 1px #4b7f50;
	bottom: 0;
	right: 0;
}
#kodawari p{
	text-align:left;
	margin-top:5rem;
	padding-left:5%;
	overflow:hidden;
}
#kodawari .inner div{
	overflow:hidden;
	padding-top:2.5rem;
}


#kodawari .inner div img{
	float:left;
	width:350px;
}
#kodawari p strong{
	color:#4b7f50;
	font-size:120%;
	font-family: serif;
	display:block;
	padding-bottom:0.5rem;
}
@media screen and (max-width:1000px) {
#kodawari p{
	margin-top:3rem;
}
}

@media screen and (max-width:900px) {

#kodawari p{
	margin-top:1rem;
}
#kodawari .inner div img{
	width:200px;
}
}

@media screen and (max-width:600px) {
#kodawari{
	margin-top:2.5rem;
}
#kodawari h3{
	font-size:130%;
}
#kodawari p{
	width:100%;
	padding:1rem 0 0 0;
}
#kodawari p strong{
	font-size:110%;
}
#kodawari .inner div img{
	width:66%;
	margin:0 18%;
}
}




/***************************** 
          #staff
*****************************/

#staff{
	overflow:hidden;
	clear:both;
	background:url(../img/bg_renga.jpg) no-repeat right bottom;
}


#staff .open_btn{
	width:28%;
	margin:0 8% 3rem 0;
	float:left;
	text-align:left;
	cursor:pointer;
}
#staff .open_btn:nth-child(3n){
	margin-right:0;
}
#staff .open_btn:hover{
	opacity:0.7;
	transition: 0.6s ;
}

#staff .open_btn dt{
	margin:10px 0 15px;
}
#staff .open_btn dt span{
	color:#999;
	display:block;
}
#staff .open_btn strong{
	font-size:150%;
	line-height:1.2;
	font-weight:normal;
}
#staff .open_btn dd span{
	float:right;
	padding-right:30px;
	background:url(../img/yaji.png) no-repeat right;
}
#staff .open_btn img{
	transition: 0.5s ;
}
#staff .open_btn img:hover{
	transform: scale(1.1, 1.1);
}
#staff .staff_img{
	display:block;
	overflow: hidden;
	width:100%;
	height: 350px;
}
@media screen and (max-width:1800px) {
#staff .staff_img{
	height: 300px;
}
}
@media screen and (max-width:1500px) {
#staff .staff_img{
	height: 250px;
}
}
@media screen and (max-width:1200px) {
#staff .staff_img{
	height: 200px;
}
}
@media screen and (max-width:600px) {
#staff .staff_img{
	height: 140px !important;
}	
#staff .open_btn{
	width:46%;
	margin:0 2% 3rem 2% ;
}
#staff .open_btn:nth-child(3n){
	margin-right:2%;
}

#staff .open_btn strong{
	font-size:130%;
}
}


.popup_wrap input {
  display: none;
}
.popup_overlay {
  display: flex;
  justify-content: center;
  overflow: auto;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;
  width: 100%;
  height: 100%;
  background: #dddd;
  opacity: 0;
  transition: opacity 0.5s, transform 0s 0.5s;
  transform: scale(0);
}
.popup_trigger {
  position: absolute;
  width: 100%;
  height: 100%;
}
.popup_content {
  position: relative;
  align-self: center;
  width: 94%;
  max-width: 980px;
  box-sizing: border-box;
  background: #fff;
  transition: 0.5s;
  padding:5rem 3%;
  box-shadow: 0 0 5px rgba(150, 150, 150, 0.5);
}
.popup_content p{
    padding:20px 20px 5px 20px;
    text-align: center;
}
.close_btn {
  position: absolute;
  top: 25px;
  right: 18px;
  font-size: 35px;
  cursor: pointer;
}

.popup_wrap input:checked ~ .popup_overlay {
  opacity: 1;
  transform: scale(1);
  transition: opacity 0.5s;
}


.popup_content .left{
	width:40%;
}
.popup_content .left a{
	border:#dadada 1px solid;
	display:block;
	margin-top:20px;
	padding:5px;
	background:url(../img/yaji2.png) no-repeat right;
}
.popup_content .right{
	width:55%;
	border-top:#dadada 1px solid;
}
.popup_content .right dl{
	text-align:left;
	border-bottom:#dadada 1px solid;
	padding:15px;
	overflow:hidden;
}
.popup_content .right dt{
	width:160px;
	float:left;
	color:#999;
}
.popup_content .right dt strong{
	display:block;
	color:#000;
	font-size:130%;
	font-weight:normal;
}
.popup_content .right dd{
	margin-left:165px;
}
.popup_content .right dd.name{
	padding-top:28px;
}
.popup_content .right img{
	float:right;
	margin-top:15px;
}


@media screen and (max-width: 600px) {
.popup_content {
  padding:2.8rem 3% 1rem;
  margin:15px 0;
  align-self: normal;
  overflow-y: scroll;
}
.close_btn {
  position: absolute;
  top: -5px;
  right: 5px;
}
.popup_content .right dl{
	padding:10px;
}
.popup_content .right dt{
	width:100%;
	padding-bottom:5px;
}
.popup_content .right dt strong{
	display:inline;
}
.popup_content .right dd{
	margin-left:0;
}
.popup_content .left{
	width:100%;
	position:relative;
	overflow:hidden;
	height:230px;
}
.popup_content .left img{
	position:absolute;
	left:0;
	top:-30px;
	width:100%;

}

.popup_content .right{
	width:100%;
	border-top:#dadada 1px solid;
}
}


/***************************** 
          #menu
*****************************/
#menu{
	position:relative;
	clear:both;
	padding-top:3rem;
}
#menu img{
	position:absolute;
	top:30px;
	right:13%;
	z-index:9;
}
#menu p{
	text-align:left;
	font-size:80%;
}

#menu div div{
	padding-bottom:30px;
	border-top:1px solid #dadada;
}
#menu h3{
	color:#999;
	text-align:left;
	padding:30px 0 10px;
	font-weight:300;
}
#menu h3 span{
	float:right;
	font-size:70%;
}
#menu dl{
	overflow:hidden;
	padding:10px 0;
}
#menu dt{
	width:65%;
	float:left;
	text-align:left;
}
#menu dd{
	margin-left:67%;
	text-align:right;
}
#menu dt span{
	float:right;
	display:block;
	text-align:right;
}

@media screen and (max-width:1200px) {
#staff .staff_img{
	height: 200px;
}
#menu img{
	right:15%;
	width:150px;
}
}
@media screen and (max-width:600px) {
#menu img{
	right:2%;
	width:100px;
}
#menu h3 span{
	padding:4px 0 0 5px;
}
#menu h3{
	padding:20px 0 10px;
	overflow:hidden;
}
#menu dt span{
	width:100%;
}
}

/***************************** 
          #shop_img
*****************************/

#shop_img{
	position:relative;
	padding:6rem 0 10rem 0;
	clear:both;
}
#shop_img .green{
	position:absolute;
	background-color:#f2f7f3;
	height: 530px;
	width:100%;
	right:20%;
	top:15rem;
	z-index:-1;
}
#shop_img .brush{
	position:absolute;
	left: 50px;
	bottom:0;
}
#shop_img .parent-container{
	overflow:hidden;
}
#shop_img .parent-container a.long{
   width:98%;
	height: 250px;
}
#shop_img .parent-container a{
   display:inline-block;
   width:23%;
   margin:0 1% 1rem;
   float:left;
	overflow: hidden;
	height: 250px;
}
#shop_img .parent-container img{
   transition: 0.5s ;
}
#shop_img .parent-container img:hover{
	transform: scale(1.1, 1.1);
	opacity:0.7;
}
@media screen and (max-width:1800px) {
#shop_img .parent-container a.long,
#shop_img .parent-container a{
	height: 200px;
}
}

@media screen and (max-width:1350px) {
#shop_img .parent-container a.long,
#shop_img .parent-container a{
	height: 180px;
}
#shop_img .green{
	height: 400px;
}
#shop_img{
	padding:6rem 0 15rem 0;
}
}
@media screen and (max-width:1100px) {
#shop_img .parent-container a.long,
#shop_img .parent-container a{
	height: 150px;
}
#shop_img .brush{
	width:150px;
}
}

@media screen and (max-width:600px) {
#shop_img .parent-container a.long{
	height: 100px;
}
#shop_img .parent-container a{
   display:inline-block;
   width:48%;
   margin:0 1% 1rem;
}
#shop_img{
	padding:3rem 0 7rem 0;
}
#shop_img .brush{
	left: 15px;
	bottom:-15px;
	width:100px;
}
#shop_img .green{
	height: 500px;
	right: 20%;
	top:2rem;
}
}

/***************************** 
          #company
*****************************/
#company{
	clear:both;
	overflow:hidden;
}
#company .left img{
	margin-bottom:50px;
}

#company .right{
	text-align:left;
	border-top:1px solid #dadada;
}
#company strong{
	font-size:100%;
	font-weight:normal;
	border-bottom:1px solid #dadada;
	padding:20px 5%;
	display:block;
}
#company dl{
	border-bottom:1px solid #dadada;
	padding:30px 0;
	overflow:hidden;
}
#company dt{
	width:25%;
	padding-left:5%;
	float:left;
	color:#999;
}
#company dd{
	margin-left:32%;
}
#company a{
	text-decoration:underline;
}
#company a:hover{
	text-decoration:none;
}

@media screen and (max-width:600px) {
#company .right{
	padding-bottom:3rem;
}
#company h3,
#company dl{
	padding:20px 0;
}
}





/***************************** 
        reserve_area
*****************************/

#reserve_area{
	overflow:hidden;
}
#reserve_area .strong{
	display:block;
	font-size:150%;
	padding-bottom:2rem;
	font-weight:normal;
}

#reserve_area div div{
	float:left;
	color:#fff;
	width:30%;
	padding:15px 1%;
	text-align:center;
	transition: 0.5s;
}
#reserve_area div div:hover{
    opacity: 0.7;
}
#reserve_area div dt{
	border-bottom:1px solid #fff;
	padding-bottom:15px;
	margin-bottom:15px;
}
#reserve_area div dd{
	font-size:180%;
}
#reserve_area div dd a{
	color:#fff;
}
#reserve_area .line{
	background:#06c755;
}

#reserve_area .tel{
	background:#4b7f50;
	margin-right:2%;
}
#reserve_area .net{
	background:#9f1547;
	margin-right:2%;
}

@media screen and (max-width:1250px) {
#reserve_area div dd{
	font-size:120%;
}
#reserve_area div dd img{
	width:20%;
}
}

@media screen and (max-width:600px) {
#reserve_area .strong{
	font-size:110%;
}	
#reserve_area .line,
#reserve_area .tel,
#reserve_area .net{
	width:100%;
	margin-right:0;
	margin-bottom:10px;
}

}

/***************************** 
        reserve_btn
*****************************/

.reserve_btn a{
	position:fixed;
	bottom:20px;
	left:20px;
	background:#4b7f50;
	padding:20px;
	color:#fff;
}
.reserve_btn a:hover{
	opacity:0.7;
}

@media screen and (max-width:600px) {
.reserve_btn a{
	top:14px;
	bottom:auto;
	left:5%;
	padding:8px 15px;
}
}