@charset "utf-8";


/* common ---------------- */
#wrapper { color: #fff; background: #0f0f0f;}
#contents {  }

.page-header { height: 28.57vw; min-height: 250px; background-size: cover; background-position: center; background-repeat: no-repeat; position: relative;}
#menu .page-header { background-image: url(/img/menu/header.jpg);}

.page-ttl {position: absolute; left: 50%; top: 50%; transform: translateX(-50%);}
.page-ttl span { display: block; line-height: .9;}
.page-ttl .en { font-size: 3.625em; font-weight: 400;}
.page-ttl .ja { margin-top: .5em; font-size: 1.375em;}

/* title */
.secttl {padding: 2em 0 0 1.875em; position: relative; z-index: 0;}
.secttl::before { position: absolute; left: 0; top: 0; width: 5.375em; height: 5.375em; background: url(/img/ico-ttl.svg) no-repeat center /contain; z-index: -1; content: "";}
.secttl span { display: block; line-height: 1;}
.secttl .ja { color: #c19445; font-size: 1.375em;}
.secttl .en { color: #ccbea5; font-size: 3.625em;}
.secttl + .b-hours { padding: .77em 1.16em .945em; margin: 1.55em 0 0 1.875em; font-size: 1.125em; color: #ccbea5; line-height: 1; border: 1px solid #ccbea5;}

/* contents ---------------- */
#menu .menu { padding: 5em 0 0;}

/* 朝ごはん・昼ごはん */
#menu .lunch .yen { font-size: 1.375em;}
#menu .lunch .yen .small { font-size: .72em;}

#menu .lunch .menu-list { margin: 3.75em 0 0;}
#menu .lunch .menu-list img { width: 100%;}
#menu .lunch .menu-list .info {padding: 2.4375em 3.125em 2.875em 0; margin: -3.75em 0 5em 0; width: 100%; background: rgba(28,28,32,0.9); position: relative; z-index: 2;}
#menu .lunch .menu-list .main {padding:0 0 0.875em 1.875em; line-height: 1.45; border-bottom: 2px solid #fff; position: relative;}
#menu .lunch .menu-list .main::after { display: block; position: absolute; left: 0; bottom: -6px; width: 95.3%; height: 1px; background: #fff; content: "";}
#menu .lunch .menu-list h3 { font-size: 1.375em;}
#menu .lunch .menu-list .desc { margin: 1.625em 0 0 1.875em;}

#menu .lunch .sub-list {padding: 1.875em 3.125em; border: 1px solid #fff;}
#menu .lunch .sub-list > li {padding-bottom: 1.5em; width: 50%;}
#menu .lunch .sub-list > li:nth-of-type(odd) {padding-right: 3.125em; border-right: 2px dotted #fff;}
#menu .lunch .sub-list > li:nth-of-type(even) { padding-left: 3.125em;}
#menu .lunch .sub-list .info {padding-top: 1em; border-bottom: 1px solid #fff;}
#menu .lunch .sub-list h3 {font-size: 1.375em;}
#menu .lunch .sub-list p {margin: 1.3125em 0 .625em; line-height: 1.625;}
#menu .lunch .sub-list .other { padding-left: 1em; position: relative;}
#menu .lunch .sub-list .other::before {position: absolute; left: 0; top: 0; font-size: .625em; content: "●";}

/* 晩ごはん */
#menu .dinner .cat-box:nth-child(odd) .menu-box { margin-left: 0; margin-right: auto;}
#menu .dinner .menu-box { margin-left: auto; padding: 3.125em 3.125em 4.375em 0; background: rgba(28,28,32,0.9);}
#menu .dinner .menu-box h3 { display: block; width: 43.8%; margin-bottom: 1.5em; padding: 0 0 .5em .72em; font-size: 2em; line-height: 1; border-bottom: 2px solid #fff; position: relative;}
#menu .dinner .menu-box h3::after { display: block; position: absolute; left: 0; bottom: -6px; width: 95.3%; height: 1px; background: #fff; content: "";}
#menu .dinner .menu-box .list { padding-left: 3.125em;}
#menu .dinner .menu-box .list li { display: flex; flex-wrap: wrap; justify-content: space-between; padding: 1em 4px 1em 0; line-height: 1.625; border-bottom: 1px solid #fff; position: relative;}
#menu .dinner .menu-box .list li .yen { font-size: .875em;}
#menu .dinner .menu-box .list li.osusume { padding-left: 3em;}
#menu .dinner .menu-box .list li.osusume::before {display: block; position: absolute; left: 0; top: .5em; width: 2.5em; height: 2.5em; background: url(/img/menu/osusume.svg) no-repeat center /100%; content: "";}

/* コース・宴会 */
#menu .course .lead { margin-left: 1.875em;}
#menu .course .course-box { margin: 3.75em auto; max-width: 1400px; position: relative;}
#menu .course .course-box.osusume .menu-box { position: relative;}
#menu .course .course-box:not(:nth-child(2)){ margin-top: 11.25em;}
#menu .course .course-box figure { position: absolute; right: 0; top: -6.25em; width: 44.2%; z-index: 2;}
#menu .course .course-box figure::before {display: block; position: absolute; left: -1.25em; top: 1.25em; width: 100%; height: 100%; border: 1px solid #ab865b; content: ""; z-index: -1;}
#menu .course .course-box img { width: 100%;}
#menu .course .menu-box { padding: 2.8125em 0 2.6875em; background: rgba(28,28,32,0.9);}
#menu .course .menu-box .txt { width: 50.9%;}
#menu .course .menu-box .info { padding: 0 0 1.3125em 3em; border-bottom: 2px solid #fff; position: relative;}
#menu .course .menu-box .info::after { display: block; position: absolute; left: 0; bottom: -6px; width: 94.6%; height: 1px; background: #fff; content: "";}
#menu .course .menu-box h3 { font-size: 1.75em; line-height: 1.64;}
#menu .course .menu-box .yen { font-size: 1.625em;}
#menu .course .menu-box .yen .small { font-size: .615em;}
#menu .course .menu-box .list { padding: 2em 0 0 3em; margin-bottom: 1.375em;}
#menu .course .menu-box .list > div { display: flex; margin-bottom: 3px;}
#menu .course .menu-box .list dt { margin-right: 1.4375em;}
#menu .course .menu-box .desc { margin-left: 3em;}
#menu .course .menu-box .attention { margin: 0 0 0 3em; padding-left: 1.2em; font-size: .875em; position: relative;}
#menu .course .menu-box .attention::before { display: block; position: absolute; left: 0; top: 0; content: "※";}

#menu .course .course-box:nth-child(odd) .txt {padding-right: 6.36%; margin-left: auto; width: 57.2%;}
#menu .course .course-box:nth-child(odd) figure {left: 0;}
#menu .course .course-box:nth-child(odd) figure::before {left: auto; right: -1.25em;}

/* ================================================================
  レスポンシブ
=================================================================== */
/* 600以上(PC・タブレット) */
@media screen and (min-width: 600px) {

  /* 朝ごはん・昼ごはん */
  #menu .lunch .menu-list li { width: 43.6%;}
  #menu .lunch .menu-list li:nth-child(even){ margin: -5em 2.5em 0 0;}
  #menu .lunch .menu-list .info { margin-left: 2.5em; margin-bottom: 5em;}

  /* 晩ごはん */
  #menu .dinner .cat-box { max-width: 1400px; margin: 3.75em auto 0; position: relative; z-index: 2;}
  #menu .dinner .cat-box:not(:nth-child(2)){ margin-top: 10em;}

  #menu .dinner .cat-box figure { position: absolute; top: 0; z-index: -2;}
  #menu .dinner .cat-box figure img { width: 100%;}
  #menu .dinner .cat-box > figure{ right: 0; margin-top: -3.75em; width: 60.7%; z-index: -1;}/* 横長画像 */
  #menu .dinner .cat-box .inner {padding-top: 22.8%; position: relative;}
  #menu .dinner .cat-box .inner > figure { left: 0; width: 43.6%; }/* 縦長画像 */
  #menu .dinner .cat-box:nth-child(odd) > figure { left: 0; right: auto;}/* 横長画像（偶数番目） */
  #menu .dinner .cat-box:nth-child(odd) .inner > figure { left: auto; right: 0;}/* 縦長画像（偶数番目） */

  #menu .dinner .menu-box {width: 89%;}
  #menu .dinner .menu-box .list li {width: 47.72%;}

  /* コース */
  #menu .course .lead { padding-bottom: 5em;}
  #menu .course .course-box.osusume .menu-box::before {display: block; position: absolute; left: 0; top: 0; transform: translate(-50%, -50%); width: 6.5em; height: 6.5em; background: url(/img/menu/osusume2.svg) no-repeat center /100%; content: ""; }

}

/* 960px以上(PC) */
@media screen and (min-width: 960px) {

}

/* ================================================================
  タブレット
=================================================================== */
/* 1024以下 (タブレット横以下) */
@media screen and (max-width: 1200px) {
  /* コース */
  #menu .course .course-box.osusume .menu-box::before { transform: translate(10px, -50%);}
}

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

}

/* 959以下 (タブレット以下) */
@media screen and (max-width: 959px) {

  /* 朝ごはん・昼ごはん */
  #menu .lunch .menu-list .info { padding-right: 15px; margin-top: -1.5em; margin-left: 15px;}
  #menu .lunch .menu-list .main { padding-left: 15px;}
  #menu .lunch .menu-list .desc { margin-left: 15px;}
  #menu .lunch .menu-list h3.long { width: 100%;}
  #menu .lunch .menu-list h3.long + .yen { margin-top: .5em;}

  /* 晩ごはん */
  #menu .dinner .ttl-box { padding-bottom: 3em;}
  #menu .dinner .menu-box { padding-right: 15px;}
  #menu .dinner .menu-box .list { padding-left: 15px;}
}

/* ================================================================
  スマホ
=================================================================== */
@media screen and (max-width: 599px){

  /* 朝ごはん・昼ごはん */
  #menu .lunch .menu-list figure { margin-left: -15px;}
  #menu .lunch .menu-list li { width: 100%;}
  
  #menu .lunch .sub-list { padding: 1.25em 15px; flex-direction: column;}
  #menu .lunch .sub-list li { padding: 0 15px 1.5em !important; width: 100%; border-right: none !important;}
  #menu .lunch .sub-list li:not(:last-of-type) { border-bottom: 2px dotted #fff; }
  #menu .lunch .sub-list p { margin-bottom: 0;}
  #menu .lunch .sub-list li:not(:first-of-type) .info { padding-top: 1.5em;}

  /* 晩ごはん */
  #menu .dinner .cat-box > .inner { margin: 0;}
  #menu .dinner .menu-box { background: none;}
  #menu .dinner .menu-box .list li { width: 100%;}

  /* コース */
  #menu .course .course-box:nth-child(2){ margin-top: 3.75em !important;}
  #menu .course .course-box { margin: 0 auto !important;}
  #menu .course .course-box.osusume .menu-box::before { display: none;}
  #menu .course .course-box.osusume .info::before { display: inline-block; margin-bottom: 0.5em; padding: .5em 1em; color: #fff838; background: #942514; content: "当店のオススメ";}
  #menu .course .course-box figure {width: 80%; top: 0; margin-left: auto; position: relative;}
  #menu .course .course-box:nth-child(odd) figure {margin-left: 0; margin-right: auto;}
  #menu .course .menu-box { margin: 0; background: none;}
  #menu .course .menu-box .txt { width: 100% !important;}
  #menu .course .menu-box .info,
  #menu .course .menu-box .list { padding-left: 15px; margin-right: 15px;}
  #menu .course .course-box:nth-child(odd) .info,
  #menu .course .course-box:nth-child(odd) .list { margin-right: 0;}
  #menu .course .menu-box .desc { margin-left: 15px;}
  #menu .course .menu-box .attention { margin-left: 15px; margin-right: 15px;}
  #menu .course .menu-box h3 { font-size: 1.65em;}
}