@charset "utf-8";
/* ================================================
   初期化設定
================================================ */
html, body, div, dl, dt, dd, ul, ol, li,
h1, h2, h3, h4, h5, h6,
pre, form, fieldset, input, textarea,
p, blockquote, th, td {
margin: 0;
padding: 0;
}
h1, h2, h3, h4, h5, h6 {
font-size: 100%;
font-weight: normal;
}
address, caption, cite, code, dfn, th, var {
font-style: normal;
font-weight: normal;
}
caption, th {
text-align: left;
}
ol, ul {
list-style: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
img, abbr, acronym, fieldset {
border: none;
}

blockquote:before, blockquote:after,
q:before, q:after {
content: "";
}
img {
vertical-align: top;
  outline:none;
}
a {
outline: none;
}
area{
  border:none;
  outline:none;
}
/*
Copyright (c) 2010, Yahoo! Inc. All rights reserved.
Code licensed under the BSD License:
http://developer.yahoo.com/yui/license.html
version: 3.1.1
build: 47

body{font:14px/1.231 arial,helvetica,clean,sans-serif;*font-size:small;*font:x-small;}select,input,button,textarea{font:99% arial,helvetica,clean,sans-serif;}table{font-size:inherit;font:100%;}pre,code,kbd,samp,tt{font-family:monospace;*font-size:108%;line-height:100%;}
*/
/* ================================================
   全体の構造設定
================================================ */
body {
line-height: 1.5;
background:url(images/main_bg.jpg) repeat center center #fff;
font-family: '游明朝', YuMincho, 'ヒラギノ明朝 ProN W3', 'Hiragino Mincho ProN', 'HG明朝E', 'ＭＳ Ｐ明朝', 'MS PMincho', serif;
color: #333;
padding: 0px;
margin: 0px;
font-weight:600;
-webkit-text-size-adjust:100%;
letter-spacing:0.1em;
font-size:14px;
overflow:hidden;
overflow-y:scroll;
}
a       { color: #151515; text-decoration: none; }
a:hover { color: #151515; text-decoration: underline; }

/* ラッパー
------------------------------------------------ */
div#wrapper {

position:relative;
}
div#wrapper img {
max-width:100%;
height:auto;
outline:none;
border-style:none;
border:0px;
}

/* ヘッダー
------------------------------------------------ */
div#header {
width: 100%;
}
div#header div.headerinr {
position: relative;
margin: 0 auto;
height:100px;
padding: 10px 0;
width: 1000px;
}
.logo {
width:200px;
position:absolute;
top:15px;
right:50%;
margin-right: -100px;
z-index:2;
}
.hsns {
position:absolute;
top:5px;
right:0;
}
.hsns li {
width:33px;
float:left;
padding:0 5px;
}
.hsns li a {
display:block;
}

/* VISUAL
------------------------------------------------ */
#imgbox {
position: relative !important;
width:1000px;
height:500px;
background-size: cover !important;
z-index:1;
margin:40px auto 0 auto;
}
#imgbox div.imgboxtxt {
font-family: 'Hannari','游明朝', YuMincho, 'ヒラギノ明朝 ProN W3', 'Hiragino Mincho ProN', 'HG明朝E', 'ＭＳ Ｐ明朝', 'MS PMincho', serif;
font-size:48px;
text-align:center;
font-weight:normal;
color:#fff;
position:absolute;
z-index:2;
padding:180px 24%;
}
.slider {
position:absolute;
left:0;
top:0;
z-index:1;
}

/* グローバルナビ
------------------------------------------------ */
div#navwrap {
width: 100%;
}
ul#gnav {
margin: 0 auto;
width: 1000px;
height: 40px;
}
ul#gnav li {
display:block;
float: left;
width:25%;
    border-left: 1px dotted #ccc;
    box-sizing: border-box;
    text-align:center;
}
ul#gnav li:last-child {
    border-right: 1px dotted #ccc;
}
ul#gnav li a {
position: relative;
display: inline-block;
text-decoration: none;
font-size:18px;
font-family: Georgia,游明朝,"Yu Mincho",YuMincho,"Hiragino Mincho ProN",HGS明朝E,メイリオ,Meiryo,serif;
font-weight:bold;
padding:15px 10px;

}
ul#gnav li a:hover:after{
   -webkit-transform: scaleX(1);
   -ms-transform: scaleX(1);
   transform: scaleX(1);
}

