/*
Theme Name: okazuya-template
*/

/*全体の設定
---------------------------------------------------------------------------*/
html, body {
	width:100%;
}
p, ul, ol, li, dl, dt, dd, form, figure, form {
	margin: 0px;
	padding: 0px;
}
ol {
	padding-left: 40px;
	padding-bottom: 15px;
}
img {
	border: none;
	height: auto;
	vertical-align: middle;
}
body {
	margin: 0 auto;
	padding: 0px;
	height: 100%;
	color: hsla(0,0%,15%,1.00);
	line-height: 1.5em;
	font-family: "M PLUS Rounded 1c";
	background: #fff;
	font-weight: 500;
}
html {
	overflow-x: hidden;
}
a{
	text-decoration: none;
	color:#000;
}
a:hover{
color:#339933;
}

.smp-800only{display:none;}

@media screen and (max-width: 800px) {
.pc800-only{display:none;}
.smp-800only{display:block;}
}

.left{text-align: left;}
.right{	text-align: right;}
.center{text-align: center;}
*, *:before, *:after {box-sizing: border-box;}

/*ヘッダー
---------------------------------------------------------------------------*/
header {
	max-width: 100%;
	height:150px;
	margin:0 auto;
	position: relative;
	z-index: 5;
	background-color:#339933; 
	border-top:6px solid #ec651b;
}
.header-wrap{
	max-width:1024px;
	margin: 0 auto;
	height:51px;
	position: relative;
}
header img.logo {
	position: absolute;
	z-index: 6;
	left:0;
	top:0;
}
p.header-txt {
		position: absolute;
	 top:25px;
	left:300px;
	line-height: 1.5em;
	font-size:12px;
  color: #fff;
	font-weight: bold;
}
header .tel{
	position: absolute;z-index: 30;
	right:0px;
	top:5px;
	z-index: 10;
}
div.tel-icon{
	display: none;
}



@media screen and (max-width: 1024px) {
	header{
		width:100%;
		height:100px;
		position: fixed;
		top: 0px;
		left: 0px;
		box-shadow: 0px 3px 5px #aaa;
	}
header img.logo {
	height:90px;
}
	header .tel{display: none;}
p.header-txt {
	 top:20px;
}
}

@media screen and (max-width: 650px) {
header{
		height:80px;
		box-shadow: 0px 3px 5px #aaa;
	}
header img.logo {
	height:70px;
}
p.header-txt {
	 top:15px;
	left:220px;
	line-height: 1.5em;
	font-size:10px;
}
}

@media screen and (max-width: 500px) {
header{
		height:60px;
		box-shadow: 0px 3px 5px #aaa;
	}
header img.logo {
	height:50px;
	left:-10px;
}
p.header-txt {
	 display:none;
}
div.tel-icon{
	display: block;
	position: absolute;
	top:10px;
	right:50px;
	font-size:2em;
	color:#fff;
	width:30px;
}
div.tel-icon img{
	width:100%;
}
}



/*メインメニューのブロック
---------------------------------------------------------------------------*/
@media screen and (min-width: 1025px) {
#menubar {
	width:100%;
	height:55px;
	position: relative;z-index: 20;
	top:50px;
	left: 0;
    right: 0;
    margin: auto;
	background-image: url(images/bg-header-menu.png);
	background-position: top left;
	background-repeat:repeat;
}
	#menubar ul{
	width:1024px;
	left: 0;
  right: 0;
  margin: auto;
	position: absolute;
	top:3px;
	text-align: center;
	list-style: none;
	}
	#menubar li{
	display: inline-block;
	text-align: center;
	}	
	#menubar li:hover{
		background-image: url(images/menustar.png);
		background-position: left;	
	background-repeat:no-repeat;
	}	
	
#menubar img{
	padding:0 15px;
	}
	#menubar a{
	}
	
/*スマホ用メニューを表示させない*/
.cp_cont {display: none;}
}

/*ドロワー----------*/

