@charset "utf-8";


.subpage header {
  position: relative;
}

.subpage .header .hamburger-menu-btn {
  display: block;
  gap: 10px;
  position: relative;
  z-index: 999999;
  cursor: pointer;
  top: -85px;
  height: 55px;
  width: 33px;
  margin-left: auto;
}

@media(min-width: 800px) {
  .subpage header {
    height: 85px;
  }
}

.subpage .TOPlogo {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 10;
  top: .5rem;
  right: 0;
  left: 0;
}

.subpage .TOPlogo::after {
  content: "";
  background-color: rgba(253, 250, 244);
  width: 150px;
  height: 150px;
  border-radius: 50%;
  position: absolute;
  z-index: -1;
  display: block;
  margin-right: auto;
  margin-left: auto;
  top: -2.5rem;
}

.touch {
  position: fixed;
  top: 10vh;
  left: 0;
  z-index: 10;
}





/*---------------------- About CSS start---------------------- */


/* Sub_AboutGrimm */
.Sub_AboutGrimm {
  background-image: var(--lg_color);
  padding-top: var(--mt-03);
  padding-bottom: var(--mt-03);
  text-align: center;
}

.Sub_AboutGrimm .Sub_AboutGrimm_title,
.Sub_AboutGrimm .Sub_Commitment_title {
  margin-left: auto;
  margin-right: auto;
}

.Sub_AboutGrimm .Sub_AboutGrimm_title img,
.Sub_AboutGrimm .Sub_Commitment_title img {
  width: clamp(15.625rem, 5.208rem + 52.08vw, 31.25rem);/*250-500px*/
  height: auto;
}

.Sub_AboutGrimm .Sub_AboutGrimm_img {
  margin-top: var(--mt-015);
}

.Sub_AboutGrimm .Sub_AboutGrimm_subtitle {
  margin-top: var(--mt-015);
  white-space: nowrap;
  font-size: clamp(0.938rem, 0.229rem + 3.54vw, 2rem);
  font-weight: 500;
}

.Sub_AboutGrimm .Sub_AboutGrimm_text {
  position: relative;
  margin-top: 12rem;
  margin-bottom: var(--mt-03);
}

.Sub_AboutGrimm_text::after {
  content: "";
  background-image: url(../images/kumakoneru.png);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  width: 150px;
  height: 150px;
  display: block;
  position: absolute;
  top: -10rem;
  left: 0;
  right: 0;
  margin-right: auto;
  margin-left: auto;
}



/* Commitment */
.Sub_AboutGrimm .Commitment_wrap {
  background-color: var(--font2_color);
  padding: 2rem;
  margin-top: var(--mt015);
  box-shadow: 0 0 6px rgba(191, 153, 131, 0.05);
  border-radius: 0.7rem;
  background-image: url(../images/BGinst.png);
  background-repeat: repeat;
  background-size: 100%;
  background-position: center;
}

.Sub_AboutGrimm .Commitment_subtitle {
  font-size: clamp(1.125rem, 0.542rem + 2.92vw, 2rem);
  white-space: nowrap;
  font-weight: normal;
}

.Sub_AboutGrimm .Commitment_subtitle .Chapter {
  font-size: clamp(1.5rem, 0.833rem + 3.33vw, 2.5rem);
  display: inline-block;
  margin-bottom: 1rem;
  letter-spacing: 0.5rem;
  position: relative;
}

.Sub_AboutGrimm .Commitment_subtitle .Chapter::before {
  content: "";
  background-image: url(../images/craneleft.png);
  background-repeat: no-repeat;
  background-size: cover;
  width: 100px;
  height: 30px;
  position: absolute;
  top: -0.5rem;
  left: -7rem;
  opacity: .7;
}

.Sub_AboutGrimm .Commitment_subtitle .Chapter::after {
  content: "";
  background-image: url(../images/craneright.png);
  background-repeat: no-repeat;
  background-size: cover;
  width: 100px;
  height: 30px;
  position: absolute;
  top: -0.5rem;
  right: -6.8rem;
  opacity: .7;
}

.Sub_AboutGrimm .Commitment_subtitle .line {
  margin-top: 0.5rem;
  color: var(--font_color);
}

.Sub_AboutGrimm .Commitment_text {
  margin-top: 0.5rem;
  text-align: justify;
}