ul#gnav li a::after {
   content: '';
   position: absolute;
   bottom: -3px;
   left: 0;
   width: 100%;
   height: 2px;
   -webkit-transform: scaleX(0);
   -ms-transform: scaleX(0);
   transform: scaleX(0);
   background: #000;
   -webkit-transition: all .3s ease;
   transition: all .3s ease;
}
ul#gnav li a span {
font-weight:normal;
font-size:13px;
display:block;
color:#6f6f6f;
}

#navigation {
display:none;
}


/* コンテンツヘッダー
------------------------------------------------ */

/* コンテンツ
------------------------------------------------ */
div#contents {
margin: 100px auto 0 auto;
width: 1000px;
}

h2.ttlA {
font-family: 'Satisfy', cursive;
font-size:16px;
margin:20px 0;

color:#666;
font-size:60px;
}
h2.ttlA span {
color:#000;
}

h2.ttlA div {
font-size:18px;
font-family: Georgia,游明朝,"Yu Mincho",YuMincho,"Hiragino Mincho ProN",HGS明朝E,メイリオ,Meiryo,serif;
color:#000;
font-weight:bold;
}

h3.ttlA {
font-family: Georgia,游明朝,"Yu Mincho",YuMincho,"Hiragino Mincho ProN",HGS明朝E,メイリオ,Meiryo,serif;
font-weight:bold;
font-size:24px;
margin:20px 0;
}

/* ぱんくずリスト
------------------------------------------------ */
.pan {
margin: 0 0 15px;
}
.pan li {
display: inline;
margin: 0 0 0 8px;
padding: 0 0 0 16px;
background: url(img/icon_topic_path.gif) no-repeat 0 center;
}
.pan li:first-child {
margin: 0;
padding: 0;
background: transparent;
}
.pan li a {
color: #780000;
}

/* メイン
------------------------------------------------ */
div#main {
min-height: 600px;
}

/* フッター
------------------------------------------------ */
div#footer {
width: 100%;
}
div#footer div.footerinr {
position: relative;
margin: 0 auto;
padding: 10px 0;
width: 1000px;
}
/* ページの先頭へ戻る */
.pagetop {
position: fixed;
bottom: 20px;
right: 10px;
}
.pagetop a {
    background: #79bb60;
    border-radius: 65px;
    display: block;
width: 10px;
    padding: 10px;
    height: 10px;
}
.flogo {
margin:20px auto;
text-align:center;
width:200px;
}
.copyright {
font-size:13px;
letter-spacing:0;
text-align:center;
margin:20px auto;
}

/* ================================================
   コンテンツページ
================================================ */

/* トップ
------------------------------------------------ */
.sectionwrap {
position:relative;

}
.secimg0 {
position:absolute;
    top: 18px;
    right: 0;
    width: 126px;
}
.secimg1 {
position:absolute;
top:0;
right:0;
width: 180px;
}
.secimg2 {
position:absolute;
top:0;
left:0;
}

.sec-l {
width:40%;
float:right;
padding-right:60px;
}
.sec-r {
width:48%;
float:left;
}
.sec-l2 {
width:40%;
float:left;
line-height:1.8;
margin-top:80px;
padding-left:60px;
}
.sec-l3 {
width:40%;
float:right;
padding-right:60px;
padding-top:50px;
}
.sec-l2 h3.ttlA {
text-align:right;
}
.sec-r2 {
width:48%;
float:right;
}
.child img {
width:300px;
text-align:center;
display:block;
margin:0 auto;
padding-top:50px;
}
.child {
position:relative;
}
.delicious {
position:absolute;
right: -15px;
transform: rotate(-12deg);
top: 50px;
font-size:16px;
}
.delicious:before {
display:block;
content:'';
height:1px;
width:50px;
background:#000;
position:absolute;
top:-15px;
left:0;
transform: rotate(-20deg);
}
.delicious:after {
display:block;
width:50px;
content:'';
height:1px;
background:#000;
position:absolute;
bottom:-15px;
left:0;
transform: rotate(20deg);
}

/*お知らせ*/
.sec_news {
background:url(images/news_bg.png) no-repeat center center;
min-height:400px;
margin:60px 0 40px 0;
padding-top:80px;
}
.fbb {}
.sec_news-l {
float: left;
    width: 33%;
    height: 300px;
    margin: 0 80px;
}
.sec_news-r {
float:right;
width:48%;
background:#ccc;
}

