@charset "UTF-8";
/* @group reset */
/* @group remedy */
/* @docs
label: Core Remedies
version: 0.1.0-beta.2

note: |
  These remedies are recommended
  as a starter for any project.

category: file
*/
/* @docs
label: Box Sizing

note: |
  Use border-box by default, globally.

category: global
*/
*, ::before, ::after {
  box-sizing: border-box; }

/* @docs
label: Line Sizing

note: |
  Consistent line-spacing,
  even when inline elements have different line-heights.

links:
  - https://drafts.csswg.org/css-inline-3/#line-sizing-property

category: global
*/
html {
  line-sizing: normal; }

/* @docs
label: Body Margins

note: |
  Remove the tiny space around the edge of the page.

category: global
*/
body {
  margin: 0; }

/* @docs
label: Hidden Attribute

note: |
  Maintain `hidden` behaviour when overriding `display` values.

  category: global
*/
[hidden] {
  display: none; }

/* @docs
label: Heading Sizes

note: |
  Switch to rem units for headings

category: typography
*/
h1 {
  font-size: 2rem; }

h2 {
  font-size: 1.5rem; }

h3 {
  font-size: 1.17rem; }

h4 {
  font-size: 1.00rem; }

h5 {
  font-size: 0.83rem; }

h6 {
  font-size: 0.67rem; }

/* @docs
label: H1 Margins

note: |
  Keep h1 margins consistent, even when nested.

category: typography
*/
h1 {
  margin: 0.67em 0; }

/* @docs
label: Pre Wrapping

note: |
  Overflow by default is bad...

category: typography
*/
pre {
  white-space: pre-wrap; }

/* @docs
label: Horizontal Rule

note: |
  1. Solid, thin horizontal rules
  2. Remove Firefox `color: gray`
  3. Remove default `1px` height, and common `overflow: hidden`

category: typography
*/
hr {
  border-style: solid;
  border-width: 1px 0 0;
  color: inherit;
  height: 0;
  overflow: visible; }

/* @docs
label: Responsive Embeds

note: |
  1. Block display is usually what we want
  2. Remove strange space-below in case authors overwrite the display value
  3. Responsive by default
  4. Audio without `[controls]` remains hidden by default

category: embedded elements
*/
img, svg, video, canvas, audio, iframe, embed, object {
  display: block;
  vertical-align: middle;
  max-width: 100%; }

audio:not([controls]) {
  display: none; }

/* @docs
label: Responsive Images

note: |
  These new elements display inline by default,
  but that's not the expected behavior for either one.
  This can interfere with proper layout and aspect-ratio handling.

  1. Remove the unnecessary wrapping `picture`, while maintaining contents
  2. Source elements have nothing to display, so we hide them entirely

category: embedded elements
*/
picture {
  display: contents; }

source {
  display: none; }

/* @docs
label: Aspect Ratios

note: |
  Maintain intrinsic aspect ratios when `max-width` is applied.
  `iframe`, `embed`, and `object` are also embedded,
  but have no intrinsic ratio,
  so their `height` needs to be set explicitly.

category: embedded elements
*/
img, svg, video, canvas {
  height: auto; }

/* @docs
label: Audio Width

note: |
  There is no good reason elements default to 300px,
  and audio files are unlikely to come with a width attribute.

category: embedded elements
*/
audio {
  width: 100%; }

/* @docs
label: Image Borders

note: |
  Remove the border on images inside links in IE 10 and earlier.

category: legacy browsers
*/
img {
  border-style: none; }

/* @docs
label: SVG Overflow

note: |
  Hide the overflow in IE 10 and earlier.

category: legacy browsers
*/
svg {
  overflow: hidden; }

/* @docs
label: HTML5 Elements

note: |
  Default block display on HTML5 elements

category: legacy browsers
*/
article, aside, figcaption, figure, footer, header, hgroup, main, nav, section {
  display: block; }

/* @docs
label: Checkbox & Radio Inputs

note: |
  1. Add the correct box sizing in IE 10
  2. Remove the padding in IE 10

category: legacy browsers
*/
[type='checkbox'],
[type='radio'] {
  box-sizing: border-box;
  padding: 0; }

