@charset "UTF-8";
/* SCSSの読み込み */
/* ===============================================
 全体
=============================================== */
html {
  /* 1rem = 10px にする*/
  font-size: 62.5%;
  _font-size: 62.5%;
  *font-size: 62.5%;
  /*ウェブフォント用*/
  text-rendering: optimizeLegibility;
}

/* Google map */
[class$=__map] iframe,
[class$=-map] iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: none !important;
}

/*===============================================
  ページネーション
===============================================*/
.pagenation {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  text-align: center;
  font-size: var(--font-size-sm);
  letter-spacing: 0;
  padding-top: 5rem;
  gap: 0.5rem;
}
.pagenation li {
  width: 3.6rem;
  color: var(--color-white);
  line-height: 4rem;
  background: var(--color-text);
  vertical-align: top;
}
.pagenation li.current {
  color: var(--color-white);
  background: var(--color-text);
  cursor: default;
}
.pagenation li.dot {
  border: none;
  cursor: default;
}
.pagenation li a {
  display: block;
  color: var(--color-white);
  text-decoration: none;
  background: var(--color-text);
  vertical-align: top;
  cursor: pointer;
}
.pagenation li a:hover {
  color: var(--color-white);
  background: var(--color-text);
}

/*===============================================
  詳細ページ前後
===============================================*/
.paginated__list {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  padding-top: 5rem;
}
.paginated__link {
  display: flex;
  justify-content: center;
  align-items: center;
  width: -moz-fit-content;
  width: fit-content;
  font-size: var(--font-size-base);
  color: var(--color-main);
  line-height: var(--line-height-base);
  letter-spacing: var(--letter-spacing-base);
  text-decoration: none;
  transition: all 0.12s;
}
.paginated__link:hover {
  color: var(--color-text);
  text-decoration: none;
}
.paginated__link:hover::before {
  background-color: var(--color-text);
}
.paginated__link--back {
  padding-inline: 1lh;
}
.paginated__link--prev {
  margin-left: auto;
}
.paginated__link--prev::before {
  content: "";
  display: block;
  width: 1lh;
  aspect-ratio: 1;
  background: url(../img/common/arrow-l.svg) no-repeat center/26.6667%;
  background-color: var(--color-main);
  transition: all 0.12s;
}
.paginated__link--next {
  margin-right: auto;
}
.paginated__link--next::before {
  display: block;
  width: 1lh;
  aspect-ratio: 1;
  background: url(../img/common/arrow-r.svg) no-repeat center/26.6667%;
  background-color: var(--color-main);
  transition: all 0.12s;
}

/*===============================================
  wrapper
===============================================*/
#wrapper {
  width: 100%;
  font-size: var(--font-size-base);
  font-family: var(--font-family-main);
  font-weight: 500;
  color: var(--color-text);
  margin-inline: auto;
  overflow: hidden;
  position: relative;
  z-index: 0;
}

/*===============================================
  header
===============================================*/
#header {
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 5;
}
#header .header__inner {
  margin-inline: auto;
}
#header .header__logo {
  font-size: 1rem;
  line-height: 1;
  letter-spacing: 0;
}
#header .header__lang {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  flex-direction: column;
  height: 4rem;
  flex-shrink: 0;
}
#header .header__lang .gt_float_switcher {
  font-size: 1.8rem;
  line-height: 1;
}
#header .header__lang .gt_float_switcher .gt-selected .gt-current-lang {
  padding: 0.8rem 1rem;
  white-space: nowrap;
}
#header .header__lang .gt_float_switcher .gt-selected .gt-current-lang span.gt_float_switcher-arrow {
  width: 1.5rem;
  height: 2.4rem;
  background-size: 1.1rem;
}
#header .header__lang .gt_float_switcher .gt_options a {
  padding: 0.8rem 1rem;
  white-space: nowrap;
}
#header .header__lang .gt_float_switcher img {
  width: 3rem;
  aspect-ratio: 5/4;
  -o-object-fit: contain;
     object-fit: contain;
}

/*===============================================
  footer
===============================================*/
#footer {
  width: 100%;
  color: var(--color-white);
  position: relative;
  background: url(../img/common/footer-bg.jpg) no-repeat center bottom/cover;
}
#footer > * {
  position: relative;
  z-index: 5;
}
#footer .footer__inner {
  margin-inline: auto;
}
#footer .footer__logo {
  font-size: 1rem;
  letter-spacing: 0;
  line-height: 1;
}

/*フッターナビ
-----------------------------*/
.footer-nav__link {
  display: block;
}
.footer-nav__link:hover, .footer-nav__link.current {
  color: var(--color-sub);
}

/*コピーライト
-----------------------------*/
.copy {
  position: relative;
  z-index: 5;
}
.copy p {
  text-align: center;
  font-size: var(--font-size-xs);
  color: var(--color-white);
  letter-spacing: var(--letter-spacing-base);
  line-height: 1.5;
  margin-block: calc((1em - 1lh) / 2);
}
.copy p a:hover {
  text-decoration: underline;
}

