@charset "UTF-8";
/*============================
　グローバルメニュー
============================*/
/*============================
　共通設定
============================*/
main {
  color: #242424;
}

/* site header */
.main-header {
  position: fixed;
  top: 0;
  z-index: 999;
  width: 100%;
  background-color: rgba(255, 255, 255, 0.85);
}

.main-header-container {
  max-width: var(--contents_wide_L);
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--spacing-inline);
  padding-right: var(--spacing-inline);
  padding-top: 11px;
  padding-bottom: 11px;
  display: grid;
  gap: 20px;
  align-items: center;
  justify-content: space-between;
  min-height: 90px;
  grid-template-columns: auto auto auto;
  justify-items: stretch;
}

.main-header-instagram {
  width: 30px;
}

.main-header-logo {
  max-width: 410px;
}

/* ハンバーガーメニューの基本スタイル */
.main-header-menu {
  display: inline-block;
  width: 45px;
  height: 25px;
  position: relative;
  cursor: pointer;
}

/* 疑似要素で3本の線を作る */
.main-header-menu::before,
.main-header-menu::after {
  content: "";
  display: block;
  width: 100%;
  height: 2px;
  background-color: #e60012;
  position: absolute;
  left: 0;
  transition: all 0.3s ease;
}

.main-header-menu::before {
  top: 0;
  box-shadow: 0 11px 0 #e60012;
  /* 真ん中の線 */
}

.main-header-menu:hover {
  filter: brightness(100%);
}

.main-header-menu::after {
  bottom: 0;
}

/* .on_menu がついた時（✕アイコン） */
.main-header-menu.on_menu::before {
  top: 11.5px;
  transform: rotate(45deg);
  box-shadow: none;
  /* 真ん中の線を消す */
}

.main-header-menu.on_menu::after {
  bottom: 11.5px;
  transform: rotate(-45deg);
}

@media screen and (max-width: 767px) {
  .main-header-container {
    padding-left: 10px;
    padding-right: 10px;
  }
  .main-header-logo {
    max-width: 200px;
  }
  .main-header-menu {
    width: 24px;
    height: 19px;
  }
  .main-header-menu::before {
    top: 0;
    box-shadow: 0 8.5px 0 #e60012;
    /* 真ん中の線 */
  }
  .main-header-menu.on_menu::before {
    top: 8.5px;
  }
  .main-header-menu.on_menu::after {
    bottom: 8.5px;
  }
  .main-header-instagram {
    width: 23px;
  }
  .main-header-container {
    min-height: clamp(2.8125rem, -0.789rem + 7.513vw, 5.625rem);
    height: 55px;
  }
}
/* site main */
/* site footer */
.main-footer {
  position: relative;
  background-color: #e60013;
  color: #fff;
  z-index: 99;
  position: sticky;
  top: 100vh;
}

.main-footer_icon {
  display: block;
  width: 250px;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, 0);
  margin-top: -231px;
}

.main-footer::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 10px;
  margin-top: 6px;
  top: 0;
  background-image: radial-gradient(circle, #ffffff 39%, transparent 40%);
  background-size: 10px 10px;
  background-repeat: repeat-x;
}

.main-footer-container {
  max-width: var(--contents_wide_default);
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--spacing-inline);
  padding-right: var(--spacing-inline);
  padding-top: 15px;
  min-height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.copyright {
  font-size: 12px;
}