.Sub_AboutGrimm .Commitment_overflow {
  overflow: auto;
  padding-bottom: var(--mt015);
}

.Commitment_img_wrap {
  display: flex;
  flex-wrap: nowrap;
  width: clamp(40rem, -5rem + 90vw, 45.625rem);
  gap: 1rem;
  margin-top: var(--mt015);
  margin-right: auto;
  margin-left: auto;
}

.Sub_AboutGrimm .Commitment_overflow::-webkit-scrollbar {
  width: 16px;
  height: 16px;
}

.Sub_AboutGrimm .Commitment_overflow::-webkit-scrollbar-track {
  background-color: var(--bg2_color);
  border-radius: 1rem;
}

.Sub_AboutGrimm .Commitment_overflow::-webkit-scrollbar-thumb {
  background-color: var(--sub2_color);
  border-radius: 1rem;
}

.scroll-x {
  text-align: right;
  animation: scroll2 2.5s ease-in-out infinite alternate;
}

@keyframes scroll2 {

  0% {
    transform: translate3d(4px, 0, 0);
  }

  50% {
    transform: translate3d(-4px, 0, 0);
  }

  100% {
    transform: translate3d(4px, 0, 0);
  }
}


/* History */
.History {
  padding-top: var(--mt-05);
  padding-bottom: var(--mt-03);
  background-color: var(--font2_color);
}


.History_title {
  margin-right: auto;
  margin-left: auto;
}

.History_title img {
  width: clamp(15.625rem, 5.208rem + 52.08vw, 31.25rem);/*250-500px*/
  height: auto;
}

.History .History_img {
  margin-top: var(--mt015);
}

.History .History_text {
  margin-top: var(--mt015);
  text-align: justify;
}

/* Character */
.Character {
  background-color: var(--font2_color);
  padding-top: var(--mt-03);
  padding-bottom: var(--mt-03);
  position: relative;
  z-index: 0;
}

.Character .inner {
  position: relative;
  z-index: -2;
}

.Character .inner::before {
  content: "";
  background-image: url(../images/tree.png);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  width: 300px;
  height: 300px;
  position: absolute;
  top: -5rem;
  right: -1rem;
  z-index: -1;
}

.Character .inner::after {
  content: "";
  background-image: url(../images/tree.png);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  width: clamp(12.5rem, 4.167rem + 41.67vw, 25rem);
  height: clamp(12.5rem, 4.167rem + 41.67vw, 25rem);
  position: absolute;
  bottom: clamp(15rem, 8.333rem + 33.33vw, 25rem);
  left: -1rem;
  z-index: -1;
}

.Character .Character_title {
  margin-right: auto;
  margin-left: auto;
}

.Character .Character_title img {
  width: clamp(15.625rem, 5.208rem + 52.08vw, 31.25rem);/*250-500px*/
  height: auto;
}

.Character .Character_wrap {
  margin-top: var(--mt-03);
  width: 85%;
  max-width: 800px;
  margin-right: auto;
  margin-left: auto;
  display: flex;
  flex-direction: column;
}

.Character .Character_BOX {
  width: 95%;
  margin-right: auto;
  margin-left: auto;
}

.Character .Character_BOX .Character_neme {
  font-size: var(--mt-02);
  font-weight: 500;
  white-space: nowrap;
  margin-top: 0.5rem;
}

.Character .Character_wrap .Character_text {
  height: 300px;
  overflow: auto;
  padding-right: 0.5rem;
  margin-top: 0.5rem;
}

/* kumafelt */
.kumafelt {
  margin-top: var(--mt-03);
  width: 85%;
  max-width: 800px;
  margin-right: auto;
  margin-left: auto;
}

.kumafelt .kumafelt_img img {
  box-shadow: 0 0 6px rgba(191, 153, 131, 0.05);
}

.kumafelt .kumafelt_text {
  margin-top: var(--mt015);
  text-align: center;
}

/* scroll-infinity */
.Aboutpage .scroll-infinity {
  margin-top: var(--mt-03);
}

/* img loop */
.Aboutpage .scroll-infinity__wrap {
  display: flex;
  overflow: hidden;
}

.Aboutpage .scroll-infinity__list {
  display: flex;
  list-style: none;
  padding: 0
}

.Aboutpage .scroll-infinity__list--left {
  animation: infinity-scroll-left 350s infinite linear 4s both;
}