@media screen and (max-width: 1024px) {
#menubar {
	display: none;
}	
*, *:before, *:after {
	padding: 0;
	margin: 0;
	box-sizing: border-box;
}
	.cp_cont {display: block;}
.cp_offcm01 {
	position: absolute;
	top: 35px;
	right: 0px;
	display: inline-block;
}
/* menu */
.cp_offcm01 .cp_menu {
	position: fixed;
	top: 100px;
	right: -250px;
	width: 250px;
	height: 100%;
	cursor: pointer;
	-webkit-transition: 0.53s transform;
	        transition: 0.53s transform;
	-webkit-transition-timing-function: cubic-bezier(.38,.52,.23,.99);
	        transition-timing-function: cubic-bezier(.38,.52,.23,.99);
	background-color: #ec6826;
	opacity: 0.9;
}
.cp_offcm01 .cp_menu ul {
	margin: 0;
	padding: 0;
}
.cp_offcm01 .cp_menu li {
	list-style: none;
}
.cp_offcm01 .cp_menu li a {
	display: block;
	padding: 20px;
	text-decoration: none;
	color: #fff;
	font-weight: 700;
	border-bottom: 1px solid #fff;
}
.cp_offcm01 label{
	width:90px;
	}
	
.cp_offcm01 #cp_toggle01 {
	position: absolute;
	display: none;
	opacity: 0;
}
.cp_offcm01 #cp_toggle01:checked ~ .cp_menu {
	-webkit-transform: translateX(-250px);
	        transform: translateX(-250px);
}
/* menu toggle */
.cp_offcm01 #cp_toggle01 ~ label {
	display: block;
	padding: 0;
	cursor: pointer;
	-webkit-transition: 0.5s transform;
	        transition: 0.5s transform;
	-webkit-transition-timing-function: cubic-bezier(.61,-0.38,.37,1.27);
	        transition-timing-function: cubic-bezier(.61,-0.38,.37,1.27);
	text-align: center;
	color: #fff;
}
.cp_offcm01 #cp_toggle01:checked ~ label {
	-webkit-transform: translateX(0px);
	        transform: translateX(0px);
}
.cp_offcm01 #cp_toggle01 ~ label::before {
	font-family: 'Font Awesome 5 Free';
	content: '\f0c9';
	font-size: 50px;
}
.cp_offcm01 #cp_toggle01:checked ~ label::before {
	content: '\f00d';
}
/* contents */
.cp_contents {
	color: #333333;
	text-align: center;
}
}

@media screen and (max-width: 650px) {
.cp_offcm01 {
	top: 24px;
	right: 0px;
}
.cp_offcm01 #cp_toggle01 ~ label::before {
	font-size: 35px;
}
.cp_offcm01 label{
	width:60px;
	}
.cp_offcm01 .cp_menu {
	top: 80px;
}
}

@media screen and (max-width: 500px) {
.cp_offcm01 {
	top: 14px;
	right: 5px;
}
.cp_offcm01 #cp_toggle01 ~ label::before {
	font-size: 25px;
}
.cp_offcm01 label{
	width:40px;
	}
.cp_offcm01 .cp_menu {
	top: 60px;
}
}

/*footer
---------------------------------------------------------------------------*/
footer {
		width:100%;
		margin: 0 auto;
		margin-top:0px;
		border-top:2px solid #339933;
	background-color: #eee;
	}

div.footer1{
		max-width: 1024px;
		margin:0 auto;
		padding:35px 0px 35px 0px;
		overflow: hidden;
}
.footer-logo{
	float: left;
}
.footer-access{
	line-height: 1.3em;
	font-size:14px;
	float: left;
	padding:35px 0 0 20px;
}

#copyright {
	width:100%;
	background-color: #339933;
	text-align: center;
}
#copyright p{
	font-size:12px;
	padding: 3px;
	color:#fff;	
		font-weight: 700;
		line-height: 2em;
	}

@media screen and (max-width: 1024px) {
	footer {
		width:100%;
	}
	
	div.footer1{
		width: 100%;
		margin:0 auto;
		padding-left:35px;
	}
}

