@charset "UTF-8";
/* Box sizing rules */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Prevent font size inflation */
html {
  -moz-text-size-adjust: none;
  -webkit-text-size-adjust: none;
  text-size-adjust: none;
}

/* Remove default margin in favour of better control in authored CSS */
body, h1, h2, h3, h4, p,
figure, blockquote, dl, dd {
  margin-block-end: 0;
}

/* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */
ul[role=list],
ol[role=list] {
  list-style: none;
}

/* Set core body defaults */
body {
  min-height: 100vh;
  line-height: 1.5;
}

/* Set shorter line heights on headings and interactive elements */
h1, h2, h3, h4,
button, input, label {
  line-height: 1.1;
}

/* Balance text wrapping on headings */
h1, h2,
h3, h4 {
  text-wrap: balance;
}

/* A elements that don't have a class get default styles */
a:not([class]) {
  text-decoration-skip-ink: auto;
  color: currentColor;
}

/* Make images easier to work with */
img,
picture {
  max-width: 100%;
  display: block;
}

/* Inherit fonts for inputs and buttons */
input, button,
textarea, select {
  font-family: inherit;
  font-size: inherit;
}

/* Make sure textareas without a rows attribute are not tiny */
textarea:not([rows]) {
  min-height: 10em;
}

/* Anything that has been anchored to should have extra scroll margin */
:target {
  scroll-margin-block: 5ex;
}

/**
 * 追記
 */
body {
  margin: 0;
  padding: 0;
}

a:link,
a:visited {
  text-decoration: none;
}

a:hover,
a:focus {
  opacity: 0.6;
  transition: opacity 0.2s;
}

h1,
h2,
h3,
h4,
h5,
h6,
p {
  margin: 0;
}

ul,
ol {
  list-style: none;
  margin: 0;
  padding: 0;
}

dl,
dt,
dd {
  margin: 0;
  padding: 0;
}

img {
  max-width: 100%;
  display: block;
}

address {
  font-style: normal;
}

/* ------------------------------
 * default
------------------------------ */
html {
  font-size: 100%;
}

body {
  font-size: 1rem;
  font-family: "Zen Kaku Gothic New", "Noto Sans JP", sans-serif;
  font-weight: 500;
  line-height: 1.6;
  color: #000;
  position: relative;
  background-color: #FDFDDA;
}
@media screen and (max-width: 768px) {
  body {
    font-size: 0.875rem;
  }
}

.krona_one {
  font-family: "Krona One", sans-serif;
}

._sh {
  width: 1px;
  height: 1px;
  clip: rect(1px, 1px, 1px, 1px);
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
}

@media screen and (max-width: 768px) {
  ._pc-only {
    display: none;
  }
}

._sp-only {
  display: none;
}
@media screen and (max-width: 768px) {
  ._sp-only {
    display: block;
  }
}

._xsp-only {
  display: none;
}
@media screen and (max-width: 375px) {
  ._xsp-only {
    display: block;
  }
}

.l-adjust {
  max-width: 1312px;
  width: 100%;
  margin: 0 auto;
  padding: 0 16px;
}

.text-lg {
  font-size: clamp(1.125rem, 3vw, 1.75rem);
}

.text-clr {
  font-weight: 900;
}
.text-clr--gr {
  color: #8FC31F;
}
.text-clr--or {
  color: #F6B01C;
}

.text-sm {
  font-size: clamp(0.6875rem, 2vw, 1.125rem);
  margin: 0 -6px;
}

.tel {
  color: #000;
  pointer-events: none;
  cursor: none;
}
@media screen and (max-width: 768px) {
  .tel {
    pointer-events: auto;
    cursor: pointer;
  }
}

.arrow {
  width: 30px;
  height: 26px;
  color: #fff;
  border-radius: 32px;
  display: inline-block;
  background-color: #000;
  position: absolute;
  top: 55%;
  right: 0;
  overflow: hidden;
  transform: translateY(-50%);
  transition: all 0.3s ease;
}
.arrow::before, .arrow::after {
  content: "";
  width: 100%;
  height: 100%;
  display: block;
  position: absolute;
  transition: all 0.4s;
}
.arrow::before {
  top: 0;
  left: 0;
  background: url(../images/common/icon-arrow-wh.svg) no-repeat center center;
  opacity: 1;
}
.arrow::after {
  left: -100%;
  background: url(../images/common/icon-arrow-bk.svg) no-repeat center center;
  opacity: 0;
}

