@charset "UTF-8";
.row {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap; }

.row__item {
  width: 100%; }

.row__item--mobile-1 {
  width: 8.33333%; }

.row__item--mobile-2 {
  width: 16.66667%; }

.row__item--mobile-3 {
  width: 25%; }

.row__item--mobile-4 {
  width: 33.33333%; }

.row__item--mobile-5 {
  width: 41.66667%; }

.row__item--mobile-6 {
  width: 50%; }

.row__item--mobile-7 {
  width: 58.33333%; }

.row__item--mobile-8 {
  width: 66.66667%; }

.row__item--mobile-9 {
  width: 75%; }

.row__item--mobile-10 {
  width: 83.33333%; }

.row__item--mobile-11 {
  width: 91.66667%; }

.row__item--mobile-12 {
  width: 100%; }

.row__item--mobile-fifth {
  width: 20%; }

@media screen and (min-width: 768px) {
  .row__item--tablet-1 {
    width: 8.33333%; } }

@media screen and (min-width: 768px) {
  .row__item--tablet-2 {
    width: 16.66667%; } }

@media screen and (min-width: 768px) {
  .row__item--tablet-3 {
    width: 25%; } }

@media screen and (min-width: 768px) {
  .row__item--tablet-4 {
    width: 33.33333%; } }

@media screen and (min-width: 768px) {
  .row__item--tablet-5 {
    width: 41.66667%; } }

@media screen and (min-width: 768px) {
  .row__item--tablet-6 {
    width: 50%; } }

@media screen and (min-width: 768px) {
  .row__item--tablet-7 {
    width: 58.33333%; } }

@media screen and (min-width: 768px) {
  .row__item--tablet-8 {
    width: 66.66667%; } }

@media screen and (min-width: 768px) {
  .row__item--tablet-9 {
    width: 75%; } }

@media screen and (min-width: 768px) {
  .row__item--tablet-10 {
    width: 83.33333%; } }

@media screen and (min-width: 768px) {
  .row__item--tablet-11 {
    width: 91.66667%; } }

@media screen and (min-width: 768px) {
  .row__item--tablet-12 {
    width: 100%; } }

@media screen and (min-width: 768px) {
  .row__item--tablet-fifth {
    width: 20%; } }

@media screen and (min-width: 1080px) {
  .row__item--desktop-1 {
    width: 8.33333%; } }

@media screen and (min-width: 1080px) {
  .row__item--desktop-2 {
    width: 16.66667%; } }

@media screen and (min-width: 1080px) {
  .row__item--desktop-3 {
    width: 25%; } }

@media screen and (min-width: 1080px) {
  .row__item--desktop-4 {
    width: 33.33333%; } }

@media screen and (min-width: 1080px) {
  .row__item--desktop-5 {
    width: 41.66667%; } }

@media screen and (min-width: 1080px) {
  .row__item--desktop-6 {
    width: 50%; } }

@media screen and (min-width: 1080px) {
  .row__item--desktop-7 {
    width: 58.33333%; } }

@media screen and (min-width: 1080px) {
  .row__item--desktop-8 {
    width: 66.66667%; } }

@media screen and (min-width: 1080px) {
  .row__item--desktop-9 {
    width: 75%; } }

@media screen and (min-width: 1080px) {
  .row__item--desktop-10 {
    width: 83.33333%; } }

@media screen and (min-width: 1080px) {
  .row__item--desktop-11 {
    width: 91.66667%; } }

@media screen and (min-width: 1080px) {
  .row__item--desktop-12 {
    width: 100%; } }

@media screen and (min-width: 1080px) {
  .row__item--desktop-fifth {
    width: 20%; } }

.row--std {
  margin: -10px; }

.row--std .row__item {
  padding: 10px; }

.row--wide {
  margin: -10px; }

@media screen and (min-width: 768px) {
  .row--wide {
    margin: -20px; } }

.row--wide .row__item {
  padding: 10px; }

@media screen and (min-width: 768px) {
  .row--wide .row__item {
    padding: 20px; } }

.row--center {
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center; }

.row--right {
  -webkit-box-pack: end;
  -ms-flex-pack: end;
  justify-content: flex-end; }

.row--align-center {
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center; }

.wine-story {
  background: url(../images/wine/bg.jpg) repeat center center; }

.wine-story__inner {
  padding: 50px 10px 100px;
  background: #fff;
  overflow: hidden; }

@media screen and (min-width: 768px) {
  .wine-story__inner {
    padding: 50px 50px 100px; } }

@media screen and (min-width: 1080px) {
  .wine-story__inner {
    padding: 50px 100px 100px; } }

.wine-story img {
  max-width: 100%;
  height: auto; }

.wine-story a {
  -webkit-transition: .4s ease-out;
  -o-transition: .4s ease-out;
  transition: .4s ease-out; }

.wine-story a:hover {
  opacity: .75; }

.blackboard {
  background: url(../images/wine/blackboard.jpg) no-repeat center center;
  width: 100%;
  height: auto;
  background-size: cover;
  padding: 6rem 1rem 4rem;
  color: #fff;
  -webkit-box-shadow: 7px 7px 10px #ccc;
  box-shadow: 7px 7px 10px #ccc;
  position: relative; }

@media screen and (min-width: 768px) {
  .blackboard {
    padding: 8rem 6rem 6rem; } }

.blackboard::before,
.blackboard::after {
  content: "";
  background: #8C6239;
  height: 17px;
  width: 100%;
  display: block;
  position: absolute; }

.blackboard::before {
  top: 0;
  left: 0; }

