.スマホ：ナビゲーション ----------------------- {}

body       { background:url(../img/base/bg_b.gif)}
#wrapper   { background: url(../img/base/bg_01.gif) repeat-x left top; }
#conteiner { width:952px; margin:0px auto 40px auto; position:relative;}


.ヘッダ ----------------------- {}

header {
    width:950px;
    height:140px;
    position:relative;
    margin:0px auto;
}

header h1 {
    width:208px;
    height:51px;
    position:absolute;
    top:50px;
    left:10px;
    z-index:100;
}

header h1 a {
    width:208px;
    height:51px;
	background:url(../img/header/logo.gif) no-repeat 0px 0px;
    display:block;
    text-indent:100%; 
    white-space:nowrap; 
    overflow:hidden;
}

header h2 {
    position:absolute;
    top:30px;
    left:0;
    font-size: 10px;
    font-weight: normal;
    letter-spacing: 0.1em;
    color: #c0c0c0;
}

header #pulldown { display:none;}


.ナビ ----------------------- {}

nav {
    position:relative;
    width:950px;
    height:140px;
    margin: -140px auto 0px auto;
}

/* リスト */

nav #list { 
    position:absolute;
    top:30px;
    right:0;
    width:952px;
    font-size:93%;
}

nav #list li  { float:right; margin:0px 0px 0px 20px;}
nav #list li a , #header_list li a:visited  { color:#666; }

nav #list li.facebook {
    background: url(../img/header/icon_facebook.gif) no-repeat right center;
    padding-right: 20px;
}

nav #list li.instagram {
    background: url(../img/header/instagram.png) no-repeat right center;     /* 2018-5-24追加 */
    padding-right: 20px;
}
nav #list li.mailto {
    background: url(../img/header/mail_icon.png) no-repeat right center;     /* 2022-7-26追加 */
    padding-right: 20px;
}

/* メインメニュー */
nav #menu    { 
    width:748px;
    height: 60px;
    position:absolute;
    top:50px;
    right:0;
}

/* google翻訳   2018-7-5追加*/
.google    { 
    width:300px;    
    height: 60px;
    position:absolute;  
    top:110px;
    right:0;
}



nav #menu li      { float: left; }
nav #menu a       { display:block; height:60px; text-indent:100%; white-space:nowrap; overflow:hidden; }
nav #menu a:hover { background-color:#F7F4EA; }
nav #menu .sweets { margin-left:103px; }     /* ZIP 修正　df193px */

/* メインメニュー:ボタン */
nav #menu .sweets a { background: url(../img/nav/sweets.gif) no-repeat 0px 0px; width:90px; }
nav #menu .cheese a { background: url(../img/nav/cheese.gif) no-repeat 0px 0px; width:90px; }
nav #menu .cafe a   { background: url(../img/nav/cafe.gif) no-repeat 0px 0px; width:68px; }
nav #menu .fair a   { background: url(../img/nav/fair.gif) no-repeat 0px 0px; width:70px; }
nav #menu .media a  { background: url(../img/nav/media.gif) no-repeat 0px 0px; width:74px; }
nav #menu .access a { background: url(../img/nav/access.gif) no-repeat 0px 0px; width:93px; }
nav #menu .story a  { background: url(../img/nav/story.gif) no-repeat 0px 0px; width:74px; }
nav #menu .info a   { background: url(../img/nav/info.gif) no-repeat 0px 0px; width:70px; }


.メインビジュアル ----------------------- {}

#main_img            { width: 100%; margin: 0px 0px 40px 0px; background: url(../img/base/bg_03.gif) repeat left top #241918; }
#main_img .top       { background: url(../img/base/bg_02.gif) repeat-x left bottom; height:3px; }
#main_img .bottom    { background: url(../img/base/bg_01.gif) repeat-x left bottom; height:3px; }
#main_img .inner     { width: 960px; height:auto;  margin: 18px auto 25px auto; }
#main_img #col_left  { width: 640px; height:380px; float:left; }
#main_img #col_right { width: 300px; height:380px; float:right; }

/* スペシャル：牛ビスケット */

#sp_usibisuke {
	position:relative;
	width:960px;
	height:524px;
	margin:25px auto 15px auto;
}



/* スペシャル：銀の匙 */

#cstm_pickup {
	position:relative;
    width:960px;
    height:260px;
    margin-bottom:25px;
    margin:25px auto 15px auto;
}

#cstm_pickup .cstm_box_a  {
	position:relative;
    width:475px;
    height:260px;
    margin-right:10px;
    float:left;
}
#cstm_pickup .cstm_box_b {
	position:relative;
    width:475px;
    height:260px;
    float:left;
}

/* スペシャル：クリスマス */

#sp_xmas {
	position:relative;
	width:960px;
	height:169px;
	margin:25px auto 15px auto;
}


/* スペシャル：シルバースプーン */

#sp_silver {
	position:relative;
	width:960px;
	height:542px;
	margin:25px auto 15px auto;
}

#sp_silver #cover a {
	background:url(../img/sp/silver_spoon/p_01.jpg) no-repeat 0px 0px ;
	width:960px;
	height:362px;
	display:block;
}

