@charset "UTF-8";
/*! normalize.css v3.0.3 | MIT License | github.com/necolas/normalize.css */
/**
 * 1. Set default font family to sans-serif.
 * 2. Prevent iOS and IE text size adjust after device orientation change,
 *    without disabling user zoom.
 */
html{
  font-family:sans-serif;
  /* 1 */
      -ms-text-size-adjust:100%;
  /* 2 */
  -webkit-text-size-adjust:100%;
  /* 2 */
}

/**
 * Remove default margin.
 */
body{
  margin:0;
}

/* HTML5 display definitions
   ========================================================================== */
/**
 * Correct `block` display not defined for any HTML5 element in IE 8/9.
 * Correct `block` display not defined for `details` or `summary` in IE 10/11
 * and Firefox.
 * Correct `block` display not defined for `main` in IE 11.
 */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
menu,
nav,
section,
summary{
  display:block;
}

/**
 * 1. Correct `inline-block` display not defined in IE 8/9.
 * 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera.
 */
audio,
canvas,
progress,
video{
  display:inline-block;
  /* 1 */
  vertical-align:baseline;
  /* 2 */
}

/**
 * Prevent modern browsers from displaying `audio` without controls.
 * Remove excess height in iOS 5 devices.
 */
audio:not([controls]){
  display:none;
  height:0;
}

/**
 * Address `[hidden]` styling not present in IE 8/9/10.
 * Hide the `template` element in IE 8/9/10/11, Safari, and Firefox < 22.
 */
[hidden],
template{
  display:none;
}

/* Links
   ========================================================================== */
/**
 * Remove the gray background color from active links in IE 10.
 */
a{
  background-color:transparent;
}

/**
 * Improve readability of focused elements when they are also in an
 * active/hover state.
 */
a:active,
a:hover{
  outline:0;
}

/* Text-level semantics
   ========================================================================== */
/**
 * Address styling not present in IE 8/9/10/11, Safari, and Chrome.
 */
abbr[title]{
  border-bottom:1px dotted;
}

/**
 * Address style set to `bolder` in Firefox 4+, Safari, and Chrome.
 */
b,
strong{
  font-weight:bold;
}

/**
 * Address styling not present in Safari and Chrome.
 */
dfn{
  font-style:italic;
}

/**
 * Address variable `h1` font-size and margin within `section` and `article`
 * contexts in Firefox 4+, Safari, and Chrome.
 */
h1{
  font-size:2em;
  margin:0.67em 0;
}

/**
 * Address styling not present in IE 8/9.
 */
mark{
  background:#ff0;
  color:#000;
}

/**
 * Address inconsistent and variable font size in all browsers.
 */
small{
  font-size:80%;
}

/**
 * Prevent `sub` and `sup` affecting `line-height` in all browsers.
 */
sub,
sup{
  font-size:75%;
  line-height:0;
  position:relative;
  vertical-align:baseline;
}

sup{
  top:-0.5em;
}

sub{
  bottom:-0.25em;
}

/* Embedded content
   ========================================================================== */
/**
 * Remove border when inside `a` element in IE 8/9/10.
 */
img{
  border:0;
}

/**
 * Correct overflow not hidden in IE 9/10/11.
 */
svg:not(:root){
  overflow:hidden;
}

/* Grouping content
   ========================================================================== */
/**
 * Address margin not present in IE 8/9 and Safari.
 */
figure{
  margin:1em 40px;
}

/**
 * Address differences between Firefox and other browsers.
 */
hr{
  box-sizing:content-box;
  height:0;
}

/**
 * Contain overflow in all browsers.
 */
pre{
  overflow:auto;
}

/**
 * Address odd `em`-unit font size rendering in all browsers.
 */
code,
kbd,
pre,
samp{
  font-family:monospace, monospace;
  font-size:1em;
}

/* Forms
   ========================================================================== */
