@import "../js/nav/styles.css";
@media only screen and (max-width:730px){
#device { display:block;}
#device p.pc_btn { display:none;}
#device p.sp_btn {display:block; }
}

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

body { min-width:100%; font-size:100%;}
#header { display:none;}
#content{ width:100%;}
#footer { width:100%;}

#wrapper { background:#FFF; border-top:none; overflow:hidden;}
#base { width:100%; margin:0 !important;}

.pc { display:none;}
.sm { display:block;}

#device p.pc_btn { display:block !important;}
#device p.sp_btn { display:none !important;}

/*====================================================================================================
  HEADER
====================================================================================================*/

#header {}

/*====================================================================================================
  CONTENT
====================================================================================================*/

#content {
	position:relative;
	margin:0;
	width:100%;
	border:none;
	background:#FFF;
	border-radius:0;
}

/*---------------------------------------------------------------------------
  TITLE
---------------------------------------------------------------------------*/

h2 {
	position:static;
	padding:20px;
	width:100%;
	height:auto;
	text-align:center;
	color:#FFF;
	text-indent:0;
}
h2.tit_about,
h2.tit_oishisa { background:#622300;}

/*====================================================================================================
  FOOTER
====================================================================================================*/

#footer { width:100%; padding:30px 0; background:#386306;}
#footer .f_box { padding:0; width:80%;}


#footer .add {
	padding:0 0 30px;
	line-height:130%;
	background:none;
}
#footer .f_box div { padding:10px 0 0;}
#footer .div:after { display:none;}
#footer .f_nav{ display:none;}
#footer .copy { float:none; font-size:80%; text-align:center;}

/*====================================================================================================
  PAGE
====================================================================================================*/

#page {
}
#page a {
	display:block;
	width:45px;
	height:45px;
	background-size:100% auto;
}

/*====================================================================================================
  TOP PAGE
====================================================================================================*/

#toppage { background:#FFFBE7 url(../image/bg.jpg) no-repeat; background-size:200% auto;}
#toppage:before,
#toppage:after { display:none;}

/* MAINIMG */
#toppage .mainimg {
	position:relative;
	top:0;
	margin:0 auto;
	padding:30px;
	width:100%;
	height:auto;
}
#toppage .mainimg:before {
	right:10%;
	bottom:5%;
	width:100px;
	height:80px;
	background-size:100% auto;
}
#toppage .mainimg h2 {
	top:10%;
	right:10%;
	width:20%;
	height:auto;
	background-size:100% auto;
}

/* TOPICS */
#toppage .topics { position:relative; padding:0 0 30px; background:none;}
#toppage .topics:before { display:none;}
#toppage .topics ul { position:relative; margin:0 auto; width:80%;}
#toppage .topics ul:after { display:none;}
#toppage .topics ul:before { display:none;}
#toppage .topics ul li {float:none; width:100%;}
#toppage .topics ul li+li { margin:5px 0 0;}
#toppage .topics ul li a {
	position:relative;
	display:block;
	padding:15px 10px;
	text-align:center;
	color:#FFF;
	font-weight:bold;
	background:url(../../image/top/pickup_bg.png) no-repeat;
	background-size:100% 100%;
	border-radius: 5px; /* CSS3 */
	-webkit-border-radius: 5px; /* Safari,Google Chrome */
	-moz-border-radius: 5px;/* Firefox */
}
#toppage .topics ul li a img {
	position:absolute;
	top:-5px;
	left:-20px;
	width:60px;
	height:auto;
}
#toppage .topics ul li:nth-child(2) a img { left:auto; right:-20px !important;} 



/* RECOMEND */
#toppage .recomend { position:relative; padding:30px 0 100px; background:#FFF;}
#toppage .recomend h3 { margin-bottom:20px; background-size:auto 20px;}
#toppage .recomend ul { margin:0 auto; width:80%;}
#toppage .recomend ul:after { display:none;}
#toppage .recomend ul li { position:relative; float:none; width:100%; text-align:left;}
#toppage .recomend ul li p.photo { min-height:120px;}
#toppage .recomend ul li+li { margin:30px 0 0;}


/* INFORMATION */
#toppage .information { margin:0 auto; padding:50px 0 0; width:100%;}
#toppage .information:after { display:none;}
#toppage .news { position:relative; float:none; margin:0 auto; width:80%;}
#toppage .news h3 {left:-20px;}
#toppage .news .news_box { position:relative; z-index:9999;}
#toppage .news dl { padding:10px; background:#FFF;}
#toppage .news dl:after { display:none;}
#toppage .news dl dt,
#toppage .news dl dd {float:none; width:100%;}
#toppage .news dl+dl { margin-top:5px;}
#toppage .banner { float:none; margin:10px auto 0; padding-bottom:30px; width:80%;}
#toppage .banner p { background:#FFF;}
#toppage .banner p+p { margin-top:10px;}

/*====================================================================================================

  ABOUT

====================================================================================================*/

#about { padding:0; text-align:left;}
#about h3 { margin:50px auto; width:100%;}
#about .box1,
#about .box2,
#about .box3 { margin:40px 10%;}
#about h4 { height:auto; text-indent:0; text-align:center; color:#622300; background:none !important;}
#about .photo { position:static;}
#about .photo img { width:100%;}
#about .f_photo { display:none;}

/*====================================================================================================

  OISHISA

====================================================================================================*/

#oishisa { padding:0;}
#oishisa .box1,
#oishisa .box2,
#oishisa .box3 { margin:40px 10%;}
#oishisa h3 { height:auto !important; text-indent:0; text-align:center; color:#622300; background:none !important;}
#oishisa .photo {  position:static;}
#oishisa .photo img { width:100%;}
#oishisa h4 {}

/* SONOTA */
#oishisa .box2 { padding-left:0;}
#oishisa .box3 .come { margin-bottom:30px;}


/*** TABEGORO *******************************************************************/
#tabekata { min-height:auto; padding-bottom:30px; background:#FDFCAE;}
#tabekata:before { display:none;}
#tabekata h3 {
	position:relative;
	top:-20px;
	margin:0 auto 50px;
	width:260px;
	height:83px;
	text-indent:-9999px;
	background:url(../../image/oishisa/mid4.png) no-repeat !important;
}
#tabekata ul.muki { position:relative; margin:0 auto; width:100%;}
#tabekata ul.muki:before {left:20px;}
#tabekata ul.muki:after { display:none;}
#tabekata ul.muki li { float:none; margin:0 auto 10px  !important; padding:10px; width:80%; min-height:auto !important;}
#tabekata ul.muki li .come { padding:10px;}
#tabekata ul.sonota { position:relative; margin:30px auto; width:100%;}
#tabekata ul.sonota:after { display:none;}
#tabekata ul.sonota:before {left:20px;}
#tabekata ul.sonota li {float:none; margin:0 auto 10px  !important; padding:30px 20px 20px; width:80%; min-height:auto;}
#tabekata ul.sonota .recipe b { color:#622300; font-size:90%; }
#tabekata .hozon { margin:30px auto 0; width:80%; padding:20px;}