.mv {
  position: relative;
  width: 100%;
  margin: 0 auto 60px;
  background-color: #f5eac6;
  overflow: hidden;
  height: 640px; }
  @media screen and (max-width: 1420px) {
    .mv {
      height: 500px; } }
  @media screen and (max-width: 1200px) {
    .mv {
      height: 480px;
      margin: 0 auto 40px; } }
  @media screen and (max-width: 1000px) {
    .mv {
      height: 440px; } }
  @media screen and (max-width: 860px) {
    .mv {
      height: 420px; } }
  @media screen and (max-width: 768px) {
    .mv {
      height: 500px; } }
  @media screen and (max-width: 530px) {
    .mv {
      height: 350px; } }
  .mv .mv_mask {
    width: 100%;
    position: relative;
    height: 640px;
    background-image: url("/index/img/mv_mask.png");
    background-repeat: no-repeat;
    background-position: center center;
    background-size: auto 100%; }
    @media screen and (max-width: 1420px) {
      .mv .mv_mask {
        background-image: url("/index/img/mv_mask2.png");
        background-size: 100% 100%;
        background-position: center bottom; } }
    @media screen and (max-width: 1200px) {
      .mv .mv_mask {
        height: 480px; } }
    @media screen and (max-width: 1000px) {
      .mv .mv_mask {
        height: 440px; } }
    @media screen and (max-width: 860px) {
      .mv .mv_mask {
        height: 420px; } }
    @media screen and (max-width: 768px) {
      .mv .mv_mask {
        background-image: url("/index/img/mv_mask_sp.png");
        height: 500px;
        background-size: 100% auto;
        background-position: center top; } }
    @media screen and (max-width: 530px) {
      .mv .mv_mask {
        height: 350px;
        background-size: 100% 100%; } }
  .mv .mv_video {
    width: 1500px;
    position: absolute;
    top: 0px;
    height: 640px;
    max-width: 1500px;
    overflow: hidden;
    margin: 0 auto;
    left: 50%;
    transform: translateX(-50%); }
    .mv .mv_video video {
      margin: 0 auto; }
    @media screen and (max-width: 1420px) {
      .mv .mv_video video {
        display: block;
        transform: translateY(-10%); } }
    @media screen and (max-width: 1200px) {
      .mv .mv_video {
        height: 480px; } }
    @media screen and (max-width: 1000px) {
      .mv .mv_video {
        height: 440px; }
        .mv .mv_video video {
          transform: translateY(-20%); } }
    @media screen and (max-width: 860px) {
      .mv .mv_video {
        height: 420px; } }
    @media screen and (max-width: 768px) {
      .mv .mv_video {
        height: 500px;
        width: 100%; }
        .mv .mv_video video {
          display: block !important;
          width: 100%;
          height: auto;
          transform: translateY(0); } }
    @media screen and (max-width: 600px) {
      .mv .mv_video video {
        transform: translateY(10%); } }
    @media screen and (max-width: 530px) {
      .mv .mv_video {
        width: auto;
        height: 350px; }
        .mv .mv_video video {
          width: auto;
          height: 350px; } }

.scroll {
  position: absolute;
  z-index: 999;
  animation: scroll-announce 2s ease infinite;
  transition: all 0.5s ease;
  text-align: center;
  bottom: 5%;
  width: 100%;
  opacity: 1; }
  @media screen and (max-width: 768px) {
    .scroll {
      opacity: 0; } }
  @media only screen and (max-device-width: 768px) and (orientation: landscape) {
    .scroll {
      display: none; } }
  .scroll img {
    max-width: 70px; }
    @media screen and (max-width: 768px) {
      .scroll img {
        max-width: 50px; } }

@keyframes scroll-announce {
  0% {
    transform: translateY(0); }
  50% {
    transform: translateY(-10px); }
  100% {
    transform: translateY(0); } }