.blackboard::after {
  bottom: 0;
  left: 0; }

.blackboard img {
  max-width: 100%;
  height: auto; }

@media screen and (max-width: 767px) {
  .blackboard img {
    margin: 1rem 0 0; } }

.blackboard__title {
  text-align: center;
  border-top: 4px solid #fff;
  border-bottom: 4px solid #fff;
  padding: .7rem 0;
  width: 77%;
  margin: 0 auto 2.5rem;
  position: relative; }

.blackboard__title::before,
.blackboard__title::after {
  content: "";
  background: url(../images/wine/kirakira.png) no-repeat center center;
  background-size: contain;
  width: 100%;
  height: 50px;
  display: block;
  position: absolute;
  top: -40px;
  right: -262px; }

@media screen and (min-width: 768px) {
  .blackboard__title::before,
  .blackboard__title::after {
    height: 90px;
    width: 350px; } }

.blackboard__title::before {
  top: -29px;
  left: -150px; }

@media screen and (min-width: 768px) {
  .blackboard__title::before {
    left: -222px; } }

.blackboard__title::after {
  top: -40px;
  right: -150px; }

@media screen and (min-width: 768px) {
  .blackboard__title::after {
    right: -222px; } }

.blackboard__text {
  display: block; }

.blackboard__text::before,
.blackboard__text::after {
  content: "";
  background: url(../images/wine/dott-border.png) repeat-x center center;
  background-size: 500px;
  width: 100%;
  height: 40px;
  display: block; }

.blackboard__square {
  border: 1px solid #fff;
  height: 100%;
  width: 100%;
  display: block;
  padding: 2.8rem;
  position: relative; }

.blackboard__square::after {
  content: "";
  color: #fff;
  display: block;
  border: 1px solid #fff;
  height: 94%;
  width: 94%;
  position: absolute;
  top: 10px;
  left: 10px; }

.blackboard__square-title {
  display: block;
  text-align: center;
  margin: .5rem 0 1.5rem; }

.blackboard__square .wine-text-small {
  display: block;
  text-align: center;
  font-size: small; }

.blackboard__square .wine-text-small__smaller {
  font-size: x-small; }

.blackboard .dott-border {
  margin: 2rem 0 0;
  padding: 2.5rem 0 0;
  background: url(../images/wine/dott-white.png) no-repeat center center;
  background-size: 740px;
  width: 100%;
  height: 20px;
  display: block; }

@media screen and (min-width: 768px) {
  .blackboard .dott-border {
    padding: 2.5rem 0;
    height: 30px; } }

.blackboard__question {
  color: #fff;
  border-bottom: 2px solid #fff;
  display: block;
  margin: 0;
  padding: 1.5rem 0 1.5rem 3.7rem;
  position: relative;
  vertical-align: middle; }

@media screen and (min-width: 768px) {
  .blackboard__question {
    display: inline-block; } }

.blackboard__question::before {
  content: "Q";
  color: #fff;
  font-weight: bold;
  font-size: 3.5rem;
  position: absolute;
  top: 45%;
  left: 0;
  display: inline-block;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%); }

.blackboard__answer {
  color: #fff;
  position: relative;
  display: block;
  margin: 0; }

.blackboard__answer::before {
  content: "A";
  color: #fff;
  font-weight: bold;
  font-size: 3.5rem;
  line-height: 1.5;
  display: block;
  padding: 0; }

.index-list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex; }

@media screen and (max-width: 767px) {
  .index-list {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column; } }

.index-list__item {
  width: 100%;
  padding: 0 20px 10px; }

@media screen and (min-width: 768px) {
  .index-list__item {
    width: 33.333333%;
    padding: 20px 10px; } }

.index-list__item:before {
  content: "";
  display: block;
  width: 60px;
  height: 60px;
  background: no-repeat center center;
  background-size: contain;
  margin: 0 auto; }

@media screen and (min-width: 768px) {
  .index-list__item:before {
    width: 100px;
    height: 100px; } }

.index-list__item:nth-child(1):before {
  background-image: url(../images/wine/1.png); }

.index-list__item:nth-child(2):before {
  background-image: url(../images/wine/2.png); }

.index-list__item:nth-child(3):before {
  background-image: url(../images/wine/3.png); }

.index-list__link {
  position: relative;
  display: block;
  color: #fff;
  text-align: center;
  background: url(../images/wine/ribbon.png) no-repeat center center;
  background-size: 100% 100%;
  padding: 30px 10px;
  font-size: 1.4rem; }

@media screen and (min-width: 768px) and (max-width: 1079px) {
  .index-list__link {
    font-size: 1.3rem; } }

@media screen and (min-width: 1080px) {
  .index-list__link {
    font-size: 1.5rem; } }