@media screen and (max-width: 650px) {
	footer {
		width:100%;
		margin-top:20px;
	}
	div.footer1{
		width: 100%;
		margin:0 auto;
		padding-left:0;
		text-align: center;
	}
.footer-logo{
	float: none;
}
.footer-access{
	font-size:12px;
	float: none;
	padding:20px 0 0 0;
}	
#copyright p{
	font-size:10px;
	padding: 3px;
	color:#fff;	
	font-weight: 700;
	line-height: 2em;
	}
}


/*FONTAWESOME
---------------------------------------------------------------------------*/
.white{color:#fff;}



/*共通
---------------------------------------------------------------------------*/

section{
	margin: 0;
	padding:0;
}
main{
	width:1024px;
	margin:0 auto;
	display: block;
	background-color: #fff;
	padding:0 0 20px 0;
	}
main#top{
	padding:20px 0;
	overflow: hidden;
	}
div.contents-left{
	width:calc(100% - 270px);
	float:left;
	padding-right:20px;
}
div.contents-right{
	width:270px;
	float:left;
}
h1{
	font-size:2.5em;
	padding:30px 10px;
	color:#ec6826;
	border-top: 2px dotted #ec6826;
	border-bottom: 2px dotted #ec6826;	
	letter-spacing: 1px;
}
h2{
	font-weight: 700;
	font-size:22px;
	letter-spacing: 1.5px;
	line-height: 2em;
	margin-bottom: 10px;
	padding-left:40px;
	background-image: url(images/star.png);
	background-position: center left;
	background-repeat:no-repeat;
	border-bottom:2px solid #339933;
	color:#339933;
	font-weight: bold;
	}
.pankuzu{
	font-size:12px;
	padding:5px 0;
	margin-top:10px;
}
.contents{
	padding:20px 0;
}
.link-box{
	margin-left:auto;
	text-align: center;
	padding:8px;
	border: 1px solid #339933;
	color:#339933;
	max-width: 230px;
}
.link-box:hover{
	background-color:#339933;
	color:#fff;
}
.smp-contents{display:none;}
div.smp-contents-left{display:none;}
div.smp-contents-right{display:none;}

@media screen and (max-width: 1024px) {
main{
	width:100%;
	background-color: #fff;
	margin-top:115px;
	}
main#top{
	}
h1{
	font-size:2em;
	padding:25px 10px;
	margin-bottom:20px;
}
section.padding{
	margin: 0;
	padding:0 10px;
}
div.contents-left{
	width:100%;
	float:none;
	padding-right:0;
	padding:0 10px;
}
div.contents-right{
	width:100%;
	float:none;
	margin-top:10px;
	}
.smp-contents{
	display:block;
	overflow: hidden;
	padding:0 10px;
	}
div.pc-contents{display:none;}
div.smp-contents-left{
	display:block;
	width:calc(100% - 270px);
	float:left;
	padding-right:10px;
}
div.smp-contents-right{
	display:block;
	width:270px;
	float:left;
}	
}

@media screen and (max-width: 650px) {
main{
	margin-top:90px;
	}
}
@media screen and (max-width: 560px) {
.smp-contents{
	display:block;
	overflow: hidden;
	padding:0 10px;
	}
div.pc-contents{display:none;}
div.smp-contents-left{
	width:100%;
	float:none;
	padding-right:0;
}
div.smp-contents-right{
	display:none;
}	
}
@media screen and (max-width: 500px) {
main{
	margin-top:70px;
	}
h1{
	font-size:1.5em;
	padding:15px 10px;
	margin-bottom:20px;
}
h2{
	font-size:18px;
	}
	}
@media screen and (max-width: 450px) {
}

/*トップページ - 左カラム
---------------------------------------------------------------------------*/

/*ごあいさつ*/
p.top-txt{
	line-height: 1.5em;
	font-size:16px;
	padding:10px;
}

