@charset "UTF-8";
/* ==================================================
 _variables.scss
 変数 定義
================================================== */
/* ==================================================
 カラー変数定義
================================================== */
/* ==== サイト基本カラー定義 ==== */
/* ==== プランカラー定義 ==== */
/* ==== 白黒カラー定義 ==== */
/* ==== ボタンカラー定義 ==== */
/* ==== ボーダーカラー定義 ==== */
/* ==================================================
 background-imageディレクトリ 変数定義
================================================== */
/* ==================================================
 _font.scss
 フォント・文字サイズ 定義
================================================== */
/* ==================================================
 _function.scss
 関数 定義
================================================== */
/* ==================================================
 _mq.scss
 メディアクエリ 定義
================================================== */
/* ==================================================
 メディアクエリ 基本サイズ
================================================== */
/* ==================================================
 メディアクエリ mixin定義
 ※以下は定義方法
.class {
 width: 50%;
 @include tab {
		width: 100%
 }
}
================================================== */
/* ==================================================
 デバイス非表示・表示
================================================== */
.is-pc {
  display: none;
}

.is-tab {
  display: none;
}

.is-sp {
  display: none;
}

/* ==================================================
 フォントのvw単位計算
 ※定義方法
 p {
	font-size: responsiveFontSizeClamp(最小フォントサイズ,最大フォントサイズ,最小ウィンドウサイズ,最大ウィンドウサイズ);
 }
================================================== */
/* ==================================================
 英字フォント
================================================== */
.font-roboto {
  font-family: "Roboto", sans-serif;
}

/* ==================================================
 見出しフォントサイズ(spサイズ ~ pcサイズ)
 h1: 24 ~ 28px;
 h2: 20 ~ 24px;
 h3: 18 ~ 20px;
 h4: 16 ~ 18px;
================================================== */
/* ==================================================
 フォントサイズ(spサイズ ~ pcサイズ)
 x-small: 10 ~ 12px
 small: 12 ~ 14px
 medium: 14px ~ 16px
 large: 16px ~ 18px
 x-large: 18 ~ 20px 
================================================== */
/* ==================================================
 見出しフォントサイズ (SPサイズ ~ PCサイズ)
 h1: 32 ~ 72px;
 h2: 28 ~ 60px;
 h3: 24 ~ 48px;
 h4: 20 ~ 36px;
================================================== */
.font-h1 {
  font-size: clamp(2.25rem, 1.5rem + 3.75vw, 4.5rem);
}

.font-h2 {
  font-size: clamp(2rem, 1.417rem + 2.92vw, 3.75rem);
}

.font-h3 {
  font-size: clamp(1.75rem, 1.333rem + 2.08vw, 3rem);
}

.font-h4 {
  font-size: clamp(1.5rem, 1.25rem + 1.25vw, 2.25rem);
}

/* ==================================================
 レギュラーサイズ（通常の本文用）
================================================== */
.font-regular {
  font-size: clamp(0.875rem, 0.833rem + 0.21vw, 1rem);
}

.font-small {
  font-size: clamp(0.75rem, 0.708rem + 0.21vw, 0.875rem);
}

.font-medium {
  font-size: clamp(1rem, 0.917rem + 0.42vw, 1.25rem);
}

.font-large {
  font-size: clamp(1.25rem, 1.083rem + 0.83vw, 1.75rem);
}

/* ==================================================
 特大フォントサイズ（英字タイトル・特大見出し用）
================================================== */
.font-title {
  font-size: clamp(4rem, 3.333rem + 3.33vw, 6rem);
}

.font-hero {
  font-size: clamp(6rem, 5.292rem + 3.54vw, 8.125rem);
}

.font-display {
  font-size: clamp(8.125rem, 7.292rem + 4.17vw, 10.625rem);
}

/* ==================================================
 フォントウェイト
================================================== */
.font-w300 {
  font-weight: 300;
}

.font-w400 {
  font-weight: 400;
}

.font-w500 {
  font-weight: 500;
}

.font-w600 {
  font-weight: 600;
}

.font-w700 {
  font-weight: 700;
}

.font-w800 {
  font-weight: 800;
}

.font-w900 {
  font-weight: 900;
}

/* ==================================================
 フォントスタイル
================================================== */
.font-italic {
  font-style: italic;
}

.line-h1 {
  line-height: 1;
}

.line-h11 {
  line-height: 1.1;
}

.line-h12 {
  line-height: 1.2;
}

.line-h15 {
  line-height: 1.5;
}

.letter-0 {
  letter-spacing: 0em;
}

.letter-s005 {
  letter-spacing: 0.05em;
}

.letter-s01 {
  letter-spacing: 0.1em;
}

.letter-s02 {
  letter-spacing: 0.2em;
}

.letter-s05 {
  letter-spacing: 0.5em;
}

/* ==================================================
 フォントカラー
================================================== */
.font-white {
  color: white;
}

.font-black {
  color: #2c2c2c;
}

