@charset "UTF-8";

html{
	width:100%;
}
body{
	*font-size:small;
	*font:x-small;
	color:#333333;
	line-height:1.7;
  font-family:"Yu Gothic", YuGothic, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	text-align:center;
	width:100%;
	margin:0px;
	padding:0px;
	-webkit-text-size-adjust:100%;
}
@font-face{
  font-family:"Yu Gothic";
  src:local("Yu Gothic Medium");
  font-weight:100;
}
@font-face{
  font-family:"Yu Gothic";
  src:local("Yu Gothic Medium");
  font-weight:200;
}
@font-face{
  font-family:"Yu Gothic";
  src:local("Yu Gothic Medium");
  font-weight:300;
}
@font-face{
  font-family:"Yu Gothic";
  src:local("Yu Gothic Medium");
  font-weight:400;
}
@font-face{
  font-family:"Yu Gothic";
  src:local("Yu Gothic Bold");
  font-weight:bold;
}
h1,h2,h3,h4,h5,p,ul,ol,li,img,table,th,td,dl,dt,dd,figure{
	margin:0px;
	padding:0px;
}
li{
	list-style-type:none;
}
table{
	border-collapse:collapse;
}
a{
	cursor:pointer;
	color:#333;
	text-decoration:none;
}
a:hover{
	text-decoration:none;
}
a{
	-webkit-tap-highlight-color:transparent;
}
img{
	vertical-align:top;
	max-width:100%;
	height:auto;
	-webkit-backface-visibility:hidden;
	-ms-backface-visibility:hidden;
	backface-visibility:hidden;
}
a img{
	vertical-align:bottom;
	-webkit-backface-visibility:hidden;
	-ms-backface-visibility:hidden;
	backface-visibility:hidden;
}
input, 
textarea, 
select,
button,
label{
  outline:none;
	-webkit-tap-highlight-color:transparent;
}
:focus {
	outline: 0;
  border-color: orange;
}

/* btn共通 */
.btn a{
	color: #fff;
	background: #2CB69A;
	box-shadow: 0px 3px 6px #00000029;
	font-weight: bold;
	display: block;
}

/* header
-----------------------------------------------*/
#wrap{
	overflow:hidden;
	background-color: #fff0c7;
}


/* header
-----------------------------------------------*/
header{
	position: fixed !important;
}


/* footstepBox
-----------------------------------------------*/
.footstepBox{
	position: absolute;
	top: 10px;
	left: 50%;
	margin-left: -451px;
	z-index: 100;
	margin-top: 0px;
	margin-bottom: 40px;
	width: 902px;
}
.footstepBox,
.footstepBox a{
	color: #fff !important;
}


/* main
-----------------------------------------------*/
#main {
	background: url(../img/mv_bg.png) no-repeat ;
	background-position:right 0px bottom 120px;
	background-size: cover;
	position: relative;
	padding-top: 580px;
}
#main .pc { display: block; }
#main .sp { display: none; }
#main h2{
	position: absolute;
	top: 0;
	left: 0;
  right: 0;
  margin: auto;
}
#main h2 img{
	margin: 0 auto;
}
#main h3{
	background: url(../img/mv_cover.png) repeat-x top ;
	padding-top: 35px;
	padding-bottom: 70px;
	margin: 0 auto;
}
#main h3 img{
	margin: 0 auto;
}
@media only screen and (max-width: 1200px) {
	#main h3{
		padding-left: 15px;
		padding-right: 15px;
	}
}
@media only screen and (max-width: 750px) {
	#main {
		background: url(../img/mv_bg.png) no-repeat ;
		background-position:center bottom 230px;
		background-size: cover;
		position: relative;
		padding-top: 580px;
	}
	#main .pc { display: none; }
	#main .sp { display: block; }
}


/* section
-----------------------------------------------*/
section{
	font-size:24px;
}
section p{
	text-align: center;
}
@media only screen and (max-width: 750px) {
	section{
		font-size: 16px;
	}
}
@media only screen and (max-width: 1200px) {
	section .inner{
		margin-left: 15px;
		margin-right: 15px;
	}
	section#shop .inner{
		margin-left: 0px;
		margin-right: 0px;
	}
}