.header {
  padding: 0 16px;
}
.header__container {
  max-width: 900px;
  width: 100%;
  margin: 0 auto;
  padding-top: clamp(16px, 3vw, 24px);
}
.header__link {
  width: clamp(102px, 18vw, 165px);
  display: block;
}
.header__link img {
  width: 100%;
  display: block;
}

.footer {
  padding-top: 64px;
  padding-bottom: 64px;
  background-color: #FFFFAD;
  position: relative;
  z-index: 5;
}
@media screen and (max-width: 768px) {
  .footer {
    padding-top: 48px;
  }
}
@media screen and (max-width: 768px) {
  .footer::before {
    content: "";
    width: 100%;
    height: 50%;
    display: block;
    background-color: #FFFFAD;
    position: absolute;
    bottom: 100%;
  }
}
.footer__hill {
  width: 100%;
  height: 154px;
  position: absolute;
  bottom: 100%;
  left: 0;
  right: 0;
}
@media screen and (max-width: 768px) {
  .footer__hill {
    height: 32px;
    bottom: 150%;
  }
}
.footer__hill-svg {
  width: 100%;
  height: 100%;
}
.footer__container {
  max-width: 900px;
  margin: 0 auto;
  position: relative;
}
.footer__info {
  text-align: center;
}
.footer__info-link {
  max-width: 160px;
  width: 100%;
  margin: 0 auto;
  display: block;
}
.footer__info-logo {
  max-width: 160px;
  margin: 0 auto;
}
.footer__info-address {
  margin-top: 16px;
}
.footer__copy {
  font-size: 0.75rem;
  text-align: center;
  margin-top: 24px;
}

a.pagetop {
  opacity: 1;
}

.pagetop {
  width: 48px;
  height: 56px;
  border-radius: 32px;
  background-color: #F6B01C;
  position: absolute;
  bottom: 0;
  right: 20px;
  opacity: 1;
  transition: all 0.3s ease;
}
@media screen and (max-width: 768px) {
  .pagetop {
    width: 29px;
    height: 34px;
    bottom: -65px;
  }
}
.pagetop .arrow {
  width: 24px;
  height: 24px;
  margin: 0 auto;
  background-color: transparent;
  top: 50%;
  left: 0;
  right: 0;
}
@media screen and (max-width: 768px) {
  .pagetop .arrow {
    width: 15px;
    height: 15px;
  }
}
.pagetop .arrow::before, .pagetop .arrow::after {
  background-size: 100% auto;
  transform: rotate(-90deg);
}
.pagetop .arrow::after {
  background-image: url(../images/common/icon-arrow-wh.svg);
  top: 100%;
  left: 0;
}
.pagetop:hover {
  background-color: #000;
}
.pagetop:hover .arrow {
  opacity: 1;
}
.pagetop:hover .arrow::before {
  top: -100%;
  opacity: 0;
  visibility: hidden;
}
.pagetop:hover .arrow::after {
  top: 0;
  opacity: 1;
}

.melon-fair {
  padding-top: clamp(16px, 3vw, 24px);
  position: relative;
  overflow: hidden;
}
@media screen and (max-width: 768px) {
  .melon-fair {
    padding-top: 16px;
  }
}