/*  */
@media screen and (max-width: 767px) {
  .main-footer-container {
    padding-top: 6px;
    min-height: 40px;
  }
  .main-footer::before {
    margin-top: 4px;
    background-image: radial-gradient(circle, #ffffff 39%, transparent 40%);
    background-size: 6px 6px;
  }
  .main-footer_icon {
    margin-top: -80px;
    width: 85px;
  }
}
/*============================
  汎用コンテナ
============================*/
/*============================
　コンテンツ
============================*/
.fv_store_btn_outer {
  overflow: hidden;
  width: 100%;
  display: block;
  top: min(27.5vw, 700px);
  right: 0;
  position: absolute;
  z-index: 10;
  overflow: hidden;
  text-align: right;
}

.fv_store_btn {
  width: min(9.6vw, 160px);
  animation: slideInFromRight 1s ease-out 2s;
  animation-fill-mode: both;
  margin-left: auto;
  margin-right: 0;
}

@keyframes slideInFromRight {
  0% {
    margin-right: -10vw;
    opacity: 0;
  }
  100% {
    margin-right: 0;
    opacity: 1;
  }
}
@media screen and (max-width: 767px) {
  .fv_store_btn_outer {
    top: 70vh;
  }
  .fv_store_btn {
    width: max(13vh, 90px);
  }
}
.line-with-circles::after {
  content: "";
  position: absolute;
  width: 100%;
  height: 10px;
  bottom: 0;
  margin-bottom: -15px;
  background-image: radial-gradient(circle, #e60012 40%, transparent 40%);
  background-size: 10px 10px;
  background-repeat: repeat-x;
}

@media screen and (max-width: 767px) {
  .line-with-circles::after {
    margin-bottom: -13px;
    background-image: radial-gradient(circle, #e60012 40%, transparent 40%);
    background-size: 6px 6px;
  }
}
/* ===== カテゴリー（半円ヘッダー持ち） ===== ===== ===== ===== */
.category-outer {
  display: flex;
  flex-direction: column;
  width: 100%;
  /* ここで円のサイズと沈み具合を自由に変更できます */
  --circle-size: 710px;
  --circle-size_sp: 220px;
  /* 円の直径 */
  --sink-amount: 140px;
  --sink-amount_sp: 50px;
  /* 円をどれだけ沈めるか */
  --grid-size: 40px;
  --grid-opacity: 0.1;
  --grid-size_sp: 15px;
  --grid-opacity_sp: 0.1;
  /*  */
  --overlap: calc(var(--circle-size) / 2 + var(--sink-amount));
  --overlap_sp: calc(var(--circle-size_sp) / 2 + var(--sink-amount_sp));
}

.category-outer:nth-of-type(1) {
  padding-top: 350px;
}

/* ===== カテゴリータイトル ===== */
.category-header {
  top: 260px;
  left: 50%;
  transform: translate(-50%, 0);
  position: absolute;
  text-align: center;
  letter-spacing: -0.3em;
}

.category-header-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
  font-family: "shirokuma";
  position: relative;
  padding-top: 40px;
  padding-left: 20px;
  padding-right: 20px;
}

.category_no1 .category-header-inner {
  width: clamp(7.5rem, -2.103rem + 20.033vw, 15rem);
}

.category_no2 .category-header-inner i {
  content: "";
  position: absolute;
  width: 80%;
  height: 10px;
  bottom: 0;
  margin-bottom: -15px;
  background-image: radial-gradient(circle, #e60012 40%, transparent 40%);
  background-size: 10px 10px;
  background-repeat: repeat-x;
}

.category_no2 .category-header-inner i::before {
  content: "";
  display: block;
  background-color: #e60012;
  width: 8px;
  aspect-ratio: 1/1;
  border-radius: 50% 50%;
  position: absolute;
  top: 50%;
  left: 0;
  margin-left: -4px;
  transform: translate(0, -50%);
}

.category_no2 .category-header-inner i::after {
  content: "";
  display: block;
  background-color: #e60012;
  width: 8px;
  aspect-ratio: 1/1;
  border-radius: 50% 50%;
  position: absolute;
  top: 50%;
  right: 0;
  margin-right: -4px;
  transform: translate(0, -50%);
}

.category_no3 .category-header-inner {
  width: clamp(7.1875rem, -2.016rem + 19.199vw, 14.375rem);
}

.category_no4 .category-header-inner {
  width: clamp(6.25rem, 1.448rem + 10.017vw, 10rem);
}

@media screen and (max-width: 767px) {
  .category-header-inner {
    width: 200px;
  }
}
/* ===== 汎用カテゴリー 本体 ===== */
.category-layer {
  overflow: hidden;
  width: 100%;
  min-height: var(--circle-size);
  /* 最小高さを確保 */
  position: relative;
  /* padding-left: 20px;
      padding-right: 20px; */
  box-sizing: border-box;
  background-repeat: repeat;
  /* 碁盤の目 */
  background-image: linear-gradient(rgba(255, 255, 255, 0.2) 4px, transparent 0px), linear-gradient(90deg, rgba(255, 255, 255, 0.2) 4px, transparent 0px);
  background-size: var(--grid-size) var(--grid-size);
  /* マスク（切り抜き） */
  -webkit-mask: radial-gradient(circle at center calc(var(--circle-size) / 2), black calc(var(--circle-size) / 2), transparent calc(var(--circle-size) / 2)) 0 var(--sink-amount)/100% var(--circle-size) no-repeat, linear-gradient(black, black) 0 calc(var(--circle-size) / 2)/100% calc(100% - var(--circle-size) / 2) no-repeat;
  -webkit-mask-composite: source-over;
  -webkit-mask: radial-gradient(circle at center calc(var(--circle-size) / 2), black calc(var(--circle-size) / 2), transparent calc(var(--circle-size) / 2)) 0 var(--sink-amount)/100% var(--circle-size) no-repeat, linear-gradient(black, black) 0 calc(var(--circle-size) / 2)/100% calc(100% - var(--circle-size) / 2) no-repeat;
          mask: radial-gradient(circle at center calc(var(--circle-size) / 2), black calc(var(--circle-size) / 2), transparent calc(var(--circle-size) / 2)) 0 var(--sink-amount)/100% var(--circle-size) no-repeat, linear-gradient(black, black) 0 calc(var(--circle-size) / 2)/100% calc(100% - var(--circle-size) / 2) no-repeat;
  -webkit-mask-composite: source-over;
          mask-composite: add;
  /* ネガティブマージン */
  margin-top: calc(var(--overlap) * -1);
}

@media screen and (max-width: 767px) {
  .category-layer {
    background-image: linear-gradient(rgba(255, 255, 255, 0.2) 2px, transparent 0px), linear-gradient(90deg, rgba(255, 255, 255, 0.2) 2px, transparent 0px);
    background-size: var(--grid-size_sp) var(--grid-size_sp);
  }
  .category-header {
    top: 50px;
  }
  .category-layer {
    min-height: var(--circle-size_sp);
    -webkit-mask: radial-gradient(circle at center calc(var(--circle-size_sp) / 2), black calc(var(--circle-size_sp) / 2), transparent calc(var(--circle-size_sp) / 2)) 0 var(--sink-amount_sp)/100% var(--circle-size) no-repeat, linear-gradient(black, black) 0 calc(var(--circle-size_sp) / 2)/100% calc(100% - var(--circle-size_sp) / 2) no-repeat;
    -webkit-mask-composite: source-over;
    -webkit-mask: radial-gradient(circle at center calc(var(--circle-size_sp) / 2), black calc(var(--circle-size_sp) / 2), transparent calc(var(--circle-size_sp) / 2)) 0 var(--sink-amount_sp)/100% var(--circle-size_sp) no-repeat, linear-gradient(black, black) 0 calc(var(--circle-size_sp) / 2)/100% calc(100% - var(--circle-size_sp) / 2) no-repeat;
            mask: radial-gradient(circle at center calc(var(--circle-size_sp) / 2), black calc(var(--circle-size_sp) / 2), transparent calc(var(--circle-size_sp) / 2)) 0 var(--sink-amount_sp)/100% var(--circle-size_sp) no-repeat, linear-gradient(black, black) 0 calc(var(--circle-size_sp) / 2)/100% calc(100% - var(--circle-size_sp) / 2) no-repeat;
    margin-top: calc(var(--overlap_sp) * -1.5);
  }
}
/* ===== カテゴリー別 本体 ===== */
/* カテゴリー01 */
.category_no1 {
  z-index: 2;
  position: relative;
}

.category_no1 .category-decoration {
  position: relative;
  z-index: 4;
}

.category_no1 .category-decoration .position1-01 {
  position: absolute;
  left: 0;
  top: 0;
  margin-top: -600px;
  width: 220px;
}

.category_no1 .category-decoration .position1-02 {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, 0);
  margin-top: -580px;
  width: 215px;
}

.category_no1 .category-decoration .position1-03 {
  position: absolute;
  top: 0;
  right: 0;
  margin-top: -400px;
  width: 200px;
}

.category_no1 .category-layer {
  background-color: #d9eaee;
  padding-top: 360px;
  padding-bottom: 0;
  z-index: 3;
}

@media screen and (max-width: 767px) {
  .category_no1 .category-decoration .position1-01 {
    margin-top: -300px;
    width: 90px;
  }
  .category_no1 .category-decoration .position1-02 {
    margin-top: -320px;
    width: 100px;
  }
  .category_no1 .category-decoration .position1-03 {
    margin-top: -240px;
    width: 90px;
  }
  .category_no1 .category-layer {
    padding-top: 100px;
  }
}
/* カテゴリー02 */
.category_no2 {
  z-index: 4;
  position: relative;
}

.category_no2 .category-decoration {
  position: relative;
  z-index: 6;
}

.category_no2 .category-decoration .position2-01 {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, 0);
  margin-top: -630px;
  width: 300px;
}

.category_no2 .category-layer {
  background-color: #d9eaee;
  padding-top: 360px;
  padding-bottom: 480px;
  z-index: 5;
}

@media screen and (max-width: 767px) {
  .category_no2 .category-decoration .position2-01 {
    margin-top: -320px;
    width: 140px;
  }
  .category_no2 .category-layer {
    padding-top: 60px;
    padding-bottom: 200px;
  }
}
/* カテゴリー03 */
.category_no3 {
  z-index: 4;
  position: relative;
}

.category_no3 .category-decoration {
  position: relative;
}

.category_no3 .category-layer {
  background-color: #fff5cb;
  padding-top: 360px;
  padding-bottom: 480px;
  z-index: 5;
}

@media screen and (max-width: 767px) {
  .category_no3 .category-layer {
    padding-top: 160px;
    padding-bottom: 300px;
  }
}
/* カテゴリー04 */
.category_no4 {
  z-index: 6;
  position: relative;
}

.category_no4 .category-decoration {
  position: relative;
}

.category_no4 .category-decoration .position1-01 {
  position: absolute;
  top: 0;
  right: 0;
  margin-top: -390px;
  width: 440px;
}

.category_no4 .category-layer {
  background-color: #fee5d9;
  padding-top: 360px;
  padding-bottom: 240px;
  z-index: 7;
}

@media screen and (max-width: 767px) {
  .category_no4 .category-decoration .position1-01 {
    margin-top: -230px;
    width: 180px;
  }
  .category_no4 .category-layer {
    padding-top: 80px;
    padding-bottom: 30px;
  }
}
/* ===== カテゴリー内コンテンツ ===== ===== ===== ===== */
/* ===== 全体設定 ===== */
.section-header {
  text-align: center;
  padding: 40px 0 20px;
}

.section-title {
  font-size: 2rem;
  letter-spacing: 0.2em;
  font-weight: bold;
}

/* ===== イントロ セッション ===== */
.section-intro {
  padding-bottom: 800px;
  overflow: hidden;
  text-align: center;
}

.section-intro img {
  margin: auto;
}

.section-intro-title-inner {
  max-width: var(--contents_wide_default);
  display: inline-block;
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--spacing-inline);
  padding-right: var(--spacing-inline);
  position: relative;
}

