@charset "UTF-8";

html {
  font-size: 100%;
}

body {
  color: #24292e;
}

a {
  text-decoration: none;
}

img {
  max-width: 100%;
  vertical-align: bottom;
}

li {
  list-style: none;
}

.wrapper {
  max-width:90%;
  font-size: 0.9rem;
  padding: 0 4%;
}


.site-title a {
  display: block;
}

.sec-title{
		font-size:4em;	
		font-weight:bold;
		color:#ffa500;
		line-height:0.6;
		padding-top:30px;
}

.sec-title span{
		font-size:30px;
}

/*-------------------------------------------
ヘッダー
-------------------------------------------*/
#header {
		width:70%;
		display: flex;
		justify-content: space-between;
		align-items: center;
		height: 100px;
		margin: 0 auto;
		padding: 0 4%;

}

.site-title img{
		display: inline-block;
		height: 100px;
		width: 150px;
}

#header ul {
		display: flex;
		padding: 10px 0;
}

#header li {
		font-size:18px;
		margin-left: 50px;
		font-weight:bold;
		text-align:center;
		line-height:0.8;

}

#header li span{
		font-weight:normal;
		font-size:13px;
}

#header li a {
 		color: #24292e;
		display: inline-block;
		transition-duration: 0.5s;

}

#header li a:hover {
  	color:#4169e1;
		-webkit-transform: scale(1.5);
		transform: scale(1.5);
 		transition : 1s;
	
}

#header li img.icon {
  		width: 20px;
}

.topictext{
		width:85%;
		margin:auto;
		padding:2% 0;
		text-align:center;
}

.topictext p{
		font-size:15px; 
}

.topictext h1{
		font-size:15px; 
		font-weight:normal;
}

.under{
 		background: linear-gradient(transparent 50%, #fffacd 30%);
		font-weight:bold;

}

/*-------------------------------------------
slide
-------------------------------------------*/	
 .slide {
  position: relative;
  width: 100%;
  height: 400px;
  overflow: hidden;
}
 
@keyframes slideshow{
  0%{
    opacity: 0;
  }
  10%{
    opacity: 1;
  }
  28%{
    opacity: 1
  }
  38%{
    opacity: 0;
  }

  100%{
    opacity: 0;
  }
}
 
.slide img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: auto;
  opacity: 0;
  animation :slideshow 24s linear infinite;
}
 
.slide img:nth-child(2){
  animation-delay: 8s;
}
 
.slide img:last-child{
  animation-delay: 16s;
}


/*-------------------------------------------
MENU
-------------------------------------------*/
#menu ul{
		width:60%;
		margin:auto;
		margin-bottom:10%;
		display:flex;
		justify-content:space-around;
}

.menu img{
		transition-duration: 0.5s;
		width:300px;
}


.menu li img:hover{
  box-shadow: 10px 10px 10px rgba(0,0,0,0.5);
  transform: translateY(-10px);
  transition-duration: 0.5s;
}

/*-------------------------------------------
	Recruit
-------------------------------------------*/

#recruit_page .recruit_page{
		width:80%;
		margin:auto;
		display:flex;
		justify-content:space-around;
}

#recruit_page .recruit_page p{
		font-weight:bold;
		font-size:3em;
		transition-duration: 0.5s;
}

.regular_employee_page{
		padding:40px 70px;
		background-color:#e8ffd1;
		border-top-left-radius:50px;
		border-bottom-right-radius:50px;
}

.part_page{
		padding:40px;
		background-color:#ffc0cb;
		border-top-left-radius:50px;
		border-bottom-right-radius:50px;
}

#recruit_page a:link{
 		 color:#696969;
}

#recruit_page a:visited{
 		 color:#696969;
}

#recruit_page .regular_employee_page a:hover {
  		color:#008000;
}

#recruit_page .part_page a:hover {
  		color:#ff6347;
}

