@charset "utf-8";
/* ===================================================
	Home CSS
====================================================== */
#meal #gnav #nav_02 { border-bottom: 2px solid #78962D;}
#meal #main_img { background-image: url(../../../meal/img/meal_main.jpg);}

#meal #contents_wrap { overflow: hidden;}

@media screen and (max-width: 600px) {
  #meal #gnav #nav_02 { border-bottom: 1px dashed #ccc;}
}

/* ---------------------------------------------------
lead
------------------------------------------------------ */
#meal #lead {
  margin-top: 80px; position: relative; padding-bottom: 40px; height:700px;
  background-image: url(../../../meal/img/lead_bg1.png), url(../../../meal/img/lead_bg2.jpg); background-repeat: no-repeat, repeat; background-position: left top, center;
}
#meal #lead dl { padding: 80px 140px 50px; text-align: center; color: #fff;}
#meal #lead dt {
  font-size: 45px; position: relative; padding: 50px 0; border-top: 1px solid #fff; line-height: 1.4;
  text-shadow: 1px 1px 3px #d99227, 1px -1px 3px #d99227
}
#meal #lead dt span { font-size: 22px; background: url(../../../meal/img/lead_bg2.jpg); padding: 0 15px; position: absolute; top: -15px; left: calc(50% - 8em); text-shadow: none;}
#meal #lead dd { font-size: 15px;}
#meal #lead > img { position: absolute; top: 100px; right: 0; max-width: 300px; /*min-width: 395px;*/}
@media screen and (max-width: 950px) {
  #meal #lead { background-position: right 73vw top, center;}
}
/*
@media screen and (max-width: 950px) {
  #meal #lead > img { left: 73vw; width: 36%; top: -40px;}
}
@media screen and (max-width: 950px) {
  #meal #lead { background-position: left -200px top, center;}
  #meal #lead > img { left: auto; right: -112px;}
}

@media screen and (max-width: 600px) {
  #meal #lead { background: url(../../../meal/img/lead_bg2.jpg); margin-top: 0; padding-top: 80px;}
  #meal #lead dl { padding: 0 0 30px;}
  #meal #lead dt { font-size: 24px; padding: 30px 0;}
  #meal #lead dt span { font-size: 18px;}
  #meal #lead dd { text-align: left;}
  #meal #lead > img { display: none;}
}
*/
/* ---------------------------------------------------
sec1
------------------------------------------------------ */
#meal #sec1 { padding: 120px 0;}
#meal #sec1 h2 { font-size: 35px; margin-bottom: 40px; text-align: center;}
#meal #sec1 h2 span { display: block; font-size: 15px; color: #c8ceb8;}
#meal #sec1 > p { text-align: center;}
#meal #sec1 > img { width: 100%;}
#meal #sec1 .inner { padding: 50px 0 30px; display: flex; flex-wrap: wrap; justify-content: space-between;}
#meal #sec1 .inner ul { display: flex; justify-content: space-between; margin-bottom: 50px; width: 100%;}
#meal #sec1 .inner li { width: calc(50% - 5px);}
#meal #sec1 .inner dl { padding: 20px 20px 10px 15px; display: flex; flex-direction: column; justify-content: center; width: 44%; box-sizing: border-box;}
#meal #sec1 .inner dt { font-size: 30px; margin-bottom: 15px; line-height: 1.3;}
#meal #sec1 .inner dd:last-of-type { width: 90%; border: 1px solid #d7d1c5; position: relative; margin-top: 40px; background: url(../../../meal/img/arrow3.png) no-repeat center right 30px;}
#meal #sec1 .inner dd a { padding: 15px; text-align: center; display: block;}
#meal #sec1 .inner dl + p { width: 55%; text-align: right;}
#meal #sec1 .inner p:last-of-type { width: 100%; margin-top: 30px;}
/*
@media screen and (max-width: 600px) {
  #meal #sec1 { padding: 60px 0 20px;}
  #meal #sec1 h2 { font-size: 24px; width: 95%; margin: 0 auto 20px;}
  #meal #sec1 p { width: 95%; margin: 0 auto 30px; text-align: left;}
  #meal #sec1 .inner { padding: 5px 0;}
  #meal #sec1 .inner ul { margin-bottom: 5px;}
  #meal #sec1 .inner li { width: calc(50% - 2px);}
  #meal #sec1 .inner dl { padding: 50px 0 0; order: 1; width: 100%;}
  #meal #sec1 .inner dt { font-size: 24px;}
  #meal #sec1 .inner dd:last-of-type { margin: 30px auto 15px;}
  #meal #sec1 .inner p { width: calc(50% - 2px)!important; margin: 0!important;}
  #meal #sec1 .inner p img { height: 34vw;}
}
*/
/* ---------------------------------------------------
sec2
------------------------------------------------------ */
#meal #sec2 { background: url(../../../meal/img/sec2_bg2.jpg); position: relative; margin-top: 8vw; padding-bottom: 120px;}
#meal #sec2::before {
  display: block; content: ''; width: 100%; height: 43vw; position: absolute; top: -8vw;
  background: url(../../../meal/img/sec2_bg1.png) no-repeat center top; background-size: cover;
}
#meal #sec2 .inner { position: relative; z-index: 1;}
#meal #sec2 .inner > dl {
  width: 100%; display: flex; flex-direction: row-reverse; padding-top: 80px;
  background: url(../../../meal/img/sec2_tit_bg.png) no-repeat right center; background-size: contain;
}
#meal #sec2 .inner > dl dt { width: 15vw; max-width: 247px;}
#meal #sec2 .inner > dl dd {
  -webkit-writing-mode: vertical-rl; -ms-writing-mode: tb-rl; writing-mode: vertical-rl; white-space: nowrap;
  align-self: flex-end; font-size: 15px; font-weight: bold; text-shadow: 1px 1px 3px #fff, -1px 1px 3px #fff, 1px -1px 3px #fff, -1px -1px 3px #fff;
}
#meal #sec2 .contents { text-align: center; padding-top: 15px;}
#meal #sec2 .contents ul { display: flex; justify-content: space-between; width: 100%; margin-top: 40px;}
#meal #sec2 .contents li { width: calc(50% - 5px);}
#meal #sec2 .contents span { display: block; text-align: center; font-size: 16px; padding-top: 5px;}
#meal #sec2 .contents dt { font-size: 30px; margin-bottom: 35px; line-height: 1.3;}

