@charset "UTF-8";

body {
  font-family: 'Noto Sans JP', sans-serif;
  background-color: #ffffff;
  color: #7F5539;
  font-size: 16px;
  font-weight: 400;
}

/* タップ時の効果 */
.proceedToCheckoutBtn,
.continueShoppingBtn,
button:not(.toggleBtn) {
  transition: 0.1s;
}

.proceedToCheckoutBtn:active,
.continueShoppingBtn:active,
button:not(.toggleBtn):active {
  transform: translateY(2px);
}

/* パスワードオンオフボタンは沈ませない */
.toggleBtn:active {
  transform: translateY(-50%);
}

/* ヘッダーエリア */
.headerArea {
  background-color: #EDE0D4;
}

.headerBar {
  max-width: 1200px;
  width: 100%;
  margin: 0 auto;
  height: 118px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 12px;
}

.menuIcon img {
  width: 50px;
  height: 50px;
}

.headerLogo img {
  width: 87px;
  height: 78px;
}

.logoGroup {
  display: flex;
  gap: 40px;
  padding: 12px;
}

/* ログインアイコン */
.loginIcon {
  width: 48px;
  height: 54px;
}

.cartIcon {
  width: 36px;
  height: 54px;
}

/* 検索フォームエリア */
.headerSubArea {
  background-color: #B392AC;
  min-height: 64px;
}