.section-intro-title-inner > h2 {
  font-family: "Zen Maru Gothic", sans-serif;
  letter-spacing: 0.1em;
  font-size: clamp(1.125rem, -1.036rem + 4.508vw, 2.8125rem);
  font-weight: 700;
  line-height: 1.7;
  margin-top: clamp(3.125rem, 0.724rem + 5.008vw, 5rem);
}

.section-intro-title-inner > img {
  position: absolute;
  top: 0;
  right: 0;
  max-width: clamp(5.625rem, -3.178rem + 18.364vw, 12.5rem);
  margin-top: 0;
  margin-right: -20px;
}

.section-intro-logo01 {
  margin-top: clamp(5.625rem, 0.023rem + 11.686vw, 10rem);
}

.section-intro-logo01 > img {
  width: clamp(32.5rem, 20.896rem + 24.207vw, 41.5625rem);
}

.section-intro-logo02 {
  margin-top: clamp(3.125rem, 0.724rem + 5.008vw, 5rem);
}

.section-intro-logo02 > img {
  width: clamp(12.5rem, 0.736rem + 24.541vw, 21.6875rem);
}

.section-intro-caption p {
  line-height: 3;
  font-size: clamp(0.8125rem, 0.332rem + 1.002vw, 1.1875rem);
  display: block;
  position: relative;
  z-index: 2;
  letter-spacing: -1px;
}