/*メニュー*/
.menulist li {
float:left;
width: 22.7%;
margin-left:30px;
margin-bottom:20px;
min-height:255px;
}
.menulist li div {
text-align:center;
font-weight:bold;
padding:5px 0;
line-height:1.2;
}
.menulist li:nth-child(1),
.menulist li:nth-child(5),
.menulist li:nth-child(9),
.menulist li:nth-child(13) {
margin-left:0;
}
.sec_menu_head {
margin-bottom:50px;
}
.sec_menu-l {
float:right;
width:42%;
}
.sec_menu-r {
float:left;
width:52%;
font-size:18px;
text-align:center;
}
.sec_menu_img {
width:280px;
text-align:center;
display:block;
margin:0 auto;
}

/*shop*/
.addlist {
padding:3px 0;
}
.sec_map {
margin-top:60px;
background:url(images/f_bg.png) no-repeat center center;
min-height:500px;
}
.sec_map h2,
.sec_map h2 div,
.sec_map h2 span {
color:#fff !important;
}
.sec_map-l {
float: left;
padding-left: 100px;
color: #fff;
padding: 50px 0 0 80px;
}

.sec_map-r {
float: right;
width: 50%;
padding: 100px 70px;
}
.ggmap {
position: relative;
padding-bottom: 56.25%;
padding-top: 30px;
height: 0;
overflow: hidden;
}
 
.ggmap iframe,
.ggmap object,
.ggmap embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}


.fb_iframe_widget,
.fb_iframe_widget span,
.fb_iframe_widget iframe[style]{
    width: 100% !important;
}


/* 下層
------------------------------------------------ */


/* 一覧
------------------------------------------------ */


/* 記事
------------------------------------------------ */



/* ADD
------------------------------------------------ */
.b {
font-weight:bold;
}
.center {
text-align:center;
}
.mt10 {
margin-top: 10px;
}
.mt20 {
margin-top: 20px;
}
.mt40 {
margin-top: 40px;
}
.mt60 {
margin-top: 60px;
}
.mt80 {
margin-top: 80px;
}
.mt120 {
margin-top: 120px;
}
.clear {
clear: both;
}
.flo-l {
float: left;
}
.flo -r {
float: right;
}
.f12{
font-size: 12px;
}
.f15{
font-size: 15px;
}
.f16{
font-size: 16px;
}
.f18 {
font-size: 18px;
}
.f21 {
font-size: 21px;
}
.f24 {
font-size: 24px;
}
.red {
color: #cc0000;
}
.txt-r {
text-align: right;
}
.bg-gray1{
padding:20px;
background:#efefef;
}


/* Clearfix
------------------------------------------------ */
.cfx:after {
content: '';
display: block;
clear: both;
}