/* @end */
/* @group ClearFix */
.clearfix:after {
  content: " ";
  display: block;
  clear: both; }

/* @end */
/* @group common */
*, *:before, *:after {
  -webkit-box-sizing: border-box;
  box-sizing: border-box; }

html {
  overflow-y: scroll;
  -webkit-text-size-adjust: none; }

body {
  margin: 0 auto;
  font-family: "Times New Roman", "YuMincho", "Hiragino Mincho ProN", "Yu Mincho", "MS PMincho", serif;
  box-sizing: border-box;
  font-size: 22px; }

a img {
  border: none;
  text-decoration: none; }

h1, h2, h3, h4, h5, h6, p, dl, ul, ol, table {
  line-height: 1.6; }

i, em, u, b {
  font-style: normal;
  text-decoration: none; }

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

p {
  margin: 0 0 15px; }

/* @end */
/* @end */
/* @group layout */
/* @group base */
body {
  color: #231815;
  background: #F7EFE8; }

img {
  max-width: 100%; }

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

a:hover {
  opacity: 0.7;
  transition: .2s ease-in-out; }

.inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 20px; }

.flex {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  flex-direction: column; }
  .flex .flex_item {
    box-sizing: border-box;
    width: 100%;
    padding: 0 0 20px; }
    .flex .flex_item img {
      display: block;
      margin: 0 auto; }
  .flex.col_re {
    flex-direction: column-reverse; }

.v-rl {
  writing-mode: vertical-rl;
  text-orientation: upright; }
  .v-rl p {
    margin: 0 0 15px 15px; }
  .v-rl dl dt {
    display: inline-block;
    float: left;
    height: 25%; }
  .v-rl dl dd {
    margin: 0; }

.h-330 {
  height: 330px; }

.text-combine {
  -webkit-text-combine: horizontal;
  -ms-text-combine-horizontal: all;
  text-combine-upright: all; }

.note {
  font-size: 80%; }

.textright {
  text-align: right; }

.pcnone {
  display: block; }

.spnone {
  display: none; }

/* @end */
/* @group header */
#header {
  background: url(../images/header_bg.png) no-repeat 0 0;
  background-size: 30% auto;
  position: relative; }
  #header .mark {
    position: absolute;
    margin: 0;
    top: 30px;
    right: 30px;
    width: 30px; }
  #header h1.sitetitle {
    margin: 0 auto;
    padding-top: 30px; }
    #header h1.sitetitle a {
      display: block;
      margin: 0 auto;
      padding-left: 20px; }
      #header h1.sitetitle a img {
        display: block;
        margin: 0 auto;
        max-width: 600px; }
  #header nav#global_nav {
    background: #231815;
    max-width: 600px;
    padding: 30px;
    margin-top: -30px;
    min-height: 250px;
    position: relative; }
    #header nav#global_nav ul.nav_list {
      margin: 0 auto;
      position: absolute;
      max-width: 260px;
      right: 0;
      left: 0; }
      #header nav#global_nav ul.nav_list li a {
        display: block;
        color: #fff;
        padding: 7px;
        font-weight: normal; }

/* @end */
/* @group footer */
#footer {
  background: url(../images/footer_bg.png) no-repeat right bottom;
  background-size: 50%;
  position: relative; }
  #footer #sns_cont {
    background: rgba(224, 126, 92, 0.75);
    text-align: center; }
    #footer #sns_cont a {
      color: #fff; }
    #footer #sns_cont .widget {
      max-width: 480px;
      margin: 30px auto; }
    #footer #sns_cont .btn a {
      display: block;
      font-size: 90%;
      border: 1px solid #fff;
      border-radius: 20px;
      padding: 10px; }
  #footer #pagetop {
    position: fixed;
    right: 0;
    bottom: 0;
    margin: 0; }
    #footer #pagetop a {
      display: block;
      background: rgba(0, 0, 0, 0.3);
      font-size: 15px;
      text-align: center;
      color: #fff; }
      #footer #pagetop a i {
        display: block;
        font-size: 30px; }
  #footer #shop_info {
    padding: 300px 0px 0;
    position: relative; }
    #footer #shop_info h2 {
      margin: 0 auto 30px;
      font-weight: normal;
      font-size: 95%;
      width: 50px;
      min-height: 180px !important;
      position: absolute;
      right: 0;
      left: 0;
      top: 50px; }
      #footer #shop_info h2 img {
        width: 50px;
        display: inline;
        padding-bottom: 20px;
        padding-right: 8px;
        vertical-align: middle; }
    #footer #shop_info .contact {
      font-size: 90%;
      text-align: center;
      margin: 0 auto 50px; }
      #footer #shop_info .contact strong {
        font-size: 22px; }
    #footer #shop_info .map {
      text-align: center;
      width: 100%; }
      #footer #shop_info .map .map_cont {
        width: 100%;
        margin: 0 auto; }
      #footer #shop_info .map iframe {
        display: block !important;
        margin: 0 auto;
        width: 360px;
        height: 240px; }
  #footer .flex {
    margin-bottom: 100px; }
  #footer small {
    display: block;
    text-align: center;
    font-size: small; }

