@charset "UTF-8";
/* src/assets/scss/common.scss */
/* 1) 基礎から読み込み（名前空間なしで使いたいので as *） */
/* src/assets/scss/foundation/_index.scss */
/* 記述の仕方 */
/* src/assets/scss/foundation/_index.scss */
/* ===== 使用例（このファイルを直接ビルドしない） ==================
@use "../foundation" as f;

.title {
  font-size: f.rem(20px);           // → 1.25rem（$base-font-size:16px）
  line-height: f.lh(30px, 20px);    // → 1.5
  letter-spacing: f.spacing(40);    // → 0.04em
}

.lead {
  // スマホ幅に応じて可変（14px〜18pxを rem で制限）
  font-size: f.clamp-vw(14, 18);
}

.hero-copy {
  // 375px カンプ換算：24px 相当を vw で出す
  font-size: f.get_vw(24px, 375);
}
=================================================================== */
/* src/assets/scss/foundation/_index.scss */
/* src/assets/scss/foundation/_index.scss */
/* ===============================================
foundation/_reset.scss  （プロジェクト用 最小リセット）
目的：ブラウザ差をならしつつ、UIのデフォルトを必要以上に壊さない
方針：
  - レイアウト起点だけを調整（box-sizing, margin/padding など）
  - 文字やフォームの見た目は「継承＋最低限」に留める
  - フォーカス可視性は残す（視認性・アクセシビリティ優先）
※ overflow や font-size は reset では触らない（base.scss で管理）
=============================================== */
/* 1) ボックスモデルの一貫性 */
*,
*::before,
*::after {
  box-sizing: border-box;
  border-width: 0; /* border-color 指定時に崩れないための初期化 */
  border-style: solid;
}

/* 2) 余白の初期化（必要最低限） */
html, body,
h1, h2, h3, h4, h5, h6,
p, blockquote, figure,
dl, dd {
  margin: 0;
  padding: 0;
}

/* 3) タイポ周り（最小限）
   - 行間は base.scss で最終的に上書きするのでここでは緩く */
html {
  -webkit-text-size-adjust: 100%; /* iOSの自動拡大を抑制 */
  -moz-text-size-adjust: 100%;
       text-size-adjust: 100%;
}

body {
  line-height: 1.5;
}

/* 4) 画像 / メディアの収まり */
img, svg, video, canvas, audio, iframe, embed, object {
  display: block;
  max-width: 100%;
}

img, video {
  height: auto;
}

svg {
  vertical-align: middle;
}

/* 5) リストの初期化
   - コンポーネントで独自の丸/番号を付けやすいように */
ul, ol {
  list-style: none;
  padding: 0;
  margin: 0;
}

/* 6) アンカー（色と装飾はコンポーネントで制御） */
a {
  color: inherit;
  text-decoration: none;
  background-color: transparent; /* iOSのタップハイライト対策 */
}

/* 7) フォーム要素：見た目は壊しすぎず、フォントだけ継承 */
button,
input,
select,
textarea {
  font: inherit; /* フォント/サイズ/行間を継承 */
  color: inherit;
  margin: 0;
}

button {
  cursor: pointer; /* ボタンらしさは維持 */
  background: transparent; /* デフォ背景を消す（枠は保持） */
}

textarea {
  resize: vertical; /* 横リサイズはレイアウト崩れの元になりやすい */
}

/* 8) テーブル：基本は素朴に（罫線はコンポーネントで） */
table {
  border-collapse: collapse;
  border-spacing: 0;
  width: 100%;
}

th, td {
  text-align: left;
  vertical-align: top;
  padding: 0;
}

/* 9) その他の素朴な初期化 */
hr {
  height: 0;
  border: 0;
  border-top: 1px solid currentColor; /* 必要なら見た目定義 */
}

abbr[title] {
  -webkit-text-decoration: underline dotted;
          text-decoration: underline dotted;
}

small {
  font-size: 80%;
}

/* 10) フォーカス可視性の確保（アクセシビリティ） */
:focus {
  outline: 2px solid #382620;
  outline-offset: 2px;
}

/* src/assets/scss/foundation/_index.scss */
/* src/assets/scss/foundation/_base.scss
   基礎スタイル（resetの後に読み込まれる前提）
   ※ ここでは “フォルダのまとめ役” を参照せず、
      必要なモジュールだけ個別に @use するのが安全
*/
html {
  /* 横はみ出し対策。最新ブラウザなら clip が推奨（hiddenでもOK） */
  overflow-x: clip;
  /* デフォルトはSP帯（320〜767px想定） */
  font-size: clamp(0.875rem, 0.249rem + 3.132vw, 1.75rem);
  /* PC帯：1280pxを基準に 16px を上限、14pxを下限に可変
     - f.vw(16) は 1280px 基準で 1.25vw（= 1280px時に16px）
     - clamp(min, preferred, max) で読みやすく
  */
}