.font-gray {
  color: #7d7d7d;
}

.font-main {
  color: #1ea1a1;
}

.font-accent {
  color: #ffdc0d;
}

.font-sub {
  color: #aed163;
}

/* ==================================================
 テキストシャドウ
================================================== */
/* ベーシックな黒シャドウ（汎用） */
.text-shadow-base {
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}

/* くっきり目のシャドウ（強調したいとき） */
.text-shadow-strong {
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.7);
}

/* 柔らかく広がるシャドウ（上品） */
.text-shadow-soft {
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}

/* フチどり風（白文字に最適、強力） */
.text-shadow-outline {
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
}

/* 明るいシャドウ（暗背景用に白い影） */
.text-shadow-light {
  text-shadow: 0 1px 3px rgba(255, 255, 255, 0.6);
}

/* ==================================================
 _mixin.scss
 mixinスタイル 定義
================================================== */
/* ==================================================
 画面最大幅（PC画面をレスポンシブ対応させないための横幅）
================================================== */
/* ==================================================
 コンテンツ最大幅
================================================== */
/* ==================================================
 内部コンテンツ幅
================================================== */
html {
  font-size: 16px;
}

body {
  line-height: 1.6;
}

.w-90 {
  width: 90%;
  max-width: 1190px;
  margin: 0 auto;
}
@media screen and (max-width: 767px) {
  .w-90 {
    width: 95%;
  }
}

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

.text-left {
  text-align: left;
}

.text-right {
  text-align: right;
}

@media screen and (max-width: 767px) {
  .sp-on {
    display: block;
  }
}

/* ==================================================
 余白
================================================== */
.mb-xs {
  margin-bottom: clamp(0.25rem, 2.5vw, 0.5rem);
}

.mb-sm {
  margin-bottom: clamp(1.25rem, 3.5vw, 1.875rem);
}

.mb-rg {
  margin-bottom: clamp(1.875rem, 5vw, 2.5rem);
}

.mb-md {
  margin-bottom: clamp(2.5rem, 6vw, 3.125rem);
}

.mb-lg {
  margin-bottom: clamp(3.125rem, 7vw, 3.75rem);
}

.mb-xl {
  margin-bottom: clamp(3.75rem, 8vw, 4.375rem);
}

.mb-xxl {
  margin-bottom: clamp(4.375rem, 9vw, 5rem);
}

.pl-xs {
  padding-left: clamp(0.25rem, 2.5vw, 0.5rem);
}

.mainvisual-contents img {
  width: 50%;
  max-width: 600px;
}