.bg {
  max-width: 1920px;
  width: 100%;
  height: 100%;
  margin: 0 auto;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
}
.bg__wrap {
  max-width: 1280px;
  width: 100%;
  height: 100%;
  margin: 0 auto;
  position: relative;
}
.bg__parts {
  position: absolute;
  z-index: 49;
}
.bg__parts1 {
  width: 133px;
  top: 16%;
  left: 100%;
  transform: translateX(170%);
}
@media screen and (max-width: 768px) {
  .bg__parts1 {
    width: 51px;
    top: 100%;
    left: 0;
    transform: translateX(-10%);
  }
}
.bg__parts2 {
  width: 141px;
  top: 93%;
  right: 0;
  transform: translateX(70%);
}
@media screen and (max-width: 768px) {
  .bg__parts2 {
    width: clamp(38px, 10vw, 141px);
    top: 99%;
    left: 91.4%;
    right: auto;
    transform: translateX(0);
  }
}
.bg__parts3 {
  width: 114px;
  top: 50%;
  right: 100%;
  transform: translateX(-100%);
}
@media screen and (max-width: 768px) {
  .bg__parts3 {
    width: clamp(38px, 8vw, 114px);
    top: clamp(79%, 154vw, 83%);
    left: 13%;
    right: auto;
    transform: translateX(0);
    opacity: 0.45;
  }
}
.bg__parts4 {
  width: 194px;
  top: 104%;
  right: 100%;
  transform: translateX(-70%);
}
@media screen and (max-width: 768px) {
  .bg__parts4 {
    display: none;
  }
}
.bg__parts5 {
  width: 201px;
  top: 116%;
  left: 100%;
  transform: translateX(59%);
}
@media screen and (max-width: 768px) {
  .bg__parts5 {
    display: none;
  }
}
.bg__parts6 {
  width: 250px;
  top: 35%;
  left: 100%;
}
@media screen and (max-width: 768px) {
  .bg__parts6 {
    display: none;
  }
}
.bg__parts7 {
  width: 133px;
  top: 52%;
  left: 100%;
  transform: translateX(-100%);
}
.bg__parts8 {
  width: 380px;
  top: 57%;
  right: 97%;
}
@media screen and (max-width: 768px) {
  .bg__parts8 {
    width: clamp(135px, 40vw, 200px);
    top: 88%;
    right: 0;
    transform: translateX(40%) rotate(120deg);
  }
}
.bg__parts9 {
  width: 201px;
  top: 69%;
  right: 100%;
  transform: translateX(-10%);
}
@media screen and (max-width: 768px) {
  .bg__parts9 {
    display: none;
  }
}
.bg__parts10 {
  width: 403px;
  top: 69%;
  left: 100%;
}
@media screen and (max-width: 768px) {
  .bg__parts10 {
    display: none;
  }
}
.bg__parts11 {
  width: 380px;
  top: 10%;
  right: 74%;
}
@media screen and (max-width: 768px) {
  .bg__parts11 {
    width: clamp(144px, 37vw, 185px);
    top: 15.6%;
    left: 0;
    right: auto;
    transform: translateX(-10%);
  }
}
.bg__parts12 {
  width: 201px;
  top: 16%;
  left: 100%;
  transform: translateX(20%);
}
@media screen and (max-width: 768px) {
  .bg__parts12 {
    display: none;
  }
}
.bg__parts13 {
  width: 133px;
  top: 24.5%;
  left: 98%;
}
@media screen and (max-width: 768px) {
  .bg__parts13 {
    display: none;
  }
}
.bg__parts14 {
  width: 380px;
  top: 24.9%;
  right: 95.3%;
}
@media screen and (max-width: 768px) {
  .bg__parts14 {
    width: clamp(135px, 39vw, 195px);
    top: 7.93%;
    left: 0;
    right: auto;
    transform: translateX(-16%);
  }
}
.bg__parts15 {
  width: 201px;
  top: 34.7%;
  right: 84%;
}
@media screen and (max-width: 768px) {
  .bg__parts15 {
    top: 24%;
    right: 8%;
  }
}
.bg__parts16 {
  width: 250px;
  top: 38.9%;
  right: 100%;
  transform: translateX(-40%);
}
@media screen and (max-width: 768px) {
  .bg__parts16 {
    width: clamp(118px, 27vw, 191px);
    top: 39.2%;
    right: 42%;
    transform: rotate(-26deg);
  }
}
.bg__parts17 {
  width: 403px;
  top: 49.8%;
  left: 86%;
}
@media screen and (max-width: 768px) {
  .bg__parts17 {
    width: 281px;
    top: 30.5%;
    left: 53%;
    transform: rotate(5deg);
  }
}
.bg__parts18 {
  width: 201px;
  top: 61.3%;
  right: 77%;
}
@media screen and (max-width: 768px) {
  .bg__parts18 {
    width: 94px;
    top: 67.1%;
    right: 0;
    left: 91%;
  }
}
.bg__parts19 {
  width: 226px;
  top: 65.4%;
  right: 100%;
  transform: translateX(-42%);
}
@media screen and (max-width: 768px) {
  .bg__parts19 {
    width: clamp(88px, 20vw, 110px);
    top: 1.6%;
    right: 0;
    transform: translateX(12%);
  }
}
.bg__parts20 {
  width: 133px;
  top: 74.8%;
  left: 100%;
  transform: translateX(42%);
}
@media screen and (max-width: 768px) {
  .bg__parts20 {
    display: none;
  }
}
.bg__parts21 {
  width: 246px;
  top: 77%;
  right: 81%;
}
@media screen and (max-width: 768px) {
  .bg__parts21 {
    width: clamp(135px, 39vw, 195px);
    top: 21%;
    right: 88%;
    transform: translateX(0);
  }
}
.bg__parts22 {
  width: 536px;
  top: 86%;
  left: 67%;
}
@media screen and (max-width: 768px) {
  .bg__parts22 {
    display: none;
  }
}
.bg__parts23 {
  width: 114px;
  top: 99.8%;
  right: 99.5%;
}
@media screen and (max-width: 768px) {
  .bg__parts23 {
    display: none;
  }
}
.bg__parts24 {
  display: none;
}
@media screen and (max-width: 768px) {
  .bg__parts24 {
    width: clamp(62px, 16vw, 101px);
    top: 5%;
    right: 0;
    transform: translateX(42%);
    display: block;
  }
}
.bg__parts25 {
  display: none;
}
@media screen and (max-width: 768px) {
  .bg__parts25 {
    width: clamp(101px, 22vw, 201px);
    top: 30.6%;
    left: 26%;
    display: block;
  }
}
.bg__parts26 {
  display: none;
}
@media screen and (max-width: 768px) {
  .bg__parts26 {
    width: 124px;
    top: 41.6%;
    right: 0;
    transform: translateX(71%);
    display: block;
  }
}
.bg__parts27 {
  display: none;
}
@media screen and (max-width: 768px) {
  .bg__parts27 {
    width: clamp(51px, 13vw, 81px);
    top: 72.1%;
    left: 43%;
    display: block;
  }
}
.bg__parts28 {
  display: none;
}
@media screen and (max-width: 768px) {
  .bg__parts28 {
    width: clamp(114px, 19vw, 141px);
    top: 96.5%;
    right: clamp(84%, 88vw, 92%);
    display: block;
  }
}
.bg__parts29 {
  display: none;
}
@media screen and (max-width: 768px) {
  .bg__parts29 {
    width: clamp(86px, 19vw, 101px);
    top: 99%;
    right: 0;
    display: block;
  }
}
.bg__parts30 {
  display: none;
}
@media screen and (max-width: 768px) {
  .bg__parts30 {
    width: 269px;
    top: 21.4%;
    right: clamp(27.7%, 29vw, 64.3%);
    display: block;
  }
}
.bg__parts31 {
  display: none;
}
@media screen and (max-width: 768px) {
  .bg__parts31 {
    width: 141px;
    margin: 0 auto;
    top: 54.7%;
    left: 0;
    right: 0;
    display: block;
    transform: translate(-15%);
  }
}
.bg__parts32 {
  display: none;
}
@media screen and (max-width: 768px) {
  .bg__parts32 {
    width: clamp(135px, 39vw, 195px);
    top: 55.3%;
    right: 68%;
    display: block;
  }
}
.bg__parts33 {
  display: none;
}
@media screen and (max-width: 768px) {
  .bg__parts33 {
    width: clamp(144px, 37vw, 185px);
    top: 61.4%;
    right: 63%;
    display: block;
  }
}
.bg__parts34 {
  display: none;
}
@media screen and (max-width: 768px) {
  .bg__parts34 {
    width: 265px;
    top: 67.8%;
    left: 0;
    display: block;
  }
}
.bg__parts35 {
  display: none;
}
@media screen and (max-width: 768px) {
  .bg__parts35 {
    width: 281px;
    top: 77.3%;
    left: 90%;
    display: block;
    transform: rotate(-110deg);
  }
}
.bg__parts36 {
  display: none;
}
@media screen and (max-width: 768px) {
  .bg__parts36 {
    width: 201px;
    top: 84.2%;
    right: 8%;
    display: block;
  }
}
.bg__parts37 {
  display: none;
}
@media screen and (max-width: 768px) {
  .bg__parts37 {
    width: clamp(118px, 27vw, 191px);
    top: 91.8%;
    right: 45%;
    display: block;
    transform: rotate(-30deg);
  }
}
.bg__parts38 {
  display: none;
}
@media screen and (max-width: 768px) {
  .bg__parts38 {
    width: 62px;
    top: 100%;
    left: 86%;
    display: block;
    transform: rotate(17deg);
  }
}