#about {
  width: 100%;
  margin: 0 auto 100px;
  display: flex;
  -webkit-justify-content: space-between;
  justify-content: -webkit- space-between;
  justify-content: space-between; }
  @media screen and (max-width: 900px) {
    #about {
      margin: 0 auto 50px;
      display: block; } }
  #about .txt_box {
    max-width: 440px;
    text-align: center;
    width: 40%; }
    @media screen and (max-width: 900px) {
      #about .txt_box {
        width: 100%;
        margin: 0 auto 30px; } }
    #about .txt_box .illust {
      text-align: center;
      margin: 0 auto 10px;
      max-width: 180px; }
    #about .txt_box .txt {
      color: #5d2e13;
      font-size: 1.6rem;
      margin: 0 auto 20px; }
      @media screen and (max-width: 768px) {
        #about .txt_box .txt {
          font-size: 1.4rem;
          margin: 0 auto 10px; } }
    #about .txt_box .dtl_btn {
      margin: 0 auto; }
      @media screen and (max-width: 768px) {
        #about .txt_box .dtl_btn {
          margin: 30px auto; } }
  #about .img_box {
    max-width: 660px;
    width: 60%;
    display: flex;
    -webkit-justify-content: space-between;
    justify-content: -webkit- space-between;
    justify-content: space-between; }
    @media screen and (max-width: 900px) {
      #about .img_box {
        margin: 0 auto 30px;
        width: 100%; } }
    @media screen and (max-width: 768px) {
      #about .img_box {
        margin: 0 auto 30px;
        width: 94%;
        max-width: 430px; } }
    #about .img_box > li.img_box1 {
      max-width: 290px; }
      @media screen and (max-width: 768px) {
        #about .img_box > li.img_box1 {
          max-width: 100%;
          width: 43%; } }
      #about .img_box > li.img_box1 .img {
        margin: 20px 30px 30px auto;
        max-width: 190px; }
        @media screen and (max-width: 768px) {
          #about .img_box > li.img_box1 .img {
            margin: 20px 10px 30px auto; } }
        #about .img_box > li.img_box1 .img img {
          border-radius: 20px; }
          @media screen and (max-width: 768px) {
            #about .img_box > li.img_box1 .img img {
              border-radius: 16px; } }
      #about .img_box > li.img_box1 .illust {
        margin: 0px 0px 0px auto;
        max-width: 290px; }
        @media screen and (max-width: 768px) {
          #about .img_box > li.img_box1 .illust {
            max-width: 100%;
            margin: 0px auto 0px; } }
    #about .img_box > li.img_box2 {
      max-width: 360px; }
      @media screen and (max-width: 768px) {
        #about .img_box > li.img_box2 {
          max-width: 100%;
          width: 55%; } }
      @media screen and (max-width: 768px) {
        #about .img_box > li.img_box2 .img {
          margin: 0 auto 20px; } }
      #about .img_box > li.img_box2 .img img {
        border-radius: 20px; }
        @media screen and (max-width: 768px) {
          #about .img_box > li.img_box2 .img img {
            border-radius: 16px; } }