/*===============================================
  fixed固定
===============================================*/
/*ページトップ
-----------------------------*/
#pagetop {
  display: block;
  font-family: var(--font-family-en);
  font-weight: 700;
  color: var(--color-main);
  letter-spacing: 0;
  line-height: 1;
  border-left: solid 1px var(--color-main);
  transition: all 0.3s ease-out;
  position: fixed;
  z-index: 50;
  -webkit-text-stroke: calc(1px + 0.05rem) var(--color-bg);
  paint-order: stroke;
}
#pagetop > span {
  display: block;
  writing-mode: vertical-rl;
  max-height: auto;
  text-orientation: mixed;
  letter-spacing: var(--letter-spacing-base);
  margin-inline-end: calc(var(--letter-spacing-base) * -1);
}

/*サイドボタン
-----------------------------*/
#side {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  font-weight: 700;
  color: var(--color-white);
  letter-spacing: 0;
  line-height: 1;
  background: var(--color-main);
  transition: all 0.3s ease-out;
  position: fixed;
  z-index: 50;
}
#side::before {
  content: "";
  display: block;
  aspect-ratio: 1;
  background: url(../img/common/icon_coupon.png) no-repeat center/contain;
}
#side > span {
  display: flex;
  word-break: keep-all;
  text-align: center;
  margin-block: calc((1em - 1lh) / 2);
}
#side::after {
  content: "COUPON";
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  text-align: center;
  font-weight: var(--font-family-en);
  letter-spacing: 0.1em;
  padding-inline-start: 0.1em;
  writing-mode: vertical-rl;
  max-height: auto;
  text-orientation: mixed;
  position: absolute;
  top: 0;
  right: 0;
}
#side:hover {
  background: var(--color-text);
}

/*===============================================
  visual
===============================================*/
/*共通
-----------------------------*/
.visual {
  position: relative;
}
.visual::before {
  content: "";
  box-shadow: 0 0 0 1px var(--color-white) inset;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 0;
  z-index: 3;
  pointer-events: none;
}
/*メインビジュアル
-----------------------------*/
.visual__main {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  position: relative;
  z-index: 1;
}
.visual__main #slideshow {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  pointer-events: none;
}
.visual__main #slideshow * {
  width: 100% !important;
  height: 100% !important;
  border: none !important;
  box-shadow: none !important;
}
.visual__catch--main {
  font-size: 1rem;
  letter-spacing: 0;
  line-height: 1;
}

/*サブビジュアル
-----------------------------*/
.visual__sub {
  display: flex;
  justify-content: center;
  align-items: center;
  background: url(../img/visual/sv-e404.jpg) no-repeat center/cover;
}
.visual__sub--brand {
  background-image: url(../img/visual/sv-brand.jpg);
}
.visual__sub--menu {
  background-image: url(../img/visual/sv-menu.jpg);
}
.visual__sub--goods {
  background-image: url(../img/visual/sv-goods.jpg);
}
.visual__sub--voice {
  background-image: url(../img/visual/sv-voice.jpg);
}
.visual__sub--faq {
  background-image: url(../img/visual/sv-faq.jpg);
}
.visual__sub--media {
  background-image: url(../img/visual/sv-media.jpg);
}
.visual__sub--access {
  background-image: url(../img/visual/sv-access.jpg);
}
.visual__sub--blog {
  background-image: url(../img/visual/sv-blog.jpg);
}
.visual__sub--contact {
  background-image: url(../img/visual/sv-contact.jpg);
}
.visual__sub--complete {
  background-image: url(../img/visual/sv-complete.jpg);
}
.visual__sub--privacy {
  background-image: url(../img/visual/sv-privacy.jpg);
}
.visual__sub--site {
  background-image: url(../img/visual/sv-site.jpg);
}
.visual__catch--sub {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  font-family: var(--font-family-main);
  font-weight: 700;
  color: var(--color-white);
  letter-spacing: 0;
  line-height: 1;
}
.visual__catch--sub > span {
  display: block;
}
.visual__catch--sub .en {
  font-family: var(--font-family-en);
  letter-spacing: 0.2em;
  margin-inline-end: -0.2em;
}
.visual__catch--sub .ja {
  background: var(--color-main);
  letter-spacing: var(--letter-spacing-base);
  margin-inline-end: calc(var(--letter-spacing-base) * -1);
}

/*===============================================
  main#container
===============================================*/
#container {
  line-height: var(--line-height-base);
  letter-spacing: var(--letter-spacing-base);
  position: relative;
}
#container > div,
#container > section {
  position: relative;
}
#container > div > *,
#container > section > * {
  position: relative;
  z-index: 5;
}
#container.top::before {
  content: "";
  width: 100%;
  height: 100vh;
  background: url(../img/common/fixed.jpg) no-repeat center/cover;
  background-color: var(--color-bg);
  position: fixed;
  top: 0;
  left: 0;
  z-index: 0;
  pointer-events: none;
}
#container:not(.top) {
  background: var(--color-bg);
}