.section {
  position: relative;
}
.section__head {
  text-align: center;
  padding-bottom: 88px;
  display: flex;
  justify-content: center;
  position: relative;
  z-index: 50;
}
@media screen and (max-width: 768px) {
  .section__head {
    gap: 0 5px;
  }
}
.section__arch {
  height: 30px;
  flex: 1;
  transform: translateY(clamp(20px, 1.5vw, 40px));
}
.section__arch path {
  fill: none;
  stroke-width: clamp(6px, 1.5vw, 12px);
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}
.section__heading-inner {
  max-width: clamp(281px, 74vw, 692px);
  width: 100%;
  flex-shrink: 0;
}
.section__image {
  text-align: center;
  margin: 0 auto;
  display: block;
}
.section__heading {
  text-align: center;
}
.section__heading span {
  font-size: clamp(0.875rem, 3vw, 1.75rem);
  margin-top: 10px;
  display: block;
}
.section__container {
  max-width: 1312px;
  width: 100%;
  margin: 0 auto;
  padding: 0 16px;
  position: relative;
  z-index: 51;
}
.section__hill {
  width: 100%;
  height: 154px;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 5;
}
@media screen and (max-width: 768px) {
  .section__hill {
    height: 32px;
  }
}
.section__hill-lineup {
  top: 39%;
}
@media screen and (max-width: 768px) {
  .section__hill-lineup {
    top: 94%;
  }
}
.section__hill-about {
  top: 55%;
}
@media screen and (max-width: 768px) {
  .section__hill-about {
    top: 48%;
  }
}
.section__hill-menu {
  top: 9%;
}
@media screen and (max-width: 768px) {
  .section__hill-menu {
    top: 1.3%;
  }
}
.section__hill-svg {
  width: 100%;
  height: 100%;
  display: block;
}

