@charset "utf-8";

/* page.css */

#meal .pgMenu {
	display: flex;
	flex-flow: row nowrap;
}

#meal .pgMenu ul {
	width: 31%;
	padding: 20px 0 60px;
}
#meal .pgMenu ul:nth-of-type(2) {
	margin: 0 3.5%;
}

#meal .pgMenu ul li a {
	display: block;
	padding: .35em 1em;
	background-color: #cccccc;
	border:2px solid #cccccc;
	border-radius: 99em;
	text-align: center;
	text-decoration: none;
	color: #333333;
}

#meal .pgMenu ul li +li {
	margin-top: 1.5em;
}

#meal .pgMenu ul:nth-of-type(1) li a {
	background-color: #70c7ff;
	border:2px solid #70c7ff;
}
#meal .pgMenu ul:nth-of-type(2) li a {
	background-color: #adebb9;
	border:2px solid #adebb9;
}
#meal .pgMenu ul:nth-of-type(3) li a {
	background-color: #fae3ac;
	border:2px solid #fae3ac;
}

#meal .pgMenu ul:nth-of-type(1) li a:hover {
	background-color: #ffffff;
	border:2px solid #70c7ff;
}
#meal .pgMenu ul:nth-of-type(2) li a:hover {
	background-color: #ffffff;
	border:2px solid #adebb9;
}
#meal .pgMenu ul:nth-of-type(3) li a:hover {
	background-color: #ffffff;
	border:2px solid #fae3ac;
}

#meal .list_item {
	position: relative;
	padding: 3em 1em 1em;
	border-radius: 2px;
	background-color: #ffffff;
	box-shadow : 1px 1px 4px rgba(0, 0, 0, .6);
}

#meal .list_item +.list_item {
	margin-top: 60px;
}

#meal .list_item h4 {
	display: inline-block;
	position: absolute;
	left: 0;
	top: 5px;
	box-sizing: border-box;
	padding: 0 12px;
	margin: 0;
	height: 30px;
	line-height: 30px;
	font-size: 18px;
	letter-spacing: 0.1em;
	color: white;
	background: #70c7ff;
	text-shadow: 0 0 2px rgba(0, 0, 0, .2);
	box-shadow: 0 2px 2px rgba(0, 0, 0, 0.12);
}
#meal .list_item h4:before {
	position: absolute;
	content: '';
	top: 0;
	left: -7px;
	border: none;
	height: 38px;
	width: 7px;
	background: #70c7ff;
	border-radius: 5px 0 0 5px;
}
#meal .list_item h4:after {
	position: absolute;
	content: '';
	bottom: -7px;
	left: -5px;
	border: none;
	height: 7px;
	width: 5px;
	background: #4d99ca;
	border-radius: 5px 0 0 5px;
}

#meal .list_item h4 small {
	display: inline-block;
	font-size: 1.3rem;
}

#meal .list_item.cat01 h4 {
	background: #70c7ff;
}
#meal .list_item.cat01 h4:before {
	background: #70c7ff;
}
#meal .list_item.cat01 h4:after {
	background: #4d99ca;
}

#meal .list_item.cat02 h4 {
	background: #8fde9e;
}
#meal .list_item.cat02 h4:before {
	background: #8fde9e;
}
#meal .list_item.cat02 h4:after {
	background: #67a874;
}

#meal .list_item.cat03 h4 {
	background: #facf69;
}
#meal .list_item.cat03 h4:before {
	background: #facf69;
}
#meal .list_item.cat03 h4:after {
	background: #876e33;
}

#meal .list_item > p {
	display:none;
}

#meal .list_item dl {
	display: flex;
	flex-flow: row nowrap;
	align-items: center;
}

#meal .list_item dl dt {
	width: 242px;
	text-align: center;
}

#meal .list_item dl dd {
	width: calc(100% - 242px);
	padding-left: 20px;
	line-height: 2;
}

#order p {
	text-align: center;
}

#order .contactBox {
    position: relative;
    margin: 2em 0 0;
    padding: 0.5em 1em;
    border: solid 3px #ef8bb6;
    border-radius: 8px;
}

#order .contactBox .box-title {
    position: absolute;
    display: inline-block;
    top: -10px;
    left: 10px;
    padding: 0 .5em;
    line-height: 1;
    font-size: 1.8rem;
    background: #ffffff;
		color: #444444;
    font-weight: bold;
}

#order .contactBox ul {
	display: flex;
	flex-flow: row wrap;
	justify-content: space-around;
	padding-bottom: 1em;
}

#order .contactBox ul li {
	display: flex;
	flex-flow: row nowrap;
	align-items: center;
	padding: 1.4em 1em 0;
	font-size: 2.4rem;
	color: #666666;
}

#order .contactBox ul li i {
	flex: 1;
	margin-right: 5px;
	font-size: 3.0rem;
	transition: .3s;
	color: #ef8bb6;
}

#order .contactBox ul li:hover i {
	color: #1d98da;
}

#order .contactBox ul li a {
	text-decoration: none;
	color: #666666;
}

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

#meal .pgMenu ul li a {
	display: flex;
	flex-flow: column wrap;
	align-items: center;
	justify-content: center;
	height: 4em;
	padding: .35em .5em;
	font-size: 1.4rem;
}
#meal .pgMenu ul li a span {
	display:inline-block;
}

#meal .list_item h4 small {
	display:none;
}

#meal .list_item > p {
	display:block;
	margin: 0 0 1em;
	font-size: 1.6rem;
}

#meal .list_item dl {
	display: block;
}

#meal .list_item dl dt {
	width: 100%;
	margin: 0 0 16px;
}

#meal .list_item dl dd {
	width: 100%;
	padding-left: 0;
}



}