/**
 * Known limitation: by default, Chrome and Safari on OS X allow very limited
 * styling of `select`, unless a `border` property is set.
 */
/**
 * 1. Correct color not being inherited.
 *    Known issue: affects color of disabled elements.
 * 2. Correct font properties not being inherited.
 * 3. Address margins set differently in Firefox 4+, Safari, and Chrome.
 */
button,
input,
optgroup,
select,
textarea{
  color:inherit;
  /* 1 */
  font:inherit;
  /* 2 */
  margin:0;
  /* 3 */
}

/**
 * Address `overflow` set to `hidden` in IE 8/9/10/11.
 */
button{
  overflow:visible;
}

/**
 * Address inconsistent `text-transform` inheritance for `button` and `select`.
 * All other form control elements do not inherit `text-transform` values.
 * Correct `button` style inheritance in Firefox, IE 8/9/10/11, and Opera.
 * Correct `select` style inheritance in Firefox.
 */
button,
select{
  text-transform:none;
}

/**
 * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
 *    and `video` controls.
 * 2. Correct inability to style clickable `input` types in iOS.
 * 3. Improve usability and consistency of cursor style between image-type
 *    `input` and others.
 */
button,
html input[type="button"],
input[type="reset"],
input[type="submit"]{
  -webkit-appearance:button;
  /* 2 */
  cursor:pointer;
  /* 3 */
}

/**
 * Re-set default cursor for disabled elements.
 */
button[disabled],
html input[disabled]{
  cursor:default;
}

/**
 * Remove inner padding and border in Firefox 4+.
 */
button::-moz-focus-inner,
input::-moz-focus-inner{
  border:0;
  padding:0;
}

/**
 * Address Firefox 4+ setting `line-height` on `input` using `!important` in
 * the UA stylesheet.
 */
input{
  line-height:normal;
}

/**
 * It's recommended that you don't attempt to style these elements.
 * Firefox's implementation doesn't respect box-sizing, padding, or width.
 *
 * 1. Address box sizing set to `content-box` in IE 8/9/10.
 * 2. Remove excess padding in IE 8/9/10.
 */
input[type="checkbox"],
input[type="radio"]{
  box-sizing:border-box;
  /* 1 */
  padding:0;
  /* 2 */
}

/**
 * Fix the cursor style for Chrome's increment/decrement buttons. For certain
 * `font-size` values of the `input`, it causes the cursor style of the
 * decrement button to change from `default` to `text`.
 */
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button{
  height:auto;
}

/**
 * 1. Address `appearance` set to `searchfield` in Safari and Chrome.
 * 2. Address `box-sizing` set to `border-box` in Safari and Chrome.
 */
input[type="search"]{
  -webkit-appearance:textfield;
  /* 1 */
  box-sizing:content-box;
  /* 2 */
}

/**
 * Remove inner padding and search cancel button in Safari and Chrome on OS X.
 * Safari (but not Chrome) clips the cancel button when the search input has
 * padding (and `textfield` appearance).
 */
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration{
  -webkit-appearance:none;
}

/**
 * Define consistent border, margin, and padding.
 */
fieldset{
  border:1px solid #c0c0c0;
  margin:0 2px;
  padding:0.35em 0.625em 0.75em;
}

/**
 * 1. Correct `color` not being inherited in IE 8/9/10/11.
 * 2. Remove padding so people aren't caught out if they zero out fieldsets.
 */
legend{
  border:0;
  /* 1 */
  padding:0;
  /* 2 */
}

/**
 * Remove default vertical scrollbar in IE 8/9/10/11.
 */
textarea{
  overflow:auto;
}

/**
 * Don't inherit the `font-weight` (applied by a rule above).
 * NOTE: the default cannot safely be changed in Chrome and Safari on OS X.
 */
optgroup{
  font-weight:bold;
}

/* Tables
   ========================================================================== */
/**
 * Remove most spacing between table cells.
 */
table{
  border-collapse:collapse;
  border-spacing:0;
}