/*===============================================
  パンくずリスト
===============================================*/
.breadcrumb {
  width: 100%;
  font-size: var(--font-size-sm);
  line-height: var(--line-height-sm);
  letter-spacing: var(--letter-spacing-base);
  position: absolute;
  top: 0;
  left: 0;
  z-index: 10;
}
.breadcrumb__list {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  overflow: hidden;
  margin-block: calc((1em - 1lh) / 2);
  margin-inline: auto;
}
.breadcrumb__item {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  font-family: var(--font-family-main);
  color: var(--color-text);
}
.breadcrumb__item:after {
  content: "|";
  color: var(--color-text);
  margin: 0 0.5em;
}
.breadcrumb__item:nth-of-type(3) {
  max-width: 35%;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  max-height: 1lh;
}
.breadcrumb__item:last-of-type:after {
  display: none;
}
.breadcrumb__link {
  display: block;
  color: var(--color-text);
}
.breadcrumb__link:hover {
  text-decoration: underline;
}

/*===============================================
  main共通
===============================================*/
.inbox {
  margin-inline: auto;
}

/* テキストカラー変更
-----------------------------*/
.c-green {
  color: var(--color-main);
}

/*電話番号
-----------------------------*/
.com-tel {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
.com-tel__num {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 1em;
  font-weight: 700;
  color: var(--color-text);
  letter-spacing: 0;
  line-height: 1;
}
.com-tel__num::before {
  content: "";
  display: block;
  aspect-ratio: 1;
  -webkit-mask: url(../img/common/icon_tel.png) no-repeat center/contain;
          mask: url(../img/common/icon_tel.png) no-repeat center/contain;
  background-color: var(--color-text);
}
.com-tel__num span {
  display: block;
  letter-spacing: 0.1em;
  margin-inline-end: -0.1em;
}
.com-tel__num--white {
  color: var(--color-white);
}
.com-tel__num--white::before {
  background-color: var(--color-white);
}

.com-replace {
  height: 1em;
  vertical-align: baseline;
}

/*ボタン
-----------------------------*/
.com-btn {
  display: flex;
  justify-content: center;
  align-items: center;
  width: -moz-fit-content;
  width: fit-content;
  max-width: 100%;
  font-family: var(--font-family-en);
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1;
  transition: all 0.3s ease-out;
  position: relative;
  z-index: 0;
}
.com-btn::before {
  content: "";
  display: block;
  width: 5px;
  aspect-ratio: 1;
  background: var(--color-text);
  border-radius: 50%;
}
.com-btn > span {
  display: block;
  line-height: 1.5;
  letter-spacing: 0.1em;
  margin-inline-end: -0.1em;
  margin-block: calc((1em - 1lh) / 2);
}
.com-btn:hover {
  text-decoration: none;
}

/* SNS
-----------------------------*/
.com-sns {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}
.com-sns li {
  font-size: 1rem;
  letter-spacing: 0;
  line-height: 1;
}
.com-sns li a {
  display: block;
  transition: all 0.3s ease-out;
}
.com-sns li a:hover {
  opacity: 0.64;
}
.com-sns li img {
  width: 100%;
  aspect-ratio: 1;
  -o-object-fit: contain;
     object-fit: contain;
}

/*テーブル
-----------------------------*/
.com-table table {
  width: 100%;
}
.com-table tr {
  border-bottom: solid 1px var(--color-main);
}
.com-table tr th {
  font-weight: 700;
  color: var(--color-main);
}
.com-table tr td {
  font-weight: 500;
  color: var(--color-text);
}

/*テキストボックス
-----------------------------*/
.com-text:not(.com-text--box) {
  margin-block: calc((1em - 1lh) / 2);
}
.com-text .mb {
  margin-bottom: 1lh;
}

/*ブログ
-----------------------------*/
.com-post__item:last-of-type {
  margin-bottom: 0 !important;
}
.com-post__link {
  display: block;
  font-weight: 700;
  color: var(--color-text);
  background: var(--color-white);
  border-radius: 1rem;
  transition: all 0.3s ease-out;
}
.com-post__link:hover {
  transform: translateY(-0.5rem);
}
.com-post__link:hover .com-post__image img {
  transform: scale(1.05);
}
.com-post__date {
  display: block;
  font-family: var(--font-family-en);
  font-weight: 400;
  color: var(--color-main);
  line-height: 1;
}
.com-post__heading {
  width: 100%;
  font-size: var(--font-size-h5);
}
.com-post__heading > span {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  max-height: 1lh;
  margin-block: calc((1em - 1lh) / 2);
}
.com-post__image {
  border-radius: 0.5rem;
  overflow: hidden;
}
.com-post__image img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  transition: all 0.3s ease-out;
}
.com-post__tags {
  display: flex;
  justify-content: flex-end;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 1rem;
}
.com-post__tag {
  color: var(--color-main);
  margin-block: calc((1em - 1lh) / 2);
}
.com-post__tag::before {
  content: "#";
  margin-right: 0.25em;
}
.com-post__body {
  font-size: var(--font-size-sm);
}
.com-post__body p {
  line-height: calc(1em + 1rem);
  margin-block: calc((1em - 1lh) / 2);
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  max-height: 3lh;
}