.regular_employee_page:hover{
  	box-shadow: 10px 5px 5px #f5f5f5;
		transform: translateY(-4px);
 		transition: .3s;
}

.part_page:hover{
  	box-shadow: 10px 5px 5px #f5f5f5;
		transform: translateY(-4px);
 		transition: .3s;
}

/*-------------------------------------------
	Access
-------------------------------------------*/

.access_text{
		width:90%;
		margin:auto;
}

#map dl {
		width:70%;
		margin:auto;
		display: flex;
  		flex-wrap:wrap;	
		font-size:20px;
}

#map dl dt {
		width: 20%;
		text-align:right;
 		padding: 1%;
		font-weight:bold;
}

#map dl dd {
		width: 60%;
 		padding: 1%;
}

.gmap{
		text-align:center;
}

/*-------------------------------------------
戻るボタン
-------------------------------------------*/
.back_box{
		padding:5px 20px;
		background-color:#ffa500;
		color:#fff;
		font-weight:bold;
		border-radius:70px;
		position:fixed;
		bottom:10px;
		right:20px;
}

.back_box a:link{
 		 color:#fff;
}

.back_box a:visited{
 		 color:#fff;
}


/*-------------------------------------------
フッター
-------------------------------------------*/
#footer {
  background-color: #24292e;
  color: #fff;
  font-size: 0.5rem;
  padding: 1% 2%;
  text-align: center;

}


/*----- メニューページ -----*/

#menu_part{
		width:90%;
		margin:auto;
		background-color:#fff;
		font-size:5em;
		font-weight:bold;
		color:#ffa500;
		line-height:0.7;
		margin-bottom:5%;
}

#menu_part span{
		font-size:30px;
}

.menu_wrap{
		width:100%;
		background-color:#fafad2;
		padding:5% 0;
}

.menu_list{
		width:80%;
		margin:auto;
		background-color:#fff;
		padding:2% 0;
}

.menu-title{
		font-size:30px;
		font-weight:bold;
		text-align:center;
		line-height:0.8;
		padding:15px 0;
}

.menu-title span{
		font-weight:normal;
		font-size:15px;
}

h3{
		border-left:solid 5px #008000;
		padding-left:1%;
		margin:3% 0;
}

.menu_m,
.menu_w,
.menu_other{
	border-top:solid 2px #bcbcbc;
	border-bottom:solid 2px #bcbcbc;
  margin: 0 auto 40px;
	width: 680px;
	border-collapse: collapse;
}

.menu_m tr:nth-child(even),
.menu_w tr:nth-child(even),
.menu_other tr:nth-child(even){
	background:#f5f5f5;
}

thead{
	text-align:center;
	font-weight:bold;
}

.menu_m tbody th,
.menu_w tbody th,
.menu_other tbody th{
	border-right:dotted 1px #bcbcbc;
	font-weight:normal;
	text-align:left;
}

.menu_m tbody th,
.menu_w tbody th,
.menu_other tbody th{
	padding-left: 30px;
}

.menu_m tbody td,
.menu_w tbody td,
.menu_other tbody td{
	text-align:center;
	width: 100px;
}

.menu_m thead{
	background: #eafaff;
}

.menu_w thead{
	background: #ffeded;
}

.menu_other thead{
	background: #ffe3b6;
}

.menu_memo{
		text-align:right;
		font-weight:normal;
		font-size:15px;
}

tbody tr:hover th,tbody tr:hover td{
		font-weight:bold;
		font-size:20px;
}

.pos {
    text-align: right;
    font-size: 80%;
    margin: -40px 100px 40px 0;
}

/*----- クーポン -----*/
#coupon_part{
		width:90%;
		margin:auto;
		background-color:#fff;
		font-size:5em;
		font-weight:bold;
		color:#ffa500;
		line-height:0.7;
		margin-bottom:5%;
}

#coupon_part span{
		font-size:30px;
}

.coupon_wrap{
		width:100%;
		background-color:#fafad2;
		padding:5% 0;
}