/* menu
-----------------------------------------------*/
#menu .inner{
	max-width: 880px;
	background: #fff;
	margin: 0 auto 80px;
}
#menu ul{
	display: flex;
	justify-content: center;
	padding-top: 1.0em;
	padding-bottom: 1.0em;
}
#menu ul li{
	border-right: 1px solid #2CB69A;
}
#menu ul li:last-child{
	border-right: none;
}
#menu ul li a{
	color: #2CB69A;
	font-weight: bold;
	padding: 0 0.7em;
}
#menu ul li a:hover{
	opacity: 0.8;
}
@media only screen and (max-width: 1200px) {
	#menu .inner{
		margin-left: 15px;
		margin-right: 15px;
	}
}
@media only screen and (max-width: 750px) {
	#menu{
		margin-bottom: 0;
	}
	#menu .inner{
		width: auto;
		margin-bottom: 0;
	}
	#menu ul{
		flex-wrap: wrap;
	}
	#menu ul li{
		font-size: 14px;
		margin-top: 0.3em;
		margin-bottom: 0.3em;
	}
}


/* access
-----------------------------------------------*/
#access{
	background: url(../img/access_bg_pc.png) no-repeat top+20px center;
}
#access h3{
	margin-bottom: 0px;	
}
#access dl{
	max-width: 630px;
	margin: 0 auto 73px;
	display: flex;
	justify-content: space-between;
}
#access dt{
	width: 104px;
	background: #F1D816;
	border-radius: 4px;
	color: #fff;
	padding-top: 1.5em;
	padding-bottom: 1.5em;
}
#access dd{
	width: 490px;
	text-align: left;
	padding-top: 0.4em;
}
#access dd span{
	font-weight: bold;
	font-size: 32px;
}
#access .access-howto{
	display: flex;
	justify-content: space-between;
	max-width: 1200px;
	margin: 0 auto;
}
#access .access-howto .map{
	width: 50%;
}
#access .access-howto .car-train{
	width: 45%;
}
#access .access-howto .car-train .h4Area {
	text-align: left;
}
#access .access-howto .car-train h4 {
  display: inline-block;
  position: relative;
  height: 42px;
  line-height: 42px;
  padding: 0 20px 0 10px;
  background: #2CB69A;
  color: #FFF;
  box-sizing: border-box;
	margin-bottom: 25px;
}
#access .access-howto .car-train h4:after {
  position: absolute;
  content: '';
  width: 0px;
  height: 0px;
  z-index: 1;
	top: 0;
  right: 0;
  border-width: 21px 10px 21px 0px;
  border-color: transparent #fff0c7 transparent transparent;
  border-style: solid;
}
#access .access-howto .car-train p{
	text-align: left;
	margin-bottom: 50px;
	clear: left;
}
#access .access-howto .car-train p span{
	font-size: 80%;
}
#access .access-howto .car-train p.illust{
	text-align: right;
}
@media only screen and (max-width: 900px) {
	#access .access-howto{
		display: block;
		width: auto;
	}
	#access .access-howto .map{
		margin-bottom: 20px;
	}
	#access .access-howto .map,
	#access .access-howto .car-train{
		width: auto;
	}
}
@media only screen and (max-width: 750px) {
	#access{
		margin-top: 20px;
		padding-top: 30px;
		background: url(../img/access_bg_sp.png) no-repeat top center;
		background-size: contain;
	}
	#access h3{
		width: 50%;
		margin: 0 auto;
	}
	#access dl{
		width: auto;
		margin: 0 auto 25px;
	}
	#access dt{
		width: 18%;
		padding-top: 1.8em;
		padding-bottom: 1.4em;
		font-size: 12px;
	}
	#access dd{
		width: 80%;
	}
	#access dd span{
		font-size: 17px;
	}

	#access .access-howto .car-train h4 {
		height: 30px;
		line-height: 30px;
		padding: 0 20px 0 10px;
		margin-bottom: 15px;
	}	
	#access .access-howto .car-train h4:after {
		border-width: 15px 10px 15px 0px;
	}
	#access .access-howto .car-train p{
		margin-bottom: 20px;
	}
	#access .access-howto .car-train p.illust img{
		width: 50%;
	}
}