body {
  position: relative;
  color: #222222;
  font-family: "Noto Serif JP", sans-serif;
  font-weight: 500;
  line-height: 150%;
  background-color: #f3efeb;
  margin: 0;
  padding: 0;
  /* 100vw はスクロールバー幅ぶんはみ出しやすいので 100% 推奨 */
  width: 100%;
  overflow-x: clip;
}
body.is-footer-sns-fixed {
  padding-bottom: 4.6875rem;
}

img {
  display: block;
  /* レイアウト衝突を避けるなら max-width の方が無難 */
  width: 100%;
  height: auto;
}

a {
  color: inherit;
  text-decoration: inherit;
}

/* 2) サイトの骨組み */
/* src/assets/scss/common.scss */
/* 1) 基礎から読み込み（名前空間なしで使いたいので as *） */
/* ← これだけで variables/functions/mixin を全部使える */
.l-inner {
  width: 100%;
  max-width: 1280px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 5.3333333333vw;
  padding-right: 5.3333333333vw;
}

.l-margin--top {
  margin-top: 160px;
}

.l-inner--bg {
  background-color: #382620;
  min-height: 100px;
}

.l-inner--bg-gray {
  background-color: #888888;
  min-height: 100px;
}

/* 3) 共通パーツ */
/* src/assets/scss/common.scss */
/* 1) 基礎から読み込み（名前空間なしで使いたいので as *） */
.c-entry-button {
  position: relative;
  font-weight: 700;
  color: #fff;
  font-size: 4.2666666667vw;
  line-height: 150%;
  text-decoration: none;
  background-color: #222222;
  background-image: none;
  border: none;
  cursor: pointer;
  display: inline-block;
  min-width: 77.6vw;
  padding-top: 6.4vw;
  padding-bottom: 6.4vw;
  margin-left: -1.6vw;
  text-align: center;
  transition: all 0.3s ease 0s;
}
.c-entry-button:hover {
  opacity: 1;
  transform: translate(2%, 8%); /* ボタンを右下に動かす */
}
.c-entry-button::before {
  position: absolute;
  z-index: 0;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  content: "";
  display: block;
  border-right: 1px solid #222222;
  border-bottom: 1px solid #222222;
  transition: all 0.3s ease 0s;
  transform: translate(2%, 8%);
}
.c-entry-button::after {
  position: absolute;
  z-index: 2;
  top: 0;
  right: 0;
  width: 4.2666666667vw;
  height: 6.4vw;
  content: "";
  display: block;
  transform: translate(-137%, 95%);
  background: url("../img/common/common-c_entry-button-arrow.svg") no-repeat center center/contain;
}
.c-entry-button:hover::before {
  transform: translate(0px, 0px); /* ホバー時に少し動かす */
}

/* src/assets/scss/common.scss */
/* 1) 基礎から読み込み（名前空間なしで使いたいので as *） */
.c-confirm-button {
  display: inline-block;
  min-width: 46.4vw;
  text-align: center;
  font-weight: 700;
  color: #fff;
  font-size: 3.2vw;
  line-height: 150%;
  text-decoration: none;
  background-color: #222222;
  background-image: none;
  border: none;
  cursor: pointer;
  padding-block: 8px;
  transition: all 0.3s ease-in-out;
}
.c-confirm-button:hover {
  color: #222222;
  background-color: #fff;
  outline: 1px solid #222222;
  transition: all 0.3s ease-in-out;
}

/* src/assets/scss/common.scss */
/* 1) 基礎から読み込み（名前空間なしで使いたいので as *） */
/* ← これだけで variables/functions/mixin を全部使える */
.c-tab-button {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 40.8vw;
  height: 14.9333333333vw;
  background-color: #888888;
  background-image: none;
  border: 1px solid #fff;
  outline: 4px solid #888888; /* 外枠を追加 */
  /* フォント */
  text-align: center;
  font-weight: 700;
  color: #fff;
  font-size: 3.7333333333vw;
  line-height: 150%;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.3s ease-in-out;
}
.c-tab-button:hover {
  transition: all 0.3s ease-in-out;
  outline: 4px solid #222222; /* 外枠を追加 */
  background-color: #222222; /* ホバー時に背景色を変更 */
}
.c-tab-button.active {
  outline: 4px solid #222222; /* 外枠を追加 */
  background-color: #222222; /* アクティブ時に背景色を変更 */
}

/* src/assets/scss/common.scss */
/* 1) 基礎から読み込み（名前空間なしで使いたいので as *） */
.c-archive-head {
  color: #222222;
  line-height: 150%;
  font-weight: 700;
}

.c-archive-head--center {
  text-align: center;
}