#coupon_about{
		width:70%;
		margin:auto;
		background-color:#fff;
		padding:2% 0;
}

#coupon_about p{
		font-weight:bold;
		font-size:30px;
		padding-left:20px;

}

/*----- 求人ページ (正社員)-----*/

#recruit {
		width:90%;
		margin:auto;
}

#recruit{
		font-size:5em;
		font-weight:bold;
		color:#008000;
		line-height:0.7;
}

#recruit span{
		font-size:30px;
}

.recruit_box{
		display:flex;
		position:relative;
		flex-direction: column;
		padding-top:12%;
		align-items:center;

}

#recruit_about{
		background-color:#e8ffd1;
		width:100%;
		margin:auto;
		padding-top:5%;
}

.recruit_pic{
		width:40%;
		height:auto;
		object-fit: cover;
		position:absolute;
		top:0px;
		text-align:center;
		
}

#recruit_back{
		padding:2% 5%;
		width:60%;
		background-color:#fff;
		margin:auto;
}

.regular_employee div{
		display:flex;
		justify-content:flex-start;
		border-bottom: solid 1px #dcdcdc;
		padding:2% 0;	
}

.regular_employee div dt {
		min-width:11em;
		font-weight:bold;
}

.engage{
		width:30%;
		margin:auto;
}

.engage:hover{
 		 box-shadow: 10px 10px 10px rgba(0,0,0,0.5);
 		 transform: translateY(-10px);
 		 transition-duration: 0.5s;
}

/*----- 求人ページ (アルバイト)-----*/

#recruit_part{
		width:90%;
		margin:auto;
}

#recruit_part{
		font-size:5em;
		font-weight:bold;
		color:#ff6347;
		line-height:0.7;
}

#recruit_part span{
		font-size:30px;
}

#part_about{
		background-color:#ffc0cb;
		width:100%;
		margin:auto;
		padding-top:5%;
}

/*----- 店舗情報-----*/

#access_part{
		width:90%;
		margin:auto;
}

#access_part{
		font-size:5em;
		font-weight:bold;
		color:#ffa500;
		line-height:0.7;
}

#access_part span{
		font-size:30px;
}

#access_about .access_box{
		width:70%;
		margin:auto;
		background-color:#fff;
		padding:2% 0;
}

.access_wrap{
		width:100%;
		background-color:#fafad2;
		padding:5% 0;
}

.access_box{
		padding:2% 5%;
}

.access_box div{
		width:80%;
		margin:auto;
		display:flex;
		justify-content:flex-start;
		border-bottom: solid 1px #dcdcdc;
		padding:2% 0;	
}

.access_box div dt{
		min-width:12em;
		font-weight:bold;
		text-align:center;
}

/*-------------------------------------------
SP
-------------------------------------------*/
@media screen and (max-width: 768px) {
  .wrapper {

  }

.sec-title{
		font-size:2em;	
		font-weight:bold;
		color:#ffa500;
		line-height:0.7;
}

.sec-title span{
		font-size:15px;
}

.back_box{
		padding:5px 13px;
		background-color:#ffa500;
		color:#fff;
		font-weight:bold;
		border-radius:70px;
		position:fixed;
		bottom:10px;
		right:20px;
		font-size:10px;
}

body{
		width:100%;
		margin:auto;
}

.wrap {
	overflow: hidden;
}
  /*-------------------------------------------
  ヘッダー
  -------------------------------------------*/
#header {
    max-width: 100%;
    height: auto;
		display:flex;
		flex-direction: column;
  }

#header ul{
		width:100%;
}

#header li {
    font-size:12px;
    margin-left:7px;
  }

#header li span{
    font-size:3px;
		text-align:center;
  }

#header li a:hover {
  	color:#4169e1;
		-webkit-transform: scale(1);
		transform: scale(1);
 		transition : 1s;
}


  /*-------------------------------------------
  MENU・COUPONコンテンツ
  -------------------------------------------*/