.mv__image {
  max-width: 900px;
  width: 100%;
  margin: 0 auto;
}
.mv__image img {
  width: 100%;
}
.mv__lead {
  font-size: clamp(1.0625rem, 2.6vw, 1.5rem);
  max-width: 900px;
  margin: 120px auto 0;
  text-align: center;
  padding: 0 40px;
  position: relative;
}
@media screen and (max-width: 768px) {
  .mv__lead {
    line-height: 1.8;
    margin-top: 72px;
  }
}
.mv__lead::before, .mv__lead::after {
  content: "";
  width: 53px;
  height: 155px;
  display: block;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background-size: 100% auto;
}
@media screen and (max-width: 768px) {
  .mv__lead::before, .mv__lead::after {
    width: 20px;
  }
}
.mv__lead::before {
  left: 0;
  background: url(../images/mv-harfcircle-lft.svg) no-repeat center center;
}
@media screen and (max-width: 768px) {
  .mv__lead::before {
    background-image: url(../images/mv-harfcircle-lft-sp.svg);
  }
}
.mv__lead::after {
  right: 0;
  background: url(../images/mv-harfcircle-rgt.svg) no-repeat center center;
}
@media screen and (max-width: 768px) {
  .mv__lead::after {
    background-image: url(../images/mv-harfcircle-rgt-sp.svg);
  }
}