#sp_silver h1 {
	position:absolute;
	top:-40px;
	left:-40px;
	background:url(../img/sp/silver_spoon/title_01.png) no-repeat 0px 0px;
	width:222px;
	height:250px;
    text-indent:100%; 
    white-space:nowrap; 
    overflow:hidden;
    display: block;
	z-index:20;
}

#sp_silver h2 {
	position:absolute;
	top:-25px;
	left:550px;
	background:url(../img/sp/silver_spoon/title_02.png) no-repeat 0px 0px;
	width:164px;
	height:388px;
    text-indent:100%; 
    white-space:nowrap; 
    overflow:hidden;
    display: block;
	z-index:20;
}

#sp_silver h3 {
	position:absolute;
	top:362px;
	left:0px;
	background:url(../img/sp/silver_spoon/title_03.gif) no-repeat 0px 0px;
	width:960px;
	height:180px;
    text-indent:100%; 
    white-space:nowrap; 
    overflow:hidden;
    display: block;
	z-index:10;
}

#sp_silver .btn {
	position:absolute;
	top:460px;
	left:575px;
	width:338px;
	height:480px;
    display: block;
	z-index:100;
}

#sp_silver .read { display:none;}


.トップ左カラム ----------------------- {}

#home .col_left           { float:left; width:600px; }
#home .col_left hgroup    { height:35px; position:relative; }
#home .col_left hgroup h1 { margin: 0px 0px 5px 0px; }
#home .col_left hgroup h2 { position:absolute; top:0px; right:0px; }
#home #copy     { margin: 0px 0px 30px 0px;}
#home #copy p   { margin: 0px 0px 15px 0px;}
#home #copy img {float:right;margin: 5px 0px 15px 20px;}


.トップサイド ----------------------- {}

#home aside    { width:300px; float:right; padding:0px 0px 10px 0px ;}
#home aside li { background: url(../img/hr_a.gif) repeat-x left bottom; }
#home aside ul { padding-top: 0px; padding-bottom: 15px;}
#home aside ul li a {
    background: url(../img/header/root_point.gif) no-repeat left center;
    padding-top: 10px 10px 10px 25px;
    display: block;
}

.お知らせ ----------------------- {}

#news_scroll {
    position:relative;
    overflow:auto;
    width:548;
    height:430px;
    margin:0px 0px 25px 0px;
    padding:0px 25px 35px 0px;
}

#news_scroll h3 {
    font-size:100%;
    font-weight: bold;
    padding:25px 0px 10px 0px;
    border-bottom:1px solid #ddd;
    position:relative;
}

#news_scroll h3 span {
    font-size:100%;
    font-weight: normal;
    font-family:Arial, Helvetica, sans-serif;
    color:#999;
    padding:25px 0px 0px 0px;
    position:absolute;
    top:0px;
    right:0px;
}

#news_scroll p { font-size:93%;}

/* スクロールスタイル */
.vscrollerbase,
.vscrollerbar   { width:5px; }
.vscrollerbase  { background: url(../img/common/line_a.gif) repeat-y center 0px; }
.vscrollerbar   { width:5px;
	background-color:#7b5f4c;
    -webkit-border-radius: 10px;
       -moz-border-radius: 10px;
            border-radius: 10px; }
.scrollgeneric  { position:absolute; top:0; left:0; line-height:1px; font-size:1px; }
.scrollerjogbox { width:10px; height:10px; top:auto; left:auto; bottom:0px; right:0px; }


.フッタ ----------------------- {}

footer        { background: url(../img/base/bg_03.gif) repeat left top; margin: 0px auto 0px auto;}
footer .inner {
    width:960px;
    color: #cccccc;
    margin:0px auto;
    padding: 25px 20px 50px 20px;
    position:relative;
}

footer .inner #osmc {
    position:absolute;
    top:35px;
    right:30px;
    width:65px;
    height:30px;
}

footer .ft_bnr     { margin-top:10px; padding:20px 0px; border-top:1px solid #4c382e; text-align:center; }
footer .ft_bnr img { margin:0px 10px;}

footer li   { background: url(../img/hr_a.gif) repeat-x left bottom;}
footer li a { color: #ccc; background: url(../img/footer/point_01.gif) no-repeat left center;}

footer .footer_left   { float:left; width:550px; font-size:103%; line-height:140%; }
footer .footer_list   { float:left; margin:10px 0px 0px 15px; }
footer .footer_list a { color:#ccc; padding:5px 10px 6px 25px; display: block;}


.ページ先頭 ----------------------- {}

#page-top         { position:fixed; bottom:15px; right:20px; font-size:85%; z-index:100; }
#page-top a       { background: url(../img/footer/page_top.png) no-repeat 0px 0px; color:#666; width:41px; height:41px; display:block; -moz-background-size:41px 82px; background-size:41px 82px; }
#page-top a:hover { background: url(../img/footer/page_top.png) no-repeat 0px -41px; -moz-background-size:41px 82px; background-size:41px 82px; }