#news {
  width: 100%;
  padding: 0 45px;
  margin: 0 auto 80px;
  display: flex;
  -webkit-justify-content: space-between;
  justify-content: -webkit- space-between;
  justify-content: space-between; }
  @media screen and (max-width: 900px) {
    #news {
      padding: 0 3%;
      margin: 0 auto 40px; } }
  @media screen and (max-width: 768px) {
    #news {
      padding: 0 3%;
      display: block;
      margin: 0 auto 40px; } }
  #news .deco_ttl {
    width: 140px;
    height: 140px;
    border-radius: 20px;
    display: table;
    vertical-align: middle;
    background-color: #f5d9d1;
    padding: 25px 10px;
    margin-right: 10px; }
    @media screen and (max-width: 1000px) {
      #news .deco_ttl {
        margin-right: 20px; } }
    @media screen and (max-width: 768px) {
      #news .deco_ttl {
        padding: 10px 10px;
        width: 100px;
        height: 100px;
        border-radius: 16px;
        margin: 0 auto 20px; } }
    #news .deco_ttl em {
      font-size: 2rem; }
      @media screen and (max-width: 768px) {
        #news .deco_ttl em {
          font-size: 1.8rem; } }
  #news .news_list {
    max-width: 850px;
    width: 100%;
    background: url("/common/img/bd_dot.png") repeat-x center top;
    font-size: 0; }
    #news .news_list > li {
      padding: 5px 0;
      background: url("/common/img/bd_dot.png") repeat-x center bottom; }
      #news .news_list > li a {
        position: relative;
        padding: 5px 30px 8px 10px;
        display: flex;
        -webkit-justify-content: flex-start;
        justify-content: -webkit- flex-start;
        justify-content: flex-start;
        font-size: 1.6rem;
        color: #5d2e13;
        text-decoration: none;
        -moz-transition: all 0.3s;
        -webkit-transition: all 0.3s;
        -o-transition: all 0.3s;
        -ms-transition: all 0.3s;
        transition: all 0.3s; }
        #news .news_list > li a:hover {
          opacity: 0.5; }
          @media screen and (max-width: 768px) {
            #news .news_list > li a:hover {
              opacity: 1; } }
        @media screen and (max-width: 768px) {
          #news .news_list > li a {
            padding: 5px 20px 8px 5px;
            font-size: 1.4rem;
            display: block;
            line-height: 1.5; } }
        #news .news_list > li a em {
          display: inline-block;
          width: 110px;
          font-weight: bold; }
          @media screen and (max-width: 768px) {
            #news .news_list > li a em {
              margin-bottom: 5px;
              display: block;
              width: 100%; } }
        #news .news_list > li a span {
          width: calc(100% - 110px); }
          #news .news_list > li a span.indent {
            text-indent: -1em;
            padding-left: 1em;
            display: inline-block; }
          @media screen and (max-width: 768px) {
            #news .news_list > li a span {
              width: 100%; } }
        #news .news_list > li a:after {
          position: absolute;
          right: 0;
          top: 50%;
          margin-top: -9px;
          content: '';
          display: inline-block;
          width: 18px;
          height: 18px;
          background: url("/common/img/icn_arrow.png") no-repeat center center/100% auto; }
      #news .news_list > li .nolink {
        position: relative;
        padding: 5px 30px 8px 10px;
        display: flex;
        -webkit-justify-content: flex-start;
        justify-content: -webkit- flex-start;
        justify-content: flex-start;
        font-size: 1.6rem;
        color: #5d2e13;
        text-decoration: none; }
        @media screen and (max-width: 768px) {
          #news .news_list > li .nolink {
            padding: 5px 20px 8px 5px;
            font-size: 1.4rem;
            display: block;
            line-height: 1.5; } }
        #news .news_list > li .nolink em {
          display: inline-block;
          width: 110px;
          font-weight: bold; }
          @media screen and (max-width: 768px) {
            #news .news_list > li .nolink em {
              margin-bottom: 5px;
              display: block;
              width: 100%; } }
        #news .news_list > li .nolink span {
          width: calc(100% - 110px); }
          #news .news_list > li .nolink span.indent {
            text-indent: -1em;
            padding-left: 1em;
            display: inline-block; }
          @media screen and (max-width: 768px) {
            #news .news_list > li .nolink span {
              width: 100%; } }