td,
th{
  padding:0;
}

/**
 * Base Style
 */
*,
*:after,
*:before{
  box-sizing:border-box;
}

html{
  font-size:62.5%;
  overflow-y:scroll;
}

body{
  /* min-width:1280px; */
  width: 100%;
  color:#000;
  font-size:1.3rem;
  font-family:"Noto Sans JP", "HelveticaNeue", "Helvetica", YuGothic, "游ゴシック", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", "ＭＳ Ｐゴシック", "MS P Gothic", ArialMT, Arial, "Droid Sans", Roboto, Meiryo, Osaka, sans-serif;
  line-height:1.85714;
  letter-spacing:1px;
  position:relative;
  z-index:0;
  -webkit-font-smoothing: antialiased;
}

@media screen and (max-width: 940px){
  .l-contents .l-about .bg-paper01{
    width: 100%;
    height: auto;
  }
  .l-contents .l-about .txt-typo{
    position: static;
    width: 90%;
    height: auto;

    writing-mode:horizontal-tb;
-webkit-writing-mode:horizontal-tb;
-moz-writing-mode:horizontal-tb;
-ms-writing-mode:horizontal-tb;
    writing-mode:horizontal-tb;
-webkit-text-orientation:upright;
-moz-text-orientation:upright;
-ms-text-orientation:upright;
    text-orientation:upright;
  }
  .l-contents .l-about .txt-typo span{
    margin-left: 0px;
  }
  header.l-header{
    height: 80px;
  }
  header.l-header .gnav ul{
    margin: 30px 0 20px;
  }
  header.l-header .gnav ul li{
    margin-right: 12px;
    font-size: 13px;
  }
  header.l-header .logo{
    width: 40px;
  }
  header.l-header .logo .pc{
    display: none;
  }
  header.l-header .logo .sp{
    display: block;
  }
  main .l-section{
    margin-bottom: 100px;
  }
  main .l-wrapper{
    width: 90%;
    margin-left: 10%;
  }
  main dl.shopdata dt{
    margin-bottom: 15px;
  }
  main dl.shopdata dt,
  main dl.shopdata dd{
    width: 100%;
    float: none;
  }
  main .l-grid2{
    width: 100%;
  }

}

a{
  color:#000;
  text-decoration:none;
}

a:visited{
  color:#000;
}

a:hover,
a:active{
  color:#000;
}

img{
  max-width:100%;
  vertical-align:top;
}

ul{
  list-style:none;
  margin:0;
  padding:0;
}

h2{
  font-size:1.7rem;
  font-weight:normal;
}

h3{
          writing-mode:tb-rl;
  -webkit-writing-mode:vertical-rl;
     -moz-writing-mode:vertical-rl;
      -ms-writing-mode:vertical-rl;
          writing-mode:vertical-rl;
  -webkit-text-orientation:upright;
     -moz-text-orientation:upright;
      -ms-text-orientation:upright;
          text-orientation:upright;
  position:absolute;
  top:50px;
  left:-3px;
  margin:0;
  font-size:1.4rem;
  font-weight:normal;
  line-height:1.6;
}

h4{
  font-size:1.2rem;
  font-weight:normal;
  line-height: 1.2em;
}

/* Animation for the slideshow images */
@-webkit-keyframes imageAnimation{
  0%{
    opacity:0;
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    -webkit-animation-timing-function:ease-in;
  }
  5%{
    opacity:1;
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    -webkit-animation-timing-function:ease-out;
  }
  28%{
    opacity:1;
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
  }
  38%{
    opacity:0;
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  }
  100%{
    opacity:0;
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  }
}

@keyframes imageAnimation{
  0%{
    opacity:0;
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    -webkit-animation-timing-function:ease-in;
            animation-timing-function:ease-in;
  }
  5%{
    opacity:1;
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    -webkit-animation-timing-function:ease-out;
            animation-timing-function:ease-out;
  }
  28%{
    opacity:1;
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
  }
  38%{
    opacity:0;
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  }
  100%{
    opacity:0;
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  }
}