.section-intro-caption p:nth-of-type(1) {
  margin-top: clamp(2.8125rem, 0.812rem + 4.174vw, 4.375rem);
}

.section-intro-caption p:nth-of-type(2) {
  margin-top: clamp(2.8125rem, 0.812rem + 4.174vw, 4.375rem);
}

.section-intro-caption p:nth-of-type(4) {
  margin-top: clamp(2.8125rem, 0.812rem + 4.174vw, 4.375rem);
}

.section-intro-caption figure {
  margin: clamp(1.25rem, -1.151rem + 5.008vw, 3.125rem) auto;
  padding: 0 40px;
}

.section-intro-caption figure:nth-of-type(1) img {
  width: clamp(9.375rem, -4.23rem + 28.381vw, 20rem);
}

.section-intro-caption figure:nth-of-type(2) img {
  width: clamp(16.875rem, -11.935rem + 60.1vw, 39.375rem);
}

@media (max-width: 768px) {
  .section-intro {
    padding-bottom: 450px;
  }
  .section-intro-title-inner > h2 {
    letter-spacing: 0em;
  }
  .section-intro-title-inner > img {
    margin-right: 0;
  }
  .svg-frame-outer {
    padding: 0 40px;
  }
}
/* ===== 商品 セッション ===== */
.section-menu {
  /* overflow: hidden; */
  /* background-color: #e60012; */
}

/*  */
.section-category-outer.section-style01 {
  margin-top: 200px;
}

.section-decoration {
  position: relative;
  max-width: 1200px;
  width: 100%;
  margin: auto;
}

.section-decoration i {
  position: absolute;
  bottom: 0;
  margin-bottom: -150px;
}

.section-category-outer .menu-main {
  padding-top: 100px;
  padding-bottom: 400px;
  margin-top: -200px;
  position: relative;
}

.section-category-outer.section-style01 {
  margin-bottom: -60px;
}

.section-category-outer.section-style01 .menu-main {
  clip-path: inset(0 -100px 0 -100px round 410% 410% 0 0/110vw 110vw 0 0);
  background-color: initial;
  z-index: 10;
  padding-top: clamp(6.25rem, 6.25rem + 0vw, 6.25rem);
}

.section-category-outer.section-style01 .section-decoration i {
  z-index: 9;
}

/*  */
.section-category-outer.section-style02 {
  margin-bottom: -60px;
}

.section-category-outer.section-style02 .menu-main {
  clip-path: inset(0 -100px 0 -100px round 410% 410% 0 0/110vw 110vw 0 0);
  background-color: #fffae5;
  z-index: 12;
  padding-top: clamp(6.25rem, -1.753rem + 16.694vw, 12.5rem);
}

.section-category-outer.section-style02 .section-decoration i {
  z-index: 11;
  bottom: 0;
  margin-bottom: -180px;
}

.section-category-outer.section-style02 .section-decoration i img {
  width: 285px;
  margin-bottom: 115px;
  margin-left: 20px;
}

@media (max-width: 768px) {
  .section-category-outer.section-style02 .section-decoration i img {
    width: 80px;
    margin-bottom: 160px;
    margin-left: 10px;
  }
}
/*  */
.section-category-outer.section-style03 {
  margin-bottom: -60px;
}

.section-category-outer.section-style03 .menu-main {
  clip-path: inset(0 -100px 0 -100px round 410% 410% 0 0/110vw 110vw 0 0);
  background-color: #fee5d9;
  z-index: 14;
  padding-top: clamp(6.25rem, -1.753rem + 16.694vw, 12.5rem);
  padding-bottom: 200px;
  position: relative;
  background-repeat: repeat;
  background-image: linear-gradient(rgba(255, 255, 255, 0.2) 4px, transparent 0px), linear-gradient(90deg, rgba(255, 255, 255, 0.2) 4px, transparent 0px);
  background-size: var(--grid-size) var(--grid-size);
}

.section-category-outer.section-style03 .section-decoration i {
  z-index: 13;
}

/*  */
.menu-main-title {
  background: #ffffff;
  font-family: "shirokuma";
  box-shadow: 0px 0px 0px 12px #ffffff;
  border: dotted 8px #fdd5c2;
  border-radius: 100px;
  padding: 24px 20px 16px;
  color: #242424;
  display: flex;
  justify-content: center;
  align-items: center;
  max-width: 960px;
  margin: 0 auto 100px;
  text-align: center;
  position: relative;
}

.menu-main-title.decoration01::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  margin-bottom: -90px;
  margin-left: -100px;
  width: 170px;
  height: 125px;
  background-image: url(../image/menu-main-title-deco_img01.png);
  background-size: contain;
  background-repeat: no-repeat;
}

.menu-main-title.decoration02::before {
  content: "";
  position: absolute;
  right: 0;
  top: 0;
  margin-top: -80px;
  margin-right: -100px;
  width: 170px;
  height: 125px;
  background-image: url(../image/menu-main-title-deco_img02.png);
  background-size: contain;
  background-repeat: no-repeat;
}