.c-archive-head__title {
  font-family: "Amatic SC", sans-serif;
  font-size: 10.6666666667vw;
  letter-spacing: 4px;
  white-space: nowrap;
  padding-bottom: 4vw;
}

.c-archive-head__sub {
  font-size: 3.2vw;
}

/* src/assets/scss/common.scss */
/* 1) 基礎から読み込み（名前空間なしで使いたいので as *） */
.c-single-page-head {
  color: #fff;
  white-space: nowrap;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: start;
}
.c-single-page-head__title {
  font-family: "Amatic SC", sans-serif;
  font-weight: 700;
  font-size: 8.5333333333vw;
  line-height: 130%;
  letter-spacing: 6.4px;
  margin-top: 4.8vw;
  padding-left: 7px;
  text-transform: uppercase;
}

.c-single-page-head__sub {
  font-family: "Noto Serif JP", sans-serif;
  font-weight: 700;
  font-size: 3.2vw;
  letter-spacing: 0.96px;
  line-height: 150%;
  padding-left: 2px;
}

/* src/assets/scss/common.scss */
/* 1) 基礎から読み込み（名前空間なしで使いたいので as *） */
.c-grandmenu-head {
  color: #222222;
  font-size: 5.3333333333vw;
  font-weight: 700;
  line-height: 150%;
  border-top: 1px solid #222222; /* 上の1pxの線 */
  border-bottom: 1px solid #222222; /* 下の1pxの線 */
  padding: 1px 11px 1px;
  position: relative; /* 疑似要素の基準位置を設定 */
}
.c-grandmenu-head::before, .c-grandmenu-head::after {
  content: "";
  position: absolute;
  left: 0px; /* 外側の余白を考慮 */
  right: 0px;
  height: 2px; /* 外側の2pxの線 */
  background-color: #222222;
}
.c-grandmenu-head::before {
  top: -5px; /* 上の余白（1px）と線の位置 */
}
.c-grandmenu-head::after {
  bottom: -5px; /* 下の余白（1px）と線の位置 */
}

/* src/assets/scss/common.scss */
/* 1) 基礎から読み込み（名前空間なしで使いたいので as *） */
/* ← これだけで variables/functions/mixin を全部使える */
.c-to-top-button {
  position: fixed;
  bottom: 2.6666666667vw;
  right: 2.6666666667vw;
  width: 11.7333333333vw;
  height: 11.7333333333vw;
  background: #fff;
  border-radius: 50%;
  display: inline-block;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s;
  z-index: 40;
}
.c-to-top-button.is-visible {
  opacity: 1;
  visibility: visible;
}
.c-to-top-button::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  background: url("../img/common/common-icon_c-to-top-button.webp") no-repeat center center/contain;
  transform: translate(-50%, -50%);
  width: 5.8666666667vw;
  height: 3.2vw;
  transition: transform 0.3s;
}
.c-to-top-button:hover::after {
  transform: translate(-50%, -57%);
}
.c-to-top-button:focus {
  outline: #382620;
  outline-offset: 4px;
}

/* src/assets/scss/common.scss */
/* 1) 基礎から読み込み（名前空間なしで使いたいので as *） */
/* デフォルトで表示 */
#js-c-drawer-button {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

/* 非表示状態 */
#js-c-drawer-button.is-hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.c-drawer-icon {
  width: 60px;
  height: 60px;
  position: relative;
  background: #382620;
  border-radius: 50%;
}
.c-drawer-icon:hover {
  cursor: pointer;
  opacity: 0.7;
}
.c-drawer-icon:focus {
  outline: 2px solid #fff; /* アクセントカラー */
  outline-offset: 4px;
}
.c-drawer-icon.is-checked {
  background: #fff;
}
.c-drawer-icon.is-checked .c-drawer-icon__bar {
  background: #382620;
}
.c-drawer-icon.is-checked .c-drawer-icon__bar:nth-child(1), .c-drawer-icon.is-checked .c-drawer-icon__bar:nth-child(3) {
  top: 28px;
}
.c-drawer-icon.is-checked .c-drawer-icon__bar:nth-child(1) {
  transform: rotate(45deg);
}
.c-drawer-icon.is-checked .c-drawer-icon__bar:nth-child(2) {
  display: none;
}
.c-drawer-icon.is-checked .c-drawer-icon__bar:nth-child(3) {
  transform: rotate(-45deg);
}

.c-drawer-icon__bar {
  position: absolute;
  width: 27px;
  height: 2.25px;
  background-color: #fff;
  left: 17px;
  transition: top 0.4s, transform 0.4s;
}
.c-drawer-icon__bar:nth-child(1) {
  top: 22px;
}
.c-drawer-icon__bar:nth-child(2) {
  top: 29px;
}
.c-drawer-icon__bar:nth-child(3) {
  top: 36px;
}