@-webkit-keyframes down-arrow{
  0%{
    -webkit-transform:rotate(45deg) translate(0, 0);
  }
  20%{
    -webkit-transform:rotate(45deg) translate(10px, 10px);
  }
  40%{
    -webkit-transform:rotate(45deg) translate(0, 0);
  }
}

@keyframes down-arrow{
  0%{
    -webkit-transform:rotate(45deg) translate(0, 0);
            transform:rotate(45deg) translate(0, 0);
  }
  20%{
    -webkit-transform:rotate(45deg) translate(10px, 10px);
            transform:rotate(45deg) translate(10px, 10px);
  }
  40%{
    -webkit-transform:rotate(45deg) translate(0, 0);
            transform:rotate(45deg) translate(0, 0);
  }
}

@-webkit-keyframes left-arrow{
  0%{
    -webkit-transform:rotate(45deg) translate(0, 0);
  }
  20%{
    -webkit-transform:rotate(45deg) translate(-5px, 5px);
  }
  40%{
    -webkit-transform:rotate(45deg) translate(0, 0);
  }
}

@keyframes left-arrow{
  0%{
    -webkit-transform:rotate(45deg) translate(0, 0);
            transform:rotate(45deg) translate(0, 0);
  }
  20%{
    -webkit-transform:rotate(45deg) translate(-5px, 5px);
            transform:rotate(45deg) translate(-5px, 5px);
  }
  40%{
    -webkit-transform:rotate(45deg) translate(0, 0);
            transform:rotate(45deg) translate(0, 0);
  }
}

@-webkit-keyframes right-arrow{
  0%{
    -webkit-transform:rotate(-45deg) translate(0, 0);
  }
  20%{
    -webkit-transform:rotate(-45deg) translate(-5px, 5px);
  }
  40%{
    -webkit-transform:rotate(-45deg) translate(0, 0);
  }
}

@keyframes right-arrow{
  0%{
    -webkit-transform:rotate(-45deg) translate(0, 0);
            transform:rotate(-45deg) translate(0, 0);
  }
  20%{
    -webkit-transform:rotate(-45deg) translate(5px, 5px);
            transform:rotate(-45deg) translate(5px, 5px);
  }
  40%{
    -webkit-transform:rotate(-45deg) translate(0, 0);
            transform:rotate(-45deg) translate(0, 0);
  }
}

@-webkit-keyframes fadeInDown{
  0%{
    opacity:0.1;
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=10)";
  }
  100%{
    opacity:1;
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
  }
}

@keyframes fadeInDown{
  0%{
    opacity:0.1;
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=10)";
  }
  100%{
    opacity:1;
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
  }
}

/**
 * Layout Style
 */
.l-container{
  position:absolute;
  top:0;
  left:0;
  z-index:10;
  width:100%;
  background:#fff;
  padding-top:120px;
  display:none;

}

.l-contents{
  margin-bottom:50px;
}

.l-inner{
  max-width:1020px;
  width: 90%;
  margin:0 auto;
  position:relative;
}

.l-wrapper{
  max-width:750px;
  width: 90%;
  margin:0 auto;
}

.l-section{
  width:100%;
  margin-bottom: 250px;
}

.l-article{
  margin-top:50px;
  position:relative;
}

.hero{
  background:#000;
  z-index:0;
  display:none;
}

.hero .logo{
  position:absolute;
  top:35px;
  left:5%;
  z-index:10;
  margin:0;
  width: 80px;
  filter: invert(100%) sepia(0%) saturate(162%) hue-rotate(345deg) brightness(114%) contrast(100%);
}

.hero #js-hero{
  position:fixed;
  width:100%;
  height:100%;
  top:0;
  left:0;
  z-index:0;
}