.menu-main-title h3 {
  font-size: clamp(1.25rem, -1.551rem + 5.843vw, 3.4375rem);
  font-weight: 400;
  line-height: 1;
}
@media (max-width: 767px) {
  .menu-main-title h3 {
    letter-spacing: -1px;
  }
}

.menu-main-title i {
  position: absolute;
  font-size: 20px;
  background-color: #fff;
  margin-bottom: -16px;
  padding: 0 18px;
  color: var(--font_color-set01);
  bottom: 0;
  list-style: 1;
}

/*  */
.item-list-title {
  font-family: "shirokuma";
  margin: clamp(0rem, -9.603rem + 20.033vw, 7.5rem) auto 0;
  text-align: center;
  display: flex;
  flex-direction: column;
  line-height: 1;
}

.item-list-title h3 {
  font-size: clamp(1.3125rem, -0.608rem + 4.007vw, 2.8125rem);
  font-weight: 400;
}

.item-list-title span {
  font-size: clamp(0.625rem, -0.175rem + 1.669vw, 1.25rem);
  color: var(--font_color-set01);
}

.item-list {
  display: flex;
  gap: 70px;
  flex-wrap: wrap;
  justify-content: space-evenly;
  align-items: flex-start;
  margin-top: 60px;
}

.item-list li {
  max-width: 350px;
}
@media (max-width: 768px) {
  .item-list li {
    max-width: initial;
    width: 70%;
  }
}

.item-list li.icon01 {
  position: relative;
}

.item-list li.icon01 .item-list-figure::before {
  content: "";
  display: inline-block;
  width: clamp(4.375rem, 1.974rem + 5.008vw, 6.25rem);
  aspect-ratio: 1/1;
  background-image: url(../image/item_icon01.png);
  background-repeat: no-repeat;
  background-size: contain;
  position: absolute;
  top: 0;
  right: 0;
  margin: 0 10px 0 0;
}

.item-list li.icon02 .item-list-figure::before {
  content: "";
  display: inline-block;
  width: clamp(5rem, 3.399rem + 3.339vw, 6.25rem);
  aspect-ratio: 1/1;
  background-image: url(../image/item_icon02.png);
  background-repeat: no-repeat;
  background-size: contain;
  position: absolute;
  top: 0;
  right: 0;
  margin: 0 5px 0 0;
}

.item-list-figure {
  position: relative;
  width: clamp(12.5rem, 0.495rem + 25.042vw, 21.875rem);
  margin: auto;
}
@media (max-width: 768px) {
  .item-list-figure {
    width: 100%;
  }
}

.item-list-figure img {
  width: 100%;
  overflow: hidden;
  border-radius: 50% 50%;
  aspect-ratio: 1/1;
  -o-object-fit: cover;
     object-fit: cover;
}

.item-list-header {
  margin-top: clamp(0.625rem, -0.976rem + 3.339vw, 1.875rem);
  text-align: center;
}

.item-list-header_sub {
  text-align: center;
  margin-bottom: clamp(0.1875rem, -0.373rem + 1.169vw, 0.625rem);
  display: block;
  font-size: clamp(1.125rem, 0.565rem + 1.169vw, 1.5625rem);
  font-weight: 500;
  margin-bottom: 10px;
}

.item-list-header_txt {
  display: inline-flex;
  border: 1px solid #7c7c7c;
  border-radius: 8px;
  padding: 6px 20px;
  font-weight: 500;
  font-size: clamp(0.625rem, 0.225rem + 0.835vw, 0.9375rem);
  line-height: 1;
  min-height: 43px;
  align-items: center;
  justify-content: center;
  font-weight: 500;
  min-width: 240px;
}

.item-list-price {
  font-size: clamp(0.75rem, -0.29rem + 2.17vw, 1.5625rem);
  text-align: center;
  margin-top: clamp(0.625rem, -0.175rem + 1.669vw, 1.25rem);
  margin-bottom: clamp(0.375rem, -1.146rem + 3.172vw, 1.5625rem);
  margin-left: auto;
  margin-right: auto;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 6px;
  line-height: 1;
}

.item-list-price span {
  font-size: clamp(0.625rem, 0.065rem + 1.169vw, 1.0625rem);
}

.item-list-txt {
  font-size: clamp(0.75rem, 0.27rem + 1.002vw, 1.125rem);
  line-height: 1.8;
}

.item-list-txt .deco {
  padding-left: 1em;
  text-indent: -1em;
  display: block;
}

@media (max-width: 768px) {
  .menu-main-title {
    padding-top: 6px;
    padding-bottom: 6px;
  }
  .menu-main-title.decoration01::after {
    width: 50px;
    margin-top: 0px;
    margin-bottom: -110px;
    margin-left: -20px;
  }
  .menu-main-title.decoration02::before {
    width: 50px;
    margin-top: -20px;
    margin-right: -20px;
  }
  .section-category-outer.section-style01 .menu-main {
    background-image: linear-gradient(rgba(255, 255, 255, 0.2) 2px, transparent 0px), linear-gradient(90deg, rgba(255, 255, 255, 0.2) 2px, transparent 0px);
    background-size: var(--grid-size) var(--grid-size);
    padding-bottom: 300px;
  }
  .section-category-outer.section-style02 .menu-main {
    padding-bottom: 200px;
  }
  .section-category-outer.section-style03 .menu-main {
    background-image: linear-gradient(rgba(255, 255, 255, 0.2) 2px, transparent 0px), linear-gradient(90deg, rgba(255, 255, 255, 0.2) 2px, transparent 0px);
    background-size: var(--grid-size_sp) var(--grid-size_sp);
    padding-bottom: 100px;
  }
  .menu-main-title {
    box-shadow: 0px 0px 0px 5px #ffffff;
    border: dotted 3px #fdd5c2;
    margin-bottom: 30px;
  }
  .menu-main-title i {
    font-size: 10px;
    margin-bottom: -8px;
  }
  .item-list-header_txt {
    border-radius: 100px 100px;
  }
  .item-list-header h4 {
    border-radius: 40px;
    min-height: auto;
  }
  .item-list-header_sub {
    margin-bottom: 10px;
  }
  .item-list {
    gap: 30px 15px;
    justify-content: space-around;
  }
}
/* ===== SHOP セクション ===== */
.shop-section {
  padding: 100px 20px;
}