.lineup {
  margin-top: 88px;
  padding-top: 44px;
  padding-bottom: 30px;
  background-color: #E9F4E4;
}
@media screen and (max-width: 768px) {
  .lineup .section__head {
    padding-bottom: clamp(14%, 14vw, 88px);
  }
}
.lineup::before, .lineup::after {
  content: "";
  width: 100%;
  height: 39%;
  display: block;
  position: absolute;
  top: 0;
}
@media screen and (max-width: 768px) {
  .lineup::before, .lineup::after {
    height: 94%;
  }
}
.lineup::before {
  background-color: #FDFDDA;
}
.lineup__list {
  max-width: 900px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 80px 16px;
}
@media screen and (max-width: 768px) {
  .lineup__list {
    gap: clamp(80px, 24vw, 170px) 16px;
  }
}
.lineup__item {
  width: calc(25% - 12px);
  border-radius: 32px;
  background-color: #fff;
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.3s linear, transform 0.5s linear;
}
@media screen and (max-width: 768px) {
  .lineup__item {
    width: calc(50% - 12px);
  }
}
.lineup__item.is-show {
  opacity: 1;
  transform: translateY(0);
}
.lineup__link {
  color: inherit;
  width: 100%;
  padding: 16px 16px 30px;
  display: block;
  position: relative;
}
@media screen and (max-width: 768px) {
  .lineup__link {
    padding: 16px 10px 20px;
  }
}
.lineup__link .arrow {
  width: 32px;
  height: 24px;
  margin: 0 auto;
  top: 95%;
  left: 0;
  transform: translateY(0);
}
.lineup__link .arrow::before, .lineup__link .arrow::after {
  transform: rotate(90deg);
}
.lineup__link .arrow::after {
  top: -100%;
  left: 0;
}
.lineup__link:hover {
  opacity: 1;
}
.lineup__link:hover .arrow {
  background-color: #FFF23B;
}
.lineup__link:hover .arrow::before {
  top: 100%;
  opacity: 0;
}
.lineup__link:hover .arrow::after {
  top: 0;
  opacity: 1;
}
.lineup__floor {
  max-width: clamp(28px, 4vw, 36px);
  position: absolute;
  top: -20px;
  left: -10px;
}
@media screen and (max-width: 768px) {
  .lineup__floor {
    top: -15px;
    left: -8px;
  }
}
.lineup__product {
  position: relative;
}
.lineup__image-inner {
  position: relative;
}
.lineup__image-inner::before {
  content: "";
  width: 100%;
  display: block;
  padding-top: 30%;
}
.lineup__image {
  width: 73%;
  margin: 0 auto;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 15;
}
@media screen and (max-width: 768px) {
  .lineup__image {
    width: 80%;
  }
}
.lineup__shape {
  max-width: 124px;
  width: 100%;
  margin: 0 auto;
  position: absolute;
  bottom: 50%;
  left: 0;
  right: 0;
  transform: translate(-10%, 40%);
  z-index: 10;
}
@media screen and (max-width: 768px) {
  .lineup__shape {
    max-width: initial;
    min-width: 101px;
    width: 60%;
    bottom: 60%;
  }
}
.lineup__shape.-shape1 {
  color: #FDEEDA;
}
.lineup__shape.-shape2 {
  color: #C5E55C;
}
.lineup__shape.-shape3 {
  color: #F0F300;
}
.lineup__shape.-shape4 {
  color: #94E9CF;
}
.lineup__name {
  font-size: 0.9375rem;
  font-weight: 700;
  color: #45A246;
  text-align: center;
  letter-spacing: -1px;
  display: flex;
  justify-content: center;
  align-items: center;
}
@media screen and (max-width: 768px) {
  .lineup__name {
    font-size: 0.8125rem;
  }
}
.lineup__shop {
  font-size: 0.75rem;
  text-align: center;
  margin-top: 10px;
  padding-top: 16px;
  position: relative;
}
.lineup__shop::before {
  content: "";
  width: 100%;
  height: 3px;
  display: block;
  background: url(../images/common/menu-border.svg) no-repeat center left/100% auto;
  position: absolute;
  top: 0;
}

.about {
  padding-top: 120px;
}
@media screen and (max-width: 768px) {
  .about {
    padding-top: 72px;
  }
}
.about::before, .about::after {
  content: "";
  width: 100%;
  height: 55%;
  display: block;
  position: absolute;
  top: 0;
}
@media screen and (max-width: 768px) {
  .about::before, .about::after {
    height: 48%;
  }
}
.about::before {
  background-color: #E9F4E4;
}
.about__image-inner {
  max-width: 900px;
  margin: 0 auto;
  position: relative;
}
.about__image {
  width: 51.6%;
  margin: 0 auto;
}
@media screen and (max-width: 768px) {
  .about__image {
    width: 80.2%;
  }
}
.about__kind {
  position: absolute;
  top: 50%;
}
.about__kind.-ibaraking {
  width: 28%;
  right: 40px;
  transform: translateY(-59%);
}
@media screen and (max-width: 768px) {
  .about__kind.-ibaraking {
    width: 60.3%;
    right: 30px;
    transform: translateY(64%);
  }
}
.about__kind.-quincy {
  width: 27%;
  left: 30px;
  transform: translateY(-43%);
}
@media screen and (max-width: 768px) {
  .about__kind.-quincy {
    width: 48%;
    top: 50%;
    left: 20px;
    transform: translateY(-135%);
  }
}
.about__kind img {
  width: 100%;
}
.about__lead {
  font-size: clamp(0.875rem, 3.7vw, 1.25rem);
  line-height: 1.8;
  text-align: center;
  margin-top: 40px;
}
@media screen and (max-width: 768px) {
  .about__lead {
    margin-top: 26%;
  }
}