#menu {
  width: 100%;
  margin: 0;
  padding: 70px 0;
  /*height: 700px;*/
  background: url("/index/img/menu_bg.jpg") no-repeat center center/cover; }
  @media screen and (min-width: 1550px) {
    #menu {
      background-size: 110% auto; } }
  @media screen and (max-width: 768px) {
    #menu {
      padding: 60px 0; } }
  #menu .inner {
    position: relative;
    z-index: 31;
    max-width: 600px;
    margin: 0 auto;
    background-color: #ffffff;
    padding: 5px;
    border-radius: 20px; }
    @media screen and (max-width: 768px) {
      #menu .inner {
        width: 60%;
        border-radius: 16px; } }
    @media screen and (max-width: 530px) {
      #menu .inner {
        width: 78%; } }
    #menu .inner .box_inner {
      background-color: #ffffff;
      border: #8d6c59 1px solid;
      border-radius: 14px;
      padding: 50px 30px  60px;
      text-align: center; }
      @media screen and (max-width: 768px) {
        #menu .inner .box_inner {
          padding: 30px 10px  30px; } }
      #menu .inner .box_inner .illust {
        text-align: center;
        margin: 0 auto 20px;
        max-width: 270px; }
        @media screen and (max-width: 768px) {
          #menu .inner .box_inner .illust {
            width: 70%; } }
      #menu .inner .box_inner .txt {
        color: #5d2e13;
        font-size: 1.6rem;
        margin: 0 auto 20px; }
        @media screen and (max-width: 768px) {
          #menu .inner .box_inner .txt {
            font-size: 1.4rem; } }
      #menu .inner .box_inner .dtl_btn {
        margin: 0 auto; }
    #menu .inner:before {
      position: absolute;
      top: -33px;
      left: -33px;
      z-index: 33;
      content: '';
      display: inline-block;
      width: 150px;
      height: 150px;
      background: url("/index/img/deco_wheat.png") no-repeat center center/100% auto; }
      @media screen and (max-width: 768px) {
        #menu .inner:before {
          width: 100px;
          height: 100px;
          top: -20px;
          left: -10px; } }
    #menu .inner:after {
      position: absolute;
      bottom: -33px;
      right: -33px;
      z-index: 32;
      content: '';
      display: inline-block;
      width: 150px;
      height: 150px;
      background: url("/index/img/deco_wheat.png") no-repeat center center/100% auto;
      transform: rotate(-180deg); }
      @media screen and (max-width: 768px) {
        #menu .inner:after {
          bottom: -20px;
          right: -10px;
          width: 100px;
          height: 100px; } }

.contWap {
  width: 100%;
  display: flex; }
  @media screen and (max-width: 768px) {
    .contWap {
      display: block; } }
  .contWap #shop {
    width: 50%;
    background-color: #f5eac6;
    padding: 60px 0 70px; }
    @media screen and (max-width: 768px) {
      .contWap #shop {
        width: 100%;
        padding: 50px 0 50px; } }
    .contWap #shop .inner {
      width: 100%;
      max-width: 750px;
      margin: 0 0 0 auto;
      text-align: center; }
      .contWap #shop .inner .illust {
        text-align: center;
        margin: 0 auto 20px;
        max-width: 270px; }
      .contWap #shop .inner .txt {
        color: #5d2e13;
        font-size: 1.6rem;
        margin: 0 auto 20px; }
        @media screen and (max-width: 768px) {
          .contWap #shop .inner .txt {
            font-size: 1.4rem; } }
      .contWap #shop .inner .dtl_btn {
        margin: 0 auto; }
  .contWap #recruit {
    width: 50%;
    background-color: #f5d9d1;
    padding: 60px 0 70px; }
    @media screen and (max-width: 768px) {
      .contWap #recruit {
        width: 100%;
        padding: 50px 0 50px; } }
    .contWap #recruit .inner {
      width: 100%;
      max-width: 750px;
      margin: 0 auto 0 0;
      text-align: center; }
      .contWap #recruit .inner .img {
        text-align: center;
        margin: -10px auto 20px;
        max-width: 450px; }
      .contWap #recruit .inner .txt {
        color: #5d2e13;
        font-size: 1.6rem;
        margin: 0 auto 20px; }
        @media screen and (max-width: 768px) {
          .contWap #recruit .inner .txt {
            font-size: 1.4rem; } }
      .contWap #recruit .inner .dtl_btn {
        margin: 0 auto; }

