@charset "UTF-8";
/******************************
* page
******************************/
.page-body {
  min-width: 1400px;
  background-color: #fff; }
  @media screen and (max-width: 767px) {
    .page-body {
      min-width: initial;
      width: 100%; } }

.page {
  width: 75%;
  position: relative;
  left: 25%;
  background-color: rgba(72, 60, 56, 0.05); }
  @media screen and (max-width: 767px) {
    .page {
      width: 100%;
      left: 0; } }
  .page__each-header {
    margin-bottom: 4rem;
    text-align: center; }
  .page__header {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    height: 23vw;
    max-height: 600px;
    position: relative;
    margin-bottom: -3rem; }
    @media screen and (max-width: 767px) {
      .page__header {
        margin-bottom: 0rem; } }
    .page__header::before {
      position: fixed;
      display: block;
      content: "";
      width: 300px;
      height: 300px;
      top: -116px;
      left: -190px;
      z-index: 1;
      -webkit-transform: rotate(110deg);
      -ms-transform: rotate(110deg);
      transform: rotate(110deg);
      background: url("../images/common/light-green.svg") center/auto 100% no-repeat; }
      @media screen and (max-width: 767px) {
        .page__header::before {
          position: absolute;
          width: 200px;
          height: 200px;
          left: -20px;
          top: -45px;
          z-index: -1; } }
    @media screen and (max-width: 767px) {
      .page__header {
        height: 55vw; } }
    .page__header h1 {
      font-size: 40px;
      font-size: 2.5em;
      font-family: 'Noto Serif JP',
 serif;
      font-weight: 400;
      line-height: 1.3;
      color: #fff;
      text-align: center;
      position: absolute;
      width: 100%;
      top: 50%;
      -webkit-transform: translate(0, -50%);
      -ms-transform: translate(0, -50%);
      transform: translate(0, -50%);
      text-shadow: #000 1px 1px 2px; }
      @media screen and (max-width: 767px) {
        .page__header h1 {
          font-size: 32px;
          font-size: 2em; } }
    .page__header--kinds {
      background-image: url("../images/kinds/kinds-header.jpg"); }
    .page__header--about {
      background-image: url("../images/about/about-header.jpg"); }
    .page__header--voice {
      background-image: url("../images/voice/voice-header.jpg"); }
    .page__header--strength {
      background-image: url("../images/strength/strength-header.jpg"); }
    .page__header--recipe {
      background-image: url("../images/recipe/recipe-header.jpg"); }
    .page__header--gallery {
      background-image: url("../images/gallery/gallery-header.jpg"); }

.mid-normal img {
  width: 100%;
  vertical-align: bottom; }

/******************************
* about
******************************/
.profile__body {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center; }
  @media screen and (max-width: 767px) {
    .profile__body {
      -webkit-box-align: initial;
      -ms-flex-align: initial;
      align-items: initial; } }
  .profile__body > * {
    -webkit-box-flex: 0;
    -ms-flex-positive: 0;
    flex-grow: 0; }
  .profile__body figure {
    -ms-flex-preferred-size: 25%;
    flex-basis: 25%; }
    .profile__body figure img {
      width: 100%; }

.profile__text {
  -ms-flex-preferred-size: 70%;
  flex-basis: 70%; }

.about__list {
  border-top: 1px dashed rgba(72, 60, 56, 0.2); }
  .about__list dt {
    float: left;
    clear: both;
    font-weight: 700;
    padding: 0.5rem 0; }
  .about__list dd {
    padding: 0.5rem 0 0.5rem 8em;
    border-bottom: 1px dashed rgba(72, 60, 56, 0.2); }

.about__body {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center; }
  @media screen and (max-width: 767px) {
    .about__body {
      display: block; } }
  .about__body dl {
    -webkit-box-flex: 0;
    -ms-flex-positive: 0;
    flex-grow: 0;
    -ms-flex-preferred-size: 40%;
    flex-basis: 40%; }
  .about__body figure {
    -webkit-box-flex: 0;
    -ms-flex-positive: 0;
    flex-grow: 0;
    -ms-flex-preferred-size: 50%;
    flex-basis: 50%; }
    @media screen and (max-width: 767px) {
      .about__body figure {
        margin-top: 1rem; } }
    .about__body figure img {
      width: 100%; }

.map iframe {
  width: 100%; }

/******************************
* kinds
******************************/
.kinds__item {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  margin-bottom: 4rem; }
  @media screen and (max-width: 767px) {
    .kinds__item {
      -ms-flex-wrap: wrap;
      flex-wrap: wrap;
      margin-bottom: 4rem; } }
  .kinds__item figure {
    -webkit-box-flex: 0;
    -ms-flex-positive: 0;
    flex-grow: 0;
    -ms-flex-preferred-size: 40%;
    flex-basis: 40%; }
    @media screen and (max-width: 767px) {
      .kinds__item figure {
        -ms-flex-preferred-size: 100%;
        flex-basis: 100%;
        margin-bottom: 1.5rem; } }
    .kinds__item figure img {
      width: 100%;
      vertical-align: bottom; }
  .kinds__item dl {
    -webkit-box-flex: 0;
    -ms-flex-positive: 0;
    flex-grow: 0;
    -ms-flex-preferred-size: 55%;
    flex-basis: 55%; }
    @media screen and (max-width: 767px) {
      .kinds__item dl {
        -ms-flex-preferred-size: 100%;
        flex-basis: 100%; } }
    .kinds__item dl dt {
      font-size: 40px;
      font-size: 2.5em;
      font-family: 'Noto Serif JP',
 serif;
      font-weight: 400;
      line-height: 1.3;
      margin-bottom: 1rem; }
      @media screen and (max-width: 767px) {
        .kinds__item dl dt {
          font-size: calc(20px + 1.5vw); } }

.kinds__prize {
  width: 40%;
  display: inline-block;
  margin-top: 1rem; }

/******************************
* strength
******************************/
.strength__list dt strong {
  font-size: 1.3em; }

.strength__list dd {
  margin-bottom: 4rem; }

.strength__flex {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center; }
  @media screen and (max-width: 767px) {
    .strength__flex {
      display: block; } }
  .strength__flex figure {
    -webkit-box-flex: 0;
    -ms-flex-positive: 0;
    flex-grow: 0;
    -ms-flex-preferred-size: 30%;
    flex-basis: 30%; }
    .strength__flex figure img {
      width: 100%; }

.strength__flex-text {
  -webkit-box-flex: 0;
  -ms-flex-positive: 0;
  flex-grow: 0;
  -ms-flex-preferred-size: 65%;
  flex-basis: 65%; }

/******************************
* voice
******************************/
.voice__body {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap; }
  @media screen and (max-width: 767px) {
    .voice__body {
      display: block; } }
  .voice__body dl {
    -webkit-box-flex: 0;
    -ms-flex-positive: 0;
    flex-grow: 0;
    -ms-flex-preferred-size: 48%;
    flex-basis: 48%;
    margin-bottom: 3rem;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    padding: 2rem;
    position: relative;
    background: #fff; }
    @media screen and (max-width: 767px) {
      .voice__body dl {
        width: 100%; } }
    .voice__body dl::before {
      content: "";
      position: absolute;
      bottom: -25px;
      left: 10%;
      margin-left: -15px;
      border: 14px solid transparent;
      border-top: 11px solid #FFF;
      z-index: 2; }
    .voice__body dl::after {
      content: "";
      position: absolute;
      bottom: -30px;
      left: 10%;
      margin-left: -17px;
      border: 16px solid transparent;
      border-top: 14px solid #fff;
      z-index: 1; }
    .voice__body dl dt {
      font-weight: 700; }
    .voice__body dl dd {
      margin-top: 1rem;
      padding-top: 1rem;
      border-top: 1px dashed #ccc; }

.voice__anno {
  font-size: 18px;
  font-size: 1.1em;
  font-family: 'Hiragino Kaku Gothic Pro',
 'メイリオ',
 'Meiryo',
 'ＭＳ Ｐゴシック',
 Osaka,
 sans-serif;
  font-family: 'Noto Sans JP',
 sans-serif;
  text-align: center;
  margin: 2rem 0; }

/******************************
* gallery
******************************/
.gallery .std-btn {
  margin: 0; }

.gallery .insta__item {
  margin-bottom: 4rem; }

/******************************
* recipe
******************************/
#recipe-body.fix {
  height: 100vh;
  overflow: hidden; }

.recipe {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between; }
  @media screen and (max-width: 767px) {
    .recipe {
      display: block; } }
  .recipe article {
    -webkit-box-flex: 0;
    -ms-flex-positive: 0;
    flex-grow: 0;
    width: 32%;
    margin-bottom: 2%;
    background: #FFF;
    padding: 2rem;
    -webkit-box-sizing: border-box;
    box-sizing: border-box; }
    @media screen and (max-width: 767px) {
      .recipe article {
        width: 100%; } }
    .recipe article figure {
      margin-bottom: 1rem; }
      .recipe article figure img {
        width: 100%;
        vertical-align: bottom; }
  .recipe__header {
    cursor: pointer;
    -webkit-transition: opacity 0.5s ease;
    transition: opacity 0.5s ease; }
    .recipe__header h2 {
      font-size: 24px;
      font-size: 1.5em;
      border-bottom: 1px dashed rgba(72, 60, 56, 0.2);
      padding-bottom: 1rem; }
    .recipe__header > p {
      font-size: 14px; }
    .recipe__header:hover {
      opacity: 0.5;
      -webkit-transition: opacity 0.5s ease;
      transition: opacity 0.5s ease; }
    @media screen and (max-width: 767px) {
      .recipe__header h2 {
        font-size: 24px; } }
  .recipe__content {
    position: fixed;
    width: 75%;
    background: #fff;
    z-index: 11;
    top: 0;
    right: -75%;
    -webkit-transition: right 0.5s ease;
    transition: right 0.5s ease;
    height: 100vh;
    overflow: auto;
    -webkit-box-sizing: border-box;
    box-sizing: border-box; }
    .recipe__content.show {
      right: 0%; }
    @media screen and (max-width: 767px) {
      .recipe__content {
        width: 100%;
        right: -100%; } }
  .recipe__content-inner {
    width: 950px;
    margin: 3rem auto;
    padding: 5rem 5rem 5rem;
    background-color: rgba(72, 60, 56, 0.05);
    border-radius: 10px; }
    @media screen and (max-width: 767px) {
      .recipe__content-inner {
        width: 100%;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        padding: 70px 1rem;
        margin: 0; } }
    .recipe__content-inner h3 {
      font-size: 18px;
      font-size: 1.1em;
      margin-top: 3rem; }
  .recipe__close {
    border: none;
    background: none;
    margin-left: -4rem;
    margin-bottom: 3rem;
    -webkit-transition: opacity 0.5s ease;
    transition: opacity 0.5s ease;
    position: absolute;
    z-index: 15;
    top: 4rem; }
    .recipe__close:hover {
      opacity: 0.5;
      -webkit-transition: opacity 0.5s ease;
      transition: opacity 0.5s ease; }
    @media screen and (max-width: 767px) {
      .recipe__close {
        margin-left: -1rem;
        margin-bottom: 1rem;
        top: 1rem;
        position: fixed; } }
    .recipe__close img {
      width: 40px; }
  .recipe__ing-wrapper, .recipe__image {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between; }
    @media screen and (max-width: 767px) {
      .recipe__ing-wrapper, .recipe__image {
        display: block; } }
  .recipe__image {
    width: 100%;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center; }
    .recipe__image video,
    .recipe__image figure {
      -webkit-box-flex: 0;
      -ms-flex-positive: 0;
      flex-grow: 0;
      width: 40%; }
      @media screen and (max-width: 767px) {
        .recipe__image video,
        .recipe__image figure {
          width: 100%; } }
    .recipe__image div {
      -webkit-box-flex: 0;
      -ms-flex-positive: 0;
      flex-grow: 0;
      -ms-flex-preferred-size: 50%;
      flex-basis: 50%; }
      @media screen and (max-width: 767px) {
        .recipe__image div {
          font-size: 14px; } }
  .recipe__ing-wrapper {
    border-top: 1px dashed rgba(72, 60, 56, 0.5);
    margin-top: 0.5rem;
    padding-top: 0.5rem; }
    .recipe__ing-wrapper dl {
      font-size: 16px; }
      @media screen and (max-width: 767px) {
        .recipe__ing-wrapper dl {
          font-size: 14px;
          margin-bottom: 2rem; } }
      .recipe__ing-wrapper dl dt {
        float: left;
        width: 10em;
        padding: 0.3rem 0; }
      .recipe__ing-wrapper dl dd {
        padding-left: 10em;
        border-bottom: 1px dashed rgba(72, 60, 56, 0.1);
        padding: 0.3rem 0; }
  .recipe__ing-item {
    -webkit-box-flex: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
    -ms-flex-preferred-size: 45%;
    flex-basis: 45%;
    padding: 0 2%;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    margin: 0 0 2rem 0; }
    .recipe__ing-item p {
      font-size: 16px; }
    @media screen and (max-width: 767px) {
      .recipe__ing-item {
        width: 100%;
        margin-bottom: 2rem; } }
  .recipe__howto ol,
  .recipe__howto ul {
    border-top: 1px dashed rgba(72, 60, 56, 0.5);
    padding-left: calc(1.5em + 2%);
    padding-right: calc(1.5em + 2%);
    margin-top: 0.5rem;
    padding-top: 0.5rem; }
    .recipe__howto ol li,
    .recipe__howto ul li {
      margin-bottom: 0.8rem; }
    .recipe__howto ol strong,
    .recipe__howto ul strong {
      display: block;
      font-size: 0.9em;
      color: #ae0721;
      font-weight: normal; }
  .recipe__points-body {
    border-top: 1px dashed rgba(72, 60, 56, 0.5);
    padding-left: 2%;
    padding-right: 2%;
    margin-top: 0.5rem;
    padding-top: 0.5rem; }
    .recipe__points-body p {
      margin-bottom: 0.5rem; }
  .recipe__rate {
    width: 100%;
    padding: 1rem 0.5rem 0.3rem;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    background: rgba(255, 255, 255, 0.9);
    margin: 0.5rem 0 1rem; }
    .recipe__rate--half {
      width: 49%; }
      @media screen and (max-width: 767px) {
        .recipe__rate--half {
          width: 100%; } }
    .recipe__rate img {
      width: 100%; }

/******************************
* video
******************************/
.video-page {
  width: 100%;
  height: 30vw;
  margin-bottom: 0;
  position: relative; }
  @media screen and (max-width: 767px) {
    .video-page {
      height: auto; } }
  .video-page video {
    width: 100%;
    vertical-align: bottom;
    position: absolute;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%); }
    @media screen and (max-width: 767px) {
      .video-page video {
        position: relative;
        top: 0;
        -webkit-transform: translateY(0%);
        -ms-transform: translateY(0%);
        transform: translateY(0%); } }