.shop-card {
  max-width: 1200px;
  width: 100%;
  margin: 0 auto;
  background: #fff;
  border-radius: 30px;
  padding: 210px 40px;
  display: flex;
  gap: 40px clamp(20px, 6vw, 80px);
  align-items: flex-start;
  justify-content: center;
  flex-direction: row-reverse;
}

.shop-map-container {
  flex: 1;
}

.map-placeholder {
  background: #e5e5e5;
  max-width: 500px;
  aspect-ratio: 1/1.16;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.shop-info {
  flex: 1;
}

.shop-name {
  width: clamp(9.6875rem, -10.72rem + 42.571vw, 25.625rem);
  margin: 0 auto 40px 0;
}

.shop-details-list {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 10px 30px;
  align-items: start;
  justify-content: start;
  height: 100%;
}

.shop-details-list dt {
  font-weight: bold;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: clamp(0.8125rem, 0.492rem + 0.668vw, 1.0625rem);
  margin-bottom: 25px;
}

.shop-details-list dd {
  font-size: clamp(0.8125rem, 0.492rem + 0.668vw, 1.0625rem);
  display: flex;
  align-items: flex-start;
  flex-direction: column;
  margin-bottom: 25px;
}

.shop-details-list dt.info {
  grid-column: 1/-1;
  justify-content: flex-start;
}

.shop-details-list dt.info + dd {
  grid-column: 1/-1;
  padding-left: 34px;
  margin-top: -58px;
}

@media (max-width: 768px) {
  .shop-section {
    padding: 0 20px;
  }
  .shop-name {
    margin-left: auto;
  }
  .shop-details-list dt {
    margin-bottom: 10px;
  }
  .shop-details-list dt img {
    width: 16px;
  }
  .shop-details-list dt.info + dd {
    padding-left: 25px;
    margin-top: -35px;
  }
  .shop-details-list dd {
    margin-bottom: 10px;
  }
  .map-placeholder {
    height: initial;
    width: 100%;
    aspect-ratio: 1/1;
  }
}
/* ===== SNS セクション ===== */
.sns-section {
  padding-top: 100px;
}

.sns-content-wrapper {
  max-width: var(--contents_wide_default);
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--spacing-inline);
  padding-right: var(--spacing-inline);
}

.sns-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 40px 30px;
  margin-bottom: 30px;
  justify-items: center;
}

.sns-account {
  max-width: 350px;
  width: 100%;
}

.sns-icon-label {
  text-align: center;
  margin-bottom: 20px;
  font-weight: bold;
}

.sns-icon-label {
  font-size: clamp(0.625rem, -0.175rem + 1.669vw, 1.25rem);
}

.sns-icon-label img {
  margin: 0 auto 10px;
  width: clamp(1.875rem, -0.126rem + 4.174vw, 3.4375rem);
}

.sns-post-placeholder {
  background: #fff;
  width: 100%;
  min-height: 600px;
  border-radius: 8px;
  padding: 10px;
  display: flex;
  justify-content: center;
  align-items: flex-start;
}

.sns-warning-box {
  max-width: 900px;
  background: #fff;
  border: 2px solid #e94b43;
  padding: 20px;
  color: #e94b43;
  line-height: 1.7;
  margin: 20px auto 40px;
  font-size: min(3vw, 16px);
}

.warning-title {
  font-size: min(3.3vw, 20px);
  font-weight: bold;
  text-align: center;
  margin: 0 0 10px 0;
}

/* ===== MAP/バナー セクション ===== */
.atami-map-section {
  padding: 150px 20px 210px;
  max-width: 1240px;
  margin: 0 auto;
  position: relative;
  z-index: 10;
}

.atami-map-header {
  position: absolute;
  top: 0;
  left: 0;
  margin-top: -60px;
}

.map-layout-container {
  display: flex;
  gap: 20px 40px;
  align-items: flex-start;
  justify-content: center;
}

.banner-list {
  list-style: none;
  padding: 0;
  margin: 0;
  width: 300px;
}

.banner-list li {
  margin-bottom: 10px;
}

.banner-list img {
  width: 100%;
  height: auto;
  display: block;
}

@media (max-width: 768px) {
  .shop-card,
  .sns-grid,
  .map-layout-container {
    flex-direction: column;
    align-items: center;
    grid-template-columns: 1fr;
  }
  .shop-card {
    padding: 40px 40px;
  }
  .shop-map-container,
  .shop-info {
    width: 100%;
  }
  .banner-list {
    width: 100%;
    display: inline-flex;
    flex-wrap: wrap;
    margin: auto;
    gap: 10px;
    justify-content: center;
  }
  .map-layout-container {
    min-width: 290px;
    margin: auto;
    padding: 0 20px;
  }
  .atami-map-section {
    padding-top: 30px;
    padding-bottom: 70px;
  }
  .atami-map-header {
    width: 80px;
    margin-top: -20px;
    margin-left: 20px;
  }
  .banner-list li {
    width: calc(50% - 5px);
    margin-bottom: 0;
  }
}
/* ===== イントロ２ ===== */
.section-outro {
  margin-bottom: 500px;
  text-align: center;
  z-index: 4;
  position: relative;
}