@media screen and (min-width: 320px) and (max-device-width: 920px) {
  .modal-overlay {
      z-index:2;
      display:none;
      position:fixed;
      top:0;
      left:0;
      width:100%;
    height:100%;/*for old Safari*/
      height:100vh;
      background-color:rgba(0,0,0,.5)}
  .modal-overlay (:target) {height:100%\9} /* IE9,10 */
  a.modal-open:hover {cursor:pointer}
  .modal-content {
      position:fixed;
      display:none;
      z-index:3;
      margin:10px 5%;
      padding:15px;
    border-radius:20px;
      background:#fff}
  .modal-content img {width:auto;max-height:70vh}
  .modal-content h1 {font-size:120%; margin-bottom:0.5em}
  .modal-content p {max-width:565px; text-align:left}
  a.modal-close {
    position:absolute;
    top:10px;
    right:24px;
    color:#b29c33;
    font-size:35px;
    line-height:1;
    font-weight:bold;
    text-decoration:none}
  a.modal-close:hover {
    cursor:pointer;
    opacity:.6}
  @media screen and (max-height: 640px) {
    .modal-content {padding:20px}
    .modal-content h1 {font-size:100%; margin-bottom:3px}
    .modal-content p {font-size:75%;width:70%; margin:auto}
    a.modal-close:hover {opacity:1}
  }
  @media screen and (max-width: 640px) {
    .modal-content {padding:20px}
    .modal-content img {max-height:inherit; width:100%; height:auto}
    .modal-content p {font-size:75%; width:100%;}
    a.modal-close:hover {opacity:1}
  }
}





  @media screen and (min-width: 320px) and (max-device-width: 920px) {
    body {
        max-width: 500px;
        margin: 0 auto;
        padding: 0 ;
    }
    .logo {
    width: 140px;
    position: absolute;
    top: 36px;
    right: 50%;
    margin-right: -70px;
    z-index: 2;
    }
    h2.ttlA {
        font-size: 36px;
    }
    div#header div.headerinr {
    width: auto;
    }
    ul#gnav {
    margin: 0 auto;
    width: 100%;
    height: auto;
    }
    
    div#contents {
    margin: 0 auto;
    width: auto;
    }
    #imgbox {
    position: relative !important;
    width:100%;
    height:auto;
    }
    #imgbox div.imgboxtxt {
    font-size: 20px;
    text-align: center;
    font-weight: normal;
    color: #fff;
    position: absolute;
    z-index: 2;
    padding: 45px 20px;
    right: 0;
    left: 0;
    top: 0;
    bottom: 0;
    }
    .sec-l {
    width:auto;
    float:none;
    padding:20px 20px 10px 20px;
    }
    .sec-r {
    width:auto;
    float:none;
    padding:0 20px 20px 20px;
    }
    .sec-r.child {
    width:auto;
    float:none;
    padding:0 40px 20px 40px;
    }
    .sec-l2 {
    width:auto;
    float:none;
    line-height:1.8;
    margin-top:40px;
    padding:20px;
    }
    .sec-l3 {
    width:auto;
    float:none;
    padding:20px 20px 10px 20px;
    }
    .sec-l2 h3.ttlA {
    text-align:right;
    }
    .sec-r2 {
    width:auto;
    float:none;
    padding:0 20px 20px 20px;
    }
    div#footer div.footerinr {
    width: 100%;
    }
    
    .secimg1 {
        width: 125px;
            top: 30px !important;
    }
    .secimg1:nth-child(2) {
            top: -19px !important;
    }
    .secimg2 {
        top: -50px;
        width: 170px;
    }
    .child img {
        padding-top: 0px;
    }
    .sec_news {
      margin: 0 ;
        padding: 10px 0 40px 0;
      background: url(images/news_bg.png) repeat center center;
    }
    .sec_news-l {
        float: none;
        width: auto !important;
        padding:0 20px 20px 20px;
        margin: 0 ;
        height: auto;
    }
    .sec_news-r {
    float: none;
    width: auto !important;
    background: #ccc;
    margin:20px;
    height: auto;
    }
    .sec_menu-l {
        float: none;
        width: auto;
        padding:20px;
    }
    .sec_menu-r {
        float: none;
        width: auto;
        font-size: 16px;
        text-align: center;
        padding:0 20px;
    }
    .menulist li {
        float: left;
        width: 46%;
        padding:0 2%;
        margin:0 auto 5px auto;
        min-height: 200px;
    }
    .menulist li:nth-child(1), .menulist li:nth-child(5), .menulist li:nth-child(9), .menulist li:nth-child(13) {
        margin-left: auto;
    }
    .sec_map-l {
        float: none;
        padding: 20px;
        color: #fff;
    }
    .sec_map-r {
          float: none;
          width: 80%;
          padding: 20px 0;
          margin:0 auto;
      }
    .delicious {
        position: absolute;
        right: 6px;
        transform: rotate(-12deg);
        top: 14px;
        font-size: 14px;
    }
    .sec_map {
        margin-top: 60px;
        background: url(images/f_bg2.jpg) no-repeat center center;
        background-size:cover;
    }
		#navigation{
      position: fixed;
      width: 100%;
      top:0;
      left:0;
      z-index: 10;
    }
    #navigation ul {
    position:relative;
    width:90%;
    margin:0 auto;
    }
    #navigation ul li {
    float: left;
    width: 25%;
    }
    #navigation ul li a {
    display:block;
    margin:15px 10px;
    text-align:center;
    letter-spacing:0;
    color:green;
    }
		
		#slide-line{
		    position: absolute;
		    bottom: 0;
		    height: 2px;
		    background-color:#79bb60;
		    -webkit-transition: all .3s ease;
		    transition: all .3s ease;
		}
		#navigation {
		display:block;
		 background: rgba(255,255,255,0.3);
		}
		div#navwrap {
		display:none;
		}
		.hsns {
		position:absolute;
		top:60px;
		right:0;
		}
  }
  
  @media screen and (min-width: 480px) and (max-device-width: 920px) {
  
    .menulist li {
        float: left;
        width: 46%;
        padding:0 2%;
        margin:0 auto 10px auto;
        min-height: 250px;
    }
  
  }