.hero #js-hero li span{
  /* width:100%;
  height:100%; */
  position:absolute;
  top:0;
  left:0;
  color:transparent;
  background-size:cover;
  background-position:50% 50%;
  background-repeat:none;
  opacity:0;
  -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  z-index:0;
  -webkit-backface-visibility:hidden;
  -webkit-animation:imageAnimation 24s linear infinite 0s;
          animation:imageAnimation 24s linear infinite 0s;
}

.hero #js-hero li:nth-child(1) span{
  background-image:url(../img/pic_hero00.jpg);
}

.hero #js-hero li:nth-child(2) span{
  background-image:url(../img/pic_hero02.jpg);
  -webkit-animation-delay:6s;
          animation-delay:6s;
}

.hero #js-hero li:nth-child(3) span{
  background-image:url(../img/pic_hero03.jpg);
  -webkit-animation-delay:12s;
          animation-delay:12s;
}

.hero #js-hero li:nth-child(4) span{
  background-image:url(../img/pic_hero04.jpg);
  -webkit-animation-delay:18s;
          animation-delay:18s;
}
.hero #js-hero li:nth-child(5) span{
  background-image:url(../img/pic_hero04.jpg);
  -webkit-animation-delay:24s;
          animation-delay:24s;
}

.scroll-nav{
  margin-top:-100px;
}

.scroll-nav:after{
  content:"";
  position:absolute;
  top:-100px;
  left:0;
  right:0;
  width:40px;
  height:40px;
  margin:auto;
  border-right:1px solid #fff;
  border-bottom:1px solid #fff;
  -webkit-transform:rotate(45deg);
          transform:rotate(45deg);
  -webkit-animation:down-arrow 2s infinite;
          animation:down-arrow 2s infinite;
  box-sizing:border-box;
}

.l-header{
  background:#fff;
  position:relative;
  top:0;
  left:0;
  max-width:1280px;
  width:100%;
  height:120px;
  z-index:1;
}

.l-header .logo{
  margin:25px 0 15px 30px;
  float:left;
  width: 200px;
}
.l-header .logo .pc{
  display: block;
}
.l-header .logo .sp{
  display: none;
}

.l-header .gnav{
  float:right;
  font-size:1.2rem;
  font-weight:normal;
}

.l-header .gnav ul{
  margin:40px 0;
}

.l-header .gnav ul li{
  display:inline-block;
  margin-right:40px;
  font-family: "Noto Sans JP";
  font-size: 16px;
}

.l-header .gnav ul li a:hover{
  border-bottom:2px solid;
}

.l-footer{
  font-size:1.0rem;
  padding-bottom:80px;
  width:100%;
}

.l-footer .footer-inner{
  padding-top:10px;
  border-top:1px solid;
}

.l-footer .l-address{
  display:inline-block;
}

.l-footer .box,
.l-item .box{
  display:inline-block;
  margin-right:40px;
  vertical-align:top;
}

.l-footer .box address{
  font-style:normal;
  display:inline-block;
}

.l-footer .box .address-logo{
  display:inline-block;
  margin-top:4px;
}

.l-footer .copyright{
  float:right;
}

.l-about{
  position:relative;
  padding-top: 100px;
}

.l-about .bg-paper01{
  width:50%;
  height:400px;
}

.l-about .txt-typo{
  position:absolute;
  top:50%;
  left:0;
  right:0;
  bottom:0;
  margin:auto;
  width:660px;
  height:400px;
          writing-mode:tb-rl;
  -webkit-writing-mode:vertical-rl;
     -moz-writing-mode:vertical-rl;
      -ms-writing-mode:vertical-rl;
          writing-mode:vertical-rl;
  -webkit-text-orientation:upright;
     -moz-text-orientation:upright;
      -ms-text-orientation:upright;
          text-orientation:upright;
  font-size:1.6rem;
  font-weight:bold;
  line-height: 2em;
}
.l-about .txt-typo span{
  font-size: 2rem;
  margin-left: 40px;
  margin-top: -1rem;
  display: inline-block;
}