/*定番メニュー*/
#top-menulist {
	margin: 0;
	width:100%;
}
#top-menulist > div.menu{
	width: 100%;
	display: flex;
	display: -ms-flexbox; /* IE10 */
	flex-wrap: wrap;
	-ms-flex-wrap: wrap; /* IE10 */
	padding:4px;
}
#top-menulist > div.menu > div{
	width: 25%;
	padding:5px;
	margin:0 0 20px 0;
}
img.menulist{
	width: 100%;
	padding:2px;
}
p.menu-ttl{
	text-align: center;
	font-size:14px;
	font-weight: 700;
	line-height: 1.5em;
}
p.menu-ttl:hover{
	color:#339933;
}
p.menu-price{
	text-align: center;
	font-size:14px;
	font-weight: 700;
	line-height: 1.5em;
}

.top-banner{width:100%;margin-top:10px;}
.top-banner img{
	width:100%;
	margin:10px 0;
}

@media screen and (max-width: 1024px) {
	#top-menulist > div.menu  > div{
		width: 25%;
	}
}
@media screen and (max-width: 450px) {
	#top-menulist > div.menu  > div{
		width: 33.3%;
	}
p.menu-ttl{
	font-size:12px;
}
p.menu-price{
	font-size:12px;
}
p.top-txt{
	font-size:12px;
	padding:0;
}
}

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

}

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

}

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


/*トップページ - 右カラム
---------------------------------------------------------------------------*/
/*新着情報*/
    .info-box-ttl{
        border:1px solid #ec6826;
        width:100%;
		padding: 5px;
        font-weight:bold;
        font-size:16px;
        background-color:#ec6826;
        color:#fff;
		text-align: center;
		letter-spacing: 0.2em;
    }
    .info-box-list {
        overflow:auto;
        width:100%;
        height:250px;
		padding: 5px;
        border:1px solid #ec6826;
        background-color:#fff;
        color:#000;
        font-size:12px;
    }
.info-box-list div{
	margin:5px;
	border-bottom:1px dotted #bbb;
}
p.info-date{
	font-size:12px;
	padding: 5px 0;
}
p.info-ttl{
	font-size:13px;
	line-height: 1.5em;
	padding-bottom: 8px;
}

/*チラシ*/
#info-flyer {
	margin:10px 0;
	width:100%;
	height:370px;
	position: relative;
	background-image: url(images/bg-flyer.png);
	background-position: center center;
	background-repeat:no-repeat;	
	background-size:100%;
}
.flyer{
	position: absolute;
	top:90px;
	text-align: center;	
	width:100%;
		left:0;
	right:0;
}
.flyer img{
	height:160px;
}

.flyer-link-txt{
	position:absolute;
	bottom:90px;
	left:0;
	right:0;
	text-align: center;
	width:100%;
	
}

/*サブメニュー*/
#sub-menu{
	margin:10px 0;	
	width:100%;
}

#sub-menu > div.sub-menu{
	width: 100%;
	display: flex;
	display: -ms-flexbox; /* IE10 */
	flex-wrap: wrap;
	-ms-flex-wrap: wrap; /* IE10 */
}
#sub-menu > div.sub-menu > div{
	width: 100%;
	margin:0 0 8px 0;
} 
img.submenulist{
	max-width: 270px;
}

@media screen and (max-width: 1024px) {
    .info-box-ttl{
        border:1px solid #ec6826;
        width:100%;
		padding: 10px;
    }
    .info-box-list {
        height:325px;
    }
#info-flyer {
	margin:0;
	height:365px;
}
#sub-menu{
	padding:0 5px;	
}
#sub-menu > div.sub-menu > div{
	width: 50%;
	padding:5px;
	margin:0 0 3px 0;
}
img.submenulist{
	max-width: none;
	width:100%;
}
}

@media screen and (max-width: 500px) {
#sub-menu > div.sub-menu > div{
	width: 100%;
	padding:5px;
	margin:0 0 3px 0;
}
}




/*メニュー
---------------------------------------------------------------------------*/