.Aboutpage .scroll-infinity__item {
  width: calc(100vw / 3);
  margin-right: 1rem;
}

.Aboutpage .scroll-infinity__item>img {
  width: 100%;
}

@keyframes infinity-scroll-left {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(-100%);
  }
}
/* img loop end*/


/* Company */
.Company {
  padding-top: var(--mt-03);
  padding-bottom: var(--mt-03);
  background-image: var(--lg_color);
  position: relative;
  z-index: 0;
}

.Company .inner {
  position: relative;
  z-index: -2;
}

.Company .inner::before {
  content: "";
  background-image: url(../images/tree.png);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  width: 300px;
  height: 300px;
  position: absolute;
  top: -5rem;
  right: -1rem;
  z-index: -1;
}

.Company .inner::after {
  content: "";
  background-image: url(../images/tree.png);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  width: clamp(12.5rem, 4.167rem + 41.67vw, 25rem);
  height: clamp(12.5rem, 4.167rem + 41.67vw, 25rem);
  position: absolute;
  bottom: clamp(10rem, 50vw, 25rem);
  left: -1rem;
  z-index: -1;
}

.Company .Company_title {
  margin-right: auto;
  margin-left: auto;
}

.Company .Company_title img {
  width: clamp(15.625rem, 5.208rem + 52.08vw, 31.25rem);/*250-500px*/
  height: auto;
}

.Company .table {
  display: table;
  border-collapse: collapse;
  margin-top: var(--mt015);
  width: 95%;
  max-width: 480px;
  margin-right: auto;
  margin-left: auto;
}

.Company .table>.cell {
  display: table-cell;
  font-size: var(--fz16-20);
}

.Company .table>.cell:first-child {
  width: 100px;
}

.Company .Company_img {
  margin-top: var(--mt-015);
}

/*---------------------- AboutCSS END---------------------- */



/*---------------------- About media queryCSS start---------------------- */
@media(min-width: 500px) {

  /* つるのあしらい */
  .Sub_AboutGrimm .Commitment_subtitle .Chapter::before {
    content: "";
    background-image: url(../images/craneleft.png);
    background-repeat: no-repeat;
    background-size: cover;
    width: 150px;
    height: 50px;
    position: absolute;
    top: -1rem;
    left: -10rem;
  }

  .Sub_AboutGrimm .Commitment_subtitle .Chapter::after {
    content: "";
    background-image: url(../images/craneright.png);
    background-repeat: no-repeat;
    background-size: cover;
    width: 150px;
    height: 50px;
    position: absolute;
    top: -1rem;
    right: -10rem;
  }

}

@media(min-width: 650px) {

  /* つるあしらい */
  .Sub_AboutGrimm .Commitment_subtitle .Chapter::before {
    top: -0.5rem;
  }

  .Sub_AboutGrimm .Commitment_subtitle .Chapter::after {
    top: -0.5rem;
  }
}


@media(min-width: 800px) {

  /* Sub_AboutGrimm */
  .Sub_AboutGrimm {
    padding-top: 10rem
  }

  .Sub_AboutGrimm .Sub_AboutGrimm_text {
    text-align: center;
    word-break: auto-phrase;
  }

  .Sub_AboutGrimm .Commitment_text {
    text-align: center;
    word-break: auto-phrase;
  }

  .Sub_AboutGrimm .Commitment_subtitle .Chapter::before {
    content: "";
    background-image: url(../images/craneleft.png);
    background-repeat: no-repeat;
    background-size: cover;
    width: 200px;
    height: 60px;
    position: absolute;
    top: -1rem;
    left: -15rem;
  }

  .Sub_AboutGrimm .Commitment_subtitle .Chapter::after {
    content: "";
    background-image: url(../images/craneright.png);
    background-repeat: no-repeat;
    background-size: cover;
    width: 200px;
    height: 60px;
    position: absolute;
    top: -1rem;
    right: -15rem;
  }

  /* Character */
  .Character .Character_wrap {
    flex-direction: row;
    align-items: center;
    gap: 1.5rem;
  }

  .Character .reverse {
    flex-direction: row-reverse;
  }

  .Character .Character_wrap .Character_text {
    margin-top: var(--mt015);
  }

  .Character .Character_wrap .Character_text::-webkit-scrollbar {
    width: 16px;
    height: 16px;
  }

  .Character .Character_wrap .Character_text::-webkit-scrollbar-track {
    background-color: var(--bg2_color);
    border-radius: 1rem;
  }

  .Character .Character_wrap .Character_text::-webkit-scrollbar-thumb {
    background-color: var(--sub_color);
    border-radius: 1rem;
  }

  /* History */
  .History .History_text {
    text-align: center;
    word-break: auto-phrase;
  }

  /* Company */
  .Company .table>.cell:first-child {
    width: 120px;
  }
}