/* @end */
/* @group main */
main {
  position: relative;
  padding-top: 200px; }
  main section {
    padding: 30px 0;
    border-bottom: 1px solid #fff;
    position: relative; }
    main section:last-child {
      border-bottom: none; }
  main h1.pagetitle {
    writing-mode: vertical-rl;
    text-orientation: upright;
    width: 130px;
    text-align: left;
    font-size: 40px;
    font-family: "Hannari", "Times New Roman", "YuMincho", "Hiragino Mincho ProN", "Yu Mincho", "MS PMincho", serif;
    font-weight: normal;
    padding-bottom: 30px;
    padding-right: 40px;
    padding-top: 10px;
    background: url(../images/pagetitle_bg.svg) no-repeat bottom center;
    background-size: 130px auto;
    letter-spacing: 5px;
    position: absolute;
    right: 10%;
    top: 10px;
    margin: 0 !important;
    line-height: 1; }
  main h2.sectiontitle {
    writing-mode: vertical-rl;
    text-orientation: upright;
    background: url(../images/pagetitle_bg.svg) no-repeat bottom center;
    background-size: 80px auto;
    padding-bottom: 30px;
    height: auto;
    display: block;
    margin: 0 auto 30px;
    min-width: 60px;
    padding-right: 8px;
    font-size: 30px;
    font-weight: normal;
    font-family: "Hannari", "Times New Roman", "YuMincho", "Hiragino Mincho ProN", "Yu Mincho", "MS PMincho", serif;
    line-height: 1.4;
    width: 60px; }
  main h3 {
    writing-mode: vertical-rl;
    text-orientation: upright;
    font-weight: normal;
    background: #231815;
    color: #fff;
    padding: 10px 5px;
    position: relative;
    z-index: 100; }
  main .flex_item h2.sectiontitle {
    display: inline-block; }
  main dl.menu {
    height: 400px; }
    main dl.menu dt {
      height: 65%;
      display: inline-block;
      position: relative; }
      main dl.menu dt i {
        font-size: 80%;
        display: block;
        text-align: right; }
      main dl.menu dt b {
        font-weight: normal;
        font-size: 70%;
        display: block;
        line-height: 1; }
    main dl.menu dd {
      height: 35%;
      display: inline-block;
      margin: 0;
      text-align: right; }
    main dl.menu.mt50 {
      margin-top: 50px; }
    main dl.menu.annotation dt i {
      margin-right: -1.9em; }

/* Win Edge */
@media screen and (max-width: 1200px) {
  @supports (-ms-ime-align: auto) {
    main h2.sectiontitle {
      height: 320px;
      line-height: 1; }

    main .inner.center {
      padding-top: 400px;
      position: relative; }
      main .inner.center h2.sectiontitle {
        position: absolute;
        left: 0;
        right: 0;
        top: 0; } } }