/*定番弁当*/
/*
#menulist {
	margin: 0;
	width:100%;
}
#menulist > div.menu{
	width: 100%;
	display: flex;
	display: -ms-flexbox; 
	flex-wrap: wrap;
	-ms-flex-wrap: wrap; 
	padding:4px;
}
#menulist > div.menu > div{
	width: 20%;
	padding:5px;
	margin:0 0 20px 0;
}
#menulist > div.menu > div > img{
	width: 100%;
	padding:2px;
}

@media screen and (max-width: 960px) {
#menulist > div.menu  > div{
		width: 25%;
	}
}
@media screen and (max-width: 450px) {
#menulist > div.menu  > div{
		width: 33.3%;
	}
}
*/

/*日替わり弁当*/
div.calender-wrap{
	margin-bottom:20px;
}
div.calender{
	margin:10px 0 ;
	padding: 10px 0;
}
table#calender{
	width:100%;
	border-collapse: collapse;
}
table#calender th{
	width: 14.2%;
	background-color: #FF8D3F;
	padding:5px;
}
table#calender th.sat{
	color:blue;
}
table#calender th.sun{
	color:red;
}
table#calender td{
	font-size:12px;
	width: 14.2%;
	padding:5px;
	text-align: center;
	height: 80px;
}
table#calender td.day{
	font-size:12px;
	width: 14.2%;
	padding:0px;
	text-align: center;
	height: 12px;
	background-color: #FFD170;
	font-weight: bold;
}
table#calender td.sat{
	background-color:#C1D2FF;
}
table#calender td.sun{
	background-color:#FFCACB;	
}
p.calender-ttl{
	font-size:30px;
	line-height: 1.5em;
	color:#FF5F00;
	font-weight: bold;
}
table#calender tr,table#calender td,table#calender th{
	border:2px solid #D3D3D3;
}

/*特注弁当*/
.green-box{
	margin-top:-5px;
	background-color:#339933;
	color: #fff;
	font-size:12px;
	padding:3px 5px;
	margin: 0 5px
}

p.menu-txt{
	line-height: 1.5em;
	font-size:16px;
	padding:0 10px;
}
span.big{font-size:40px;font-weight: bold;}
span.small{font-size:25px;font-weight: bold;}


@media screen and (max-width: 650px) {
p.menu-txt{
	font-size:14px;
}	
span.big{font-size:30px;font-weight: bold;}
span.small{font-size:18px;font-weight: bold;}

}
@media screen and (max-width: 450px) {
p.menu-txt{
	font-size:12px;
	padding:0;
}	
span.big{font-size:20px;font-weight: bold;}
span.small{font-size:12px;font-weight: bold;}

}



/*店舗案内
---------------------------------------------------------------------------*/
div.store-contents{
	width:100%;
	overflow: hidden;
}
div.store-contents-left{
	width:300px;
	float:left;
	padding-right:20px;
}
div.store-contents-right{
	width:calc(100% - 300px);
	float:left;
}

/*店舗情報*/
table.store{
	border-collapse: collapse;
	width:100%;
	padding:10px; 
}
table.store tr{
	border-bottom: 1px dotted #339933;
}
table.store th, table.store td{
	padding:10px;
	margin-right:10px;
}
table.store th{
	border-right:10px solid #fff;
	width:120px;
}
table.store td{
	width:calc(100% - 120px) ;
}

/*GOOGLE MAP*/
.gmap {
margin:20px 0;
height: 300px;
overflow: hidden;
padding-bottom: 56.25%;
position: relative;
z-index: 0;
}
.gmap iframe {
position: absolute;
left: 0;
top: 0;
height: 100%;
width: 100%;
}

@media screen and (max-width: 650px) {
div.store-contents-left{
	width:100%;
	float:none;
	padding-right:0;
}
div.store-contents-right{
	width:100%;
	float:none;
	margin:10px 0 30px 0;
}
table.store{
	font-size:12px; 
}
table.store th{
	width:30%;
}
}


/*Single-menu
---------------------------------------------------------------------------*/
div.menu-contents{
	width:100%;
	overflow: hidden;
	margin-bottom: 20px;
}
div.menu-contents-left{
	width:60%;
	float:left;
	padding-right:20px;
}
div.menu-contents-right{
	width:40%;
	float:left;
	padding:10px;
}