@media(min-width: 1280px) {

  /* Commitment */
  .Sub_AboutGrimm .Commitment_wrap {
    padding: 7rem 10rem 8rem;
    margin-top: 3rem;
  }

  .Commitment_img_wrap {
    width: 810px;
    margin-top: 3rem;
  }
}

/*---------------------- Local CSS start---------------------- */
/* header */

/* Local */
.Local {
  padding-top: var(--mt-03);
  padding-bottom: var(--mt-03);
  text-align: center;
  position: relative;
  background-color: var(--font2_color);
}


.Local .Local_title {
  margin-left: auto;
  margin-right: auto;
}

.Local .Local_title img {
  width: clamp(15.625rem, 5.208rem + 52.08vw, 31.25rem);/*250-500px*/
  height: auto;
}

.Local .Local_img {
  margin-top: var(--mt-015);
}

.Local .Local_subtitle {
  font-weight: 500;
  margin-top: var(--mt-015);
  font-size: var(--fz16-20);
}

.Local .Local_text {
  margin-top: var(--mt-015);
  text-align: justify;
}

/* scroll-infinity */
.Local .scroll-infinity {
  margin-top: var(--mt-015);
}

/* img loop */
.Local .scroll-infinity__wrap {
  display: flex;
  overflow: hidden;
}

.Local .scroll-infinity__list {
  display: flex;
  list-style: none;
  padding: 0
}

.Local .scroll-infinity__list--left {
  animation: infinity-scroll-left 350s infinite linear 4s both;
}

.Local .scroll-infinity__item {
  width: calc(100vw / 3);
  margin-right: 1rem;
}

.Local .scroll-infinity__item>img {
  width: 100%;
}

@keyframes infinity-scroll-left {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(-100%);
  }
}
/* img loop end*/

/* Material */
.Material {
  background-image: var(--lg_color2);
  padding-top: var(--mt-03);
  padding-bottom: var(--mt-03);
}

.Material .Material_title {
  margin-right: auto;
  margin-left: auto;
}

.Material .Material_title img {
  width: clamp(15.625rem, 5.208rem + 52.08vw, 31.25rem);/*250-500px*/
  height: auto;
}

.Material .Material_wrap {
  display: flex;
  flex-direction: column;
  gap: var(--mt015);
}

.Material .Material_img {
  margin-top: var(--mt-03);
  position: relative;
}

.Material .MaterialF::after {
  content: "";
  background-image: url(../images/komugiashirai.png);
  background-repeat: no-repeat;
  background-size: cover;
  position: absolute;
  bottom: -2rem;
  right: -1rem;
  width: clamp(8.125rem, 2.708rem + 27.08vw, 16.25rem);
  height: clamp(6.25rem, 2.083rem + 20.83vw, 12.5rem);
}

.Material .Material_subtitle {
  font-size: clamp(1.2rem, 0.719rem + 2.05vw, 2rem);
  font-weight: 500;
  text-align: left;
  width: 85%;
  margin-right: auto;
  margin-left: auto;
  letter-spacing: -0.08rem;
  white-space: nowrap;
}

.Material .Material_detil {
  margin-top: 0.5rem;
  margin-right: auto;
  margin-left: auto;
  width: 85%;
  line-height: 1.5;
}

.Material .Material_icon {
  display: flex;
  gap: 1rem;
  justify-content: center;
  margin-top: 0.5rem;
}

/* scroll-infinity */
.Material .scroll-infinity {
  margin-top: var(--mt-015);
}

/* img loop */
.Material .scroll-infinity__wrap {
  display: flex;
  overflow: hidden;
}

.Material .scroll-infinity__list {
  display: flex;
  list-style: none;
  padding: 0
}

.Material .scroll-infinity__list--left {
  animation: infinity-scroll-left 200s infinite linear 3s both;
}

.Material .scroll-infinity__item {
  width: calc(100vw / 2);
}