#menu ul{
		width:90%;
		margin:auto;
		margin-bottom:10%;
}

#menu li{
		margin-right:10px;
}
.menu img{
		width:100px;
}

  /*-------------------------------------------
  REQUIREMENTS
  -------------------------------------------*/

#recruit_page .recruit_page{
		width:100%;
		margin:auto;
		display:flex;
		justify-content:space-around;
		flex-direction: column;
}

#recruit_page .recruit_page p{
		font-weight:bold;
		font-size:1.2em;
		text-align:center;
}

  /*-------------------------------------------
  ACCESS(index内)
  -------------------------------------------*/

#map dl{
		width:100%;
		
}

.access_text{
		width:100%;
}

#map dl,dd,dt{
		padding:0;
		margin:0;
		font-size:15px;
}

.gmap {
		height: 0;
		overflow: hidden;
		padding-bottom: 56.25%;
		position: relative;
}
.gmap iframe {
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
}

  /*-------------------------------------------
  RECRUIT（正社員）
  -------------------------------------------*/
#recruit{
		font-size:25px;
		font-weight:bold;
		line-height:0.7;
}

.recruit_pic {
		width:60%;
}

#recruit span{
		font-size:13px;
}

#recruit_back{
		width:85%;
}

.regular_employee div{
		flex-flow: column nowrap;
		padding:3%;
}

.regular_employee div dt,
.regular_employee div dd{
		width: 100%;
}

.regular_employee div dt{
		background-color:#dcdcdc;
		font-size:13px;
		padding:2px 0 2px 10px;
		margin-bottom:10px;
}

.regular_employee div dd{
		font-size:12px;
}

.engage{
		width:400px;
}

  /*-------------------------------------------
  RECRUIT（アルバイト）
  -------------------------------------------*/
#recruit_part{
		font-size:25px;
		font-weight:bold;
		line-height:0.7;
}

#recruit_part span{
		font-size:15px;
}


  /*-------------------------------------------
  MENUページ
  -------------------------------------------*/
#menu_part{
		font-size:30px;
		font-weight:bold;
		line-height:0.7;
}

#menu_part span{
		font-size:15px;
}

.menu_wrap{
		padding:5% 0;
}

.menu_list{
		padding:5%;
}


.menu_m,
.menu_w,
.menu_other{
		width:100%;
}


.tbody{
		flex-flow: column nowrap;
}

.menu_m tbody th,
.menu_w tbody th,
.menu_other tbody th{
		padding-left:10px;
		font-size:12px;
		width:80%;
}

.menu_m tbody td,
.menu_w tbody td,
.menu_other tbody td{
		text-align:center;
		font-size:12px;
		width:20%;
}

tbody tr:hover th,tbody tr:hover td{
		font-weight:bold;
		font-size:14px;
}



  /*-------------------------------------------
  COUPONページ
  -------------------------------------------*/
#coupon_part{
		font-size:30px;
		font-weight:bold;
		line-height:0.7;
}

#coupon_part span{
		font-size:15px;
}

#coupon_about{
		width:90%;
		margin:auto;
}


  /*-------------------------------------------
  ACCESS(店舗情報)
  -------------------------------------------*/
#access_part{
		font-size:30px;
		font-weight:bold;
		line-height:0.7;
}

#access_part span{
		font-size:15px;
}

#access_about .access_box{
		width:80%;
		padding:2% 5%;
		margin-top:3%;
}

.access_box div{
		flex-flow: column nowrap;
		padding:3%;
}

.access_box div dt,
.access_box div dd{
		width: 100%;
}

.access_box div dt{
		background-color:#dcdcdc;
		margin-bottom:10px;
		text-align:left;
		font-size:13px;
		padding:2px 0 2px 10px;
}

.access_box dd{
		font-size:12px;
		padding:2% 0;
		width:80%;
}









}