/* src/assets/scss/common.scss */
/* 1) 基礎から読み込み（名前空間なしで使いたいので as *） */
/* ← これだけで variables/functions/mixin を全部使える */
.c-icon__sns {
  align-items: center;
  display: flex;
  justify-content: center;
}

.c-icon__sns--drawer-menu {
  margin-top: 51px;
  gap: 24px;
}
.c-icon__sns--drawer-menu .fa-twitter::before {
  font-size: 19.5px;
}
.c-icon__sns--drawer-menu .fa-instagram::before {
  font-size: 20px;
}
.c-icon__sns--drawer-menu .fa-youtube::before {
  font-size: 21px;
}

.c-icon-sns__item {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.c-icon-sns__item a {
  transition: all 0.3s ease 0s;
}
.c-icon-sns__item a:hover {
  opacity: 0.7;
}
.c-icon-sns__item.c-icon-sns__item--twitter {
  color: #fff;
}
.c-icon-sns__item.c-icon-sns__item--youtube {
  color: #fff;
}
.c-icon-sns__item.c-icon-sns__item--instagram {
  color: #fff;
}

/* 4) 全体パターン */
/* src/assets/scss/common.scss */
/* 1) 基礎から読み込み（名前空間なしで使いたいので as *） */
/* ← これだけで variables/functions/mixin を全部使える */
/* src/assets/scss/common.scss */
/* 1) 基礎から読み込み（名前空間なしで使いたいので as *） */
/* ← これだけで variables/functions/mixin を全部使える */
/* src/assets/scss/common.scss */
/* 1) 基礎から読み込み（名前空間なしで使いたいので as *） */
/* ← これだけで variables/functions/mixin を全部使える */
.p-bread-crumbs {
  max-width: 1280px;
  padding-top: 0.2666666667vw;
  padding-inline: 20px;
  margin: 0 auto;
}
.p-bread-crumbs a,
.p-bread-crumbs span {
  font-size: 3.2vw;
  font-weight: 700;
  color: #382620;
  line-height: 150%;
}

/* パンくずリスト（横スクロール対応） */
.p-bread-crumbs .breadcrumbs {
  display: block;
  white-space: nowrap; /* 折り返さない */
  overflow-x: auto; /* 横スクロールを有効化 */
  -webkit-overflow-scrolling: touch; /* iOSでスムーズスクロール */
}

.p-bread-crumbs .breadcrumbs a,
.p-bread-crumbs .breadcrumbs span {
  display: inline-block; /* inline要素でも高さを揃える */
}

.p-bread-crumbs .breadcrumbs span {
  margin-right: 2px;
}

/* src/assets/scss/common.scss */
/* 1) 基礎から読み込み（名前空間なしで使いたいので as *） */
/* ← これだけで variables/functions/mixin を全部使える */
.p-single-page__head {
  padding: 6px;
  width: 100%;
}

.p-single-page-head__body {
  position: relative;
  border: 2px solid #fff;
  padding: 3px;
}

.p-single-page-head__center-and-border {
  border: 1px solid #fff;
  height: 26.1333333333vw;
}

/* src/assets/scss/common.scss */
/* 1) 基礎から読み込み（名前空間なしで使いたいので as *） */
/* ← これだけで variables/functions/mixin を全部使える */
.p-profile-box__img {
  margin-bottom: 26px;
  text-align: center;
}
.p-profile-box__img img {
  width: 230px;
}

.p-profile-box__content {
  font-size: 14px;
  line-height: 1.71429;
  margin-bottom: 38px;
  padding: 0 18px;
}

/* src/assets/scss/common.scss */
/* 1) 基礎から読み込み（名前空間なしで使いたいので as *） */
/* ← これだけで variables/functions/mixin を全部使える */
.p-header-drawer-menu {
  position: fixed;
  width: 375px;
  height: 100vh;
  top: 0;
  right: 0;
  transform: translateY(-100%);
  transition: transform 0.3s;
  z-index: 40;
  overflow: hidden;
}
.p-header-drawer-menu.is-checked {
  transform: translateY(0);
}

.p-drawer-icon {
  position: fixed;
  top: 10px;
  right: 10px;
  z-index: 41;
}

.p-drawer-menu {
  width: 100%;
  height: 100%;
  padding: 10px 10px 50px 10px;
  background: #382620;
}

.p-drawer-menu__logo {
  width: 120px;
  height: 65px;
}
.p-drawer-menu__logo .p-drawer-menu-logo-white-svg {
  width: 100%;
  height: 100%;
}

.p-drawer-menu__nav {
  padding: 60px 0 0 30px;
}

.p-drawer-menu__nav-lists {
  display: flex;
  flex-direction: column;
  gap: 25px;
}

.p-drawer-menu__link {
  color: #fff;
  transition: all 0.3s ease-in-out;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 2.9333333333vw;
}
.p-drawer-menu__link:hover {
  opacity: 0.7;
  transition: all 0.3s ease-in-out;
  cursor: pointer;
}
.p-drawer-menu__link:focus {
  outline: 2px solid #fff;
  outline-offset: 4px;
  transition: all 0.3s ease-in-out;
}
.p-drawer-menu__link .p-drawer-menu__link-en {
  font-family: "Patua One", sans-serif;
  font-size: 24px;
  font-weight: 400;
  line-height: 150%;
  letter-spacing: 2.88px;
}
.p-drawer-menu__link .p-drawer-menu__link-slash,
.p-drawer-menu__link .p-drawer-menu__link-jp {
  font-size: 10px;
  font-weight: 500;
  line-height: 150%;
}

.p-drawer-overlay {
  position: fixed;
  inset: 0; /* top, right, bottom, left 全部0 */
  background: rgba(0, 0, 0, 0.3);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
  z-index: 35; /* メニューの下、ボタンの上に来るように調整 */
}

.p-drawer-overlay.is-active {
  opacity: 1;
  visibility: visible;
}

/* src/assets/scss/common.scss */
/* 1) 基礎から読み込み（名前空間なしで使いたいので as *） */
.p-access {
  background: #eae0d5;
}

.p-access__wrapper {
  padding-left: 5.3333333333vw;
  padding-right: 5.3333333333vw;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.p-access__content {
  position: relative;
  padding-top: 26.1333333333vw;
  padding-bottom: 21.3333333333vw;
  width: 100%;
  max-width: 698px;
  /* パンの背景画像 */
  /* コーヒー豆の背景画像 */
}
.p-access__content::before {
  position: absolute;
  content: "";
  display: block;
  top: 0;
  right: 0;
  transform: translate(31%, -53%);
  width: 50.6666666667vw;
  height: 48vw;
  background: url("../img/common/common-img_p-fotter-bread.webp") no-repeat center center/cover;
  z-index: 1;
}
.p-access__content::after {
  position: absolute;
  content: "";
  display: block;
  bottom: 0;
  left: 0;
  transform: translate(-44%, 44%);
  width: 34.1333333333vw;
  height: 28.8vw;
  background: url("../img/common/common-img_p-footer-coffeebeans.webp") no-repeat center center/cover;
}

.p-access-content__head-container {
  position: relative;
  width: -moz-fit-content;
  width: fit-content;
  margin: 0 auto;
  text-align: center;
}
.p-access-content__head-container .p-access-content__img {
  position: absolute;
  top: 0;
  left: 0;
  transform: translate(-83%, -83%);
  width: 53.3333333333vw;
  height: 45.8666666667vw;
}

.p-access-content__map {
  width: 100%;
  margin-top: 11.2vw;
  padding-inline: 1.3333333333vw;
}
.p-access-content__map iframe {
  width: 100%;
  height: 46.4vw;
  outline: 5px solid #fff;
}

.p-access-shop-store-info {
  width: 89.3333333333vw;
  margin: 0 auto;
  margin-top: 7.4666666667vw;
}
.p-access-shop-store-info .p-access-shop-store-info__grid {
  display: grid;
  grid-template-columns: 1fr;
}
.p-access-shop-store-info .p-access-shop-store-info__grid .p-access-shop-store-info__list {
  display: grid;
  grid-auto-rows: auto;
  padding: 0;
  margin-top: 4.8vw;
  gap: 4.8vw;
}
.p-access-shop-store-info .p-access-shop-store-info__grid .p-access-shop-store-info__list .p-access-shop-store-info__row {
  display: grid;
  grid-template-columns: 21.3333333333vw 1fr; /* 左ラベル / 右内容 */
  padding-bottom: 1.3333333333vw;
  color: #222222;
  font-size: 3.7333333333vw;
  font-weight: 700;
  line-height: 150%;
  border-bottom: 1px solid #222222;
}
.p-access-shop-store-info .p-access-shop-store-info__grid .p-access-shop-store-info__list .p-access-shop-store-info__row .p-access-shop-store-info__term {
  min-width: 21.3333333333vw;
}
.p-access-shop-store-info .p-access-shop-store-info__grid .p-access-shop-store-info__list .p-access-shop-store-info__row .p-access-shop-store-info__desc a {
  transition: all 0.3s ease-in-out;
}
.p-access-shop-store-info .p-access-shop-store-info__grid .p-access-shop-store-info__list .p-access-shop-store-info__row .p-access-shop-store-info__desc a:hover {
  opacity: 0.7;
  transition: all 0.3s ease-in-out;
}

/* src/assets/scss/common.scss */
/* 1) 基礎から読み込み（名前空間なしで使いたいので as *） */
/* ← これだけで variables/functions/mixin を全部使える */
.p-footer {
  background-color: #382620;
  color: #fff;
  padding-top: 10.6666666667vw;
  padding-bottom: 3.7333333333vw;
}
.p-footer .p-footer-inner .p-footer__copyright {
  text-align: center;
  margin-top: 10.6666666667vw;
  font-size: 3.2vw;
  font-weight: 500;
  line-height: 150%;
}

.c-icon__sns--footer {
  gap: 6.4vw;
}

.fab.fa-twitter.fa-twitter-footer {
  font-size: 5.2vw; /* デフォルトのフォントサイズ */
}

.fab.fa-instagram.fa-instagram-footer {
  font-size: 5.3333333333vw; /* デフォルトのフォントサイズ */
}

.fab.fa-youtube.fa-youtube-footer {
  font-size: 5.6vw; /* デフォルトのフォントサイズ */
}

/* src/assets/scss/common.scss */
/* 1) 基礎から読み込み（名前空間なしで使いたいので as *） */
.p-404__button {
  text-align: center;
  margin-top: 10.6666666667vw;
}

.p-single-page__head--404 {
  background: url("../img/contact/contact-img_p-firstview_contact-sp.png") no-repeat center center/cover;
}

.p-404-page-content-wrapper {
  padding-top: 15.7333333333vw;
  padding-bottom: 44.2666666667vw;
}

.p-404-page-form__container {
  max-width: 688px;
  margin: 0 auto;
  color: #382620;
}
.p-404-page-form__container .p-404-page__form {
  display: flex;
  flex-direction: column;
  gap: 16vw;
}
.p-404-page-form__container .p-404-page__form--head .p-404-page-form__headding {
  font-weight: 700;
  font-size: 5.3333333333vw;
  line-height: 150%;
  text-align: center;
}

/* 5) ユーティリティ（最後に読み込むと上書きが効きやすい） */
/* src/assets/scss/common.scss */
/* 1) 基礎から読み込み（名前空間なしで使いたいので as *） */
/* ← これだけで variables/functions/mixin を全部使える */

/* src/assets/scss/common.scss */
/* 1) 基礎から読み込み（名前空間なしで使いたいので as *） */
/* ← これだけで variables/functions/mixin を全部使える */
.u-separate {
  margin-top: 24px;
  margin-bottom: 24px;
}

/* * topのgallaryで使用 */

/* * topのgallaryで使用 */
.u-padding-r-5-sp {
  padding-right: 5px;
}

/* 6) ページ固有（現状はscss直下にあるファイルを直接読み込む）
   将来 project/ に移したら @use "./project/index" as *; に置き換え可能 */

@media screen and (min-width: 768px){
  html {
    font-size: clamp(14px, 1.25vw, 16px);
  }
  .l-inner {
    padding-left: 7.03125vw;
    padding-right: 7.03125vw;
  }
  .c-entry-button {
    font-size: 16px;
    min-width: 290px;
    padding-top: 24px;
    padding-bottom: 24px;
    margin-left: -6px;
  }
  .c-entry-button::after {
    width: 16px;
    height: 24px;
  }
  .c-confirm-button {
    font-size: 14px;
  }
  .c-tab-button {
    font-size: 1rem;
    height: 4.765625vw;
    width: 15vw;
  }
  .c-archive-head__title {
    font-size: 3.25rem;
    letter-spacing: 10.4px;
    padding-bottom: 1.875vw;
    text-transform: uppercase;
  }
  .c-archive-head__sub {
    font-size: 0.875rem;
  }
  .c-single-page-head__title {
    font-size: 5.625vw;
    letter-spacing: 14.4px;
    margin-top: 6.640625vw;
    padding-left: 14px;
  }
  .c-single-page-head__sub {
    font-size: 16px;
    letter-spacing: 1.28px;
  }
  .c-grandmenu-head {
    font-size: 24px;
    padding: 5px 21px 3px;
  }
  .c-to-top-button {
    bottom: 22px;
    right: 20px;
    width: 44px;
    height: 44px;
  }
  .c-to-top-button::after {
    width: 22px;
    height: 12px;
  }
  .c-drawer-icon {
    width: 4.6875vw;
    height: 4.6875vw;
  }
  .c-drawer-icon.is-checked .c-drawer-icon__bar:nth-child(1), .c-drawer-icon.is-checked .c-drawer-icon__bar:nth-child(3) {
    top: 2.1875vw;
  }
  .c-drawer-icon__bar {
    width: 2.109375vw;
    height: 0.17578125vw;
    left: 1.328125vw;
  }
  .c-drawer-icon__bar:nth-child(1) {
    top: 1.71875vw;
  }
  .c-drawer-icon__bar:nth-child(2) {
    top: 2.265625vw;
  }
  .c-drawer-icon__bar:nth-child(3) {
    top: 2.8125vw;
  }
  .c-icon__sns--drawer-menu {
    gap: 1.875vw;
  }
  .c-icon__sns--drawer-menu .fa-twitter::before {
    font-size: 1.5234375vw;
  }
  .c-icon__sns--drawer-menu .fa-instagram::before {
    font-size: 1.5625vw;
  }
  .c-icon__sns--drawer-menu .fa-youtube::before {
    font-size: 1.640625vw;
  }
  .p-bread-crumbs {
    padding-inline: 7.03125vw;
    padding-top: 1.015625vw;
  }
  .p-bread-crumbs a,
  .p-bread-crumbs span {
    font-size: 14px;
  }
  .p-bread-crumbs .breadcrumbs span {
    margin-right: 9px;
  }
  .p-single-page__head {
    padding: 10px;
    height: auto;
  }
  .p-single-page-head__body {
    padding: 4px;
  }
  .p-single-page-head__center-and-border {
    height: 22.5vw;
  }
  .p-header-drawer-menu {
    max-width: 29.296875vw;
  }
  .p-drawer-menu {
    padding: 0.78125vw 0.78125vw 3.90625vw 0.78125vw;
  }
  .p-drawer-menu__logo {
    height: 5.078125vw;
    width: 9.375vw;
  }
  .p-drawer-menu__nav {
    padding: 4.6875vw 0 0 2.34375vw;
  }
  .p-drawer-menu__nav-lists {
    gap: 1.953125vw;
  }
  .p-drawer-menu__link {
    gap: 0.859375vw;
  }
  .p-drawer-menu__link .p-drawer-menu__link-en {
    font-size: 1.875vw;
  }
  .p-drawer-menu__link .p-drawer-menu__link-slash,
  .p-drawer-menu__link .p-drawer-menu__link-jp {
    font-size: 0.78125vw;
  }
  .p-access__wrapper {
    padding-left: 24px;
    padding-right: 24px;
  }
  .p-access__content {
    padding-top: 6.75rem;
    padding-bottom: 5.0625rem;
  }
  .p-access__content::before {
    width: 30.390625vw;
    height: 28.046875vw;
    transform: translate(56%, -47%);
  }
  .p-access__content::after {
    width: 26.640625vw;
    height: 22.5vw;
    transform: translate(-81%, 47%);
  }
  .p-access-content__head-container .p-access-content__img {
    width: 233px;
    height: 200px;
    transform: translate(-94%, -80%);
  }
  .p-access-content__map {
    margin-top: 49px;
    margin-inline: auto;
    max-width: 678px;
    padding-inline: 5px;
  }
  .p-access-content__map iframe {
    height: 357px;
    outline: 10px solid #fff;
  }
  .p-access-shop-store-info {
    margin-top: 49px;
    max-width: 688px;
  }
  .p-access-shop-store-info .p-access-shop-store-info__grid {
    grid-template-columns: 1fr 1fr; /* 左右2カラム */
    gap: 40px;
  }
  .p-access-shop-store-info .p-access-shop-store-info__grid .p-access-shop-store-info__list {
    width: 324px;
    margin-top: 0;
    gap: 1.5625vw;
  }
  .p-access-shop-store-info .p-access-shop-store-info__grid .p-access-shop-store-info__list .p-access-shop-store-info__row {
    font-size: 14px;
    padding-bottom: 5px;
    grid-template-columns: 80px 1fr; /* 左ラベル / 右内容 */
  }
  .p-access-shop-store-info .p-access-shop-store-info__grid .p-access-shop-store-info__list .p-access-shop-store-info__row .p-access-shop-store-info__term {
    min-width: 6.25vw;
  }
  .p-footer {
    padding-top: 41px;
    padding-bottom: 16px;
  }
  .p-footer .p-footer-inner .p-footer__copyright {
    font-size: 12px;
    margin-top: 3.4375vw;
  }
  .c-icon__sns--footer {
    gap: 24px;
  }
  .fab.fa-twitter.fa-twitter-footer {
    font-size: 19.5px;
  }
  .fab.fa-instagram.fa-instagram-footer {
    font-size: 20px;
  }
  .fab.fa-youtube.fa-youtube-footer {
    font-size: 21px;
  }
  .p-404__button {
    margin-top: 3.828125vw;
    text-align: center;
    padding-left: 7px;
  }
  .p-404-page-content-wrapper {
    padding-top: 80px;
    padding-bottom: 167px;
  }
  .p-404-page-form__container .p-404-page__form {
    gap: 80px;
  }
  .p-404-page-form__container .p-404-page__form--head .p-404-page-form__headding {
    font-size: 28px;
  }
  .u-hidden-tab {
    display: none;
  }
  .u-padding-l-5-tab {
    padding-left: 5px;
  }
  .u-padding-l-10-lar {
    padding-left: 10px;
  }
  .u-padding-t-10-lar {
    padding-top: 8px;
  }
  .u-padding-r-5-sp {
    padding-right: 5px;
  }
}

@media screen and (min-width: 1024px){
  .p-access__content::before {
    transform: translate(98%, -47%);
  }
  .p-access__content::after {
    transform: translate(-110%, 47%);
  }
}

@media screen and (min-width: 1280px){
  .l-inner {
    padding-left: 90px;
    padding-right: 90px;
  }
  .l-margin--top {
    margin-top: 160px;
  }
  .c-tab-button {
    width: 192px;
    height: 61px;
  }
  .c-archive-head__title {
    padding-bottom: 24px;
    font-size: 52px;
  }
  .c-archive-head__sub {
    font-size: 14px;
  }
  .c-single-page-head__title {
    font-size: 72px;
    margin-top: 85px;
  }
  .c-single-page-head__sub {
    font-size: 1.25vw;
  }
  .c-drawer-icon {
    width: 60px;
    height: 60px;
  }
  .c-drawer-icon.is-checked .c-drawer-icon__bar:nth-child(1), .c-drawer-icon.is-checked .c-drawer-icon__bar:nth-child(3) {
    top: 28px;
  }
  .c-drawer-icon__bar {
    width: 27px;
    height: 2.25px;
    left: 17px;
  }
  .c-drawer-icon__bar:nth-child(1) {
    top: 22px;
  }
  .c-drawer-icon__bar:nth-child(2) {
    top: 29px;
  }
  .c-drawer-icon__bar:nth-child(3) {
    top: 36px;
  }
  .c-icon__sns--drawer-menu {
    gap: 24px;
  }
  .c-icon__sns--drawer-menu .fa-twitter::before {
    font-size: 19.5px;
  }
  .c-icon__sns--drawer-menu .fa-instagram::before {
    font-size: 20px;
  }
  .c-icon__sns--drawer-menu .fa-youtube::before {
    font-size: 21px;
  }
  .p-bread-crumbs {
    padding-inline: 90px;
    padding-top: 13px;
  }
  .p-single-page-head__center-and-border {
    height: 288px;
  }
  .p-drawer-menu {
    padding: 10px 10px 50px 10px;
  }
  .p-drawer-menu__logo {
    height: 65px;
    width: 120px;
  }
  .p-drawer-menu__nav {
    padding: 60px 0 0 30px;
  }
  .p-drawer-menu__nav-lists {
    gap: 25px;
  }
  .p-drawer-menu__link {
    gap: 11px;
  }
  .p-drawer-menu__link .p-drawer-menu__link-en {
    font-size: 24px;
  }
  .p-drawer-menu__link .p-drawer-menu__link-slash,
  .p-drawer-menu__link .p-drawer-menu__link-jp {
    font-size: 10px;
  }
  .p-access__wrapper {
    padding-left: 90px;
    padding-right: 90px;
  }
  .p-access__content {
    padding-top: 108px;
    padding-bottom: 81px;
  }
  .p-access__content::before {
    width: 389px;
    height: 359px;
  }
  .p-access__content::after {
    width: 341px;
    height: 288px;
  }
  .p-access-shop-store-info .p-access-shop-store-info__grid .p-access-shop-store-info__list {
    gap: 20px;
  }
  .p-access-shop-store-info .p-access-shop-store-info__grid .p-access-shop-store-info__list .p-access-shop-store-info__row .p-access-shop-store-info__term {
    min-width: 80px;
  }
  .p-footer .p-footer-inner .p-footer__copyright {
    margin-top: 39px;
  }
  .p-404__button {
    margin-top: 49px;
  }
  .p-single-page__head--404 {
    background: url("../img/contact/contact-img_p-firstview_contact-pc.png") no-repeat center center/cover;
  }
  .u-hidden-pc {
    display: none;
  }
  .u-padding-r-10 {
    padding-right: 10px;
  }
  .u-heading-pc {
    padding-left: 8px;
  }
}

@media screen and (max-width: 767px){
  body.is-footer-sns-fixed {
    padding-bottom: 4.1875rem;
  }
  .u-hidden-sp {
    display: none;
  }
  .u-padding-l-10-sp {
    padding-left: 10px;
  }
  .u-padding-l-5-sp {
    padding-left: 5px;
  }
  .u-padding-l-3-sp {
    padding-left: 3px;
  }
  .u-padding-l-7-sp {
    padding-left: 7px;
  }
  .u-padding-b-0-sp {
    padding-bottom: 0px;
  }
}

@media screen and (max-width: 374px){
  .p-header-drawer-menu {
    width: 100vw;
  }
}
/*# sourceMappingURL=common.css.map */