@charset "UTF-8";
/*
@include css3(transform, translate(-50%, -50%));
@include css3(transition, 0.3s ease-in-out);  
transform: rotate(0.03deg);
*/
/*店舗一覧用*/
#container {
  z-index: 1; }

.titleBox {
  color: #558d75;
  padding: 0 0 50px;
  text-align: center;
  max-width: 300px;
  margin: 0 auto; }
  @media screen and (max-width: 520px) {
    .titleBox {
      padding: 0 0 25px; } }
  .titleBox .en {
    font-family: 'YakuHanJP_Narrow','Libre Caslon Display', 'Noto Serif JP', "Yu Mincho" , "游明朝体" , "YuMincho" , "ヒラギノ明朝 Pro W3" , "Hiragino Mincho Pro" , "HiraMinProN-W3" , "HGS明朝E" , "ＭＳ Ｐ明朝" , "MS PMincho" , serif;
    font-size: 30px;
    font-weight: 400;
    border-bottom: 1px solid #558d75;
    padding: 0;
    letter-spacing: 0.08em; }
  .titleBox h2 {
    font-size: 16px;
    font-weight: 500;
    padding: 10px 0 0 0; }

.topBox1 {
  padding: 20px 0 100px; }
  @media screen and (max-width: 520px) {
    .topBox1 {
      padding: 20px 0; } }
  .topBox1 .footSearch {
    position: relative;
    background-color: #FFF;
    margin: 0;
    padding: 0px; }
    .topBox1 .footSearch:before {
      display: none; }