#sns_link {
  padding: 90px 0 0 0; }
  @media screen and (max-width: 768px) {
    #sns_link {
      padding: 40px 0 0 0; } }
  #sns_link .insta_area {
    margin: 0 auto 120px; }
    @media screen and (max-width: 768px) {
      #sns_link .insta_area {
        margin: 0 auto 60px; } }
    #sns_link .insta_area .insta_box {
      max-width: 1100px;
      border-radius: 20px;
      text-align: center;
      margin: 0 auto 50px;
      display: flex;
      -webkit-justify-content: space-between;
      justify-content: -webkit- space-between;
      justify-content: space-between;
      /*flex-direction:row-reverse;*/
      width: 100%;
      /*height: 434px;*/ }
      @media screen and (max-width: 530px) {
        #sns_link .insta_area .insta_box {
          display: block;
          border-radius: 15px;
          margin: 0 auto 30px;
          width: 94%; } }
      #sns_link .insta_area .insta_box .insta_widget {
        max-width: 660px;
        width: 60%;
        margin-left: 0.55%;
        border-radius: 0 20px 20px 0; }
        @media screen and (max-width: 530px) {
          #sns_link .insta_area .insta_box .insta_widget {
            width: 100%;
            border-radius: 0 0 15px 15px;
            margin: 4px 0 0 0; } }
        #sns_link .insta_area .insta_box .insta_widget iframe {
          width: 100%;
          border-radius: 0 20px 20px 0;
          overflow: hidden; }
          @media screen and (max-width: 530px) {
            #sns_link .insta_area .insta_box .insta_widget iframe {
              margin: 0;
              width: 100%;
              border-radius: 0 0 15px 15px;
              height: 100%;
              display: block;
              min-height: 220px; } }
      #sns_link .insta_area .insta_box .insta_img {
        max-width: 434px;
        width: 39.45%;
        border-radius: 20px 0 0 20px; }
        #sns_link .insta_area .insta_box .insta_img img {
          display: inline-block;
          border-radius: 20px 0 0 20px; }
        @media screen and (max-width: 530px) {
          #sns_link .insta_area .insta_box .insta_img {
            max-width: 100%;
            width: 100%;
            border-radius: 15px 15px 0 0; }
            #sns_link .insta_area .insta_box .insta_img img {
              border-radius: 15px 15px 0 0; } }
    #sns_link .insta_area .insta_btn {
      position: relative;
      display: table;
      /*width: 100%;*/
      width: 295px;
      height: 50px;
      margin: 0 auto;
      border: #364949 1px solid;
      background-color: #ffffff;
      padding: 2px;
      -moz-transition: all 0.3s;
      -webkit-transition: all 0.3s;
      -o-transition: all 0.3s;
      -ms-transition: all 0.3s;
      transition: all 0.3s; }
      #sns_link .insta_area .insta_btn:before {
        position: absolute;
        font-size: 2rem;
        padding: 2px 5px;
        top: -10px;
        right: -10px;
        content: 'Check!';
        display: inline-block;
        font-family: 'Pacifico', cursive;
        background-color: #ffffff;
        color: #364949;
        line-height: 1.3;
        transform: rotate(4deg); }
        @media screen and (max-width: 768px) {
          #sns_link .insta_area .insta_btn:before {
            font-size: 1.6rem; } }
      #sns_link .insta_area .insta_btn:hover {
        opacity: 0.7; }
        @media screen and (max-width: 768px) {
          #sns_link .insta_area .insta_btn:hover {
            opacity: 1; } }
      #sns_link .insta_area .insta_btn a {
        display: table-cell;
        background-color: #ffffff;
        border: #727f7f 1px solid;
        vertical-align: middle;
        text-align: center;
        text-decoration: none;
        padding: 3px 5px; }
        #sns_link .insta_area .insta_btn a span {
          font-size: 1.6rem;
          color: #364949;
          line-height: 1.2;
          font-family: 'Noto Serif JP', serif;
          display: flex;
          -webkit-justify-content: center;
          justify-content: -webkit- center;
          justify-content: center;
          -webkit-align-items: center;
          align-items: -webkit- center;
          align-items: center; }
          #sns_link .insta_area .insta_btn a span:before {
            content: '';
            display: inline-block;
            width: 21px;
            height: 21px;
            background: url("/common/img/icn_insta.png") no-repeat center center/100% auto;
            margin-right: 5px; }

.ol_bnr {
  text-align: center;
  max-width: 850px;
  margin: 0 auto;
  width: 90%;
  -moz-transition: all 0.3s;
  -webkit-transition: all 0.3s;
  -o-transition: all 0.3s;
  -ms-transition: all 0.3s;
  transition: all 0.3s; }
  .ol_bnr:hover {
    opacity: 0.7; }
  @media screen and (max-width: 768px) {
    .ol_bnr {
      margin: 0 auto 30px;
      max-width: 320px; } }