.section-outro-decoration {
  position: relative;
}

.section-outro-decoration img:nth-of-type(1) {
  position: absolute;
  top: 0;
  left: 0;
  width: 275px;
  margin-left: 40px;
  margin-top: -30px;
  margin-top: -180px;
}

.section-outro-decoration img:nth-of-type(2) {
  position: absolute;
  top: 0;
  right: 0;
  width: 380px;
  margin-right: 40px;
  margin-top: -180px;
}

.section-outro-title {
  overflow: hidden;
  padding: 60px 0;
}

.section-outro-title-inner {
  font-family: "Zen Maru Gothic", sans-serif;
  width: 100%;
  display: inline-block;
  margin: 0 40px;
}

.section-outro-title-inner h2 {
  display: inline;
  font-size: clamp(1.3125rem, -0.368rem + 3.506vw, 2.625rem);
  white-space: nowrap;
}

.section-outro-title-inner p {
  text-align: right;
  font-size: clamp(0.625rem, 0.145rem + 1.002vw, 1rem);
}

.section-outro-title-inner p span {
  color: #e60012;
}

.loop-slider-outer {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  padding-left: 0;
  padding-right: 0;
}

.loop-slider {
  overflow: hidden;
  width: 100%;
  margin: auto;
}

.loop-slider-inner {
  display: flex;
  width: -moz-max-content;
  width: max-content;
  /* これにより4セット分の全幅を正確に計算 */
  animation: loop-scroll 20s linear infinite;
  /* 距離が伸びるので時間は長めに調整 */
}

.loop-set {
  display: flex;
  margin-top: 10px;
  padding: 0 10px;
}

.loop-set img:nth-of-type(1) {
  height: 60px;
}

.loop-set img:nth-of-type(2) {
  height: 60px;
}

.scroll-item {
  padding: 0 40px;
  white-space: nowrap;
  font-size: 2rem;
}

/* アニメーションの設定 */
@keyframes loop-scroll {
  0% {
    transform: translateX(0);
  }
  100% {
    /* 4セットのうち、最初の1セット分（25%）が左に消えたらリセット */
    transform: translateX(-25%);
  }
}
.media-box {
  text-align: center;
  margin-top: 8vw;
}

.media-box a {
  display: inline-block;
  margin: 60px auto 0;
  max-width: 900px;
}

.outro-body {
  position: relative;
  min-height: min(60vw, 900px);
  margin: 180px auto;
}

.outro-body img.img_left {
  position: absolute;
  left: 0;
  top: 0;
  max-width: clamp(330px, 42vw, 696px);
  z-index: 1;
  margin-left: -60px;
}

.outro-body img.img_center {
  position: absolute;
  left: 31%;
  top: 0;
  margin-top: -2vw;
  max-width: clamp(280px, 40vw, 582px);
  z-index: 2;
}

.outro-body img.img_right {
  position: absolute;
  right: 0;
  top: 0;
  margin-top: 1vw;
  max-width: clamp(200px, 42vw, 392px);
  z-index: 2;
  margin-right: -60px;
}

@media screen and (max-width: 767px) {
  .section-outro {
    min-height: 600px;
    margin-bottom: 400px;
  }
  .section-outro-decoration {
    margin-top: -100px;
    padding-bottom: 100px;
  }
  .section-outro-decoration img:nth-of-type(1) {
    width: 115px;
    margin-left: 10px;
    margin-top: 0;
  }
  .section-outro-decoration img:nth-of-type(2) {
    width: 145px;
    margin-right: 10px;
    margin-top: 0;
  }
  .outro-body {
    min-height: 900px;
    margin: 90px auto 0;
  }
  .outro-body img.img_left {
    margin-top: 590px;
  }
  .outro-body img.img_center {
    margin-top: -50px;
    left: 0;
  }
  .outro-body img.img_right {
    margin-top: 300px;
  }
}
/* ===== デザイナー ===== */
.designer-section-wrapper {
  max-width: var(--contents_wide_default);
  width: 100%;
  margin-top: 80px;
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--spacing-inline);
  padding-right: var(--spacing-inline);
  /*  */
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(45%, 1fr));
  gap: 10px;
}

@media (max-width: 1000px) {
  .designer-section-wrapper {
    grid-template-columns: 1fr;
  }
}
.card {
  background-color: #fff;
  margin-left: -60px;
  margin-right: 60px;
  display: grid;
  padding-left: 35px;
  padding-right: 35px;
  padding-bottom: 30px;
  justify-items: start;
}

.card.card-right {
  margin-left: 60px;
  margin-right: -60px;
  justify-items: end;
}

@media (max-width: 1024px) {
  .card {
    padding: 0 20px 30px;
  }
}
.card-content {
  display: flex;
  flex-direction: row-reverse;
  justify-content: space-between;
  margin-top: 50px;
}

.card-right .card-content {
  flex-direction: row;
}

.card03 .card-content {
  margin-right: 30px;
}

.card04 .card-content {
  margin-left: 30px;
}