/*SB未記入テキスト
-----------------------------*/
.com-empty {
  width: 100%;
  text-align: center;
  font-size: var(--font-size-h4);
  font-weight: 600;
  line-height: 1.5;
  color: var(--color-text);
  padding-block: 6rem;
  box-shadow: 0 0 0 1px var(--color-main) inset;
  border-radius: 1rem;
}

/*===============================================
  タイトル
===============================================*/
/*大タイトル
-----------------------------*/
.com-title01 {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  text-align: center;
  font-size: var(--font-size-h3);
  font-family: var(--font-family-main);
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1;
  word-break: keep-all;
  position: relative;
  z-index: 3;
}
.com-title01 > span {
  display: block;
  position: relative;
  z-index: 0;
}
.com-title01 > span.en {
  font-family: var(--font-family-en);
  color: var(--color-main);
  letter-spacing: 0.02em;
  margin-inline-end: -0.02em;
}
.com-title01 > span.en::before {
  content: "";
  -webkit-mask: url(../img/common/kakko-l.png) no-repeat left center/contain, url(../img/common/kakko-r.png) no-repeat right center/contain;
          mask: url(../img/common/kakko-l.png) no-repeat left center/contain, url(../img/common/kakko-r.png) no-repeat right center/contain;
  background-color: var(--color-main);
  position: absolute;
  left: calc(50% - 0.1em);
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: -2;
  pointer-events: none;
}
.com-title01 > span:not(.en) {
  line-height: var(--line-height-h3);
  letter-spacing: var(--letter-spacing-base);
  margin-inline-end: calc(var(--letter-spacing-base) * -1);
  margin-block: calc((1em - 1lh) / 2);
}
.com-title01--white {
  color: var(--color-white);
}
.com-title01--white > span.en {
  color: var(--color-white);
}
.com-title01--white > span.en::before, .com-title01--white > span.en::after {
  background-color: var(--color-white);
}

/*中タイトル
-----------------------------*/
.com-title02 {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  flex-direction: column;
  font-size: var(--font-size-h4);
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1;
  position: relative;
  z-index: 2;
}
.com-title02 > span {
  display: block;
  line-height: var(--line-height-h4);
  letter-spacing: var(--letter-spacing-base);
  margin-inline-end: calc(var(--letter-spacing-base) * -1);
  margin-block: calc((1em - 1lh) / 2);
  position: relative;
  z-index: 0;
}
.com-title02 > span.en {
  font-family: var(--font-family-en);
  letter-spacing: 0.1em;
  margin-inline-end: -0.1em;
}
.com-title02--center {
  align-items: center;
  text-align: center;
}

/*小タイトル
-----------------------------*/
.com-title03 {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  flex-direction: column;
  font-size: var(--font-size-h5);
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1;
  position: relative;
  z-index: 2;
}
.com-title03 > span {
  display: block;
  line-height: var(--line-height-h5);
  letter-spacing: var(--letter-spacing-base);
  margin-inline-end: calc(var(--letter-spacing-base) * -1);
  margin-block: calc((1em - 1lh) / 2);
  position: relative;
  z-index: 0;
}
.com-title03--center {
  align-items: center;
  text-align: center;
}

/*===============================================
  共通セクション
===============================================*/
/*アクセス
-----------------------------*/
.com-info {
  background: url(../img/common/fixed.jpg) no-repeat center top;
  background-color: var(--color-bg);
}
.com-info--top {
  background: none !important;
}
.com-info__box {
  color: var(--color-white);
  background: var(--color-main);
  border-radius: 0.5rem;
}
.com-info__title {
  align-items: flex-start;
  text-align: left;
  border-bottom: solid 1px var(--color-white);
}
.com-info__title > span.en::before, .com-info__title > span.en::after {
  display: none;
}
.com-info__table table {
  width: 100%;
}
.com-info__table th,
.com-info__table td {
  font-family: var(--font-family-main);
  font-weight: 500;
}
.com-info__map iframe {
  border-radius: 0.5rem;
}
.com-info::after {
  content: "";
  display: block;
  background: url(../img/common/info-img.jpg) no-repeat center/cover;
}

/*セクション名
-----------------------------*/
/*===============================================
  トップページ
===============================================*/
/*香港で1日300個完売
本物のスイーツパン
-----------------------------*/
.top-about {
  background: url(../img/index/bg_about-top.png) no-repeat center top/100%;
  background-color: var(--color-bg);
}
.top-about__inner::before {
  content: "";
  display: block;
  width: 100%;
  background: url(../img/index/onomatopoeia_about.svg) no-repeat center/contain;
}
.top-about__btn {
  outline: solid 1px var(--color-text);
  outline-offset: -1px;
  border-radius: 100vh;
}
.top-about__btn:hover {
  background: rgba(98, 66, 50, 0.15);
}