.product {
  padding-top: 4rem;
  padding-bottom: 4rem;
}
.product__list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  row-gap: 4rem;
  -moz-column-gap: 4rem;
       column-gap: 4rem;
}
.product__item {
  display: flex;
  flex-direction: column;
  row-gap: 1rem;
}
.product__item-img img {
  width: 100%;
}
.product__item-text {
  display: flex;
  flex-direction: column;
  row-gap: 0.6rem;
}
.product__menu {
  width: 100%;
}
.product__menu-container {
  width: 100%;
  display: flex;
  position: relative;
}
@media screen and (max-width: 1024px) {
  .product__menu-container {
    flex-direction: column;
  }
}
.product__menu-nav {
  height: 100%;
  width: 260px;
  padding-top: 120px;
  margin-top: -120px;
  position: sticky;
  top: 0;
  left: 0;
}
@media screen and (max-width: 1024px) {
  .product__menu-nav {
    position: relative;
    width: 100%;
    padding-top: 1rem;
    margin-top: 0;
    margin-bottom: 2rem;
  }
}
@media screen and (max-width: 767px) {
  .product__menu-nav {
    width: 100%;
    padding-top: 1rem;
    margin-top: 0;
    margin-bottom: 2rem;
  }
}
.product__menu-nav ul {
  display: flex;
  flex-direction: column;
  row-gap: 1.5rem;
}
@media screen and (max-width: 1024px) {
  .product__menu-nav ul {
    background-color: white;
    border-top: 1px solid rgb(58, 33, 5);
    border-bottom: 1px solid rgb(58, 33, 5);
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
  }
}
@media screen and (max-width: 1024px) {
  .product__menu-nav ul {
    row-gap: 0;
  }
}
@media screen and (max-width: 1024px) {
  .product__menu-nav ul li {
    border-right: 1px solid rgb(58, 33, 5);
    max-width: 100%;
    height: 50px;
    width: 25%;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}
@media screen and (max-width: 767px) {
  .product__menu-nav ul li {
    width: 50%;
  }
}
@media screen and (max-width: 1024px) {
  .product__menu-nav ul li:first-child {
    border-left: 1px solid rgb(58, 33, 5);
  }
}
@media screen and (max-width: 767px) {
  .product__menu-nav ul li:first-child {
    border-left: 1px solid rgb(58, 33, 5);
    border-bottom: 1px solid rgb(58, 33, 5);
  }
}
@media screen and (max-width: 767px) {
  .product__menu-nav ul li:nth-child(2) {
    border-bottom: 1px solid rgb(58, 33, 5);
  }
}
@media screen and (max-width: 767px) {
  .product__menu-nav ul li:nth-child(3) {
    border-left: 1px solid rgb(58, 33, 5);
  }
}
.product__menu-group {
  width: 100%;
  padding-left: 3rem;
  border-left: 1px solid rgb(58, 33, 5);
}
@media screen and (max-width: 1024px) {
  .product__menu-group {
    padding-left: 0;
    border-left: none;
  }
}
.product__menu-list {
  display: flex;
  flex-direction: column;
  row-gap: 2rem;
}
.product__menu-wrap {
  display: flex;
  flex-direction: column;
  row-gap: 2rem;
  margin-bottom: 6rem;
}
.product__menu-wrap:last-child {
  margin-bottom: 2rem;
}
.product__menu-wrap img {
  width: 100%;
}
.product__menu-item {
  display: flex;
  align-items: flex-start;
  flex: none;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  gap: 48px;
  justify-content: flex-start;
  padding-top: 0rem;
  padding-bottom: 2rem;
  border-bottom: 0.8px solid rgb(56, 42, 32);
  width: 100%;
}
@media screen and (max-width: 767px) {
  .product__menu-item {
    gap: 1rem;
  }
}
.product__menu-title {
  display: flex;
  align-items: center;
  flex: 1;
  flex-direction: row;
  flex-wrap: nowrap;
  gap: 12px;
  justify-content: flex-start;
  padding: 0px;
  width: auto;
  max-width: 100%;
}
.product__menu-title p {
  width: 3rem;
}
.product__menu-price {
  display: flex;
  align-items: baseline;
  flex: none;
  flex-direction: row;
  flex-wrap: nowrap;
  gap: 0px;
  justify-content: flex-end;
  padding: 0px;
  width: 134px;
  max-width: 100%;
}
@media screen and (max-width: 767px) {
  .product__menu-price {
    width: 8rem;
  }
}
.product__menu-wprice {
  display: flex;
  align-items: baseline;
  flex: none;
  flex-direction: column;
  flex-wrap: nowrap;
  gap: 0.3rem;
  justify-content: flex-end;
  padding: 0px;
  width: 134px;
  max-width: 100%;
}
@media screen and (max-width: 767px) {
  .product__menu-wprice {
    width: 8rem;
  }
}
.product__self-list {
  display: flex;
  flex-direction: column;
  row-gap: 4rem;
}
.product__self-wrap {
  display: flex;
  -moz-column-gap: 2rem;
       column-gap: 2rem;
}
@media screen and (max-width: 767px) {
  .product__self-wrap {
    flex-direction: column;
    row-gap: 1rem;
  }
}
.product__self-img {
  width: 40%;
}
@media screen and (max-width: 767px) {
  .product__self-img {
    width: 100%;
  }
}
.product__self-img img {
  width: 100%;
}
.product__self-txt {
  width: 60%;
  display: flex;
  flex-direction: column;
  row-gap: 1rem;
}
@media screen and (max-width: 767px) {
  .product__self-txt {
    width: 100%;
  }
}

.insta__list {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  margin: 20px auto;
  justify-content: center;
}
@media screen and (max-width: 767px) {
  .insta__list {
    gap: 10px;
  }
}
.insta__list li {
  position: relative;
  width: calc((100% - 40px) / 3);
}
.insta__list li:before {
  content: "";
  display: block;
  padding-top: 100%;
}
.insta__list a {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.insta__list img {
  border-radius: 0.1rem;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
.insta__button {
  background-color: #422b06;
  padding: 1em 3em;
  border-radius: 3rem;
  width: -moz-fit-content;
  width: fit-content;
  margin: 0 auto;
  cursor: pointer;
  transition: 0.3s;
}
.insta__button a {
  color: white;
  text-decoration: none;
}
.insta__button:hover {
  opacity: 0.8;
}

.shop {
  display: flex;
  -moz-column-gap: 2rem;
       column-gap: 2rem;
}
@media screen and (max-width: 767px) {
  .shop {
    flex-direction: column;
    row-gap: 1rem;
  }
}
.shop__txt {
  width: 50%;
}
@media screen and (max-width: 767px) {
  .shop__txt {
    width: 100%;
  }
}
.shop__txt tr {
  width: 100%;
}
.shop__txt th,
.shop__txt td {
  padding: 1rem 0;
}
@media screen and (max-width: 767px) {
  .shop__txt th,
  .shop__txt td {
    padding: 0.5rem 0;
  }
}
.shop__txt th {
  width: 30%;
}
.shop__txt td {
  width: 70%;
}
.shop__map {
  width: 50%;
}
@media screen and (max-width: 767px) {
  .shop__map {
    width: 100%;
  }
}
.shop__map iframe {
  width: 100%;
}/*# sourceMappingURL=newstyle.css.map */