.l-about .txt-typo .typo01{
  display:block;
  margin-left:40px;
}

.l-about .txt-typo .typo02{
  display:block;
  margin-left:100px;
}

.l-cafe{
  font-size:1.4rem;
}
.l-cafe p span{
  font-size: 1.2em;
  margin-bottom: 10px;
  display: inline-block;
}
dl.shopdata dt{
  width: 150px;
  float: left;
}
dl.shopdata dd{
  width: calc(100% - 150px);
  float: left;
  margin: 0;
}

.l-artisan{
  font-size:1.4rem;
  position:relative;
}

.l-artisan .bg-paper02{
  width:58%;
  margin:auto;
  position:absolute;
  top:0;
  right:0;
  height:642px;
}

.l-artisan .l-grid{
  width:340px;
  display:inline-block;
  vertical-align:top;
}
.l-grid2{
  width:calc(50% - 5px);
  display:inline-block;
  vertical-align:top;
}
.l-grid4{
  width:calc(25% - 5px);
  display:inline-block;
  vertical-align:top;
}

.l-artisan .grid01{
  margin-right:20px;
}
.l-artisan .grid02{
  margin-left:20px;
}
.l-artisan .grid3-01{
  margin-right:25px;
}

.l-item{
  font-size:1.4rem;
}

.l-item .item-txt{
  float:left;
}

.l-item .item-link{
  float:right;
  text-decoration:underline;
  margin-top:15px;
}

.l-item .item-link:hover{
  text-decoration:none;
}

.l-kitchencar{
  font-size:1.4rem;
}
.l-kitchencar p span{
  font-size: 1.2em;
  display: inline-block;
  margin-bottom: 10px;
}


.txt-small{
  font-size:1.1rem;
}

.l-section-news{
  min-height:550px;
}

.l-section-news .news-list{
  margin-top:80px;
  font-size:1.5rem;
}

.l-section-news .news-list dt{
  width:100px;
  float:left;
}

.l-section-news .news-list dd{
  margin:0 0 40px 130px;
}

.l-section-news .news-list a{
  text-decoration:underline;
}

.l-section-news .news-list a:hover{
  text-decoration:none;
}

.l-section-news .post-date{
  font-size:1.5rem;
  position:absolute;
  left:0;
  margin:0;
}

.l-section-news .post-ttl{
  font-size:1.5rem;
  margin:0 0 30px;
  padding-bottom: 2px;
  border-bottom:1px solid;
  display:inline-block;
  line-height: 1.7rem;
}

.l-section-news .post-txt{
  font-size:1.3rem;
}
.l-section-news .post-txt a:hover{
  text-decoration:underline;
}
.l-section-news .archive-links{
  margin-top:50px;
  display:inline-block;
  position:relative;
}

.l-section-news .archive-links .arrow-left{
  position:absolute;
  top:0;
  left:10px;
  width:14px;
  height:14px;
  border-left:1px solid;
  border-bottom:1px solid;
  -webkit-transform:rotate(45deg);
          transform:rotate(45deg);
  box-sizing:border-box;
}

.l-section-news .archive-links .arrow-left:hover{
  -webkit-animation:left-arrow 2s infinite;
          animation:left-arrow 2s infinite;
}

.l-section-news .archive-links .arrow-right{
  position:absolute;
  top:0;
  left:28px;
  width:14px;
  height:14px;
  border-right:1px solid;
  border-bottom:1px solid;
  -webkit-transform:rotate(-45deg);
          transform:rotate(-45deg);
  box-sizing:border-box;
}

.l-section-news .archive-links .arrow-right:hover{
  -webkit-animation:right-arrow 2s infinite;
          animation:right-arrow 2s infinite;
}

.l-section-news .archive-links .archive-txt{
  display:block;
  font-size:1.1rem;
  margin-top:30px;
}