.card-image {
  margin-left: -80px;
  margin-right: 0;
}

.card-right .card-image {
  margin-left: 0;
  margin-right: -80px;
}

.card02 .card-image {
  margin-left: -60px;
}

.card-image img {
  height: 550px;
  width: auto;
}

.card-label {
  font-size: 55px;
  font-weight: 500;
  letter-spacing: 0.1em;
  line-height: 1;
  writing-mode: vertical-rl;
  text-orientation: revert;
  display: flex;
  flex-direction: column-reverse;
  flex-wrap: nowrap;
  align-items: flex-end;
  font-family: "Zen Maru Gothic", sans-serif;
}

.card01 .card-label {
  margin-left: 30px;
  font-size: 33px;
}

.card02 .card-label {
  margin-right: 10px;
}

.card03 .card-label {
  align-items: flex-start;
  margin-left: -50px;
}

.card04 .card-label {
  margin-right: 10px;
  margin-bottom: 20px;
}

@media (max-width: 1024px) {
  .card-content {
    margin-top: 20px;
  }
  .card-image {
    height: auto;
    margin-left: -50px;
  }
  .card-right .card-image {
    margin-right: -50px;
  }
  .card-image img {
    height: auto;
  }
  .card-label {
    font-size: 30px;
  }
  .card01 .card-content {
    margin-right: 10px;
  }
  .card01 .card-label {
    font-size: 18px;
    margin-left: 20px;
  }
  .card02 .card-label {
    margin-right: 30px;
    font-size: 28px;
  }
  .card02 .card-label_sub {
    font-size: 10px;
  }
  .card03 .card-label {
    margin-left: -30px;
    font-size: 32px;
    margin-right: 0;
  }
  .card04 .card-label {
    margin-bottom: 0;
  }
}
.card-label p {
  font-weight: 800;
}

.card-label_sub {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-left: 10px;
  color: #3abbd5;
  font-size: 18px;
}

@media (max-width: 1024px) {
  .card-label_sub {
    font-size: 13px;
  }
}
.card-description {
  font-size: 20px;
  line-height: 1.6;
  margin-top: 20px;
  margin-right: 100px;
  margin-left: 0;
}

.card-right .card-description {
  margin-right: 0;
  margin-left: 100px;
}

@media (max-width: 1024px) {
  .card-description {
    margin-left: 0;
    font-size: 14px;
    margin-right: 40px;
  }
  .card-right .card-description {
    margin-right: 0;
    margin-left: 60px;
  }
  .card01.card-content {
    margin-right: 10px;
  }
  .card02 .card-content {
    margin-left: 0px;
  }
  .card03 .card-content {
    margin-right: 0;
  }
  .card04 .card-content {
    margin-left: 20px;
  }
}
/* 左右からスクロール連動で入ってくる仕掛け関連 */
.scrollmove-outer {
  position: relative;
}

.scrollmove-outer > div {
  z-index: 1;
  /*100*/
}

.scrollmove-outer p {
  writing-mode: vertical-rl;
  text-orientation: upright;
  align-items: flex-start;
  line-height: 1;
  font-size: clamp(0.625rem, 0.145rem + 1.002vw, 1rem);
  color: #e60013;
  font-weight: 600;
  font-family: "Zen Maru Gothic", sans-serif;
  margin: 0 20px;
  white-space: nowrap;
  position: absolute;
  top: 0;
}

.scrollmove-outer.left01 {
  margin-top: 65px;
  margin-bottom: -40px;
}

.scrollmove-outer.left01 > div {
  position: absolute;
  left: 0px;
  margin-left: -60px;
}

.scrollmove-outer.left01 {
  left: 0;
}

.scrollmove-outer.left01 img {
  width: 247px;
  margin-top: -220px;
  margin-left: 50px;
}

.scrollmove-outer.right01 > div {
  position: absolute;
  right: 0;
  margin-right: -60px;
}

.scrollmove-outer.right01 p {
  right: 0;
}

.scrollmove-outer.right01 img {
  width: 299px;
  margin-top: 160px;
}

.scrollmove-outer.left02 {
  margin-top: -160px;
  margin-bottom: 160px;
}

.scrollmove-outer.left02 > div {
  position: absolute;
  left: 0;
  margin-left: -60px;
}

.scrollmove-outer.left02 p {
  left: 0;
}

.scrollmove-outer.left02 img {
  width: 129px;
  margin-top: -220px;
}

.scrollmove {
  display: inline-block;
  justify-content: center;
}

@media (max-width: 768px) {
  .scrollmove-outer p {
    margin: 0 10px;
  }
  .scrollmove-outer.left01 {
    margin-top: 65px;
    margin-bottom: -40px;
  }
  .scrollmove-outer.left01 > div {
    margin-top: 0px;
  }
  .scrollmove-outer.left01 img {
    width: 56px;
    margin-top: -55px;
    margin-left: 10px;
  }
  .scrollmove-outer.right01 > div {
    margin-top: 140px;
  }
  .scrollmove-outer.right01 img {
    width: 71px;
    margin-top: 0;
  }
  .scrollmove-outer.left02 > div {
    margin-top: -80px;
  }
  .scrollmove-outer.left02 img {
    width: 38px;
    margin-top: 0;
  }
}
/* */
.frameAccent {
  position: absolute;
}

.frameAccent.left {
  left: 0;
}

.frameAccent.right {
  right: 0;
}

/* 左右からスクロール連動で入ってくる仕掛け関連 *//*# sourceMappingURL=style.css.map */