@media screen and (max-width: 950px) {
  #meal #sec2 { margin-top: 88px;}
  #meal #sec2::before { height: 450px; top: -88px;}
  #meal #sec2 .inner > dl dt { width: 165px;}
}
/*
@media screen and (max-width: 600px) {
  #meal #sec2 { margin-top: 13vw; padding-bottom: 60px;}
  #meal #sec2::before { height: 60vw; top: -13vw;}
  #meal #sec2 .inner > dl { flex-direction: row; padding-top: 0;}
  #meal #sec2 .inner > dl dt { width: 22%; padding-right: 15px;}
  #meal #sec2 .inner > dl dd { -webkit-writing-mode: initial; -ms-writing-mode: initial; writing-mode: initial; white-space: normal; align-self: center;}
  #meal #sec2 .contents dt { font-size: 24px; margin-bottom: 15px;}
  #meal #sec2 .contents dd { text-align: left;}
}
*/


/* ===================================================
	restaurant CSS
====================================================== */
#restaurant #gnav #nav_05 { border-bottom: 2px solid #78962D;}
#restaurant #main_img { background-image: url(../../../restaurant/img/restaurant_main.jpg);}

#restaurant #contents_wrap { padding-bottom: 100px;}

#restaurant .inner > [id^="sec"] { text-align: center; padding: 120px 0 50px;}
#restaurant .inner > [id^="sec"] h2 { font-size: 36px; position: relative;}
#restaurant .inner > [id^="sec"] h2::before { content: ''; display: inline-block; width: 130px; border-top: 4px solid #c7ae77; position: absolute; left: calc(50% - 65px); top: -35px;}
#restaurant .inner > [id^="sec"] h2 span { display: block; letter-spacing: 0.3em; text-indent: 0.3em;}
#restaurant .inner > [id^="sec"] h2 span:last-of-type { font-size: 16px; color: #ae8221; letter-spacing: normal; text-indent: 0;}
#restaurant .inner > [id^="sec"] h2 + p { margin-top: 20px;}
#restaurant .inner > [id^="sec"] > img { width: 100%; margin-top: 30px;}
#restaurant .inner > [id^="sec"] > img + p { margin: 20px auto;}
#restaurant .inner > [id^="sec"] .photo { display: flex; justify-content: space-between;}
#restaurant .inner > [id^="sec"] .photo > li { width: calc(50% - 5px);}