/*MENU
-----------------------------*/
.top-menu {
  background-color: var(--color-bg);
}
.top-menu__box:last-of-type {
  margin-bottom: 0;
}
.top-menu__inner {
  color: var(--color-white);
  background: var(--color-main);
}
.top-menu__heading {
  border-bottom: solid 1px var(--color-white);
}
.top-menu__heading .en {
  color: var(--color-mint);
}
.top-menu__price {
  font-size: var(--font-size-h4);
  font-weight: 700;
  line-height: 1;
}
.top-menu__price .num {
  font-family: var(--font-family-en);
}
.top-menu__price .min {
  font-size: var(--font-size-h5);
}
.top-menu__btn {
  width: 100%;
  background: var(--color-mos);
}
.top-menu__btn::before {
  background-color: var(--color-white);
}
.top-menu__btn:hover {
  background: color-mix(in srgb, #000 15%, var(--color-mos));
}
.top-menu__label {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  font-weight: 700;
  color: var(--color-main);
  letter-spacing: 0;
  line-height: 1;
}
.top-menu__label > span {
  display: block;
  line-height: calc(1em + 1rem);
  letter-spacing: var(--letter-spacing-base);
  margin-inline-end: calc(var(--letter-spacing-base) * -1);
  margin-block: calc((1em - 1lh) / 2);
}

/*VOICE
-----------------------------*/
.top-voice__inner {
  background: rgba(255, 251, 241, 0.7);
  box-shadow: 0 0 0 1px var(--color-main) inset;
  border-radius: 1rem;
  overflow: hidden;
}
.top-voice__item:last-of-type {
  margin-bottom: 0;
}
.top-voice__comment {
  color: var(--color-white);
  background: var(--color-main);
  border-radius: 1rem;
  position: relative;
  z-index: 0;
}
.top-voice__comment::before, .top-voice__comment::after {
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  z-index: -1;
  pointer-events: none;
}
.top-voice__comment::before {
  background: url(../img/common/deco_quotation.png) no-repeat left top/contain;
}
.top-voice__comment::after {
  background: url(../img/common/balloon_voice.png) no-repeat left bottom/contain;
}
.top-voice__heading {
  align-items: flex-end;
  color: var(--color-main);
}
.top-voice__btn {
  width: 100%;
  border-top: solid 1px var(--color-main);
}
.top-voice__btn:hover {
  background: rgba(24, 167, 125, 0.15);
}

/*バナーリンクセクション
-----------------------------*/
.top-bnr {
  background-color: var(--color-bg);
}
.top-bnr__list::before {
  content: "";
  height: 100%;
  background: url(../img/index/bg_links.jpg) no-repeat center right/cover;
  border-radius: 1rem;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 0;
  z-index: -1;
  pointer-events: none;
}
.top-bnr__item {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  font-family: var(--font-family-main);
  font-weight: 500;
  color: var(--color-white);
  letter-spacing: 0;
  line-height: 1;
  box-shadow: 0 0 0 1px var(--color-white);
  transition: all 0.3s ease-out;
  position: relative;
  z-index: 0;
}
.top-bnr__item::before {
  content: "";
  aspect-ratio: 1;
  background: var(--color-white);
  border-radius: 50%;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: -1;
}
.top-bnr__item > span {
  display: block;
}
.top-bnr__item > span.en {
  font-family: var(--font-family-en);
  font-weight: 700;
}
.top-bnr__item:hover {
  background: rgba(255, 255, 255, 0.2);
}

/*NEWS
-----------------------------*/
.top-news {
  background-color: var(--color-bg);
}
.top-news::before {
  content: "";
  background: url(../img/index/bg_news.png) no-repeat right top/cover, var(--pattern-bg-ttl);
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
}
.top-news__box {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: flex-end;
}
.top-news__title {
  align-items: flex-start;
  text-align: left;
  margin-bottom: 0 !important;
}
.top-news__title > span.en::before {
  display: none;
}
.top-news__btn {
  padding-bottom: 1rem;
  border-bottom: solid 1px var(--color-text);
}
.top-news__btn:hover {
  color: var(--color-main);
}
.top-news__list,
.top-news .com-empty {
  grid-column: span 2;
}

/*公式アプリ
-----------------------------*/
.top-app::before {
  content: "";
  width: 100%;
  height: 100%;
  background: url(../img/index/bg_app.jpg) no-repeat center/cover;
  position: absolute;
  top: 0;
  right: 0;
  z-index: 0;
  pointer-events: none;
}
.top-app__title::before {
  content: "";
  display: block;
  width: 100%;
  background: url(../img/index/en_app.svg) no-repeat center/contain;
}
.top-app__list dt {
  align-items: center;
  text-align: center;
  color: var(--color-text-app);
  background: var(--color-white);
}
.top-app__list dd {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 1rem;
  letter-spacing: 0;
  line-height: 1;
}
.top-app__list dd a {
  display: block;
  transition: all 0.3s ease-out;
}
.top-app__list dd a:hover {
  opacity: 0.72;
}
.top-app__btn {
  color: var(--color-white);
  margin-inline: auto;
}
.top-app__btn::before {
  background-color: var(--color-white);
}
.top-app__btn:hover {
  color: color-mix(in srgb, var(--color-mint) 50%, var(--color-white));
}

/*===============================================
  ブランド
===============================================*/
/*MOROBAAUとは
-----------------------------*/
.brand-about::before {
  content: "";
  width: 100%;
  height: 100%;
  background: url(../img/brand/bg_about-lt.png) no-repeat left top;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 0;
  z-index: 0;
  pointer-events: none;
}

/*創業ストーリー
-----------------------------*/
.brand-story {
  background: url(../img/brand/bg_story.jpg);
}
.brand-story::before {
  content: "";
  background: url(../img/brand/bg_story-img.png) no-repeat right bottom/contain;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1;
  pointer-events: none;
}

/*商品について
-----------------------------*/
.brand-product {
  color: var(--color-white);
  background: var(--color-main);
}
.brand-product__title {
  background: var(--pattern-bg-ttl);
}
.brand-product__box:last-of-type {
  margin-bottom: 0;
}
.brand-product__heading {
  border-bottom: solid 1px var(--color-white);
}
.brand-product__heading .en {
  color: var(--color-mint);
}

/*代表挨拶
-----------------------------*/
.brand-greeting {
  background: var(--color-bg-voice);
}
.brand-greeting__heading {
  border-bottom: solid 1px var(--color-main);
}
.brand-greeting__heading .en {
  font-family: var(--font-family-en);
  color: var(--color-main);
}

/*===============================================
  メニュー
===============================================*/
/*メニュー一覧
-----------------------------*/
.menu-list:nth-last-of-type(2n) {
  background: var(--color-bg-voice);
}
.menu-list__link {
  display: block;
}
.menu-list__link:hover .menu-list__image img {
  transform: scale(1.05);
}
.menu-list__image img {
  width: 100%;
  aspect-ratio: 1;
  -o-object-fit: cover;
     object-fit: cover;
}
.menu-list__image {
  overflow: hidden;
}
.menu-list__image img {
  transition: all 0.3s ease-out;
}
.menu-list__price {
  text-align: right;
  font-family: var(--font-family-en);
  font-weight: 700;
  line-height: 1;
}
.menu-list__price::before, .menu-list__price::after {
  font-family: var(--font-family-main);
}
.menu-list__price::before {
  content: "￥";
}
.menu-list__price .min {
  display: inline-block;
  margin-inline-end: -0.5em;
}

/* メニュー詳細
-----------------------------*/
.menu-detail__title {
  border-bottom: solid 1px var(--color-main);
}
.menu-detail__price {
  font-family: var(--font-family-en);
  font-weight: 700;
  line-height: 1;
}
.menu-detail__price::before, .menu-detail__price::after {
  font-family: var(--font-family-main);
}
.menu-detail__price::before {
  content: "￥";
}
.menu-detail__price .min {
  display: inline-block;
  margin-inline-end: -0.5em;
}
.menu-detail__body {
  margin-block: calc((1em - 1lh) / 2);
}

/*===============================================
  グッズ
===============================================*/
/*グッズ一覧
-----------------------------*/
.goods-list {
  background: var(--color-bg-voice);
}
.goods-list__link {
  display: block;
}
.goods-list__link:hover .menu-list__image img {
  transform: scale(1.05);
}
.goods-list__image img {
  width: 100%;
  aspect-ratio: 1;
  -o-object-fit: cover;
     object-fit: cover;
}
.goods-list__image {
  overflow: hidden;
}
.goods-list__image img {
  transition: all 0.3s ease-out;
}
.goods-list__price {
  text-align: right;
  font-family: var(--font-family-en);
  font-weight: 700;
  line-height: 1;
}
.goods-list__price::before, .goods-list__price::after {
  font-family: var(--font-family-main);
}
.goods-list__price::before {
  content: "￥";
}
.goods-list__price .min {
  display: inline-block;
  margin-inline-end: -0.5em;
}

/* グッズ詳細
-----------------------------*/
.goods-detail__title {
  border-bottom: solid 1px var(--color-main);
}
.goods-detail__price {
  font-family: var(--font-family-en);
  font-weight: 700;
  line-height: 1;
}
.goods-detail__price::before, .goods-detail__price::after {
  font-family: var(--font-family-main);
}
.goods-detail__price::before {
  content: "￥";
}
.goods-detail__price .min {
  display: inline-block;
  margin-inline-end: -0.5em;
}
.goods-detail__body {
  margin-block: calc((1em - 1lh) / 2);
}

/*===============================================
  お客様の声
===============================================*/
/*お客様の声一覧
-----------------------------*/
.voice-list__item {
  background: var(--color-bg-voice);
  box-shadow: 0 0 0 1px var(--color-main) inset;
  border-radius: 1rem;
  position: relative;
  z-index: 0;
}
.voice-list__item::before {
  content: "";
  background: url(../img/common/deco_quotation.png) no-repeat left top/contain;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  z-index: -1;
  pointer-events: none;
}
.voice-list__item:last-of-type {
  margin-bottom: 0;
}
.voice-list__comment {
  margin-block: calc((1em - 1lh) / 2);
}

/*===============================================
  よくあるご質問
===============================================*/
/*よくあるご質問一覧
-----------------------------*/
.faq-list__item:last-of-type {
  margin-bottom: 0;
}
.faq-list__heading {
  flex-direction: row;
  color: var(--color-white);
  background: var(--color-main);
  border-radius: 0.5rem;
  margin-bottom: 1rem;
}
.faq-list__heading::before {
  content: "Q";
  display: block;
  font-family: var(--font-family-en);
  flex-shrink: 0;
}
.faq-list__heading > span {
  align-self: center;
}
.faq-list__body {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  background: var(--color-white);
  border-radius: 0.5rem;
}
.faq-list__body::before {
  content: "A";
  display: block;
  font-family: var(--font-family-en);
  font-weight: 700;
  color: var(--color-main);
  line-height: 1;
  letter-spacing: 0;
  flex-shrink: 0;
}
.faq-list__body p {
  align-self: center;
  margin-block: calc((1em - 1lh) / 2);
}

/*===============================================
  メディア掲載
===============================================*/
/*メディア掲載一覧
-----------------------------*/
.media-list__item:last-of-type {
  margin-bottom: 0;
}
.media-list__heading {
  color: var(--color-white);
  background: var(--color-main);
  border-radius: 0.5rem;
}
.media-list__body {
  margin-block: calc((1em - 1lh) / 2);
}
.media-list__link {
  display: grid;
  grid-template-columns: auto 1fr;
}
.media-list__link dt {
  display: flex;
  justify-content: center;
  align-items: center;
  color: var(--color-white);
  font-weight: 700;
  background: var(--color-text);
  flex-shrink: 0;
}
.media-list__link a {
  color: var(--color-text);
}
.media-list__link a:hover {
  color: var(--color-main);
  text-decoration: underline;
}

/*===============================================
  店舗情報
===============================================*/
/*MOROBAAU公式アプリ
-----------------------------*/
.access-app {
  background: url(../img/access/bg_app-top.png) no-repeat center top;
}
.access-app__list li {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  font-weight: 700;
  border-bottom: solid 1px var(--color-main);
}
.access-app__list li:last-of-type {
  margin-bottom: 0;
}
.access-app__list li::before {
  content: "";
  display: block;
  width: 1lh;
  aspect-ratio: 1;
  background: url(../img/common/icon_check.svg) no-repeat center/contain;
  flex-shrink: 0;
}
.access-app__links {
  background: url(../img/index/bg_news.png) no-repeat center/cover, var(--pattern-bg-ttl);
  border-radius: 1rem;
}
.access-app__links dt {
  align-items: center;
  text-align: center;
  color: var(--color-text-app);
  background: var(--color-white);
}
.access-app__links dd {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 1rem;
  letter-spacing: 0;
  line-height: 1;
}
.access-app__links dd a {
  display: block;
  transition: all 0.3s ease-out;
}
.access-app__links dd a:hover {
  opacity: 0.72;
}

/*基本情報
-----------------------------*/
.access-info {
  background-color: var(--color-bg-voice);
}
.access-info__table tr th {
  vertical-align: middle;
}
.access-info__table tr td span {
  display: inline-block;
  margin-right: 0.5em;
}
.access-info__table tr td span:last-of-type {
  margin-right: 0;
}
.access-info__other dt {
  font-weight: 700;
  color: var(--color-main);
  line-height: 1;
}
.access-info__other dt:first-of-type {
  padding-top: 0;
}
.access-info__other dd {
  margin-block: calc((1em - 1lh) / 2);
}
.access-info__map iframe {
  border-radius: 0.5rem;
}

/*===============================================
  ブログ
===============================================*/
/* ブログ 一覧
-----------------------------*/
.blog-archive__tags {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
}
.blog-archive__tag a {
  display: block;
  font-size: var(--font-size-sm);
  font-weight: 700;
  line-height: calc(1em + 1.2rem);
  color: var(--color-text);
  outline: solid 1px var(--color-text);
  outline-offset: -1px;
  padding-inline: 1rem;
  border-radius: 0.2rem;
  transition: all 0.3s ease-out;
}
.blog-archive__tag a::before {
  content: "#";
}
.blog-archive__tag a:hover {
  background: rgba(98, 66, 50, 0.15);
}
.blog-archive__tag.current a {
  color: var(--color-main);
  outline-color: var(--color-main);
  pointer-events: none;
}
.blog-archive .com-post__link {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.blog-archive .com-post__inner {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  flex-direction: column;
}
.blog-archive .com-post__image {
  flex-shrink: 0;
}
.blog-archive .com-post__tags {
  margin-left: auto;
}

/* ブログ 詳細
-----------------------------*/
.blog-detail__box {
  min-height: 23rem;
  zoom: 1;
}
.blog-detail__title {
  border-bottom: solid 1px var(--color-main);
}
.blog-detail__inner {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 2rem;
  width: 100%;
}
.blog-detail__date, .blog-detail__tags {
  font-size: var(--font-size-sm);
}
.blog-detail__body {
  width: 100%;
}

/*===============================================
  お問い合わせ
===============================================*/
/* お問い合わせ方法
-----------------------------*/
.contact-method__items {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  color: var(--color-white);
  background: var(--color-main);
  border-radius: 0.5rem;
}
.contact-method__tel {
  font-family: var(--font-family-en);
}
.contact-method__tel .com-tel__num > span {
  letter-spacing: 0.03em;
  margin-inline-end: -0.03em;
}
.contact-method__time {
  display: grid;
  grid-template-columns: auto 1fr;
  width: -moz-fit-content;
  width: fit-content;
  border-top: solid 1px var(--color-white);
}
.contact-method__time dt {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  background: var(--color-mos);
  border-radius: 0.2rem;
}

/* メールフォーム
-----------------------------*/
.contact-form {
  background: var(--color-bg-voice);
}
.contact-form__table {
  margin-bottom: 4rem;
}
.contact-form__table tr td a {
  color: var(--color-mos);
}
.contact-form__table tr td a:link, .contact-form__table tr td a:visited {
  text-decoration: underline;
}
.contact-form__table tr td a:hover {
  color: var(--color-text);
}
.contact-form__table tr td textarea,
.contact-form__table tr td input[type=tel],
.contact-form__table tr td input[type=text]:not(.p-postal-code):not(#age),
.contact-form__table tr td input[type=email],
.contact-form__table tr td input[type=url] {
  width: 100%;
}
.contact-form .contact-submits-wrap {
  margin-top: 3rem;
}
.contact-form .contact-submits-wrap > * {
  width: 32rem;
  max-width: 100%;
  height: max(50px, 6rem);
}

/*===============================================
  お問い合わせ完了
===============================================*/
.contact-complete__text {
  width: -moz-fit-content;
  width: fit-content;
  margin-inline: auto;
}
.contact-complete__link {
  display: block;
  width: -moz-fit-content;
  width: fit-content;
  margin-top: 2rem;
  color: var(--color-mos);
  margin-inline: auto;
}
.contact-complete__link:link, .contact-complete__link:visited {
  text-decoration: underline;
}
.contact-complete__link:hover {
  color: var(--color-text);
}

/*===============================================
  プライバシーポリシー
===============================================*/
.privacy-policy__box {
  margin-bottom: 6rem;
}
.privacy-policy__box:last-of-type {
  margin-bottom: 0;
}
.privacy-policy__heading {
  color: var(--color-white);
  background: var(--color-main);
  border-radius: 0.5rem;
  margin-bottom: 1rem;
}
.privacy-policy__body {
  background: var(--color-white);
  border-radius: 0.5rem;
}
.privacy-policy__body .def li {
  padding-inline-start: calc(1em + var(--letter-spacing-base));
}
.privacy-policy__body .def li::first-letter {
  margin-inline-start: calc(-1em - var(--letter-spacing-base));
}

/*===============================================
  サイトマップ
===============================================*/
.sitemap-list__item {
  border-bottom: solid 1px var(--color-main);
}
.sitemap-list__link {
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: var(--color-text);
  font-weight: 700;
  text-decoration: none;
  transition: all 0.3s ease-out;
}
.sitemap-list__link::after {
  content: "";
  display: block;
  width: 0.6rem;
  aspect-ratio: 1/2;
  -webkit-mask: url(../img/common/arrow-r.svg) no-repeat center/contain;
          mask: url(../img/common/arrow-r.svg) no-repeat center/contain;
  background-color: var(--color-text);
  transition: all 0.3s ease-out;
}
.sitemap-list__link:hover {
  text-decoration: none;
  color: var(--color-main);
}
.sitemap-list__link:hover::after {
  background-color: var(--color-main);
}

/*===============================================
  404エラー
===============================================*/
.error-message__text {
  background: var(--color-white);
  border-radius: 1rem;
}
.error-message__link {
  display: inline-block;
  color: var(--color-mos);
}
.error-message__link:link, .error-message__link:visited {
  text-decoration: underline;
}
.error-message__link:hover {
  color: var(--color-text);
}