/* shop
-----------------------------------------------*/
#shop{
	padding-top: 50px;
	margin-bottom: 40px;
	background: url(../img/food_bg_pc.png) no-repeat top center;
}
#shop .event{
	background: url(../img/event_bg_pc.png) no-repeat top center;
	padding-top: 50px;
	margin-top: 30px;
}
#shop .goods{
	background: url(../img/goods_bg_pc.png) no-repeat top center;
	padding-top: 50px;
	margin-top: 30px;
}
#shop .special{
	background: url(../img/special_bg_pc.png) no-repeat top center;
	padding-top: 50px;
	margin-top: 30px;
}
#shop h4{
	margin-bottom: 32px;	
}
#shop h4{
  display: inline-block;
  position: relative;
  height: 42px;
  line-height: 42px;
  text-align: center;
  padding: 0 40px;
	background: #F18D00;
  color: #FFF;
  box-sizing: border-box;
	letter-spacing: 0.1em;
}
#shop h4:before, #shop h4:after {
  position: absolute;
  content: '';
  width: 0px;
  height: 0px;
  z-index: 1;
}
#shop h4:before {
  top: 0;
  left: 0;
  border-width: 21px 0px 21px 10px;
  border-color: transparent transparent transparent #fff0c7;
  border-style: solid;
}
#shop h4:after {
  top: 0;
  right: 0;
  border-width: 21px 10px 21px 0px;
  border-color: transparent #fff0c7 transparent transparent;
  border-style: solid;
}
#shop .event h4{
background: #EA6F91;
}
#shop ul{
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	max-width: 1200px;
	margin: 0 auto;
}
#shop .foods ul{
	justify-content: space-between;
}
#shop .goods ul,
#shop .event ul,
#shop .special ul{
	justify-content: center;
}
#shop li{
	width: 31.66%;
	margin-bottom: 45px;
	background: #F8F8F8;
	border-radius: 10px;
}
#shop li dl.shop-box dt.shop-box img{
	border-radius: 10px 10px 0px 0px;
	width: 100%;
}
#shop li dl.shop-box dd.shop-box{
	position: relative;
	width: auto;
	padding-top: 20px;
	padding-bottom: 15px;	
	padding-left: 20px;
	padding-right: 20px;
}
#shop li dl.shop-box dd.shop-box .category{
	background: #F18D00;
	border-radius: 4px;
	color: #fff;
	font-size: 16px;
	font-weight: bold;
	padding: 0.2em 0.5em;
	margin-top: -35px;
	text-align: left;
	display: block;
	position: absolute;
}
#shop li dl.shop-box dd.shop-box h5{
	font-size: 24px;
	line-height: 1.4;
}
#shop li dl.shop-box dd.shop-box p{
	font-size: 18px;
	margin-top: 20px;
	text-align: left;
}
#shop li dl.shop-box dd.shop-box dl{
	display: flex;
	flex-wrap: wrap;
	margin-top: 20px;
}
#shop li dl.shop-box dd.shop-box dl dt{
	font-size: 14px;
	color: #fff;
	background-color: #CCCCCC;
	border-radius: 4px;
	width: 72px;
	height: 26px;
	padding-top: 3px;
	margin-bottom: 10px;
}
#shop li dl.shop-box dd.shop-box dl dd{
	width: calc(100% - 80px);
	text-align: left;
	padding-top: 3px;
	padding-left: 8px;
	margin-bottom: 10px;
	font-size: 16px;
}
#shop li dl.shop-box dd.shop-box span{
	font-size: 80%;
}
#shop .event li:first-child,
#shop .special li:first-child{
	margin-right: 2.5%;
}
#shop .event li dl.shop-box dd.shop-box .btn{
	text-align: center;
	margin-bottom: 10px;
}
#shop .event li dl.shop-box dd.shop-box .btn a{
	margin: 10px auto 0;
	border-radius: 4px;
	width: 123px;
}
#shop .special li dl.shop-box dd.shop-box p{
	font-size: 16px;
	text-align: center;
}
@media only screen and (max-width: 1200px) {
	#shop,#shop .event,#shop .special,#goods .special{
		background-size: contain;
	}
	#shop ul{
		margin-left: 15px;
		margin-right: 15px;
	}
	#shop .event ul,
	#shop .special ul{
		margin-left: 15px;
		margin-right: 15px;
		justify-content: space-between;
	}
	#shop li{
		width: 49%;
	}
	#shop .event li:first-child,
	#shop .special li:first-child{
	margin-right: 0;
}
}
@media only screen and (max-width: 750px) {
	#shop{
		margin-top: 30px;
		padding-top: 20px;
		background: url(../img/food_bg_sp.png) no-repeat top center;
		background-size: contain;
	}
	#shop .event{
		margin-top: 30px;
		padding-top: 20px;
		background: url(../img/event_bg_sp.png) no-repeat top center;
		background-size: contain;
	}	
	#shop .goods{
		margin-top: 30px;
		padding-top: 20px;
		background: url(../img/goods_bg_sp.png) no-repeat top center;
		background-size: contain;
	}
	#shop .special{
		padding-top: 50px;
		background: url(../img/special_bg_sp.png) no-repeat top center;
		background-size: contain;
	}
	#shop h3{
		width: 45%;
		margin: 0 auto;
	}
	#shop h4{
		height: 32px;
		line-height: 32px;
		padding: 0 20px;
		margin-bottom: 24px;
	}
	#shop h4:before {
		border-width: 16px 0px 16px 10px;
	}
	#shop h4:after {
		border-width: 16px 10px 16px 0px;
	}
	#shop ul{
		display: block;
		width: auto;
		margin-left: 15px;
		margin-right: 15px;
	}
	#shop li{
		width: auto;
		margin-bottom: 30px;
	}
	#shop li dl.shop-box dd.shop-box,
	#shop .event li dl.shop-box dd.shop-box{
		padding-top: 24px;
		padding-bottom: 24px;
	}
	#shop li dl.shop-box dd.shop-box .category{
		font-size: 14px;
		margin-top: -40px;
	}
	#shop li dl.shop-box dd.shop-box div{
		height: auto;
	}
	#shop li dl.shop-box dd div h5{
		font-size: 16px;
	}
	#shop li dl.shop-box dd div p{
		font-size: 14px;
		margin-top: 10px;
	}
	#shop .event li dl.shop-box dd.shop-box .btn a{
		width: 84px;
		padding: 5px 0;
	}
}