.menu {
  padding-top: 150px;
  background-color: #E9F4E4;
}
@media screen and (max-width: 768px) {
  .menu {
    padding-top: 72px;
    padding-bottom: 32px;
  }
}
.menu::before, .menu::after {
  content: "";
  width: 100%;
  height: 9%;
  display: block;
  position: absolute;
  top: 0;
}
@media screen and (max-width: 768px) {
  .menu::before, .menu::after {
    height: 1.3%;
  }
}
.menu::before {
  background-color: #FDFDDA;
}
.menu .section__head {
  padding-bottom: 66px;
}
@media screen and (max-width: 768px) {
  .menu .section__head {
    padding-bottom: clamp(66px, 17vw, 88px);
  }
}
.menu__list {
  max-width: 900px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 100px 0;
}
@media screen and (max-width: 768px) {
  .menu__list {
    flex-direction: column;
    gap: 82px 0;
  }
}
@media screen and (max-width: 768px) {
  .menu__list {
    gap: 40px 0;
  }
}
.menu__item {
  width: calc(50% - 24px);
  padding: 20px 40px;
  border-radius: 32px;
  background-color: #fff;
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.3s linear, transform 0.5s linear;
  position: relative;
}
@media screen and (max-width: 768px) {
  .menu__item {
    width: 100%;
    padding: 24px 24px 30px;
  }
}
.menu__item.is-show {
  opacity: 1;
  transform: translateY(0);
}
.menu__floor {
  max-width: clamp(42px, 9vw, 60px);
  position: absolute;
  top: -20px;
  left: -20px;
}
@media screen and (max-width: 768px) {
  .menu__floor {
    top: -18px;
    left: -10px;
  }
}
.menu__image-inner {
  position: relative;
}
.menu__image-inner::before {
  content: "";
  width: 100%;
  display: block;
  padding-top: 72%;
}
@media screen and (max-width: 768px) {
  .menu__image-inner::before {
    padding-top: 80%;
  }
}
.menu__image {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
}
@media screen and (max-width: 768px) {
  .menu__image {
    transform: translateY(-45%);
  }
}
.menu__image.-posi1 {
  transform: translateY(-52%);
}
@media screen and (max-width: 768px) {
  .menu__image.-posi1 {
    transform: translateY(-48%);
  }
}
.menu__image.-posi2 {
  transform: translateY(-63%);
}
.menu__image.-posi3 {
  transform: translateY(-66%);
}
.menu__image.-posi4 {
  transform: translateY(-58%);
}
.menu__image.-posi5 {
  transform: translateY(-47%);
}
.menu__image.-posi6 {
  transform: translateY(-55%);
}
.menu__shape {
  max-width: 266px;
  width: 100%;
  margin: 0 auto;
  position: absolute;
  bottom: 10px;
  left: 0;
  right: 0;
  transform: translateX(-8%);
  z-index: 5;
}
.menu__shape.-shape1 {
  color: #FDEEDA;
}
.menu__shape.-shape2 {
  color: #C5E55C;
}
.menu__shape.-shape3 {
  color: #F0F300;
}
.menu__shape.-shape4 {
  color: #94E9CF;
}
.menu__deco {
  width: 100%;
  max-width: 34px;
  position: absolute;
  bottom: 0;
  right: 10px;
  transform: translateY(20%);
  z-index: 15;
}
@media screen and (max-width: 768px) {
  .menu__deco {
    max-width: 28px;
    right: 0;
    transform: translateY(30%);
  }
}
.menu__detail {
  margin-top: 6px;
  padding-bottom: 16px;
  position: relative;
}
.menu__detail::before {
  content: "";
  width: 100%;
  height: 5px;
  display: block;
  background: url(../images/common/menu-border.svg) no-repeat center left/100% auto;
  position: absolute;
  bottom: 0;
}
.menu__name {
  font-size: clamp(1.375rem, 3vw, 1.625rem);
  line-height: 1.5;
  color: #45A246;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
}
.menu__kind {
  margin-top: 16px;
  display: flex;
  justify-content: center;
  gap: 8px;
}
.menu__kind-item {
  font-size: 0.9375rem;
  padding: 0 10px;
  border: 2px solid;
  border-radius: 32px;
}
@media screen and (max-width: 768px) {
  .menu__kind-item {
    font-size: 0.875rem;
  }
}
.menu__kind-item.-ibaraking {
  color: #8FC31F;
  border-color: #8FC31F;
}
.menu__kind-item.-quincy {
  color: #F6B01C;
  border-color: #F6B01C;
}
.menu__desc {
  font-size: 1.0625rem;
  line-height: 1.8;
  letter-spacing: -1px;
  text-align: center;
  height: 100%;
  margin-top: 32px;
  display: flex;
  justify-content: center;
  align-items: center;
}
@media screen and (max-width: 768px) {
  .menu__desc {
    font-size: 1rem;
  }
}
.menu__price {
  font-size: clamp(1.125rem, 2.7vw, 1.25rem);
  text-align: center;
  margin-top: 32px;
}
.menu__price-column {
  display: flex;
  justify-content: center;
  gap: 8px;
}
.menu__price-takeout {
  display: flex;
}
.menu__price-takeout img {
  position: relative;
  top: -2px;
}
.menu__link {
  color: inherit;
  margin-top: 16px;
  display: block;
}
.menu__link:hover {
  opacity: 1;
}
.menu__link:hover .arrow {
  background-color: #FFF23B;
}
.menu__link:hover .arrow::before {
  left: 100%;
  opacity: 0;
}
.menu__link:hover .arrow::after {
  left: 0;
  opacity: 1;
}
.menu__def {
  display: flex;
  align-items: center;
}
.menu__def-floor {
  font-size: 1.0625rem;
  font-weight: bold;
  width: 34px;
  height: 34px;
  padding-bottom: 1px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #C5E55C;
}
.menu__def-dd {
  font-size: clamp(1.0625rem, 2.7vw, 1.25rem);
  letter-spacing: -0.8px;
  width: 100%;
  padding-left: 10px;
  position: relative;
}
@media screen and (max-width: 768px) {
  .menu__def-dd {
    letter-spacing: -1px;
    padding-right: 24px;
  }
}
.menu__takeout {
  font-size: 0.875rem;
  max-width: 900px;
  width: 100%;
  margin: 32px auto 0;
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  white-space: nowrap;
}
@media screen and (max-width: 768px) {
  .menu__takeout {
    font-size: 0.75rem;
    margin-top: 24px;
    align-items: flex-start;
    flex-direction: column;
  }
}
.menu__takeout-image {
  font-size: 1.125rem;
  font-weight: 600;
  color: #F39700;
  margin-right: 1.5em;
  display: flex;
  flex-wrap: nowrap;
}
@media screen and (max-width: 768px) {
  .menu__takeout-image {
    font-size: 1rem;
  }
}
.menu__takeout-image img {
  margin-right: 3px;
}