.topBox2,
.topBox5 {
  padding: 50px 0;
  background-color: #e5f3ed; }
  @media screen and (max-width: 520px) {
    .topBox2,
    .topBox5 {
      padding: 50px 0 0; } }
  .topBox2 .inner .flexBox,
  .topBox5 .inner .flexBox {
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 0 3%; }
    @media screen and (max-width: 767px) {
      .topBox2 .inner .flexBox,
      .topBox5 .inner .flexBox {
        gap: 50px 0; } }
    .topBox2 .inner .flexBox .in,
    .topBox5 .inner .flexBox .in {
      width: 31%; }
      @media screen and (max-width: 767px) {
        .topBox2 .inner .flexBox .in,
        .topBox5 .inner .flexBox .in {
          width: 100%; } }
      .topBox2 .inner .flexBox .in a,
      .topBox5 .inner .flexBox .in a {
        display: block; }
        @media screen and (max-width: 767px) {
          .topBox2 .inner .flexBox .in a,
          .topBox5 .inner .flexBox .in a {
            max-width: 420px;
            margin: 0 auto; } }
        @media screen and (max-width: 440px) {
          .topBox2 .inner .flexBox .in a,
          .topBox5 .inner .flexBox .in a {
            max-width: none; } }
        .topBox2 .inner .flexBox .in a:hover,
        .topBox5 .inner .flexBox .in a:hover {
          opacity: 1; }
          .topBox2 .inner .flexBox .in a:hover .imgBox img,
          .topBox5 .inner .flexBox .in a:hover .imgBox img {
            -webkit-transition: 0.3s ease-in-out;
            -moz-transition: 0.3s ease-in-out;
            -ms-transition: 0.3s ease-in-out;
            -o-transition: 0.3s ease-in-out;
            transition: 0.3s ease-in-out;
            width: 105%; }
        .topBox2 .inner .flexBox .in a .imgBox,
        .topBox5 .inner .flexBox .in a .imgBox {
          position: relative;
          overflow: hidden;
          border-radius: 20px;
          width: 100%;
          height: 240px; }
          @media screen and (max-width: 1000px) {
            .topBox2 .inner .flexBox .in a .imgBox,
            .topBox5 .inner .flexBox .in a .imgBox {
              height: 200px; } }
          @media screen and (max-width: 767px) {
            .topBox2 .inner .flexBox .in a .imgBox,
            .topBox5 .inner .flexBox .in a .imgBox {
              height: 240px; } }
          .topBox2 .inner .flexBox .in a .imgBox img,
          .topBox5 .inner .flexBox .in a .imgBox img {
            -webkit-transition: 0.3s ease-in-out;
            -moz-transition: 0.3s ease-in-out;
            -ms-transition: 0.3s ease-in-out;
            -o-transition: 0.3s ease-in-out;
            transition: 0.3s ease-in-out;
            position: absolute;
            top: 50%;
            left: 50%;
            -webkit-transform: translate(-50%, -50%);
            -moz-transform: translate(-50%, -50%);
            -ms-transform: translate(-50%, -50%);
            -o-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
            top: 0;
            -webkit-transform: translate(-50%, -5%);
            -moz-transform: translate(-50%, -5%);
            -ms-transform: translate(-50%, -5%);
            -o-transform: translate(-50%, -5%);
            transform: translate(-50%, -5%);
            width: 100%;
            max-width: none; }
        .topBox2 .inner .flexBox .in a .txBox,
        .topBox5 .inner .flexBox .in a .txBox {
          padding: 10px 0 0 0; }
          .topBox2 .inner .flexBox .in a .txBox p,
          .topBox5 .inner .flexBox .in a .txBox p {
            letter-spacing: 0.08em;
            line-height: 30px;
            font-size: 20px;
            font-weight: 600; }
            .topBox2 .inner .flexBox .in a .txBox p span,
            .topBox5 .inner .flexBox .in a .txBox p span {
              display: block;
              font-size: 14px; }

.topabout {
  position: relative;
  background-color: #f9f8ef;
  padding: 50px 0 0;
  margin: 0 0 100px; }
  @media screen and (max-width: 460px) {
    .topabout {
      margin: 0 0 50px; } }
  .topabout:after {
    position: absolute;
    bottom: -79px;
    left: 0;
    content: "";
    width: 100%;
    height: 80px;
    background-color: #f9f8ef;
    mask-image: url(../images/common/footMask.svg);
    mask-repeat: no-repeat;
    mask-position: center top;
    mask-size: cover;
    transform: rotate(180deg); }
    @media screen and (max-width: 460px) {
      .topabout:after {
        bottom: -23px;
        height: 26px;
        mask-size: 100% 100%; } }
  .topabout .inner {
    max-width: 1000px; }
  .topabout .flexBox {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0 40px;
    padding: 0 0 20px; }
    @media screen and (max-width: 767px) {
      .topabout .flexBox {
        flex-wrap: wrap;
        padding: 0 0 50px;
        gap: 0; } }
    .topabout .flexBox .imgBox {
      width: 400px; }
      @media screen and (max-width: 767px) {
        .topabout .flexBox .imgBox {
          width: 100%;
          text-align: center; }
          .topabout .flexBox .imgBox img {
            width: 100%;
            height: auto; } }
    .topabout .flexBox .txBox {
      width: calc(100% - 400px); }
      @media screen and (max-width: 767px) {
        .topabout .flexBox .txBox {
          width: 100%;
          padding: 30px 0 0 0; } }
      .topabout .flexBox .txBox p {
        font-size: 18px;
        line-height: 32px;
        letter-spacing: 0.08em; }
    .topabout .flexBox.type2 .imgBox {
      order: 2; }
      @media screen and (max-width: 767px) {
        .topabout .flexBox.type2 .imgBox {
          order: 1; } }
    .topabout .flexBox.type2 .txBox {
      order: 1; }
      @media screen and (max-width: 767px) {
        .topabout .flexBox.type2 .txBox {
          order: 2; } }

.topBox3 {
  padding: 50px 0 150px; }
  @media screen and (max-width: 520px) {
    .topBox3 {
      padding: 50px 0 50px; } }
  .topBox3 .inner .flexBox {
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 50px 1%; }
    @media screen and (max-width: 520px) {
      .topBox3 .inner .flexBox {
        gap: 25px 0; } }
    .topBox3 .inner .flexBox .in {
      width: 19%; }
      @media screen and (max-width: 900px) {
        .topBox3 .inner .flexBox .in {
          width: 24%; } }
      @media screen and (max-width: 767px) {
        .topBox3 .inner .flexBox .in {
          width: 32%; } }
      @media screen and (max-width: 520px) {
        .topBox3 .inner .flexBox .in {
          width: 100%; } }
      .topBox3 .inner .flexBox .in a {
        display: block; }
        @media screen and (max-width: 520px) {
          .topBox3 .inner .flexBox .in a {
            display: flex;
            justify-content: space-between; } }
        .topBox3 .inner .flexBox .in a:hover {
          opacity: 1; }
          .topBox3 .inner .flexBox .in a:hover .imgBox img {
            -webkit-transition: 0.3s ease-in-out;
            -moz-transition: 0.3s ease-in-out;
            -ms-transition: 0.3s ease-in-out;
            -o-transition: 0.3s ease-in-out;
            transition: 0.3s ease-in-out;
            width: 110%; }
        .topBox3 .inner .flexBox .in a .imgBox {
          position: relative;
          overflow: hidden;
          border-radius: 20px;
          width: 100%;
          height: 232px;
          border: 1px solid #F4F4F4; }
          @media screen and (max-width: 1260px) {
            .topBox3 .inner .flexBox .in a .imgBox {
              height: 200px; } }
          @media screen and (max-width: 1100px) {
            .topBox3 .inner .flexBox .in a .imgBox {
              height: 160px; } }
          @media screen and (max-width: 520px) {
            .topBox3 .inner .flexBox .in a .imgBox {
              width: 30%;
              height: 115px;
              border-radius: 10px; } }
          @media screen and (max-width: 440px) {
            .topBox3 .inner .flexBox .in a .imgBox {
              height: 90px; } }
          .topBox3 .inner .flexBox .in a .imgBox img {
            -webkit-transition: 0.3s ease-in-out;
            -moz-transition: 0.3s ease-in-out;
            -ms-transition: 0.3s ease-in-out;
            -o-transition: 0.3s ease-in-out;
            transition: 0.3s ease-in-out;
            position: absolute;
            top: 50%;
            left: 50%;
            -webkit-transform: translate(-50%, -50%);
            -moz-transform: translate(-50%, -50%);
            -ms-transform: translate(-50%, -50%);
            -o-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
            width: 105%;
            max-width: none; }
        .topBox3 .inner .flexBox .in a .txBox {
          padding: 10px 0 0 0; }
          @media screen and (max-width: 520px) {
            .topBox3 .inner .flexBox .in a .txBox {
              width: 65%;
              padding: 0; } }
          .topBox3 .inner .flexBox .in a .txBox p.tx1 {
            letter-spacing: 0.08em;
            font-size: 18px;
            font-weight: 400;
            padding: 0 0 10px; }
            @media screen and (max-width: 1100px) {
              .topBox3 .inner .flexBox .in a .txBox p.tx1 {
                font-size: 16px; } }
          .topBox3 .inner .flexBox .in a .txBox p.tx2 {
            letter-spacing: 0.08em;
            font-size: 14px;
            font-weight: 700; }
            .topBox3 .inner .flexBox .in a .txBox p.tx2 span {
              font-size: 20px; }
              @media screen and (max-width: 1100px) {
                .topBox3 .inner .flexBox .in a .txBox p.tx2 span {
                  font-size: 18px; } }
  .topBox3 .inner .bnrBox {
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 20px 2%;
    padding: 50px 0; }
    @media screen and (max-width: 520px) {
      .topBox3 .inner .bnrBox {
        gap: 10px 0; } }
    .topBox3 .inner .bnrBox .in {
      width: 32%; }
      @media screen and (max-width: 767px) {
        .topBox3 .inner .bnrBox .in {
          width: 48%; } }
      @media screen and (max-width: 520px) {
        .topBox3 .inner .bnrBox .in {
          width: 100%; } }
      .topBox3 .inner .bnrBox .in a {
        display: block; }

.topBox4 {
  position: relative;
  background-color: #F4F2EA;
  padding: 20px 0 0; }
  .topBox4:before {
    content: "";
    width: 100%;
    mask-image: url("../images/common/footMask.svg");
    mask-repeat: no-repeat;
    mask-position: center top;
    mask-size: cover;
    position: absolute;
    top: -80px;
    left: 0;
    height: 80px;
    background-color: #F4F2EA; }
    @media screen and (max-width: 520px) {
      .topBox4:before {
        top: -23px;
        height: 26px;
        mask-size: 100% 100%; } }
  .topBox4 .inner .nemuri {
    text-align: center;
    margin: 0 0 20px; }
    @media screen and (max-width: 520px) {
      .topBox4 .inner .nemuri img {
        width: 180px;
        height: auto; } }
  .topBox4 .inner .tx {
    font-size: 18px;
    text-align: center;
    line-height: 32px;
    letter-spacing: 0.08em;
    position: relative;
    z-index: 5; }
    @media screen and (max-width: 1000px) {
      .topBox4 .inner .tx {
        padding: 30px 0 0 0; } }
    @media screen and (max-width: 767px) {
      .topBox4 .inner .tx {
        text-align: left;
        padding: 20px 0 0; } }
    @media screen and (max-width: 520px) {
      .topBox4 .inner .tx {
        font-size: 16px; } }
  @media screen and (max-width: 1000px) {
    .topBox4 .inner .imgBoxs1 {
      position: relative;
      text-align: center; } }
  .topBox4 .inner .imgBoxs1 .img1 {
    position: absolute;
    top: 0;
    left: 20%; }
    @media screen and (max-width: 1600px) {
      .topBox4 .inner .imgBoxs1 .img1 {
        left: 10%; } }
    @media screen and (max-width: 1400px) {
      .topBox4 .inner .imgBoxs1 .img1 {
        left: 5%; } }
    @media screen and (max-width: 1000px) {
      .topBox4 .inner .imgBoxs1 .img1 {
        display: none; } }
  .topBox4 .inner .imgBoxs1 .img2 {
    position: absolute;
    top: 100px;
    right: 0;
    z-index: 1; }
    @media screen and (max-width: 1000px) {
      .topBox4 .inner .imgBoxs1 .img2 {
        display: none; } }
  .topBox4 .inner .imgBoxs1 .img12 {
    display: none; }
    @media screen and (max-width: 1000px) {
      .topBox4 .inner .imgBoxs1 .img12 {
        display: inline-block; } }
  .topBox4 .inner .imgBoxs {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0 180px;
    padding: 50px 0;
    position: relative;
    z-index: 2; }
    @media screen and (max-width: 1000px) {
      .topBox4 .inner .imgBoxs {
        gap: 0 20px;
        text-align: center; } }
    @media screen and (max-width: 767px) {
      .topBox4 .inner .imgBoxs {
        padding: 20px 0; } }
    .topBox4 .inner .imgBoxs .img3 {
      position: relative; }
      @media screen and (max-width: 1000px) {
        .topBox4 .inner .imgBoxs .img3 {
          display: none; } }
    .topBox4 .inner .imgBoxs .img4 {
      position: relative; }
      @media screen and (max-width: 1000px) {
        .topBox4 .inner .imgBoxs .img4 {
          display: none; } }
    .topBox4 .inner .imgBoxs .img34 {
      display: none; }
      @media screen and (max-width: 1000px) {
        .topBox4 .inner .imgBoxs .img34 {
          display: inline-block; } }
  .topBox4 .inner .menuBox {
    background-color: #FFF;
    border-radius: 20px;
    padding: 30px 60px; }
    @media screen and (max-width: 767px) {
      .topBox4 .inner .menuBox {
        padding: 30px 20px; } }
    .topBox4 .inner .menuBox .titleBox {
      text-align: left;
      margin: 0; }
    .topBox4 .inner .menuBox .flexBox {
      display: flex;
      justify-content: flex-start;
      flex-wrap: wrap;
      gap: 30px 3.33%; }
      @media screen and (max-width: 767px) {
        .topBox4 .inner .menuBox .flexBox {
          gap: 10px 2%; } }
      @media screen and (max-width: 520px) {
        .topBox4 .inner .menuBox .flexBox {
          gap: 10px 0; } }
      .topBox4 .inner .menuBox .flexBox .in {
        -webkit-transition: 0.3s ease-in-out;
        -moz-transition: 0.3s ease-in-out;
        -ms-transition: 0.3s ease-in-out;
        -o-transition: 0.3s ease-in-out;
        transition: 0.3s ease-in-out;
        width: 30%;
        background-color: #FFF;
        border: 1px solid #f0f0f0;
        border-radius: 20px;
        padding: 20px 10px;
        cursor: pointer; }
        @media screen and (max-width: 767px) {
          .topBox4 .inner .menuBox .flexBox .in {
            width: 48%; } }
        @media screen and (max-width: 520px) {
          .topBox4 .inner .menuBox .flexBox .in {
            width: 100%; } }
        .topBox4 .inner .menuBox .flexBox .in:hover {
          -webkit-transition: 0.3s ease-in-out;
          -moz-transition: 0.3s ease-in-out;
          -ms-transition: 0.3s ease-in-out;
          -o-transition: 0.3s ease-in-out;
          transition: 0.3s ease-in-out;
          background-color: rgba(85, 141, 117, 0.1); }
        .topBox4 .inner .menuBox .flexBox .in .imgBox {
          width: 100%;
          overflow: hidden;
          text-align: center; }
          @media screen and (max-width: 520px) {
            .topBox4 .inner .menuBox .flexBox .in .imgBox img {
              max-width: none;
              width: 100%;
              height: auto; } }
        .topBox4 .inner .menuBox .flexBox .in .txBox {
          padding: 20px 5px 0; }
          .topBox4 .inner .menuBox .flexBox .in .txBox h3 {
            font-size: 20px;
            font-weight: 700;
            padding: 0 0 20px; }
            @media screen and (max-width: 1000px) {
              .topBox4 .inner .menuBox .flexBox .in .txBox h3 {
                font-size: 18px; } }
          .topBox4 .inner .menuBox .flexBox .in .txBox p.tx1 {
            font-size: 16px;
            line-height: 26px; }
          @media screen and (max-width: 1000px) {
            .topBox4 .inner .menuBox .flexBox .in .txBox p {
              font-size: 14px; } }
          .topBox4 .inner .menuBox .flexBox .in .txBox .btn {
            background-color: #558d75;
            color: #FFF;
            text-align: center;
            width: 140px;
            padding: 10px;
            margin: 18px auto 0;
            border-radius: 50px; }
        .topBox4 .inner .menuBox .flexBox .in .modal {
          display: none; }
  .topBox4 .inner .btn a {
    font-size: 18px;
    width: 420px;
    padding: 20px;
    border-radius: 50px; }
    @media screen and (max-width: 520px) {
      .topBox4 .inner .btn a {
        width: 90%;
        font-size: 16px;
        padding: 15px; } }

.topBox5 .inner .flexBox {
  gap: 0 2%; }
  @media screen and (max-width: 767px) {
    .topBox5 .inner .flexBox {
      gap: 50px 2%; } }
  @media screen and (max-width: 520px) {
    .topBox5 .inner .flexBox {
      gap: 25px 0; } }
  .topBox5 .inner .flexBox .in {
    width: 23.5%; }
    @media screen and (max-width: 767px) {
      .topBox5 .inner .flexBox .in {
        width: 48%; } }
    @media screen and (max-width: 520px) {
      .topBox5 .inner .flexBox .in {
        width: 100%; } }
    @media screen and (max-width: 520px) {
      .topBox5 .inner .flexBox .in a {
        display: flex;
        justify-content: space-between; } }
    .topBox5 .inner .flexBox .in a:hover .imgBox img {
      height: 110%;
      width: auto; }
      @media screen and (max-width: 767px) {
        .topBox5 .inner .flexBox .in a:hover .imgBox img {
          height: auto;
          width: 105%; } }
      @media screen and (max-width: 520px) {
        .topBox5 .inner .flexBox .in a:hover .imgBox img {
          height: 110%;
          width: auto; } }
    .topBox5 .inner .flexBox .in a .imgBox {
      border-radius: 0 20px 20px 20px;
      height: 210px; }
      @media screen and (max-width: 1000px) {
        .topBox5 .inner .flexBox .in a .imgBox {
          height: 170px; } }
      @media screen and (max-width: 520px) {
        .topBox5 .inner .flexBox .in a .imgBox {
          width: 30%;
          height: 105px;
          border-radius: 5px; } }
      .topBox5 .inner .flexBox .in a .imgBox img {
        top: 50%;
        -webkit-transform: translate(-50%, -50%);
        -moz-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
        -o-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
        width: auto;
        height: 105%;
        z-index: 1; }
        @media screen and (max-width: 767px) {
          .topBox5 .inner .flexBox .in a .imgBox img {
            width: 105%;
            height: auto; } }
        @media screen and (max-width: 520px) {
          .topBox5 .inner .flexBox .in a .imgBox img {
            width: auto;
            height: 105%; } }
      .topBox5 .inner .flexBox .in a .imgBox .cateBox {
        position: absolute;
        top: 0;
        left: 0;
        display: flex;
        justify-content: flex-start;
        flex-wrap: wrap;
        gap: 5px 10px;
        z-index: 2; }
        .topBox5 .inner .flexBox .in a .imgBox .cateBox span {
          color: #FFF;
          background-color: #558d75;
          padding: 3px 20px;
          font-size: 12px; }
          @media screen and (max-width: 520px) {
            .topBox5 .inner .flexBox .in a .imgBox .cateBox span {
              padding: 1px 3px;
              font-size: 10px; } }
    @media screen and (max-width: 520px) {
      .topBox5 .inner .flexBox .in a .txBox {
        width: 65%;
        padding: 0; }
        .topBox5 .inner .flexBox .in a .txBox p {
          font-size: 16px;
          line-height: 25px; }
          .topBox5 .inner .flexBox .in a .txBox p span {
            font-size: 12px; } }

/*# sourceMappingURL=top.css.map */