.Material .scroll-infinity__item>img {
  width: 100%;
}

@keyframes infinity-scroll-left {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(-100%);
  }
}

/* img loop end*/

/* LocalShop */
.LocalShop {
  padding-top: var(--mt-05);
  padding-bottom: var(--mt-03);
  background-image: var(--lg_color);
}

.LocalShop .LocalShop_title {
  width: clamp(15.625rem, 5.208rem + 52.08vw, 31.25rem);/*250-500px*/
  height: auto;
  margin-right: auto;
  margin-left: auto;
}

.LocalShop .LocalShop_img {
  margin-top: var(--mt015);
}

.LocalShop .LocalShop_wrap {
  display: flex;
  flex-direction: column;
  margin-top: var(--mt-015);
  gap: var(--mt015);
}

.LocalShop .LocalShop_text {
  width: 95%;
  max-width: 350px;
  margin-right: auto;
  margin-left: auto;
  text-align: center;
}

.LocalShop .LocalShop_subtitle {
  font-weight: 500;
  font-size: 1.5rem;
  text-align-last: left;
  white-space: nowrap;
  margin-bottom: 1.5rem;
}

.LocalShop .table {
  display: table;
  border-collapse: collapse;
  width: 100%;
  max-width: 480px;
  margin-right: auto;
  margin-left: auto;

}

.LocalShop .table>.cell {
  display: table-cell;
  text-align: left;
  font-size: 1rem;
}

.LocalShop .table>.cell:first-child {
  width: 130px;
  padding-right: 0.2rem;
}

.LocalShop .LocalShop_ditel {
  line-height: 1.5;
}

.LocalShop .btn_map {
  background-color: var(--sub_color);
  margin-top: 0.5rem;
  width: 190px;
}
.LocalShop .btn_map p {
  font-size: 1rem;
}

.LocalShop .btn_map:hover {
  transition: all 0.5s;
  background-color: var(--font2_color);
}


.LocalShop .LocalShop_text a:hover {
  color: var(--sub_color);
  transition: all .5s;
}

/*---------------------- Local END---------------------- */

/*---------------------- Local media queryCSS start---------------------- */

@media(min-width: 800px) {

  /* Local */
  .Local {
    padding-top: 10rem
  }

  .Local .Local_text {
    text-align: center;
  }

  /* Material */
  .Material .Material_icon .panicon {
    width: 150px;
  }


  .Material_img,
  .Material_text {
    flex: 1;
  }

  .Material .Material_icon {
    margin-top: 3rem;
  }

  /* LocalShop */
  .LocalShop {
    padding-bottom: 15rem;
  }

  .LocalShop .table {
    margin-top: 0.3rem;
  }

  .LocalShop .LocalShop_wrap {
    flex-direction: row;
    align-items: center;
    justify-content: center;
    margin-top: 7rem;

  }

  .LocalShop .LocalShop_img,
  .LocalShop .LocalShop_text {
    flex: 1;
    max-width: 450px;
    margin-right: 0;
    margin-left: 0;
  }

  .LocalShop .LocalShop_img {
    margin-top: 0;
  }

  .LocalShop .LocalShop_subtitle {
    margin-left: 2rem;

  }

  .LocalShop .LocalShop_ditel {
    font-size: clamp(1rem, 0.5rem + 1vw, 1.25rem);
    margin-left: 2rem;
  }

}

@media(min-width: 1000px) {
  .Material .Material_wrap {
    flex-direction: row;
    align-items: center;

  }

  .Material .reverse {
    flex-direction: row-reverse;
  }
  .Material .Material_subtitle {
    font-size: clamp(1.4rem, -0.029rem + 2.29vw, 1.8rem);
  }
}

/*---------------------- Local media queryCSS END---------------------- */

/*---------------------- Shop start---------------------- */
/* SHOP_shop */
.SHOP_shop {
  background-color: var(--font2_color);
  padding-top: var(--mt-03);
  padding-bottom: var(--mt-03);
}

.SHOP_shop .SHOP_shop_title img {
  width: clamp(15.625rem, 5.208rem + 52.08vw, 31.25rem);/*250-500px*/
  height: auto;
}

/* 店舗情報スライド */
.SHOP_shop .slider6-wrap {
  width: 95%;
  height: auto;
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
  margin-top: var(--mt-015);
  position: relative;
}