/*お弁当サブタイトル*/
p.menu-subttl{
	line-height: 1.5em;
	font-size:16px;
	font-weight: bold;
	padding:10px 0;
	color:#339933;
}
p.menu-comment{
	line-height: 1.5em;
	font-size:16px;
}

/*特定原材料*/
div.menu-cat{
	background-color: #339933;
	color:#fff;
	padding:3px 0;
	text-align: center;
	margin:20px 0 5px 0;
}
p.menu-comment-red{
	line-height: 1.5em;
	font-size:14px;
	color:red;
}

#menulist-cat {
	margin: 0;
	width:100%;
}
#menulist-cat > div.menulist-term{
	width: 100%;
	display: flex;
	display: -ms-flexbox; /* IE10 */
	flex-wrap: wrap;
	-ms-flex-wrap: wrap; /* IE10 */
	padding:4px;
}
#menulist-cat > div.menulist-term > div{
	width: 33.3%;
	padding:2px;
	margin:0;
}
#menulist-cat > div.menulist-term > div p{
	font-size: 14px;
	font-weight: bold;
	text-align: center;
	border:1px solid #339933;	
	padding: 5px;
}

@media screen and (max-width: 650px) {
div.menu-contents-left{
	width:100%;
	float:none;
	padding-right:0;
}
div.menu-contents-right{
	width:100%;
	float:none;
}
}

/*ORDER
---------------------------------------------------------------------------*/
.order-tel{font-size:30px;color:red;font-weight:bold;padding:10px 0;}
h3{color:#339933;border-bottom: 2px dotted #339933;padding:10px 0;margin:10px 0;}
span.red{color:red;}
fieldset{
		background-color:#D6FFC8;
		border:none;
		width:100%;
		padding:0 20px;
	}
form{padding:0;}
label {
	display: table;
	font-weight: bold;
	width: 200px;
	vertical-align: middle;
	float:left;
	margin:0;
}
label.order{
	float:none;
	margin:10px 0;
}
.element_wrap {
	margin-bottom: 0px;
	padding: 15px 20px;
	text-align: left;
	overflow:hidden;
}
.flat {
	padding: 0px 20px;
}
form{
		padding:20px 0px 30px 0px;
	}
.form-txt{padding:0;margin:0;font-size:12px;}
.order-txt{float:left;width:60%;padding:5px;margin:0 5px;}
.order-date{float:left;width:30%;padding:5px;margin:0 5px;}
.order-lunch{width:60%;margin:5px 5px 5px 10px;padding:5px;}
.order-quantity{width:10%;margin:5px 10px 5px 5px;padding:5px;}
.order-daylunch{}
.order-comment{width:80%;margin-bottom:20px;}


/*PP
---------------------------------------------------------------------------*/

div.pp{
	padding:0 30px;
}
h4{
	font-size:120%;	
}

div.pp ol li{
	line-height: 1.5em;
}

/*新着情報Single
---------------------------------------------------------------------------*/
div.single-post-txt{
	padding:0 10px;
}
.single-post-wrap{
	width:100%;
}
.single-post-date{
	width:100%;
	text-align:right;
	padding:10px 0;
	color:#464646;
}


/*折込チラシSingle
---------------------------------------------------------------------------*/
div.single-flyer-txt{
	padding:0 10px;
	text-align:center;
}
div.single-flyer-txt img{
	width:50%;
}





/*前の記事へ 次の記事へ
---------------------------------------------------------------------------*/
div.navigation{
	width:100%;
	margin:0 auto;
	text-align:center;
	margin:10px 0 20px 0;
}
span.previous-entries{
	font-weight:bold;
}
span.next-entries{
	font-weight:bold;	
}

.screen-reader-text {
  clip: rect(1px, 1px, 1px, 1px);
  height: 1px;
  overflow: hidden;
  position: absolute !important;
  width: 1px;
  word-wrap: normal !important;
}

.nav-previous{
	font-weight:bold;	
}
.nav-next{
	font-weight:bold;	
}