.l-section-news .archive-tit{
  font-size:1.2rem;
}

.l-section-news .archive-list{
  margin-top:30px;
  font-size:1.5rem;
}

#js-loader{
  width:200px;
  height:65px;
  position:fixed;
  top:50%;
  left:50%;
  margin-top:-32px;
  margin-left:-100px;
  z-index:100;
}
#js-loader-news{
  width:48px;
  height:48px;
  position:fixed;
  top:50%;
  left:50%;
  margin-top:-24px;
  margin-left:-24px;
  z-index:100;
}

#js-load-fade,
#js-load-fade-news{
  width:100%;
  height:100%;
  background-color:#fff;
  position:fixed;
  top:0;
  left:0;
  z-index:50;
}

.js-fixed{
  position:fixed !important;
}

.is-active,
.js-active{
  border-bottom:2px solid;
}

.is-fadein{
  -webkit-animation-fill-mode:both;
          animation-fill-mode:both;
  -webkit-animation-duration:1.5s;
          animation-duration:1.5s;
  -webkit-animation-name:fadeInDown;
          animation-name:fadeInDown;
  visibility:visible !important;
}

#js-header{
  position:absolute;
}

#cafe .slick-dots li{
  background-color: #ccc;
  border-radius: 50%;
  width: 8px;
  height: 8px;
}
#cafe .slick-dots li.slick-active{
  background-color: #000;
}

/*----------------------------------------------------------------------------------------------------------------------
margin&padding
----------------------------------------------------------------------------------------------------------------------*/
.mt0{margin-top:0px !important;}
.mt5{margin-top:5px !important;}
.mt10{margin-top:10px !important;}
.mt15{margin-top:15px !important;}
.mt20{margin-top:20px !important;}
.mt25{margin-top:25px !important;}
.mt30{margin-top:30px !important;}
.mt37{margin-top:37px !important;}
.mt40{margin-top:40px !important;}
.mt50{margin-top:50px !important;}
.mt60{margin-top:60px !important;}
.mb0{margin-bottom:0px !important;}
.mb5{margin-bottom:5px !important;}
.mb10{margin-bottom:10px !important;}
.mb15{margin-bottom:15px !important;}
.mb20{margin-bottom:20px !important;}
.mb25{margin-bottom:25px !important;}
.mb30{margin-bottom:30px !important;}
.mb35{margin-bottom:35px !important;}
.mb40{margin-bottom:40px !important;}
.mb50{margin-bottom:50px !important;}
.mb60{margin-bottom:60px !important;}
.mb70{margin-bottom:70px !important;}
.mb80{margin-bottom:80px !important;}
.ml5{margin-left:5px !important;}
.ml10{margin-left:10px !important;}
.ml15{margin-left:15px !important;}
.ml20{margin-left:20px !important;}
.ml25{margin-left:25px !important;}
.ml30{margin-left:30px !important;}
.ml40{margin-left:40px !important;}
.ml50{margin-left:50px !important;}
.ml60{margin-left:60px !important;}
.ml110{margin-left:110px !important;}
.mr3{margin-right:3px !important;}
.mr5{margin-right:5px !important;}
.mr10{margin-right:10px !important;}
.mr15{margin-right:15px !important;}
.mr20{margin-right:20px !important;}
.mr25{margin-right:25px !important;}
.mr30{margin-right:30px !important;}
.mr40{margin-right:40px !important;}
.mr50{margin-right:50px !important;}
.mr60{margin-right:60px !important;}