/* @end */
/* @group top */
#top main {
  padding-top: 0; }
  #top main #main_img {
    padding: 0;
    border-bottom: none; }
    #top main #main_img ul.slick_cont li img {
      height: 250px; }
  #top main #links_cont ul li {
    margin-bottom: 30px; }
    #top main #links_cont ul li a {
      display: block;
      background: rgba(255, 255, 255, 0.3); }
      #top main #links_cont ul li a img {
        display: block; }
      #top main #links_cont ul li a div {
        position: relative;
        min-height: 180px; }
        #top main #links_cont ul li a div span {
          writing-mode: vertical-rl;
          text-orientation: upright;
          display: block;
          margin: 0 auto;
          padding: 20px 0;
          width: 22px;
          position: absolute;
          right: 0;
          left: 0;
          font-size: 90%; }

/* @end */
/* @group sub */
.sub main section {
  font-size: 18px;
  line-height: 1.4; }

/* @end */
/* @group about */
#about main section .flex {
  flex-wrap: nowrap; }

/* @end */
/* @group course */
#course main .menu_cont .v-rl {
  margin: 50px auto;
  width: 320px; }
  #course main .menu_cont .v-rl dl.coursemenu.menu {
    height: 500px; }
    #course main .menu_cont .v-rl dl.coursemenu.menu dt {
      min-width: 100px;
      height: 50%; }
      #course main .menu_cont .v-rl dl.coursemenu.menu dt img {
        height: 230px;
        width: auto; }
    #course main .menu_cont .v-rl dl.coursemenu.menu dd {
      min-width: 100px;
      font-size: 28px;
      height: 50%;
      padding-right: 20px; }
      #course main .menu_cont .v-rl dl.coursemenu.menu dd span.note {
        font-size: 60%; }
  #course main .menu_cont .v-rl p {
    margin-right: 15px; }
#course main .img_cont .inner {
  padding: 0; }
  #course main .img_cont .inner div {
    position: relative;
    padding: 80px 0; }
    #course main .img_cont .inner div h3.imgtitle {
      position: absolute;
      top: 0; }
    #course main .img_cont .inner div.spring h3.imgtitle, #course main .img_cont .inner div.autumn h3.imgtitle {
      left: 30px; }
    #course main .img_cont .inner div.summer h3.imgtitle, #course main .img_cont .inner div.winter h3.imgtitle {
      right: 30px; }

/* Win Edge */
@media screen and (max-width: 1200px) {
  @supports (-ms-ime-align: auto) {
    #course main .menu_cont {
      position: relative;
      height: 800px; }
    #course main .v-rl {
      position: absolute;
      left: 0;
      right: 0;
      top: 0; } } }
/* @end */
/* @group menu */
#menu main section .flex {
  justify-content: flex-start; }
#menu main section h2.sectiontitle {
  white-space: nowrap; }

/* @end */
/* @group drink */
#drink main section .flex {
  justify-content: flex-start !important;
  padding: 50px 0; }
  #drink main section .flex .flex_item {
    padding: 30px 0; }
    #drink main section .flex .flex_item dl.menu {
      margin-top: 50px;
      padding-left: 30px; }
      #drink main section .flex .flex_item dl.menu.single {
        width: 90px; }
      #drink main section .flex .flex_item dl.menu dd.pr5 {
        padding-right: 5px; }
    #drink main section .flex .flex_item.img {
      position: relative;
      padding-bottom: 240px; }
      #drink main section .flex .flex_item.img img {
        position: absolute;
        bottom: 0;
        right: 0;
        left: 0;
        max-width: 300px;
        padding-bottom: 20px; }

/* @end */
/* @group outline */
#outline main section .v-rl dl.sheet {
  min-height: 300px; }
  #outline main section .v-rl dl.sheet dt {
    height: 50%; }
#outline main section .v-rl dl.access {
  min-height: 550px; }
  #outline main section .v-rl dl.access dt {
    height: 40%; }
#outline main section h2.sectiontitle {
  white-space: nowrap; }

/* @end */
/* @end */
/* スマホ以下 */
@media print, screen and (max-width: 767px) {
  /* @group drink */
  #drink main section .flex {
    flex-direction: row-reverse; }
    #drink main section .flex .flex_item {
      position: relative;
      width: auto;
      border-bottom: 1px solid #fff; }
      #drink main section .flex .flex_item h2.sectiontitle {
        position: absolute;
        line-height: 0.8;
        padding-right: 17px;
        letter-spacing: 0;
        background-size: 60px auto; }
      #drink main section .flex .flex_item dl.menu {
        margin: 180px 0 0 25px;
        padding-left: 0; }

  /* @end */
  /* @group outline */
  #outline main section .flex .flex_item img {
    width: 100%; }
  #outline main section .flex .flex_item .map_cont {
    width: 100%; }

  /* @end */ }