.SHOP_shop .slider-6 .slick-slide {
  height: auto;
  overflow: hidden;
}

.SHOP_shop .slider-6 .slick-slide img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.SHOP_shop .thumbs_dots {
  text-align: center;
}

.SHOP_shop .thumbs_list li {
  display: inline-block;
  width: 110px;
  height: 100px;
  opacity: 0.4;
  cursor: pointer;
  transition: opacity 0.3s;
  margin-right: 0.3rem;
}

.thumbs_list li.slick-active {
  opacity: 1;
}

/* 住所など */
.SHOP_shop .SHOP_shop_subtitle {
  white-space: nowrap;
  font-size: clamp(0.938rem, 0.229rem + 3.54vw, 2rem);
  margin-top: var(--mt-015);
  margin-bottom: var(--mt-015);
}


.SHOP_shop .table {
  display: table;
  border-collapse: collapse;
  margin-top: 1rem;
  width: 100%;
  max-width: 520px;
  margin-right: auto;
  margin-left: auto;
}

.SHOP_shop .table>.cell {
  display: table-cell;
  text-align: left;
  font-size: clamp(1rem, 0.667rem + 1.67vw, 1.5rem);
  font-size: var(--fz16-20);
}

.SHOP_shop .table>.cell:first-child {
  width: 130px;
  padding-right: 0.2rem;
}

.SHOP_shop .LocalShop_ditel {
  line-height: 1.5;
}

/* Access */
.Access {
  padding-top: var(--mt-03);
  background-image: var(--lg_color);
}

.Access .Access_title img {
  width: clamp(15.625rem, 5.208rem + 52.08vw, 31.25rem);/*250-500px*/
  height: auto;
}

.Access .Access_subtitle {
  font-size: clamp(1rem, 0.667rem + 1.67vw, 1.5rem);
  text-align-last: left;
  margin-top: var(--mt015);
  margin-bottom: 0.5rem;
}