@media screen and (max-width: 600px) {
  #restaurant #gnav #nav_05 { border-bottom: 1px dashed #ccc;}

  #restaurant .inner > [id^="sec"] { padding: 100px 0 0;}
  #restaurant .inner > [id^="sec"] h2 { font-size: 26px;}
  #restaurant .inner > [id^="sec"] h2::before { top: -20px;}
  #restaurant .inner > [id^="sec"] h2 + p { margin-top: 10px;}
  #restaurant .inner > [id^="sec"] > img { margin-top: 15px;}
  #restaurant .inner > [id^="sec"] > img + p { text-align: left;}
}

@media screen and (max-width: 350px) {
  #restaurant #main_img h1 { font-size: 22px;}
  #restaurant #main_img h1 span { font-size: 33px;}
}

/* ---------------------------------------------------
contents_wrap
------------------------------------------------------ */
#restaurant #sec3 p.txt{margin: 40px 0;}
#restaurant #sec3 dl { margin-top: 20px; background: #faf9f6; padding: 30px 50px 50px;}
#restaurant #sec3 dl dt { font-size: 21px; margin-bottom: 20px;}
#restaurant #sec3 dl dd { display: flex; flex-wrap: wrap; justify-content: space-between; text-align: left; font-size: 16px;}
#restaurant #sec3 dl dd ul { width: 400px;}
#restaurant #sec3 dl dd li { border-bottom: 1px dotted #3c3c3c; padding: 12px 5px 5px;}
#restaurant #sec3 dl dd li span { float: right;}
#restaurant #sec3 dl dd li::after { content: "."; display: block; height: 0px; clear: both; visibility: hidden; font-size: 0;}
#restaurant #sec3 dl dd .season::before {
  content: '季節限定メニュー'; display: block; width: 150px; font-size: 14px; font-weight: bold; text-align: center;
  background: #cfc556; color: #fff; margin: 30px 0 8px;}
#restaurant #sec3 > a { display: block; width: 400px; border: 1px solid #cccccc; padding: 10px 0; margin: 35px auto 0; box-sizing: border-box;}
#restaurant #sec3 > a span::after { content: ''; display: inline-block; width: 10px; height: 10px; background: url(../../img/arrow4.png) no-repeat center/contain; padding-left: 15px;}

@media screen and (max-width: 600px) {
  #restaurant #sec3 p.txt{text-align: left;}
  #restaurant #sec3 dl { padding: 10px 0; border: 1px solid #ccc;}
  #restaurant #sec3 dl dt { margin-bottom: 0; font-size: 18px;}
  #restaurant #sec3 dl dt::after { content: '▼'; padding-left: 20px;}
  #restaurant #sec3 dl dt.active::after { content: '▲';}
  #restaurant #sec3 dl dd { padding: 15px;}
  #restaurant #sec3 dl dd ul { width: 100%;}
  #restaurant #sec3 dl dd .season::before { margin: 15px 0 8px;}
  #restaurant #sec3 > a { width: 100%; margin: 15px auto 0;}
}