/* infection-control
-----------------------------------------------*/
#infection-control{
	line-height: 2.0;
	margin-bottom: 20px;
	color: #1A1311;
}
@media only screen and (max-width: 750px) {
	#infection-control{
		line-height: 1.6;
		margin-bottom: 50px;
	}
	#infection-control p{
		text-align: left;
	}
}


/* recruit
-----------------------------------------------*/
#recruit .recruit-box{
	max-width: 925px;
	margin: 0 auto 150px;
	display: flex;
	justify-content: space-between;
}
#recruit .recruit-left{
	width: 50%;
	text-align: left;
}
#recruit .recruit-left p{
	text-align: left;
	line-height: 2.0;
}
#recruit .recruit-left h3{
	margin-bottom: 40px;
	margin-top: 50px;
}
#recruit .recruit-right{
	width: 43.89%;
}
#recruit .recruit-right .btn a{
	padding-top: 1.0em;
	padding-bottom: 1.0em;
	margin-top: 30px;
	border-radius: 16px;
}
#recruit .recruit-right .btn br{
	display: none;
}
@media only screen and (max-width: 1200px) {
	#recruit .recruit-right .btn br{
		display: block;
	}
}
@media only screen and (max-width: 750px) {
	#recruit .recruit-box{
		width: auto;
		margin: 0 auto 50px;
		display: block;
		margin-left: 0;
		margin-right: 0;
	}
	#recruit .recruit-left,
	#recruit .recruit-right{
		width: auto;
	}
	#recruit .recruit-left h3{
		width: 65%;
		margin: 0 auto 24px;
	}
	#recruit .recruit-left p{
		line-height: 1.6;
		margin-bottom: 20px;
	}
	#recruit .recruit-left p br{
		display: none;
	}
	#recruit .recruit-right .btn{
		font-size: 25px;
		width: 300px;
		margin: 30px auto 0;
	}
}


/* information
-----------------------------------------------*/
#information .inner{
	max-width: 1130px;
	margin: 0 auto 80px;
}
#information h3{
	margin-bottom: -30px;
}
#information h4{
	display: inline-block;
	background: #F18D00;
	color: #fff;
	border-radius: 4px;
	padding: 8px 16px;
	margin-bottom: 30px;
	margin-top: 40px;
}
#information p{
	line-height: 2.0;
	margin-bottom: 20px;
}
#information p.note{
	font-size: 18px;
	line-height: 1.6;
}
#information p.note span{
	font-size: 14px;
}
#information dl{
	display: flex;
	flex-wrap: wrap;
	max-width: 520px;
	margin: 0 auto 20px;
}
#information dl dt{
	font-size: 14px;
	color: #fff;
	background-color: #CCCCCC;
	border-radius: 4px;
	width: 72px;
	height: 26px;
	padding-top: 4px;
	margin-bottom: 10px;
}
#information dl dd{
	width: calc(100% - 80px);
	text-align: left;
	padding-top: 4px;
	padding-left: 8px;
	margin-bottom: 10px;
	font-size: 16px;
}
@media only screen and (max-width: 1200px) {
	#information .inner{
		margin-left: 15px;
		margin-right: 15px;
	}
}
@media only screen and (max-width: 750px) {
	#information h3{
		width: 100%;
		margin: 0 auto;
	}
	#information p{
		line-height: 1.6;
		font-size: 14px;
		margin-bottom: 30px;
		text-align: left;
	}
	#information p.note{
		font-size: 12px;
	}
}