.Access_map {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.Access_map_wrap {
  margin-top: var(--mt-015);
}

.map_roughly {
  width: 100%;
  max-width: 500px;
}

.Access_googlemap iframe {
  margin-top: var(--mt-015);
  width: 100%;
  height: 500px;
  filter: sepia(10%);
  vertical-align: bottom;
}


/* modal */

.modal_title {
  font-size: 1.1rem;
  margin-bottom: 0.5rem;
  margin-top: 0.5rem;
  color: var(--font_color);
}

.modal_ingredients,
.modal_explain {
  font-size: 0.9rem;
  color: var(--font_color);
}

/* モーダルここから */
.modal {
  display: none;
}

.Material_icon .btn,
.LINEUP .btn {
  background-color: transparent;
  padding: 0;
}

.LINEUP .btn:hover {
  opacity: 1;
}

.Material_icon_modaltext {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.Material_icon_modaltext_wrap {
  margin-bottom: 3rem;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* モーダル ここまで*/


/* QA */
.QA {
  padding-top: var(--mt-03);
  padding-bottom: var(--mt-03);
  background-color: var(--font2_color);
}

.QA .QA_title img {
  width: clamp(15.625rem, 5.208rem + 52.08vw, 31.25rem);/*250-500px*/
  height: auto;
}

/* アコーディオン */
.QA .s_04 {
  margin-top: var(--mt-015);
  margin-bottom: var(--mt-015);
}

.QA .s_04 .accordion_one {
  max-width: 1024px;
  margin: 0 auto;
}

.QA .s_04 .accordion_one .accordion_header {
  font-size: 26px;
  padding-top: 1.5rem;
  padding-left: 1rem;
  text-align: left;
  position: relative;
  z-index: +1;
  cursor: pointer;
  transition-duration: 0.2s;
  border-bottom: 1px solid;

}

.QA .s_04 .accordion_one .accordion_header::before {
  content: "";
  background-image: url(../images/question.png);
  background-repeat: no-repeat;
  background-size: cover;
  width: 50px;
  height: 50px;
  position: absolute;
  top: 1.2rem;
  left: -2.5rem;
}

.QA .s_04 .accordion_one .accordion_header:hover {
  opacity: .8;
}

.QA .s_04 .accordion_one .accordion_header .i_box {
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: 50%;
  right: 5%;
  width: 40px;
  height: 40px;
  margin-top: -20px;
  box-sizing: border-box;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  transform-origin: center center;
  transition-duration: 0.2s;
}

.QA .s_04 .accordion_one .accordion_header.stay .i_box {
  -webkit-transform: rotate(0deg);
  transform: rotate(0deg);
}

.QA .s_04 .accordion_one .accordion_header .i_box .one_i {
  display: block;
  width: 18px;
  height: 18px;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  transform-origin: center center;
  transition-duration: 0.2s;
  position: relative;
}

.QA .s_04 .accordion_one .accordion_header.stay .i_box .one_i {
  -webkit-transform: rotate(0deg);
  transform: rotate(0deg);
}

.QA .s_04 .accordion_one .accordion_header.stay.open .i_box .one_i {
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}

.QA .s_04 .accordion_one .accordion_header.open .i_box {
  -webkit-transform: rotate(-360deg);
  transform: rotate(-360deg);
}

.QA .s_04 .accordion_one .accordion_header.stay.open .i_box {
  -webkit-transform: rotate(315eg);
  transform: rotate(315deg);
}

.QA .s_04 .accordion_one .accordion_header .i_box .one_i:before,
.s_04 .accordion_one .accordion_header .i_box .one_i:after {
  display: flex;
  content: '';
  background-color: var(--font_color);
  border-radius: 10px;
  width: 18px;
  height: 4px;
  position: absolute;
  top: 7px;
  left: 0;
  -webkit-transform: rotate(0deg);
  transform: rotate(0deg);
  transform-origin: center center;
}

.QA .s_04 .accordion_one .accordion_header .i_box .one_i:before {
  width: 4px;
  height: 18px;
  top: 0;
  left: 7px;
}

.QA .s_04 .accordion_one .accordion_header.stay .i_box .one_i:before {
  content: none;
}

.QA .s_04 .accordion_one .accordion_header.open .i_box .one_i:before {
  content: none;
}

.QA .s_04 .accordion_one .accordion_header.stay.open .i_box .one_i:before {
  content: "";
}

.QA .s_04 .accordion_one .accordion_header.open .i_box .one_i:after {
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
}

.QA .s_04 .accordion_one .accordion_header.stay.open .i_box .one_i:after {
  -webkit-transform: rotate(0deg);
  transform: rotate(0deg);
}

.QA .s_04 .accordion_one .accordion_inner {
  display: none;
  padding: 2rem 1rem;
  box-sizing: border-box;
  width: 85%;
}

.QA .s_04 .accordion_one .accordion_inner.stay {
  display: block;
}

.QA .s_04 .accordion_one .accordion_inner p.txt_a_ac {
  margin: 0;
}

.QA .btn_QA {
  background-color: var(--sub_color);
  margin-top: var(--mt015);
  margin-bottom: var(--mt015);
  padding: 1rem 1.5rem;
  width: 190px;
}

.QA .btn_QA:hover {
  transition: all 0.5s;
  background-color: var(--bg_color);
}
/* アコーディオンここまで */

/* ふわっと */
.fadeIn {
  opacity: 0;
  /* 初期値は透明にしておく */
  transition: 1s;
  /* 動くスピードを0.5秒に指定 */
  position: relative;
  /* 相対位置の設定 */
  top: 50px;
  /* 事前に下に50pxずらしておく */
}

.active1 {
  opacity: 1;
  /* 透明度を元に戻す */
  top: 0;
  /* ずらしていた位置を戻すことで上に上がっているようにみえる */
}

/*---------------------- Shop END---------------------- */

/*---------------------- Shop mediaQueryCSS start---------------------- */
@media(min-width: 500px) {
  .SHOP_shop .table>.cell:first-child {
    width: 180px;
  }
}

@media(min-width: 800px) {
  /* SHOP_shop */
  .SHOP_shop {
    padding-top: 10rem
  }

  .SHOP_shop .thumbs_list li {
    width: 185.2px;
    height: 140px;
  }

  /* Access */
  .Access_item_wrap {
    max-width: 500px;
    margin-top: var(--mt-03);
  }
}

@media screen and (max-width: 1024px) {
  .QA .s_04 .accordion_one .accordion_header {
    font-size: 18px;
    padding-left: 1rem;
    max-width: 800px;
    margin-right: auto;
    margin-left: auto;
  }

  .QA .s_04 .accordion_one .accordion_header .i_box {
    width: 30px;
    height: 30px;
    margin-top: -15px;
  }

  .QA .s_04 .accordion_one .accordion_header::before {
    content: "";
    background-image: url(../images/question.png);
    background-repeat: no-repeat;
    background-size: cover;
    width: 30px;
    height: 30px;
    position: absolute;
    top: 1.4rem;
    left: -1.2rem;
  }

  .QA .s_04 .accordion_one .accordion_inner {
    max-width: 700px;
  }
}

@media screen and (max-width: 767px) {
  .QA .s_04 .accordion_one .accordion_header {
    font-size: 16px;
    text-align: left;
    padding: 15px 60px 15px 1.7rem;
  }

  .QA .s_04 .accordion_one .accordion_header::before {
    content: "";
    background-image: url(../images/question.png);
    background-repeat: no-repeat;
    background-size: cover;
    width: 25px;
    height: 25px;
    position: absolute;
    top: 1rem;
    left: -0.2rem;
  }
}

/*---------------------- Shop mediaQueryCSS END---------------------- */



/*---------------------- Recruit start---------------------- */

/* recruit */
.RecruitGrimm {
  background-color: #F0DFB7;
  background-image: url(../images/BGinst.png);
  background-repeat: repeat;
  background-size: 100%;
  background-position: center;
  padding-top: var(--mt-03);
  padding-bottom: var(--mt-03);
  text-align: center;
  position: relative;
  z-index: 0;
}

.Recruit_title {
  margin-left: auto;
  margin-right: auto;
}

.Recruit_title img {
  width: clamp(15.625rem, 5.208rem + 52.08vw, 31.25rem);/*250-500px*/
  height: auto;
}

.RecruitGrimm_img {
  margin-top: var(--mt-015);
}

.RecruitGrimm_text {
  margin-top: var(--mt-015);
  margin-bottom: var(--mt-015);
}

.RecruitGrimm .inner {
  position: relative;
  z-index: -2;
}

.RecruitGrimm .inner::before {
  content: "";
  background-image: url(../images/tree.png);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  width: 300px;
  height: 300px;
  position: absolute;
  top: -5rem;
  right: -1rem;
  z-index: -1;
}

.RecruitGrimm .inner::after {
  content: "";
  background-image: url(../images/tree.png);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  width: clamp(12.5rem, 4.167rem + 41.67vw, 25rem);
  height: clamp(12.5rem, 4.167rem + 41.67vw, 25rem);
  position: absolute;
  top: 20rem;
  left: -1rem;
  z-index: -1;
}

/*---------------------- Recruit END---------------------- */
/*---------------------- Recruit mediaQueryCSS start---------------------- */
@media(min-width: 800px) {

  /* recruit*/
  .RecruitGrimm {
    padding-top: 10rem
  }

  .RecruitGrimm_text {
    text-align: center;
  }
}

/*---------------------- Recruit mediaQueryCSS END---------------------- */



/*---------------------- LINEUP start---------------------- */
/* SHOP_shop */
.LINEUP {
  background-image: url(../images/backgroudimage.jpg);
  background-size: 100%;
  background-repeat: repeat;
}

.LINEUP .LineUp_title img {
  width: clamp(15.625rem, 5.208rem + 52.08vw, 31.25rem);/*250-500px*/
  height: auto;
}

.lineuppage .lineup {
  padding-top: var(--mt-03);
  padding-bottom: var(--mt-03);
}

.lineuppage .btn_wrap {
  text-align-last: left;
}

.lineuppage .btn_yakiagari {
  border: none;
  font-size: 1.2rem;
  font-family: "Kiwi Maru", serif;
  background-color: var(--font2_color);
  color: var(--font_color);
  padding: 1rem 2rem 1rem 2rem;
  border-radius: 2rem;
  letter-spacing: .05rem;
  cursor: pointer;
  position: relative;
  margin-top: 1.5rem;
  margin-bottom: 0.5rem;
  margin-left: 0.5rem;
}

.btn_yakiagari:hover {
  background-color: #CE9254;
  transition: all 2s;
}

/*---------------------- LINEUP END---------------------- */


/*---------------------- LINEUP  mediaQueryCSS start------------------- */

@media(min-width: 800px) {
  .lineuppage .lineup {
    padding-top: 10rem
  }

  .lineuppage .btn_yakiagari {
    margin-left: 1.5rem;
  }
}


/*---------------------- LINEUP  mediaQueryCSS END------------------- */