.h2 {
  width: 100%;
  background-image: -webkit-repeating-linear-gradient(135deg, #fff 0px, #FFF 5px, rgba(240, 228, 201, 0.8) 6px, rgba(240, 228, 201, 0.8) 8px);
  background-image: -o-repeating-linear-gradient(135deg, #fff 0px, #FFF 5px, rgba(240, 228, 201, 0.8) 6px, rgba(240, 228, 201, 0.8) 8px);
  background-image: repeating-linear-gradient(-45deg, #fff 0px, #FFF 5px, rgba(240, 228, 201, 0.8) 6px, rgba(240, 228, 201, 0.8) 8px);
  padding: 2rem;
  font-size: 1.8rem;
  line-height: 2.2rem;
  text-align: center;
  color: #AF85B4;
  font-weight: bold;
  margin: 4rem 0 3rem;
  text-shadow: 0 0 2px #fff; }

@media screen and (min-width: 768px) {
  .h2 {
    margin: 7rem 0 8rem;
    padding: 2rem;
    font-size: 2.1rem;
    line-height: 2rem; } }

.h2--salad {
  background-image: -webkit-repeating-linear-gradient(135deg, #fff 0px, #FFF 5px, #F3EF78 6px, #F3EF78 8px);
  background-image: -o-repeating-linear-gradient(135deg, #fff 0px, #FFF 5px, #F3EF78 6px, #F3EF78 8px);
  background-image: repeating-linear-gradient(-45deg, #fff 0px, #FFF 5px, #F3EF78 6px, #F3EF78 8px); }

.salad-area .h2--salad {
  margin: 1rem 0 2rem;
  padding: 1rem 2rem;
  font-size: 1.8rem;
  line-height: 2.2rem; }

@media screen and (min-width: 768px) {
  .salad-area .h2--salad {
    font-size: 2.1rem;
    line-height: 1.8rem;
    padding: 2rem; } }

.pan-image .h2 {
  margin: 1rem 0 2rem;
  padding: 1rem 2rem;
  line-height: 1.4; }

@media screen and (min-width: 768px) {
  .pan-image .h2 {
    margin: 7rem 0 0;
    padding: 1rem 2rem;
    font-size: 2rem;
    line-height: 1.8; } }

.ribbon1-area {
  margin: 2.8rem auto 2rem;
  text-align: center;
  width: 85%; }

@media screen and (min-width: 768px) {
  .ribbon1-area {
    margin: 2rem auto 2.8rem;
    width: 100%; } }

@media screen and (min-width: 1080px) {
  .ribbon1-area {
    margin: 2rem auto 5.5rem;
    width: 100%; } }

.ribbon1 {
  display: inline-block;
  position: relative;
  vertical-align: middle;
  text-align: center;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  z-index: 1; }

.ribbon1::before {
  /*左側のリボン端*/
  content: '';
  position: absolute;
  width: 10px;
  left: -25px;
  bottom: -10px;
  z-index: -2;
  border: 20px solid #c981a6;
  border-left-color: transparent;
  /*山形に切り抜き*/ }

@media screen and (min-width: 768px) {
  .ribbon1::before {
    top: 16px; } }

.ribbon1::after {
  /*右側のリボン端*/
  content: '';
  position: absolute;
  width: 10px;
  right: -25px;
  bottom: -10px;
  z-index: -2;
  border: 20px solid #c981a6;
  border-right-color: transparent;
  /*山形に切り抜き*/ }

@media screen and (min-width: 768px) {
  .ribbon1::after {
    top: 16px; } }

.ribbon1 h3 {
  display: inline-block;
  position: relative;
  margin: 0;
  padding: 10px 15px;
  line-height: 30px;
  font-size: 1.7rem;
  color: #FFF;
  background: #BA6B92;
  /*真ん中の背景色*/ }

@media screen and (min-width: 768px) {
  .ribbon1 h3 {
    padding: 0 70px;
    line-height: 45px;
    font-size: 2.1rem; } }

.ribbon1 h3::before {
  position: absolute;
  content: '';
  top: 100%;
  left: 0;
  border: none;
  border-bottom: solid 10px transparent;
  border-right: solid 15px #7c1b4b;
  /*左の折り返し部分*/ }

.ribbon1 h3::after {
  position: absolute;
  content: '';
  top: 100%;
  right: 0;
  border: none;
  border-bottom: solid 10px transparent;
  border-left: solid 15px #7c1b4b;
  /*右の折り返し部分*/ }

.ribbon1--salad::before {
  /*左側のリボン端*/
  border: 20px solid #FFFF00;
  border-left-color: transparent;
  /*山形に切り抜き*/
  top: 29px; }

@media screen and (min-width: 768px) {
  .ribbon1--salad::before {
    top: 44px; } }

@media screen and (min-width: 1080px) {
  .ribbon1--salad::before {
    top: 44px; } }

.ribbon1--salad::after {
  /*右側のリボン端*/
  border: 20px solid #FFFF00;
  border-right-color: transparent;
  /*山形に切り抜き*/
  top: 29px; }

@media screen and (min-width: 768px) {
  .ribbon1--salad::after {
    top: 44px; } }

@media screen and (min-width: 1080px) {
  .ribbon1--salad::after {
    top: 44px; } }

.ribbon1--salad h3 {
  background: #FFFF00;
  padding: .5rem 5rem 0;
  color: #333;
  /*真ん中の背景色*/ }

.ribbon1--salad h3::before {
  border-right: solid 15px #d4d42b;
  /*左の折り返し部分*/ }

.ribbon1--salad h3::after {
  border-left: solid 15px #d4d42b;
  /*右の折り返し部分*/ }

.food__image {
  background: url(../images/wine/cheese.jpg) no-repeat -145px -80px;
  background-size: cover;
  width: 100%;
  height: 560px;
  position: relative;
  margin: 0; }

@media screen and (min-width: 768px) and (max-width: 1079px) {
  .food__image {
    height: 510px; } }

@media screen and (min-width: 768px) {
  .food__image {
    margin: 2rem 0; } }

.food__image::after {
  content: "×";
  font-size: 22rem;
  color: #64A3D9;
  font-weight: 400;
  position: absolute;
  top: 50%;
  right: -68px;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  display: none; }

@media screen and (min-width: 768px) {
  .food__image::after {
    display: block; } }

.food__image--left {
  background: url(../images/wine/namahamu.jpg) no-repeat -145px -13px;
  background-size: 160%; }

.food__image--left::after {
  left: -68px; }

.food__image--recipe {
  background: url(../images/wine/saito_ryouri.jpg) no-repeat -64px 38px;
  background-size: 148%; }

@media screen and (min-width: 768px) {
  .food__image--recipe {
    background: url(../images/wine/saito_ryouri.jpg) no-repeat -64px 38px;
    background-size: 158%; } }

.food__image--recipe::after {
  display: none; }

.food__name {
  display: inline-block;
  border: 2px solid #64A3D9;
  padding: .7rem 1.5rem;
  text-align: center;
  color: #64A3D9;
  font-weight: bold;
  margin: auto;
  max-width: 100%;
  height: auto;
  background-color: #ffffff;
  background-image: -webkit-radial-gradient(rgba(153, 153, 153, 0.16) 18%, transparent 21%), -webkit-radial-gradient(rgba(153, 153, 153, 0.16) 18%, transparent 21%);
  background-image: -o-radial-gradient(rgba(153, 153, 153, 0.16) 18%, transparent 21%), -o-radial-gradient(rgba(153, 153, 153, 0.16) 18%, transparent 21%);
  background-image: radial-gradient(rgba(153, 153, 153, 0.16) 18%, transparent 21%), radial-gradient(rgba(153, 153, 153, 0.16) 18%, transparent 21%);
  background-position: 0 0, 15px 15px;
  background-size: 25px 25px;
  -webkit-transform: translateY(-20%);
  -ms-transform: translateY(-20%);
  transform: translateY(-20%); }

@media screen and (min-width: 768px) {
  .food__name {
    width: 65%; } }

.food__name--recomend,
.food__name--winebottle,
.food__name--namaham {
  position: relative; }

@media screen and (max-width: 767px) {
  .food__name--recomend,
  .food__name--winebottle,
  .food__name--namaham {
    display: block;
    margin: 10rem auto 0; } }

@media screen and (min-width: 768px) {
  .food__name--recomend,
  .food__name--winebottle,
  .food__name--namaham {
    margin: 10rem 6rem 0 7rem; } }

.food__name--recomend::before,
.food__name--winebottle::before,
.food__name--namaham::before {
  content: "荻野先生推荐";
  position: absolute;
  top: -35px;
  left: 90px; }

@media screen and (min-width: 768px) and (max-width: 1079px) {
  .food__name--recomend::before,
  .food__name--winebottle::before,
  .food__name--namaham::before {
    left: 0; } }

@media screen and (min-width: 1080px) {
  .food__name--recomend::before,
  .food__name--winebottle::before,
  .food__name--namaham::before {
    top: -35px;
    left: 20px; } }

.food__name--recomend::after,
.food__name--winebottle::after,
.food__name--namaham::after {
  content: "";
  background: url(../images/wine/ogino_face.png) no-repeat center center;
  background-size: contain;
  position: absolute;
  top: -62px;
  right: 55px;
  width: 66px;
  height: 60px; }

@media screen and (min-width: 768px) and (max-width: 1079px) {
  .food__name--recomend::after,
  .food__name--winebottle::after,
  .food__name--namaham::after {
    right: 0; } }

@media screen and (min-width: 1080px) {
  .food__name--recomend::after,
  .food__name--winebottle::after,
  .food__name--namaham::after {
    right: 0; } }

.food__name--namaham::before {
  position: absolute;
  top: -35px;
  left: 90px; }

@media screen and (min-width: 768px) and (max-width: 1079px) {
  .food__name--namaham::before {
    left: 0; } }

@media screen and (min-width: 1080px) {
  .food__name--namaham::before {
    top: -35px;
    left: 23px; } }

.food__name--winebottle {
  margin: 10rem 0 0;
  width: 100%; }

@media screen and (min-width: 768px) and (max-width: 1079px) {
  .food__name--winebottle {
    margin: 10rem 0 0;
    width: 100%;
    min-height: 106px; } }

@media screen and (min-width: 1080px) {
  .food__name--winebottle {
    margin: 10rem 1rem 0;
    width: 100%; } }

.food__bottom {
  background: #64A3D9;
  padding: 2rem;
  color: #fff;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%; }

.food__bottom::after {
  content: "Bienvenue";
  background: #64A3D9;
  padding: 2rem 2rem 0;
  color: #fff;
  border-radius: 50% 50% 0 0;
  display: block;
  text-align: center;
  width: 60%;
  height: 100px;
  font-weight: bold;
  position: absolute;
  top: 6px;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%); }

.food__bottom-title {
  display: block;
  text-align: center;
  position: relative;
  z-index: 1;
  font-weight: bold;
  font-size: 1.8rem;
  line-height: 1.5;
  margin: 0 0 -.5rem; }

.food__title {
  font-size: 1.9rem;
  color: #64A3D9;
  display: block; }

@media screen and (min-width: 768px) and (max-width: 1079px) {
  .food__title {
    font-size: 1.7rem; } }

@media screen and (min-width: 1080px) {
  .food__title {
    font-size: 2.1rem; } }

.food__content {
  font-size: 1.4rem;
  line-height: 1.6;
  position: relative; }

.food__content::before {
  content: "";
  background: url(../images/wine/wine-glass.png) no-repeat center center;
  background-size: contain;
  width: 60px;
  height: 135px;
  display: block;
  position: absolute;
  bottom: 50px;
  left: 25px; }

@media screen and (min-width: 768px) {
  .food__content::before {
    bottom: -160px;
    left: 43px; } }

@media screen and (min-width: 1080px) {
  .food__content::before {
    bottom: -220px;
    left: 93px; } }

.food__content--wideglass::before {
  background: url(../images/wine/wine-glass-wide.png) no-repeat center center;
  background-size: contain;
  width: 60px;
  height: 135px;
  left: 255px;
  bottom: 92px; }

@media screen and (min-width: 768px) {
  .food__content--wideglass::before {
    width: 67px;
    height: 140px;
    left: 211px;
    bottom: -140px; } }

@media screen and (min-width: 1080px) {
  .food__content--wideglass::before {
    width: 67px;
    height: 140px;
    left: 211px;
    bottom: -180px; } }

.food__content--winebottle::before {
  background: none; }

.food__content p {
  line-height: 1.6; }

.food__content--recipe::before {
  content: none; }

.food__shop {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: end;
  -ms-flex-align: end;
  align-items: flex-end; }

.food__shop-description {
  display: block;
  width: 100%;
  font-size: 1.2rem;
  line-height: 1.5;
  margin: 0 1rem 0 0; }

.food__shop-image {
  display: block;
  width: 90%; }

.food__shop-image img {
  width: 100%;
  height: auto; }

.food__shop-button {
  background: #fff;
  color: #64A3D9;
  padding: .5rem 1rem;
  display: block;
  text-align: center;
  margin: 1rem 0 0;
  font-size: 1.3rem;
  font-weight: 600; }

.food__wine-img {
  -webkit-transform: rotate(-15deg);
  -ms-transform: rotate(-15deg);
  transform: rotate(-15deg);
  margin: 0 auto;
  display: block; }

.food__wine-txt {
  width: 100%;
  min-height: 0;
  padding: 1.5rem 2rem;
  background-image: -webkit-repeating-linear-gradient(135deg, #fff 0px, #fff 1px, #ededed 3px, #ededed 9px);
  background-image: -o-repeating-linear-gradient(135deg, #fff 0px, #fff 1px, #ededed 3px, #ededed 9px);
  background-image: repeating-linear-gradient(-45deg, #fff 0px, #fff 1px, #ededed 3px, #ededed 9px);
  display: block; }

@media screen and (min-width: 768px) {
  .food__wine-txt {
    min-height: 90px; } }

@media screen and (min-width: 768px) {
  .food__winebtl {
    position: absolute;
    top: 240px;
    right: 0; } }

.food__winebtl img {
  max-width: 42%;
  height: auto;
  margin: 0 auto;
  display: block; }

@media screen and (min-width: 768px) {
  .food__winebtl img {
    max-width: 100%;
    margin: 0; } }

.food__winebtl--ham {
  top: 305px;
  left: 0; }

.food__winebtl--ham img {
  max-width: 42%;
  height: auto; }

@media screen and (min-width: 768px) and (max-width: 1079px) {
  .food__winebtl--ham {
    top: 330px; } }

.food__recipe {
  background: url(../images/wine/096-01.jpg) no-repeat center center;
  background-size: cover;
  padding: 1.5rem 2rem;
  color: #AF85B4;
  margin: 0 0 3rem; }

.food__recipe-ttl {
  font-weight: bold;
  font-size: 1.4rem;
  display: block;
  margin: 0 0 1rem; }

.food__recipe ul {
  list-style: none;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap; }

.food__recipe li {
  width: 50%;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  position: relative;
  font-size: 1.2rem;
  padding: 0 0 0 1rem; }

.food__recipe li:not(:nth-child(even)) {
  padding: 0 2rem 0 1rem; }

.food__recipe li::before {
  content: "";
  background: #AF85B4;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  display: block;
  vertical-align: middle;
  position: absolute;
  top: 11px;
  left: 0;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%); }

.food__fukidashi {
  display: inline-block;
  background: #AF85B4;
  border-radius: 50%;
  font-size: 1.3rem;
  padding: 1.2rem 1.5rem;
  text-align: center;
  color: #fff;
  font-weight: bold;
  margin: auto;
  max-width: 100%;
  height: auto;
  -webkit-transform: translateY(25%);
  -ms-transform: translateY(25%);
  transform: translateY(25%);
  position: relative; }

@media screen and (min-width: 768px) {
  .food__fukidashi {
    -webkit-transform: translateY(-5%);
    -ms-transform: translateY(-5%);
    transform: translateY(-5%); } }

.food__fukidashi::after {
  content: "";
  display: block;
  width: 0;
  height: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-top: 10px solid #AF85B4;
  position: absolute;
  bottom: -8px;
  left: 50%;
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  transform: translateX(-50%); }

.bread {
  margin-top: 1rem; }

@media screen and (min-width: 768px) {
  .bread {
    margin-top: 5rem; } }

.bread__image {
  width: 100%;
  height: 245px;
  position: relative; }

@media screen and (min-width: 768px) {
  .bread__image {
    height: 225px; } }

@media screen and (min-width: 1080px) {
  .bread__image {
    height: 270px; } }

.bread__image::before {
  content: "";
  background: url(../images/wine/mugiko2.png) no-repeat center center;
  background-size: contain;
  width: 75px;
  height: 70px;
  display: block;
  position: absolute;
  top: 74%;
  left: 11px;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  z-index: 1; }

.bread__image::after {
  content: "";
  background: url(../images/wine/bread-fukidashi.svg) no-repeat center center;
  width: 105px;
  height: 105px;
  display: block;
  position: absolute;
  top: 75%;
  left: -3px;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%); }

.bread__image--second {
  position: relative;
  overflow: hidden; }

.bread__image--second::before {
  background: url(../images/wine/bakubaku2.png) no-repeat center center;
  background-size: contain;
  width: 65px;
  height: 65px;
  left: 15px; }

.bread__image--second img {
  position: absolute;
  top: 0;
  left: -85px;
  max-width: 130%;
  height: auto; }

.bread__image--third {
  position: relative; }

.bread__image--third::before {
  background: url(../images/wine/liondor2.png) no-repeat center center;
  background-size: contain;
  width: 65px;
  height: 65px;
  left: 15px; }

.bread__image--fourth {
  position: relative;
  overflow: hidden; }

.bread__image--fourth::before {
  background: url(../images/wine/crown2.png) no-repeat center center;
  background-size: contain;
  width: 65px;
  height: 65px;
  left: 15px; }

.bread__image--fourth img {
  position: absolute;
  top: -41px;
  left: -29px;
  max-width: 116%;
  height: auto; }

.bread__roof {
  background: #64A3D9;
  color: #fff;
  font-weight: 400;
  padding: 2rem 3rem 1rem;
  position: relative; }

@media screen and (min-width: 768px) {
  .bread__roof {
    padding: 2.5rem 1.3rem 1.6rem; } }

@media screen and (min-width: 1080px) {
  .bread__roof {
    padding: 3rem 3rem 1.6rem; } }

.bread__roof::after {
  content: "";
  background: url(../images/wine/bread-loof.svg) no-repeat center center;
  background-size: 103%;
  width: 100%;
  height: 50px;
  display: block;
  position: absolute;
  bottom: -35px;
  left: 0;
  z-index: 1; }

.bread__roof-txt {
  display: block;
  font-size: 1.7rem;
  text-align: center; }

@media screen and (min-width: 768px) {
  .bread__roof-txt {
    font-size: 1.8rem; } }

@media screen and (min-width: 1080px) {
  .bread__roof-txt {
    font-size: 1.9rem; } }

.bread__name {
  display: block;
  border: 2px solid #64A3D9;
  padding: .7rem 1.5rem;
  text-align: center;
  color: #64A3D9;
  font-weight: bold;
  margin: 0 auto 1rem;
  width: 90%;
  height: auto;
  background-color: #ffffff;
  background-image: -webkit-radial-gradient(rgba(153, 153, 153, 0.16) 18%, transparent 21%), -webkit-radial-gradient(rgba(153, 153, 153, 0.16) 18%, transparent 21%);
  background-image: -o-radial-gradient(rgba(153, 153, 153, 0.16) 18%, transparent 21%), -o-radial-gradient(rgba(153, 153, 153, 0.16) 18%, transparent 21%);
  background-image: radial-gradient(rgba(153, 153, 153, 0.16) 18%, transparent 21%), radial-gradient(rgba(153, 153, 153, 0.16) 18%, transparent 21%);
  background-position: 0 0, 15px 15px;
  background-size: 25px 25px; }

.bread__name--recomend,
.bread__name--winebottle {
  margin: 10rem 6rem 0;
  position: relative; }

.bread__name--recomend::before,
.bread__name--winebottle::before {
  content: "荻野さんおすすめ";
  position: absolute;
  top: -35px;
  left: 30px; }

@media screen and (min-width: 768px) and (max-width: 1079px) {
  .bread__name--recomend::before,
  .bread__name--winebottle::before {
    left: 0; } }

@media screen and (min-width: 1080px) {
  .bread__name--recomend::before,
  .bread__name--winebottle::before {
    top: -35px;
    left: 40px; } }

.bread__name--recomend::after,
.bread__name--winebottle::after {
  content: "";
  background: url(../images/wine/ogino_face.png) no-repeat center center;
  background-size: contain;
  position: absolute;
  top: -62px;
  right: -18px;
  width: 150px;
  height: 60px; }

@media screen and (min-width: 768px) and (max-width: 1079px) {
  .bread__name--recomend::after,
  .bread__name--winebottle::after {
    right: -63px; } }

.bread__name--winebottle {
  margin: 10rem 1rem 0; }

.bread__bottom {
  background: #64A3D9;
  padding: 2rem;
  color: #fff;
  position: relative; }

@media screen and (min-width: 768px) {
  .bread__bottom {
    background: #64A3D9;
    padding: 2rem;
    color: #fff;
    position: relative;
    min-height: 208px; } }

.bread__bottom::after {
  content: "Bienvenue";
  background: #64A3D9;
  padding: 2rem 2rem 0;
  color: #fff;
  border-radius: 50% 50% 0 0;
  display: block;
  text-align: center;
  width: 60%;
  height: 100px;
  font-weight: bold;
  position: absolute;
  top: 6px;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%); }

.bread__bottom-title {
  display: block;
  text-align: center;
  position: relative;
  z-index: 1;
  font-weight: bold;
  font-size: 1.8rem;
  line-height: 1.5;
  margin: 0 0 -.5rem; }

.bread__title {
  font-size: 2.1rem;
  color: #64A3D9;
  display: block; }

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

.bread__content::before {
  content: "";
  background: url(../images/wine/wine-glass.png) no-repeat center center;
  background-size: contain;
  width: 60px;
  height: 290px;
  display: block;
  position: absolute;
  bottom: -260px;
  left: 55px; }

.bread__content--wideglass::before {
  background: url(../images/wine/wine-glass-wide.png) no-repeat center center;
  background-size: contain;
  width: 60px;
  height: 290px;
  left: 245px; }

.bread__content--winebottle::before {
  background: none; }

.bread__content p {
  line-height: 1.6; }

.bread__shop {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
  -ms-flex-align: start;
  align-items: flex-start; }

.bread__shop-description {
  display: block;
  width: 100%;
  font-size: 1.2rem;
  line-height: 1.5;
  margin: 0 1rem 0 0; }

.bread__shop-image {
  display: block;
  width: 90%; }

.bread__shop-image img {
  width: 100%;
  height: auto; }

.bread__shop-button {
  background: #fff;
  color: #64A3D9;
  padding: .5rem 1rem;
  display: block;
  text-align: center;
  margin: 2rem 0 0;
  font-size: 1.3rem;
  font-weight: 600; }

.bread__wine-img {
  -webkit-transform: rotate(-15deg);
  -ms-transform: rotate(-15deg);
  transform: rotate(-15deg);
  margin: 0 auto;
  display: block; }

.bread__wine-txt {
  width: 100%;
  min-height: 90px;
  padding: 1.5rem 2rem;
  background-image: -webkit-repeating-linear-gradient(135deg, #fff 0px, #fff 1px, #ededed 3px, #ededed 9px);
  background-image: -o-repeating-linear-gradient(135deg, #fff 0px, #fff 1px, #ededed 3px, #ededed 9px);
  background-image: repeating-linear-gradient(-45deg, #fff 0px, #fff 1px, #ededed 3px, #ededed 9px);
  display: block; }

.pan-image {
  background: url(../images/wine/pan_image.jpg) no-repeat -35px 72px;
  background-size: 110%;
  height: 295px;
  max-width: 100%;
  display: block;
  position: relative;
  padding: 2rem 2rem 5rem; }

@media screen and (min-width: 768px) {
  .pan-image {
    background: url(../images/wine/pan_image.jpg) no-repeat center center;
    background-size: contain;
    height: 570px; } }

@media screen and (min-width: 1080px) {
  .pan-image {
    background: url(../images/wine/pan_image.jpg) no-repeat -100px 65px;
    background-size: cover;
    height: 575px; } }

.pan-image__name {
  color: #333;
  font-size: 1.1rem;
  -webkit-writing-mode: vertical-rl;
  writing-mode: vertical-rl;
  -ms-writing-mode: tb-rl;
  display: block;
  position: absolute; }

.pan-image__name:nth-child(1) {
  bottom: 10px;
  left: 75px; }

@media screen and (min-width: 768px) {
  .pan-image__name:nth-child(1) {
    bottom: 130px;
    left: 180px; } }

@media screen and (min-width: 1080px) {
  .pan-image__name:nth-child(1) {
    bottom: 40px;
    left: 150px; } }

.pan-image__name:nth-child(3) {
  bottom: 10px;
  left: 153px; }

@media screen and (min-width: 768px) {
  .pan-image__name:nth-child(3) {
    bottom: 130px;
    left: 325px; } }

@media screen and (min-width: 1080px) {
  .pan-image__name:nth-child(3) {
    bottom: 40px;
    left: 345px; } }

.pan-image__name:nth-child(5) {
  bottom: 10px;
  left: 235px; }

@media screen and (min-width: 768px) {
  .pan-image__name:nth-child(5) {
    bottom: 130px;
    left: 470px; } }

@media screen and (min-width: 1080px) {
  .pan-image__name:nth-child(5) {
    bottom: 40px;
    left: 545px; } }

.pan-image__name:nth-child(7) {
  bottom: 10px;
  left: 332px; }

@media screen and (min-width: 768px) {
  .pan-image__name:nth-child(7) {
    bottom: 130px;
    left: 624px; } }

@media screen and (min-width: 1080px) {
  .pan-image__name:nth-child(7) {
    bottom: 40px;
    left: 760px; } }

.salad__box {
  position: relative;
  background: #fff;
  display: block;
  min-height: 360px; }

@media screen and (min-width: 768px) {
  .salad__box {
    min-height: 490px; } }

@media screen and (min-width: 1080px) {
  .salad__box {
    min-height: 450px; } }

.salad__image {
  background: url(../images/wine/saito_recipe1.jpg) no-repeat -10px -43px;
  background-size: 145%;
  width: 100%;
  height: 180px;
  display: block; }

@media screen and (min-width: 768px) and (max-width: 1079px) {
  .salad__image {
    height: 137px; } }

.salad__image--recipe2 {
  background: url(../images/wine/saito_recipe2.jpg) no-repeat -4px center;
  background-size: 128%; }

.salad__image--recipe3 {
  background: url(../images/wine/saito_recipe3.jpg) no-repeat -43px -80px;
  background-size: 147%; }

@media screen and (min-width: 768px) {
  .salad__image--recipe3 {
    background: url(../images/wine/saito_recipe3.jpg) no-repeat -43px -30px;
    background-size: 147%; } }

.salad__txt {
  display: block;
  padding: 19rem 2rem 1rem;
  font-size: 1.4rem;
  color: #AF85B4; }

@media screen and (min-width: 768px) and (max-width: 1079px) {
  .salad__txt {
    padding: 16rem 1.5rem 1rem; } }

.salad-area {
  background: #F3EF78;
  padding: 1rem;
  margin: 5rem 0; }

@media screen and (min-width: 768px) {
  .salad-area {
    padding: 4rem;
    margin: 8rem 0; } }

.salad-area__head {
  padding: .5rem 0 2rem;
  position: relative; }

@media screen and (min-width: 768px) {
  .salad-area__head {
    padding: .5rem 0 0;
    position: relative; } }

.salad-area__head::before {
  content: "";
  background: url(../images/wine/saito_hito.png) no-repeat center top;
  background-size: cover;
  width: 120px;
  height: 170px;
  display: block;
  position: absolute;
  top: -27px;
  left: 10px; }

@media screen and (min-width: 768px) {
  .salad-area__head::before {
    height: 230px;
    top: -27px; } }

@media screen and (min-width: 1080px) {
  .salad-area__head::before {
    height: 230px;
    top: -50px; } }

.salad-area__head-ttl {
  background: #FFFF00;
  display: block;
  margin: 0 auto;
  width: 100%;
  text-align: center;
  font-size: 2.2rem; }

@media screen and (min-width: 768px) {
  .salad-area__head-ttl {
    width: 300px; } }

.salad-area__head-ttl::before {
  content: "与冰镇白葡萄酒最搭！";
  font-size: 1.1rem;
  line-height: 2;
  border-bottom: 2px solid #333;
  display: block;
  width: 100%;
  height: auto;
  color: #333; }

.salad-area .row:last-child {
  margin-top: 1rem; }

@media screen and (min-width: 768px) {
  .salad-area .row:last-child {
    margin-top: 3rem; } }

@media screen and (max-width: 767px) {
  .restaurant-1 {
    -webkit-box-ordinal-group: 1;
    -ms-flex-order: 0;
    order: 0; } }

@media screen and (max-width: 767px) {
  .restaurant-2 {
    -webkit-box-ordinal-group: 2;
    -ms-flex-order: 1;
    order: 1; } }

.restaurant__image {
  display: block;
  position: relative; }

.restaurant__image::before {
  content: "";
  background: url(../images/wine/mask-waku.png) no-repeat center center;
  background-size: cover;
  width: 100%;
  height: 100%;
  display: block;
  position: absolute;
  left: 0;
  z-index: 1; }

.restaurant__image img {
  max-width: 100%;
  height: auto; }

.restaurant-ttl {
  font-size: 2rem;
  display: block;
  font-weight: bold;
  margin: 0 0 0 -1em; }

@media screen and (min-width: 768px) {
  .restaurant-ttl {
    margin: 0 0 0 -.5em;
    font-size: 2.1rem; } }

@media screen and (min-width: 1080px) {
  .restaurant-ttl {
    font-size: 2.6rem; } }

.restaurant-ttl::before {
  content: "";
  background: url(../images/wine/wine_illu.png) no-repeat center center;
  background-size: contain;
  width: 35px;
  height: 45px;
  display: inline-block;
  -webkit-transform: rotate(-20deg);
  -ms-transform: rotate(-20deg);
  transform: rotate(-20deg);
  margin: 0 1rem 0 2rem;
  vertical-align: text-bottom; }

@media screen and (min-width: 768px) {
  .restaurant-ttl::before {
    margin: 0 1rem 0 0; } }

.restaurant-ttl rt {
  font-size: 1.1rem; }

.restaurant-ttl--senju {
  margin: 0; }

.restaurant-ttl--senju::before {
  margin: 0 1rem 0 0; }

@media screen and (min-width: 768px) {
  .restaurant-ttl--senju::before {
    margin: 0 1.1rem 0 0; } }

@media screen and (min-width: 1080px) {
  .restaurant-ttl--senju::before {
    margin: 0 1.5rem 0 0; } }

.restaurant-ttl--senju rt {
  font-size: 1.1rem;
  letter-spacing: .6em;
  text-indent: 8px; }

@media screen and (min-width: 768px) {
  .restaurant-ttl--senju rt {
    text-indent: 12px; } }

.restaurant-ttl--senju ruby {
  letter-spacing: -1.2em;
  margin: 0 0 0 -.5em; }

@media screen and (min-width: 768px) {
  .restaurant-ttl--senju ruby {
    letter-spacing: -.5em; } }

.restaurant-subttl {
  display: block;
  font-size: 1.9rem;
  color: #64A3D9;
  margin: 1.5rem 0;
  letter-spacing: .1em; }

@media screen and (min-width: 1080px) {
  .restaurant-subttl {
    font-size: 2.1rem; } }

.restaurant-txt {
  display: block;
  font-size: 1.4rem; }

.restaurant-area {
  margin: 3.5rem 0; }

@media screen and (min-width: 768px) {
  .restaurant-area {
    margin: 7rem 0; } }

.restaurant__shop-button {
  background: #64A3D9;
  color: #fff;
  padding: .5rem 1rem;
  display: block;
  width: 150px;
  text-align: center;
  margin: 1.5rem auto 0;
  font-size: 1.3rem;
  font-weight: 600; }

.oginosan {
  position: relative;
  display: block;
  z-index: 1; }

@media screen and (max-width: 767px) {
  .oginosan {
    text-align: center; } }

.oginosan img {
  position: relative;
  z-index: 1;
  -webkit-transform: translateX(20px) rotate(5deg);
  -ms-transform: translateX(20px) rotate(5deg);
  transform: translateX(20px) rotate(5deg); }

.oginosan::after {
  content: "";
  background: url(../images/wine/oginosan-back.png) no-repeat center center;
  background-size: contain;
  width: 100%;
  height: 180px;
  display: block;
  position: absolute;
  bottom: 0;
  right: 0; }

@media screen and (min-width: 768px) {
  .oginosan::after {
    background-size: cover;
    width: 100%;
    height: 150px; } }