.searchArea {
  max-width: 1200px;
  width: 100%;
  margin: 0 auto;
  height: 64px;
  padding: 12px 12px 12px 0;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

.searchForm {
  width: 360px;
  height: 40px;
  background-color: #FFFFFF;
  border: 1px solid #7F5539;
  display: flex;
  overflow: hidden;
}

.searchBtn {
  background-color: #D9D9D9;
  width: 40px;
  height: 40px;
  border-right: 1px solid #7F5539;
  border-bottom: 1px solid #7F5539;
  padding: 0;
  flex-shrink: 0;
}

.searchForm input {
  width: 320px;
  height: 40px;
  flex: 1;
  border: none;
  padding: 0 8px;
}

.searchBtn img {
  width: 24px;
  height: 24px;
  margin: 8px;
}

/* ドロワーメニュー */
.no-scroll {
  overflow: hidden;
}

.drawerNav {
  display: block;
  justify-content: flex-start;
  list-style: none;
  color: #fff;
  margin-top: 100px;
}

.drawerNav li {
  width: 400px;
  padding: 20px 0;
  font-size: 24px;
  font-weight: 400;
  border-bottom: 1px solid #fff;
  text-shadow:
    -1px -1px 0 #7F5539,
    1px -1px 0 #7F5539,
    -1px 1px 0 #7F5539,
    1px 1px 0 #7F5539;
  margin-left: 100px;
}

/* 閉じるボタン */
.drawerClose {
  background: none;
  border: none;
  cursor: pointer;
}

.drawerClose img {
  width: 54px;
  height: 54px;
  margin: 0 12px 10px 0;
}

.drawerLogo img {
  width: 87px;
  height: 78px;
  margin: 20px 0 0 103px;
}

.drawerInner {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.navArea {
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  width: 583px;
  height: 100%;
  background: #7F5539bf;
  transform: translateX(-100%);
  transition: transform .4s cubic-bezier(0.77, 0, 0.18, 1);
  z-index: 1800;
}

.navArea.active {
  transform: translateX(0);
}

.overLay {
  display: none;
  position: fixed;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease;
  width: 100%;
  margin: 0 auto;
  pointer-events: none;
  transition: opacity .3s;
  z-index: 1700;
}

.overLay.active {
  display: block;
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

/* パンくずリスト */
.breadCrumb {
  border-bottom: 1px solid #7F5539;
}

.breadCrumbList {
  width: 100%;
  margin: 0 auto;
  display: flex;
  font-size: 12px;
  padding: 12px 0 12px 20px;
}

.breadCrumbItem+.breadCrumbItem::before {
  content: "＞";
}

/* ユーザー名 */
.welcomeBar {
  border-bottom: 1px solid #7F5539;
}

.user {
  width: 100%;
  font-size: 12px;
  margin: 0 auto;
  padding: 12px 0 12px 20px;
}

/* ヒーロー画像 */
.mainVisual {
  max-width: 1366px;
  width: 100%;
  height: auto;
  margin: 0 auto;
  text-align: center;
}

.mainVisual img {
  width: 100%;
  height: auto;
  margin: 0 auto;
}

.innerWrapper {
  max-width: 1200px;
  margin: 0 auto;
}

/* お知らせエリア  */
.announcementContent {
  width: 100%;
  padding: 80px;
}

.announcement {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
}

.announcement img {
  width: 100%;
  height: auto;
}

a img:hover {
  opacity: 0.8;
  transition: 0.3s;
}

.productList {
  display: block;
  max-width: 1040px;
  width: 100%;
  height: auto;
  margin: 0 auto;
  padding-top: 80px;
}

/* お店の紹介エリア */
.storeIntroductionContent {
  max-width: 1366px;
  width: 100%;
  margin: 0 auto;
  height: 664px;
  padding: 40px 20px;
  color: #FFFFFF;
  text-align: center;
  background: url('../images/image01/storeIntroduction.jpg') no-repeat center top;
}

.philosophy {
  font-size: 36px;
  font-weight: 900;
  margin-top: 200px;
}

.belief {
  font-size: 20px;
  font-weight: 500;
  margin: 20px auto;
}

.connection {
  font-size: 24px;
  font-weight: 500;
  margin: 0 auto 280px;
}

.connection p {
  padding-top: 20px;
}

/* フッターエリア */
footer {
  background-color: #EDE0D4;
  max-width: 1366px;
  width: 100%;
  margin: 0 auto;
  padding-top: 20px;
  display: flex;
  flex-direction: column;
}

.footerNav {
  width: 520px;
  height: 40px;
  margin-left: 102px;
}

.footerNav ul {
  display: flex;
  justify-content: flex-start;
  height: 40px;
  margin-bottom: 32px;
  gap: 40px;
}

.footerNav ul li {
  padding: 12px 0 12px 12px;
  border-left: 2px solid #B392AC;
  text-decoration: none;
}

.footerLogo img {
  width: 144px;
  height: 128px;
  margin: 64px auto 32px;
  display: block;
  text-align: center;
  justify-content: center;
}

.snsIcons {
  display: flex;
  justify-content: center;
  margin: 40px 0;
  gap: 40px;
}

.snsIcons li a img {
  display: block;
  width: 32px;
  height: 32px;
}

.copyright {
  width: 100%;
  height: 52px;
  padding: 20px 0;
  margin: 0 auto;
  text-align: center;
  font-size: 12px;
  border-top: 1px solid #7F5539;
}

/* 商品詳細ページ */
.productDetails {
  width: 100%;
  margin: 80px auto 120px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  padding: 0 40px;
}

/* 商品画像 */
.productDetails img {
  width: 100%;
  height: auto;
  aspect-ratio: 1/ 1;
  object-fit: cover;
}

.productImageWrapper {
  padding-bottom: 32px;
}

.productInfo {
  width: 100%;
  height: auto;
  padding-right: 68px;
}

/* 商品名 */
.productInfo .productName {
  font-size: 24px;
  font-weight: bold;
}

/* 上下の線 */
hr {
  border: none;
  border-top: 1px solid #E6CCB2;
  margin: 20px 0;
}

/* 紹介文 */
.productDescription {
  font-size: 24px;
  font-weight: 500;
  line-height: 1.6;
  padding: 20px 20px 20px 4px;
}

/* 価格 */
.productPrice {
  font-size: 24px;
  color: #BF0000;
  padding: 20px 0;
}

/* 詳細ページ価格 */
.productInfo .productPrice {
  padding: 20px 0 40px;
}

.productActions {
  display: flex;
}

.unit {
  font-size: 24px;
  font-weight: 500;
  margin-left: 8px;
}

/* 数量 */
.quantitySelector {
  display: flex;
  align-items: flex-end;
}

.quantitySelector input {
  width: 80px;
  height: 52px;
  font-size: 24px;
  padding: 14px 16px;
  border: 1px solid #7F5539;
}

/* カートに入れるボタン */
.addToCartBtn {
  display: block;
  background-color: #7F5539;
  color: #fff;
  width: 260px;
  height: 52px;
  font-size: 20px;
  padding: 16px 0;
  margin-left: 20px;
  text-align: center;
  border: none;
  cursor: pointer;
}

/* 価格＋数量,価格＋お気に入りボタン */
.itemWrapper {
  display: flex;
  justify-content: space-between;
  text-align: center;
  padding: 20px 0;
}

/* お気に入りボタン */
.favoriteBtn {
  display: flex;
  background-color: transparent;
  color: #BF0000;
  width: 52px;
  height: 52px;
  font-size: 36px;
  font-weight: bold;
  text-align: center;
  justify-content: center;
  padding-top: 4px;
  margin-left: 8px;
  border: 1px solid #7F5539;
  cursor: pointer;
}

/* お気に入り一覧ページ */
.favoritesContent {
  max-width: 1200px;
  margin: 0 auto;
  padding: 80px 60px 120px;
}

/* カートが空の時 */
.cartEmpty p {
  margin: 0 auto;
  text-align: center;
  font-size: 20px;
  font-weight: 500;
  padding: 60px;
}

/* 共通ｈ２見出し */
.pageTitle {
  text-align: center;
  font-size: 32px;
  color: #000;
  margin: 80px auto 0;
}

.pageTitle h2 {
  display: inline-block;
  padding: 20px 0;
  border-bottom: 2px solid #FFD233;
}

/* ログインページ */
.loginFormWrapper {
  max-width: 600px;
  width: 100%;
  margin: 80px auto;
  padding: 40px;
}

.loginForm {
  width: 100%;
  padding: 20px;
  border: 2px solid #E7D1CD;
}

/* 入力確認エリア */
.reviewInfo,
.confirmWrapper {
  max-width: 600px;
  width: 100%;
  margin: 80px auto;
  padding: 40px;
}

/* 入力確認項目 */
.confirmItem {
  margin-bottom: 20px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  width: 100%;
  justify-content: flex-start;
  font-size: 20px;
}

.confirmItem .label {
  padding: 8px;
}

.confirmItem .value {
  padding: 8px;
  color: #000;
  border-left: 1px solid #7F5539;
}

/* ログインボタン */
.commonBtn {
  display: block;
  background-color: #7F5539;
  color: #fff;
  text-align: center;
  width: 260px;
  height: 60px;
  font-size: 24px;
  padding: 16px 0;
  margin: 80px auto 20px;
  border: none;
  cursor: pointer;
}

/* カード情報入力欄 */
.cardInfo {
  max-width: 600px;
  width: 100%;
  margin: 80px auto;
  padding: 40px;
}

/* カード会社選択ボタン */
.radioGroup {
  display: flex;
  gap: 30px;
}

.radioGroup input {
  width: 24px;
  height: 24px;
  margin-right: 8px;
  margin-bottom: 0;
  color: #000;
}

/* カード有効期限選択入力欄 */
.expiryGroup {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-bottom: 20px;
}

/* 有効期限 */
.expiryGroup .label {
  font-size: 24px;
  margin: 0;
}

/* カードの有効期限情報確認欄 */
.expiryItem {
  display: flex;
  margin-bottom: 20px;
}

.expiryItem .value {
  width: 120px;
  padding: 8px;
  color: #000;
  border-left: 1px solid #7F5539;
}

.expiryUnit {
  font-size: 20px;
  margin-left: 20px;
  margin-top: 8px;
  align-items: center;
}

/* 共通　ラベル */
.formLabel {
  display: block;
  font-size: 24px;
  margin-bottom: 8px;
}

/* 共通　入力欄 */
.formInput {
  display: block;
  width: 100%;
  padding: 8px;
  font-size: 24px;
  line-height: 1.6;
  color: #000;
  border: 1px solid #7F5539;
  background-color: #fff;
}

/* ガイドラインの例 */
.formInput::placeholder {
  color: #ccc;
}

/* 数 入力欄 */
.qtyInput {
  width: 80px;
  font-size: 24px;
  line-height: 1.6;
  padding: 4px 12px;
  background-color: #fff;
  border: 1px solid #7F5539;
}

.signupLink {
  display: flex;
  justify-content: flex-end;
  margin-top: 20px;
}

/* ホバー時 */
.signupLink a:hover,
.links a:hover {
  color: blue;
  transition: 0.3s;
}

/* ログイン完了ページ */
.loginSuccessContent {
  max-width: 800px;
  width: 100%;
  margin: 0 auto;
  text-align: center;
}

.messageWrapper {
  width: 100%;
  margin: 80px auto;
  padding: 0 100px 80px;
}

/* メッセージ枠 */
.messageBox {
  width: 100%;
  display: inline-block;
  text-align: center;
  padding: 40px;
  border: 2px solid #E7D1CD;
}

/* メッセージ枠のテキスト */
.messageBox p {
  font-size: 16px;
}

.messageBox p:nth-child(2) {
  margin-top: 20px;
}

/* 下のリンクエリア */
.links a {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 40px;
}

.links a:nth-child(2) {
  margin-top: 12px;
}

/* 会員登録ページ ＋　購入確認ページ*/
.orderReview,
.signupFormWrapper {
  max-width: 600px;
  width: 100%;
  margin: 80px auto;
  padding: 20px;
}

/* 必須 */
.required {
  color: #BF0000;
  font-size: 24px;
  margin-left: 4px;
}

/* パスワードの注意書きなどのテキスト */
.formText {
  color: #BF0000;
  font-size: 12px;
  margin-bottom: 4px;
}

/* ラベル */
.formGroup label {
  margin-bottom: 8px;
}

.formGroup {
  padding-top: 20px;
  margin: 0 auto;
}

/* 入力欄エラー表示 */
.formGroup.error input {
  border: 2px solid #BF0000;
}

/* 郵便番号 */
.zip input {
  width: 100px;
  padding: 8px;
  text-align: flex-start;
  border: 1px solid #7F5539;
}

.zip {
  display: flex;
  gap: 8px;
}

.labelRow {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* パスワードオンオフボタン */
.passwordWrap {
  position: relative;
}

.passwordWrap .formInput {
  padding-right: 44px;
}

.toggleBtn {
  position: absolute;
  top: 50%;
  right: 8px;
  transform: translateY(-50%);
  width: 32px;
  height: 32px;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
}

.passwordIcon {
  display: block;
  width: 24px;
  height: 24px;
  margin: 0 auto;
  transform: none;
}

.confirmValue {
  color: #000;
}

/* カートの中身 */
.cartContent {
  padding: 80px;
}

.cartSummary {
  max-width: 1200px;
  width: 100%;
  margin: 0 auto 80px;
  border: 2px solid #FFD233;
  text-align: center;
}

/* 商品小計 */
.cartCount {
  font-size: 24px;
  font-weight: 500;
  margin: 40px auto 20px;
}

/* 小計 */
.cartSubTotal {
  font-size: 24px;
  font-weight: 500;
}

/* 小計金額部分 */
.cartSubTotal span {
  color: #BF0000;
  font-size: 24px;
  margin-left: 4px;
}

/* 購入確認へ進むボタン */
.proceedToCheckoutBtn {
  display: block;
  background-color: #BF0000;
  color: #fff;
  width: fit-content;
  font-size: 20px;
  font-weight: bold;
  padding: 16px 60px;
  margin: 40px auto;
  border: none;
  cursor: pointer;
}

/* カート内の商品エリア  */
.cartItem {
  display: grid;
  grid-template-columns: 1fr 2fr;
  width: 100%;
  margin: 0 auto;
}

/* 商品画像 */
.cartItemImage img {
  display: block;
  width: 100%;
  aspect-ratio: 1/ 1;
  object-fit: cover;
  margin-bottom: 80px;
}

/* 商品情報エリア */
.cartItemInfo {
  display: block;
  width: 100%;
  margin: 0 0 100px 40px;
  border-bottom: 1px solid #E6CCB2;
}

/* 商品名 */
.cartItemName {
  font-size: 24px;
  font-weight: bold;
  padding: 4px 0 16px;
  border-bottom: 1px solid #E6CCB2;
}

/* 価格・数量などの情報 */
.cartItemOptions {
  display: block;
  width: 100%;
  display: flex;
  justify-content: space-between;
  padding: 20px 40px 0 0;
}

/* 価格 */
.cartItemPrice {
  font-size: 24px;
  color: #BF0000;
}

/* 個数選択 */
.cartItemQuantity {
  font-size: 24px;
  font-weight: 500;
}

.unit {
  color: #000;
}


/* 再計算ボタン */
.cartUpdateBtn {
  display: block;
  background-color: #ccc;
  color: #000;
  width: fit-content;
  font-size: 20px;
  padding: 8px 50px;
  margin: 24px 0 100px auto;
  border: none;
  cursor: pointer;
}

/* 削除する */
.cartRemoveBtn {
  display: block;
  color: #000;
  width: fit-content;
  font-size: 20px;
  margin: 0 40px 20px auto;
  border-bottom: 0.5px solid #000;
  cursor: pointer;
}

/* 買い物を続けるボタン  */
.continueShoppingBtn {
  display: block;
  background-color: #7F5539;
  color: #fff;
  width: fit-content;
  font-size: 20px;
  padding: 16px 60px;
  margin: 0 auto 40px;
  border: none;
  cursor: pointer;
}

/* 商品一覧ページ用 */
.rankingSection,
.orderHistoryContent,
.productListContent {
  max-width: 1200px;
  width: 100%;
  margin: 0 auto;
  padding: 0 60px 120px;
}

.mainItemsTitle {
  text-align: center;
  font-size: 24px;
  margin: 160px auto 120px;
}

.varietySetTitle {
  text-align: center;
  font-size: 24px;
  margin: 200px auto 120px;
}

/* グリッド */
.menuGrid,
.productGrid,
.orderItems,
.rankingList {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 120px 60px;
}

/* メニューカード */
.rankingItem,
.productCard,
.orderItem,
.productMainItem,
.varietySetItem {
  display: flex;
  flex-direction: column;
  text-align: flex-start;
  height: 100%;
}

.orderItems {
  padding: 20px 0;
}

/* 商品画像 */
.productImage,
.varietySetImage {
  width: 100%;
  aspect-ratio: 1/ 1;
  object-fit: cover;
}

/* 商品名 */
.productName {
  font-size: 24px;
  font-weight: 500;
  margin: 20px 0;
  line-height: 1.6;
  flex-grow: 1;
}

/* 購入履歴数量 */
.quantityUnit {
  font-size: 24px;
  padding: 20px 0;
  color: #000;
}

/* 購入履歴商品画像 */
.productImage img {
  width: 100%;
  aspect-ratio: 1/ 1;
  object-fit: cover;
}

/* ランキングバッジ */
.rankBadge {
  width: 60px;
  height: 60px;
  font-size: 24px;
  font-weight: 500;
  text-align: center;
  padding: 16px;
  margin: 0 auto 20px;
  color: #FFFFFF;
}

/* 1位: 黄 */
.rank1 {
  background-color: #f5c02b;
}

/* 2位: 銀 */
.rank2 {
  background-color: #CCCCCC;
}

/* 3位: 銅 */
.rank3 {
  background-color: #D27C2C;
}

/* 4〜6位: ピンク系 */
.rank4,
.rank5,
.rank6 {
  background-color: #E8C2CA;
}

.rankingList {
  padding-top: 120px;
}

.rankingItem {
  transition: 0.3s;
}

.rankingItem:hover {
  transform: translateY(-5px);
}

.cvcWrapper {
  position: relative;
}

.cvcWrapper input {
  width: 100%;
  padding-right: 40px;
}

.eyeIcon {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  width: 24px;
  cursor: pointer;
}

/* 購入確認ページ　h3 */
.subPageTitle {
  font-size: 20px;
  margin: 40px 0;
  text-align: center;
}

.dividerTight {
  color: #F7D1CD;
  margin: 0;
}

.divider {
  color: #F7D1CD;
  margin: 8px 0 20px;
}

.orderInfoBox {
  font-size: 20px;
  padding: 0 4px 8px;
}

.orderTotalBox {
  font-size: 20px;
  font-weight: 500;
}

.orderInfo,
.orderTotal {
  display: flex;
}

.orderInfo :nth-child(2),
.orderTotal :nth-child(2) {
  margin-top: 8px;
}

.orderInfo :nth-child(3) {
  margin-top: 8px;
}

.orderInfo .label,
.orderTotal .label {
  width: 100px;
  padding: 12px 8px 4px 4px;
}

.orderInfo .value,
.orderTotal .value {
  color: #000;
  padding: 4px 0 4px 12px;
  border-left: 2px solid #F7D1CD;
}

/* カード情報登録するボタン */
.paymentEmpty {
  padding: 40px 0;
}

.paymentEmpty .commonBtn {
  margin: 0 auto;
  margin-bottom: 20px;
}

/* カード登録案内 */
.paymentNote {
  font-size: 16px;
  text-align: center;
}

/* 注意喚起 */
.attention p {
  font-size: 24px;
  font-weight: bold;
  color: #BF0000;
  padding-top: 20px;
  text-align: center;
}








/* メディアクエリ↓↓SP版↓↓ */
@media screen and (max-width:768px) {

  /* ヘッダーエリア */
  .headerArea {
    width: 100%;
    margin: 0 auto;
  }

  .headerBar {
    width: 100%;
    height: auto;
    padding: 12px 20px;
    margin: 0;
  }

  /* ドロワーメニューアイコン */
  .menuIcon img {
    width: 25px;
    height: 25px;
  }

  /* ヘッダーロゴ画像 */
  .headerLogo img {
    width: 62px;
    height: 53px;
  }

  .logoGroup {
    gap: 12px;
    padding: 0;
  }

  .loginIcon {
    width: 40px;
    height: 35px;
  }

  .cartIcon {
    width: 30px;
    height: 35px;
  }

  .headerSubArea {
    background-color: transparent;
    height: auto;
    padding: 0;
    justify-content: center;
  }

  .searchArea {
    width: 100%;
    padding: 12px 0;
    justify-content: center;
  }

  .searchForm {
    width: 90%;
    margin: 0 auto 8px;
  }

  /* ドロワーメニュー */
  .drawerHeader {
    position: relative;
  }

  .navArea {
    width: 100%;
    max-width: 375px;
  }

  .drawerNav li {
    width: 100%;
    margin-left: 0;
    padding: 16px 0 16px 12px;
    font-size: 16px;
  }

  /* 閉じるボタン */
  .drawerClose img {
    width: 26px;
    height: 26px;
    margin: 0;
    margin-bottom: 26px;
  }

  /* ドロワーロゴ画像 */
  .drawerLogo img {
    width: 59px;
    height: 52px;
    margin: 0;
  }

  .drawerLogo {
    border: none;
    background: none;
    cursor: pointer;
  }

  .drawerInner {
    padding: 12px;
  }

  /* ユーザー名表示 */
  .welcomeBar {
    font-weight: 500;
  }

  /* ヒーロー画像 */
  .mainVisual {
    width: 100%;
    height: auto;
    margin: 0 auto;
    text-align: center;
  }

  .mainVisual img {
    width: 100%;
    height: auto;
    display: block;
  }

  .innerWrapper {
    width: 100%;
  }

  /* お知らせエリア  */
  .announcementContent {
    width: 100%;
    padding: 20px;
  }

  .announcement {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
  }

  .announcement img {
    width: 100%;
    height: auto;
  }

  .productList {
    display: block;
    width: 100%;
    height: auto;
    margin: 0 auto;
    padding-top: 20px;
  }

  /* お店の紹介エリア */
  .storeIntroductionContent {
    width: 100%;
    margin: 0 auto;
    padding: 40px 20px;
    color: #FFFFFF;
    text-align: center;
    background: url('../images/image01/storeIntroduction.jpg') no-repeat;
    background-size: cover;
    background-position: center 15%;
  }

  .philosophy {
    font-size: 24px;
    font-weight: 900;
    margin-top: 60px;
  }

  .belief {
    font-size: 16px;
    font-weight: 500;
    margin: 20px auto 48px;
  }

  .connection {
    font-size: 20px;
    font-weight: 500;
    margin: 0 auto 260px;
  }

  .connection p {
    padding-top: 12px;
  }

  /* フッターエリア */
  footer {
    width: 100%;
    height: auto;
    margin: 0 auto;
    padding: 0;
    position: relative;
  }

  /* フッターナビエリア */
  .footerNav {
    width: 100%;
    margin-left: 0;
    padding: 12px 0 0 12px;
    margin-bottom: 90px;
  }

  .footerNav ul {
    display: flex;
    flex-direction: column;
    margin-bottom: 0;
    gap: 20px;
  }

  .footerNav ul li {
    padding: 4px 0 4px 12px;
    border-left: 2px solid #B392AC;
    text-decoration: none;
  }

  .footerLogo {
    position: absolute;
    bottom: 42px;
    right: 12px;
  }

  /* フッター用ロゴ */
  .footerLogo img {
    width: 72px;
    height: 64px;
    margin: 0;
  }

  /* SNSアイコン */
  .snsIcons {
    position: absolute;
    margin: 0;
    gap: 20px;
    bottom: 127px;
    left: 12px;
  }

  /* コピーライトエリア */
  .copyright {
    width: 100%;
    height: 34px;
    padding: 12px 0;
    margin-top: 156px;
    font-size: 10px;
  }

  /* 商品詳細ページ */
  .productDetails {
    width: 100%;
    margin: 0;
    display: block;
    padding: 20px 20px 80px;
  }

  /* 商品画像 */
  .productDetails img {
    width: 100%;
    height: auto;
    object-fit: cover;
  }

  .productImageWrapper {
    width: 100%;
    height: auto;
    padding-bottom: 0;
  }

  .productInfo {
    width: 100%;
    height: auto;
    padding-right: 0;
  }

  /* 商品名 */
  .productName {
    font-size: 16px;
    padding: 0;
  }

  /* 上下の線 */
  hr {
    margin: 0;
  }

  /* 紹介文 */
  .productDescription {
    font-size: 16px;
    margin: 0 auto;
    padding: 20px 0;
  }

  .productActions {
    margin: 0;
    /* padding: 20px 0 60px; */
  }

  /* 商品詳細ページ(個) */
  .unit {
    font-size: 16px;
    margin: 0 12px 0 4px;
  }

  /* 価格 */
  .productInfo .productPrice {
    font-size: 24px;
    color: #BF0000;
    margin: 20px 0;
  }

  /* 数量 */
  .quantitySelector {
    display: flex;
    align-items: flex-end;
  }

  .quantitySelector input {
    width: 56px;
    height: 36px;
    font-size: 12px;
    padding: 14px 16px;
    border: 1px solid #7F5539;
  }

  /* カートに入れるボタン */
  .addToCartButton {
    width: 160px;
    height: 36px;
    font-size: 12px;
    padding: 12px 38px;
    margin-left: 12px;
  }

  /* お気に入りボタン */
  .favoriteBtn {
    background-color: transparent;
    width: 36px;
    height: 36px;
    font-size: 24px;
    margin-left: 4px;
  }

  /* カートが空の時 */
  .cartEmpty p {
    margin: 40px auto;
    text-align: center;
    font-size: 16px;
    font-weight: 500;
    padding: 20px;
  }

  /* カートのページ */
  .cartContent {
    padding: 0 20px 20px;
  }

  /* カートの中身 */
  .cartSummary {
    width: 100%;
    margin-bottom: 20px;
  }

  /* 商品小計 */
  .cartCount {
    font-size: 16px;
    margin: 20px auto;
  }

  /* 小計 */
  .cartSubTotal {
    font-size: 16px;
  }

  /* 小計金額部分 */
  .cartSubTotal span {
    font-size: 16px;
    margin-left: 4px;
  }

  /* 購入確認へ進むボタン */
  .proceedToCheckoutBtn {
    font-size: 12px;
    font-weight: bold;
    padding: 12px 32px;
    margin: 20px auto;
  }

  /* カート内の商品エリア  */
  .cartItem {
    display: block;
    width: 100%;
    margin: 0 auto;
  }

  /* 商品画像 */
  .cartItemImage {
    display: block;
    width: 100%;
    aspect-ratio: 1/ 1;
    object-fit: cover;
    margin-bottom: 0;
  }

  /* 商品情報エリア */
  .cartItemInfo {
    display: block;
    text-align: center;
    width: 100%;
    margin: 0;
    border-bottom: none;
  }

  /* 商品名 */
  .cartItemName {
    font-size: 16px;
    font-weight: bold;
    padding: 0;
    margin: 20px auto;
    border-bottom: none;
  }

  /* 価格・数量などの情報 */
  .cartItemOptions {
    display: block;
    width: 100%;
    padding: 0;
  }

  /* 価格 */
  .cartItemPrice {
    font-size: 16px;
    margin-bottom: 12px;
  }

  /* 個数選択 */
  .cartItemQuantity {
    font-size: 16px;
    color: #000;
  }

  /* 個数選択欄 */
  .cartItemQuantity input {
    width: 56px;
    height: 24px;
    font-size: 16px;
    padding: 4px 8px;
  }

  /* 再計算ボタン */
  .cartUpdateBtn {
    font-size: 12px;
    margin: 20px auto 0;
  }

  /* 削除する */
  .cartRemoveBtn {
    font-size: 12px;
    margin: 20px auto 40px;
  }

  /* 買い物を続けるボタン  */
  .continueShoppingBtn {
    font-size: 12px;
    padding: 12px 38px;
    margin: 20px auto 60px;
  }

  /* 共通ｈ２見出し */
  .pageTitle {
    text-align: center;
    font-size: 20px;
    margin: 20px auto;
  }

  .pageTitle h2 {
    padding: 12px 0;
  }

  /* ログインページ */
  .loginFormWrapper {
    width: 100%;
    margin: 0;
    padding: 40px 40px 80px;
  }

  .loginForm {
    width: 100%;
    padding: 20px 12px;
    border: 2px solid #E7D1CD;
  }

  /* 入力欄 */
  .loginInput {
    display: block;
    width: 100%;
    padding: 4px;
    font-size: 12px;
  }

  /* 入力情報確認エリア */
  .reviewInfo,
  .confirmWrapper {
    width: 100%;
    margin: 0 auto;
    padding: 20px 40px 60px;
  }

  /* 入力確認項目 */
  .confirmItem {
    width: 100%;
    font-size: 12px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    margin-bottom: 20px;
    gap: 8px;
  }

  .confirmItem .label {
    padding: 0;
  }

  .confirmItem .value {
    padding: 4px;
  }

  /* カードの有効期限(月/年)の単位部分 */
  .expiryUnit {
    font-size: 12px;
    margin-left: 12px;
    margin-top: 4px;
    align-items: center;
  }

  /* 共通ボタン (入力確認,登録,ログイン,ログアウト,カード情報登録,購入確定) */
  .commonBtn {
    display: block;
    width: 160px;
    height: 48px;
    font-size: 16px;
    padding: 16px 0;
    margin: 40px auto 20px;
    border: none;
    cursor: pointer;
  }

  /* カード情報入力欄 */
  .cardInfo {
    width: 100%;
    margin: 0 auto;
    padding: 0 40px 60px;
  }

  /* ラベル */
  .formGroup label {
    margin-bottom: 8px;
  }

  .formGroup {
    padding-top: 20px;
    margin: 0 auto;
  }

  /* 入力欄エラー表示 */
  .formGroup.error input {
    border: 2px solid #BF0000;
  }

  /* カード会社選択ボタン */
  .radioGroup {
    display: flex;
    gap: 30px;
    margin: 0;
  }

  .radioGroup input {
    width: 12px;
    height: 12px;
    margin-right: 4px;
    margin-bottom: 0;
    color: #000;
  }

  /* カード有効期限選択入力欄 */
  .expiryGroup {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 8px;
  }

  /* 有効期限 */
  .expiryGroup label {
    font-size: 12px;
    margin: 0;
  }

  /* 共通　ラベル (SP) */
  .formLabel {
    display: block;
    font-size: 12px;
    margin-bottom: 8px;
  }

  /* 共通　入力欄(SP) */
  .formInput {
    display: block;
    width: 100%;
    padding: 4px;
    font-size: 12px;
    line-height: 1.6;
  }

  /* 数 入力欄 */
  .qtyInput {
    width: 60px;
    font-size: 12px;
    line-height: 1.6;
    padding: 4px 8px;
  }

  /* ログイン完了ページ */
  .loginSuccessContent {
    width: 100%;
    margin: 0 auto;
  }

  .messageWrapper {
    width: 100%;
    margin: 0 auto;
    padding: 40px 40px 80px;
  }

  /* メッセージ枠 */
  .messageBox {
    width: 100%;
    display: inline-block;
    text-align: center;
    padding: 20px 0;
    border: 2px solid #E7D1CD;
  }

  /* メッセージ枠のテキスト */
  .messageBox p {
    font-size: 12px;
  }

  .messageBox p:nth-child(2) {
    margin-top: 20px;
  }

  /* 下のリンクエリア */
  .links a {
    font-size: 12px;
    display: flex;
    justify-content: flex-end;
    margin-top: 20px;
  }

  .links a:nth-child(2) {
    margin-top: 8px;
  }

  /* 会員登録ページ */
  .signupFormWrapper {
    width: 100%;
    margin: 0 auto;
    padding: 0 40px 40px;
    background-color: #fff;
  }

  /* 必須 */
  .required {
    color: #BF0000;
    font-size: 12px;
    margin-left: 4px;
  }

  /* パスワードの注意書きなどのテキスト */
  .formText {
    font-size: 8px;
    margin-bottom: 8px;
  }

  /* 郵便番号 */
  .zip input {
    width: 100px;
    padding: 4px;
    text-align: flex-start;
  }

  .zip {
    display: flex;
    gap: 4px;
  }

  .labelRow {
    display: flex;
    align-items: center;
    gap: 8px;
  }

  /* パスワードオンオフボタン */
  .toggleBtn {
    right: 6px;
    width: 28px;
    height: 28px;
  }

  .passwordIcon {
    width: 20px;
    height: 20px;
    transform: none;
  }

  /* 入力確認するボタン */
  .confirmBtn {
    display: block;
    width: fit-content;
    font-size: 16px;
    padding: 16px 32px;
    margin: 40px auto;
  }

  /* カートの中身 */
  .cartSummary {
    width: 100%;
    margin: 20px auto;
  }

  /* 商品数 */
  .cartCount {
    font-size: 16px;
    margin: 20px auto;
  }

  /* 小計 */
  .cartSubTotal {
    font-size: 16px;
  }

  /* 小計金額部分 */
  .cartSubTotal span {
    font-size: 16px;
    margin-left: 4px;
  }

  /* 購入確認へ進むボタン */
  .proceedToCheckoutBtn {
    display: block;
    font-size: 12px;
    padding: 12px 32px;
    margin: 20px auto;
  }


  /* 商品一覧ページ用 */
  .rankingSection,
  .orderHistoryContent,
  .productListContent {
    width: 100%;
    margin: 0 auto;
    padding: 0 20px 80px;
  }

  .mainItemsTitle {
    font-size: 12px;
    margin: 0 auto 80px;
    padding-top: 20px;
  }

  .varietySetTitle {
    font-size: 12px;
    margin: 100px auto 80px;
  }

  /* グリッド */
  .menuGrid,
  .orderItems,
  .productGrid,
  .rankingList {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 80px 20px;
  }

  /* メニューカード */
  .productMainItem,
  .orderItem,
  .varietySetItem {
    text-align: frex-start;
    width: 100%;
    height: auto;
  }

  /* 商品画像 */
  .productImage {
    width: 100%;
    height: auto;
  }

  /* 商品名 */
  .productInfo .productName {
    font-size: 16px;
  }

  /* 価格 */
  .productPrice {
    font-size: 12px;
    padding-top: 0;
  }

  /* 購入履歴数量 */
  .quantityUnit {
    font-size: 12px;
    padding: 0;
  }

  /* カートに入れるボタン */
  .addToCartBtn {
    display: block;
    background-color: #7F5539;
    color: #fff;
    width: 160px;
    height: 36px;
    font-size: 12px;
    padding: 12px 32px;
    margin: 0;
    border: none;
    cursor: pointer;
  }

  /* ランキングバッジ */
  .rankBadge {
    width: 35px;
    height: 35px;
    font-size: 16px;
    padding: 8px;
  }

  .rankingList {
    padding-top: 60px;
  }

  /* 購入確認ページ*/
  .orderReview {
    width: 100%;
    margin: 0px auto 40px;
    padding: 20px;
  }

  /* 購入確認ページ　h3 */
  .subPageTitle {
    font-size: 12px;
    margin: 20px 0;
    text-align: center;
  }

  .dividerTight {
    color: #F7D1CD;
    margin: 0;
  }

  .divider {
    color: #F7D1CD;
    margin: 8px 0 20px;
  }

  .orderInfoBox {
    font-size: 12px;
    padding: 0;
  }

  .orderTotalBox {
    font-size: 12px;
    font-weight: 500;
  }

  .orderInfo .label,
  .orderTotal .label {
    width: 60px;
    padding: 12px 8px 4px 4px;
  }

  .orderInfo .value,
  .orderTotal .value {
    color: #000;
    padding: 4px 0 4px 12px;
    border-left: 2px solid #F7D1CD;
  }

  /* カード情報登録するボタン */
  .paymentEmpty {
    padding: 20px 0;
  }

  .paymentEmpty .commonBtn {
    margin: 0 auto;
    margin-bottom: 20px;
  }

  /* カード登録案内 */
  .paymentNote {
    font-size: 12px;
  }

  /* 注意喚起 */
  .attention p {
    font-size: 16px;
  }

}