.pd5{padding:5px !important;}
.pd10{padding:10px !important;}
.pd15{padding:15px !important;}
.pd20{padding:20px !important;}
.pd25{padding:25px !important;}
.pd30{padding:30px !important;}
.pd40{padding:40px !important;}
.pd50{padding:50px !important;}
.pd60{padding:60px !important;}
.pdt5{padding-top:5px !important;}
.pdt10{padding-top:10px !important;}
.pdt15{padding-top:15px !important;}
.pdt20{padding-top:20px !important;}
.pdt25{padding-top:25px !important;}
.pdt30{padding-top:30px !important;}
.pdt40{padding-top:40px !important;}
.pdt50{padding-top:50px !important;}
.pdt60{padding-top:60px !important;}
.pdb5{padding-bottom:5px !important;}
.pdb10{padding-bottom:10px !important;}
.pdb15{padding-bottom:15px !important;}
.pdb20{padding-bottom:20px !important;}
.pdb25{padding-bottom:25px !important;}
.pdb30{padding-bottom:30px !important;}
.pdb40{padding-bottom:40px !important;}
.pdb50{padding-bottom:50px !important;}
.pdb60{padding-bottom:60px !important;}
.pdl5{padding-left:5px !important;}
.pdl10{padding-left:10px !important;}
.pdl15{padding-left:15px !important;}
.pdl20{padding-left:20px !important;}
.pdl25{padding-left:25px !important;}
.pdl30{padding-left:30px !important;}
.pdl40{padding-left:40px !important;}
.pdl50{padding-left:50px !important;}
.pdl60{padding-left:60px !important;}
.pdr5{padding-right:5px !important;}
.pdr10{padding-right:10px !important;}
.pdr15{padding-right:15px !important;}
.pdr20{padding-right:20px !important;}
.pdr25{padding-right:25px !important;}
.pdr30{padding-right:30px !important;}
.pdr40{padding-right:40px !important;}
.pdr50{padding-right:50px !important;}
.pdr60{padding-right:60px;}

/*----------------------------------------------------------------------------------------------------------------------
font color&size&style
----------------------------------------------------------------------------------------------------------------------*/
.fntMn{font-family: "ヒラギノ明朝 Pro W3","HG明朝E","ＭＳ Ｐ明朝","ＭＳ 明朝",serif;}
.fntItlc{font-style:italic;}
.fnt10{font-size:10px;}
.fnt11{font-size:11px;}
.fnt12{font-size:12px !important;}
.fnt13{font-size:13px;}
.fnt14{font-size:14px;}
.fnt15{font-size:15px;}
.fnt16{font-size:16px;}
.fnt17{font-size:17px;}
.fnt18{font-size:18px;}
.fnt19{font-size:19px;}
.fnt20{font-size:20px;}
.fnt21{font-size:21px;}
.fnt22{font-size:22px;}
.fnt24{font-size:24px;}
.fnt26{font-size:26px;}
.fnt28{font-size:28px;}
.fnt30{font-size:30px;}
.fntLightGray{color:#ddd !important;}
.fntBlack{color:#000 !important;}
.fntGray{color:#888 !important;}
.fntGreen{color:#09AA06 !important;}
.fntRed{color:#CC0000 !important;}
.fntBrown{color:#572C02 !important;}
.fntWhite{color:#FFF !important;}
.fntBlue{color:#3333FF !important;}
.fntPink{color:#E55753 !important;}
.fntBld{font-weight:bold !important;}
.va1em{vertical-align:-0.1em;}
.vaMddl{vertical-align:middle;}
.txtRight{text-align:right;}
.txtCenter{text-align:center;}
.lh13{line-height:1.3 !important;}
.lh15{line-height:1.5 !important;}
.lh16{line-height:1.6 !important;}
.lh17{line-height:1.7 !important;}
.torikeshi{text-decoration: line-through;color:#888;}
.boxGray{border: 1px solid #f0f0f0;padding:12px 20px;}
.ti0{text-indent:0px;}
.w600{width:600px;}
.a-ul{text-decoration: underline !important;}

/* clearfix */
.cfix:after  { content: "."; display: block; clear: both; height: 0; visibility: hidden; }
.cfix        { min-height: 1px; }
* html .cfix { height: 1px; /*¥*//*/ height: auto; overflow: hidden; /**/ }