.note__list {
  max-width: 832px;
  margin: 0 auto;
  padding: 242px 40px 88px;
}
@media screen and (max-width: 768px) {
  .note__list {
    padding: 72px 20px 48px;
  }
}
.note__item {
  font-size: 0.875rem;
  letter-spacing: -1px;
  display: inline-block;
}
@media screen and (max-width: 768px) {
  .note__item {
    font-size: 0.75rem;
    text-indent: -1em;
    padding-left: 1em;
    display: block;
  }
}

.anniversary {
  position: relative;
  z-index: 50;
}
.anniversary__container {
  max-width: 832px;
  margin: 0 auto;
  padding: 0 16px;
}
.anniversary__link {
  width: 100%;
  display: flex;
  align-items: center;
  background-color: #fff;
}
@media screen and (max-width: 768px) {
  .anniversary__link {
    flex-direction: column;
  }
}
.anniversary__link .arrow {
  background-color: #03B3E5;
}
.anniversary__link .arrow::after {
  background: url(../images/common/icon-arrow-bl.svg) no-repeat center center;
}
.anniversary__link:hover {
  opacity: 1;
}
.anniversary__link:hover .arrow {
  background-color: #FFFFAD;
}
.anniversary__link:hover .arrow::before {
  left: 100%;
  opacity: 0;
}
.anniversary__link:hover .arrow::after {
  left: 0;
  opacity: 1;
}
.anniversary__image, .anniversary__text {
  width: 50%;
}
@media screen and (max-width: 768px) {
  .anniversary__image, .anniversary__text {
    width: 100%;
  }
}
.anniversary__text {
  color: #03B3E5;
  text-align: center;
}
@media screen and (max-width: 768px) {
  .anniversary__text {
    padding: 24px;
  }
}
.anniversary__text-inner {
  padding-right: 40px;
  display: inline-block;
  position: relative;
}/*# sourceMappingURL=styles.css.map */