/* タブレット以上 */
@media print, screen and (min-width: 768px) {
  /* @group base */
  .flex {
    flex-direction: row; }
    .flex .flex_item {
      width: auto; }
    .flex.row_re {
      flex-direction: row-reverse; }

  .flex.box_cont {
    flex-direction: row; }
    .flex.box_cont .flex_item {
      width: 49%; }
    .flex.box_cont.row_re {
      flex-direction: row-reverse; }

  .h-330 {
    height: auto; }

  .pcnone {
    display: none; }

  .spnone {
    display: block; }

  /* @end */
  /* @group header */
  /* @end */
  /* @group footer */
  #footer {
    background-size: 40% auto; }
    #footer #sns_cont .btn a {
      max-width: 40%;
      margin: 0 auto; }
    #footer #shop_info h2 {
      margin-bottom: 80px; }
    #footer #shop_info .flex {
      justify-content: flex-start;
      margin-left: 0;
      width: 66%;
      flex-wrap: nowrap; }
      #footer #shop_info .flex .contact {
        text-align: left;
        margin: 0;
        padding-right: 20px;
        width: 50%; }
      #footer #shop_info .flex .map {
        width: 50%; }
        #footer #shop_info .flex .map .map_cont {
          margin: 30px auto; }
    #footer small {
      text-align: right;
      padding-right: 120px; }

  /* @end */
  /* @group main */
  main {
    padding-top: 200px; }
    main h1.pagetitle {
      position: absolute;
      top: -200px;
      right: 10%;
      font-size: 80px;
      letter-spacing: 5px;
      padding-right: 20px; }
    main h2.sectiontitle {
      padding-right: 3px;
      font-size: 40px;
      margin-bottom: 80px; }
    main dl.menu {
      height: 500px; }
      main dl.menu.ml50 {
        margin-left: 50px; }

  /* @end */
  /* @group top */
  #top main {
    padding-top: 50px; }
    #top main #main_img ul.slick_cont li img {
      height: 600px; }
    #top main #links_cont ul {
      flex-direction: row-reverse; }
      #top main #links_cont ul li {
        width: 49%; }

  /* @end */
  /* @group sub */
  .sub main section {
    font-size: 22px;
    line-height: 1.8; }

  /* @end */
  #course main .menu_cont .v-rl dl.coursemenu.menu {
    height: 700px; }
    #course main .menu_cont .v-rl dl.coursemenu.menu dt {
      min-width: 200px;
      height: 60%; }
      #course main .menu_cont .v-rl dl.coursemenu.menu dt img {
        height: 400px; }
    #course main .menu_cont .v-rl dl.coursemenu.menu dd {
      min-width: 200px;
      font-size: 32px;
      padding-right: 50px;
      height: 40%; }
  #course main .menu_cont .v-rl p {
    margin-right: 15px; }
  #course main .img_cont .inner div ul.flex {
    display: flex; }
    #course main .img_cont .inner div ul.flex li {
      width: 50%; }
  #course main .img_cont .inner div h3.imgtitle {
    position: absolute;
    top: 0; }

  /* @end */ }
/* タブレット小さめ */
@media print, screen and (min-width: 767px) and (max-width: 900px) {
  /* @group header */
  #header nav#global_nav {
    max-width: 500px; }

  /* @end */
  /* @group menu */
  #menu main section .flex {
    justify-content: flex-end; }
    #menu main section .flex .flex_item img {
      width: 80%;
      margin-left: 0; }

  /* @end */
  /* @group outline */
  #outline main section .flex {
    justify-content: flex-end; }
    #outline main section .flex .flex_item img {
      width: 45%;
      margin-left: 0; }
    #outline main section .flex .flex_item .map_cont {
      width: 80%;
      margin-left: 0; }

  /* @end */ }
/* PC 1280over */
@media print {
  body {
    width: 1280px; }

  /* 印刷時に画面と変更するスタイルを定義 */ }