@charset "UTF-8";
/* ===== FOUC防止: 外国語ページの翻訳完了前にコンテンツを非表示 ===== */
html:not([lang="ja"]):not(.translated) [data-translate],
html:not([lang="ja"]):not(.translated) [data-ui-translate] {
  visibility: hidden;
}
/* ===== フォント統一設定 ===== */
/* サイト全体でNoto Sans JPを使用 */
/* ===== 色統一システム（SP版：640px以下） ===== */
/* ===== 文字サイズ統一システム（SP版：640px以下） ===== */
/* ===== 字間統一システム（SP版） ===== */
/* ===== 行間統一システム（SP版） ===== */
/* ===== お問い合わせフォーム専用スタイル（SP版） ===== */
/* B to C / B to B 切り分けフォーム */
.customer-type-selection {
  max-width: 100%;
  margin: 2rem auto;
  padding: 0 1rem;
}
.customer-type-selection .selection-header {
  text-align: center;
  margin-bottom: 2.5rem;
}
.customer-type-selection .selection-header h3 {
  font-size: 5.6vw;
  color: #232429;
  margin-bottom: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}
.customer-type-selection .selection-header .selection-subtitle {
  font-size: 3.2vw;
  color: #666666;
  margin: 0;
  letter-spacing: 0.02em;
  line-height: 1.6em;
}
.customer-type-selection .type-cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}
.customer-type-selection .type-cards .type-card {
  background: white;
  border: 1px solid #e8e8e8;
  border-radius: 16px;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
}
.customer-type-selection .type-cards .type-card:hover {
  border-color: #87A7AF;
  transform: translateY(-2px);
  box-shadow: 0 8px 16px rgba(135, 167, 175, 0.15);
}
.customer-type-selection .type-cards .type-card:hover .card-icon svg {
  color: #87A7AF;
  transform: scale(1.05);
}
.customer-type-selection .type-cards .type-card:hover .card-arrow svg {
  transform: translateX(2px);
  color: #87A7AF;
}
.customer-type-selection .type-cards .type-card.selected {
  border-color: #87A7AF;
  background: linear-gradient(135deg, #f8f9ff 0%, #ffffff 100%);
  transform: translateY(-2px);
  box-shadow: 0 8px 16px rgba(135, 167, 175, 0.2);
}
.customer-type-selection .type-cards .type-card.selected .card-icon svg {
  color: #87A7AF;
}
.customer-type-selection .type-cards .type-card.selected .card-arrow svg {
  color: #87A7AF;
}
.customer-type-selection .type-cards .type-card .card-content {
  padding: 2rem 1.5rem;
  position: relative;
  display: flex;
  align-items: center;
  gap: 1.5rem;
}
.customer-type-selection .type-cards .type-card .card-content .card-icon {
  flex-shrink: 0;
}
.customer-type-selection .type-cards .type-card .card-content .card-icon svg {
  color: #6b7280;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.customer-type-selection .type-cards .type-card .card-content .card-text {
  flex: 1;
}
.customer-type-selection .type-cards .type-card .card-content .card-text h4 {
  font-size: 4.4vw;
  color: #232429;
  margin-bottom: 0.5rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}
.customer-type-selection .type-cards .type-card .card-content .card-text p {
  font-size: 3.2vw;
  color: #666666;
  line-height: 1.6em;
  letter-spacing: 0.02em;
  margin-bottom: 0;
}
.customer-type-selection .type-cards .type-card .card-content .card-arrow {
  flex-shrink: 0;
}
.customer-type-selection .type-cards .type-card .card-content .card-arrow svg {
  color: #d1d5db;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.contact-form {
  max-width: 90vw;
  margin: 2rem auto;
  padding: 1.5rem;
  background: white;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  opacity: 0;
  transform: translateY(20px);
  transition: all 0.3s ease;
}
.contact-form.active {
  opacity: 1;
  transform: translateY(0);
}
.contact-form h3 {
  font-size: 5.6vw;
  color: #232429;
  text-align: center;
  margin-bottom: 2rem;
  letter-spacing: 0.08em;
}
.contact-form .form-group {
  margin-bottom: 1.5rem;
}
.contact-form .form-group label {
  display: block;
  font-size: 3.2vw;
  color: #232429;
  margin-bottom: 0.5rem;
  font-weight: 500;
  letter-spacing: 0.02em;
}
.contact-form .form-group label .required {
  color: #e74c3c;
  margin-left: 0.25rem;
}
.contact-form .form-group input, .contact-form .form-group select, .contact-form .form-group textarea {
  width: 100%;
  padding: 1rem;
  border: 1px solid #ddd;
  border-radius: 6px;
  font-size: 3.2vw;
  color: #232429;
  background: white;
  transition: border-color 0.3s ease;
  letter-spacing: 0.02em;
}
.contact-form .form-group input:focus, .contact-form .form-group select:focus, .contact-form .form-group textarea:focus {
  outline: none;
  border-color: #87A7AF;
  box-shadow: 0 0 0 2px rgba(135, 167, 175, 0.2);
}
.contact-form .form-group input::placeholder, .contact-form .form-group select::placeholder, .contact-form .form-group textarea::placeholder {
  color: #999;
}
.contact-form .form-group textarea {
  min-height: 120px;
  resize: vertical;
}
.contact-form .form-group small {
  display: block;
  font-size: 2.8vw;
  color: #666666;
  margin-top: 0.25rem;
  letter-spacing: -0.02em;
}
.contact-form .form-actions {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-top: 2rem;
}
.contact-form .form-actions button {
  padding: 1rem 2rem;
  border: none;
  border-radius: 6px;
  font-size: 3.2vw;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;
  letter-spacing: 0.02em;
}
.contact-form .form-actions button.btn-back {
  background: #f8f9fa;
  color: #666666;
  border: 1px solid #ddd;
}
.contact-form .form-actions button.btn-back:hover {
  background: #e9ecef;
  border-color: #adb5bd;
}
.contact-form .form-actions button.btn-confirm {
  background: #87A7AF;
  color: white;
}
.contact-form .form-actions button.btn-confirm:hover {
  background: #68919b;
  transform: translateY(-1px);
}

.contact-confirm-section {
  max-width: 90vw;
  margin: 2rem auto;
  padding: 1.5rem;
  background: white;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  opacity: 0;
  transform: translateY(20px);
  transition: all 0.3s ease;
}
.contact-confirm-section.active {
  opacity: 1;
  transform: translateY(0);
}
.contact-confirm-section h3 {
  font-size: 5.6vw;
  color: #232429;
  text-align: center;
  margin-bottom: 2rem;
  letter-spacing: 0.08em;
}
.contact-confirm-section .confirm-item {
  padding: 1rem;
  margin-bottom: 1rem;
  background: #f8f9fa;
  border-radius: 6px;
  border-left: 4px solid #87A7AF;
  font-size: 3.2vw;
  color: #666666;
  letter-spacing: 0.02em;
  line-height: 1.6em;
}
.contact-confirm-section .confirm-item strong {
  color: #232429;
  font-size: 3.2vw;
  letter-spacing: 0.02em;
}
.contact-confirm-section .form-actions {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-top: 2rem;
}
.contact-confirm-section .form-actions button {
  padding: 1rem 2rem;
  border: none;
  border-radius: 6px;
  font-size: 3.2vw;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;
  letter-spacing: 0.02em;
}
.contact-confirm-section .form-actions button.btn-back {
  background: #f8f9fa;
  color: #666666;
  border: 1px solid #ddd;
}
.contact-confirm-section .form-actions button.btn-back:hover {
  background: #e9ecef;
  border-color: #adb5bd;
}
.contact-confirm-section .form-actions button.btn-send {
  background: #27ae60;
  color: white;
}
.contact-confirm-section .form-actions button.btn-send:hover {
  background: #1e8449;
  transform: translateY(-1px);
}
.contact-confirm-section .form-actions button.btn-send:disabled {
  background: #bdc3c7;
  cursor: not-allowed;
  transform: none;
}

.contact-complete-section {
  max-width: 90vw;
  margin: 2rem auto;
  padding: 1.5rem;
  background: white;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  text-align: center;
  opacity: 0;
  transform: translateY(20px);
  transition: all 0.3s ease;
}
.contact-complete-section.active {
  opacity: 1;
  transform: translateY(0);
}
.contact-complete-section h3 {
  font-size: 5.6vw;
  color: #232429;
  margin-bottom: 1rem;
  letter-spacing: 0.08em;
}
.contact-complete-section p {
  font-size: 3.2vw;
  color: #666666;
  line-height: 1.6em;
  margin-bottom: 2rem;
  letter-spacing: 0.02em;
}
.contact-complete-section .form-actions button {
  padding: 1rem 2rem;
  border: none;
  border-radius: 6px;
  font-size: 3.2vw;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;
  letter-spacing: 0.02em;
  background: #87A7AF;
  color: white;
}
.contact-complete-section .form-actions button:hover {
  background: #68919b;
  transform: translateY(-1px);
}

/* ===== 採用エントリーフォーム（recruit_entry.php） ===== */
.recruit-form {
  opacity: 1 !important;
  transform: translateY(0) !important;
  max-width: 90vw;
}
.form-section {
  margin-bottom: 2rem;
}
.form-section + .form-section {
  border-top: 1px solid #eee;
  padding-top: 1rem;
}
.form-section-title {
  font-size: 4.5vw;
  color: #87A7AF;
  margin: 0 0 1.5rem 0;
  padding: 0 0 0.5rem 0;
  border-bottom: 2px solid #87A7AF;
  letter-spacing: 0.08em;
}
#page_contents h4.form-section-title {
  margin: 0 0 1.5rem 0;
  padding: 0 0 0.5rem 0;
}
.radio-group, .checkbox-group {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 0.5rem;
}
.skill-group {
  background: #f8f9fa;
  border-radius: 8px;
  padding: 1rem;
  margin-bottom: 1rem;
}
.skill-group-title {
  font-size: 3.6vw;
  font-weight: 600;
  color: #232429;
  margin-bottom: 0.75rem;
}
.confirm-section {
  margin-bottom: 1.5rem;
}
.confirm-section-title {
  font-size: 4vw;
  color: #87A7AF;
  margin-bottom: 0.75rem;
  padding-bottom: 0.25rem;
  border-bottom: 1px solid #87A7AF;
}
.privacy-notice .privacy-text {
  font-size: 3vw;
  color: #666;
  line-height: 1.8;
  padding: 1rem;
  background: #f8f9fa;
  border-radius: 6px;
}
.contact-complete-section .form-actions button.btn-reset {
  background: #87A7AF;
  color: white;
}
.contact-complete-section .form-actions button.btn-reset:hover {
  background: #68919b;
  transform: translateY(-1px);
}

/* ===== 文字サイズ統一システム（SP版：640px以下） ===== */
/* ===== 字間統一システム（SP版） ===== */
/* ===== 行間統一システム（SP版） ===== */
/* ===== フォントサイズ連動システム（SP版） ===== */
html {
  font-size: 62.5%;
  overflow-x: hidden;
}

body {
  /*color: #141819;*/
  color: #232429;
  font-size: 1rem;
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 300;
  font-kerning: normal;
  font-feature-settings: "palt";
  -ms-font-feature-settings: "palt";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  line-height: 1;
  background: #FFF;
  word-wrap: break-word;
  overflow-x: hidden;
  vertical-align: baseline;
  white-space: normal;
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  overflow-y: scroll;
  box-sizing: border-box;
  letter-spacing: 0.02em;
}

/* 全ての要素でフォントを継承 */
* {
  font-family: inherit;
  font-feature-settings: inherit;
}

/* Material Symbols (Variable Font - 細線版) スタイル調整 */
.material-symbols-outlined {
  font-family: "Material Symbols Outlined" !important;
  font-weight: normal;
  font-style: normal;
  font-size: inherit;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  vertical-align: middle;
  -webkit-font-feature-settings: "liga";
  -webkit-font-smoothing: antialiased;
  font-variation-settings: "FILL" 0, "wght" 300, "GRAD" 0, "opsz" 24 !important;
}

/* ===== 遅延ローディング関連スタイル（SP版） ===== */
.ec-loading, .ec-lazy-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 2rem 1rem;
  color: #666;
  font-size: 3.6vw;
}
.ec-loading p, .ec-lazy-loading p {
  margin: 1rem 0 0 0;
  font-size: 3.2vw;
  color: #888;
  text-align: center;
}

.ec-loading-spinner {
  width: 35px;
  height: 35px;
  border: 2px solid #f3f3f3;
  border-top: 2px solid #232429;
  border-radius: 50%;
  animation: ec-spin 1s linear infinite;
}

@keyframes ec-spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
.ec-loading-complete {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 1.5rem 0;
  margin-top: 1.5rem;
  text-align: center;
  color: #28a745;
}
.ec-loading-complete .material-symbols-outlined {
  font-size: 2rem;
  margin-bottom: 0.5rem;
  color: #0eb2e1;
  /* ブックマーク基調色 */
}
.ec-loading-complete p {
  margin: 0;
  font-size: 3.2vw;
  color: #666;
}

.ec-error {
  text-align: center;
  color: #dc3545;
  padding: 2rem 1rem;
}
.ec-error .material-symbols-outlined {
  font-size: 2.5rem;
  margin-bottom: 1rem;
  color: #dc3545;
}
.ec-error p {
  margin: 0;
  font-size: 3.6vw;
}

.ec-lazy-image {
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
}
.ec-lazy-image:not([data-src]) {
  opacity: 1;
}

/* ===== Modern News Section (SP版) ===== */
/* CSS Variables for Modern Design */
:root {
  --modern-primary: #232429;
  --modern-secondary: #f8f9fa;
  --modern-accent: #007bff;
  --modern-text: #232429;
  --modern-text-light: #232429;
  --modern-border: #e9ecef;
  --modern-shadow: none;
  --modern-shadow-hover: none;
  --modern-radius: 2px;
  --modern-transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Modern News Section Container */
#modern-news {
  padding: 3rem 0 3rem 0;
  background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
  position: relative;
  overflow: hidden;
  width: 100vw;
}

#modern-news::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--modern-border), transparent);
}

/* Modern Section Title */
.modern-news-title {
  font-size: 7.2vw;
  font-weight: 300;
  color: var(--modern-primary);
  text-align: center;
  margin-bottom: 2rem;
  position: relative;
  letter-spacing: 0.15em;
  line-height: 1.6em;
}

.modern-news-title::after {
  content: "";
  position: absolute;
  bottom: -1rem;
  left: 50%;
  transform: translateX(-50%);
  width: 60px;
  height: 2px;
  background: var(--modern-accent);
  border-radius: 1px;
}

/* Modern Grid Layout */
.modern-news-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1px;
  width: 100%;
}

/* Modern News Card */
.modern-news-card {
  display: flex;
  flex-direction: column;
  background: white;
  border-radius: var(--modern-radius);
  overflow: hidden;
  transition: var(--modern-transition);
  position: relative;
  height: 100%;
  text-decoration: none;
  color: inherit;
}

.modern-news-card:hover {
  transform: translateY(-2px);
  opacity: 0.95;
  text-decoration: none;
  color: inherit;
}

/* Featured Card (Large) - SP版では通常サイズ */
.modern-news-card.featured {
  grid-column: span 1;
  grid-row: span 1;
  /* 高さは自動調整 */
}

.modern-news-card.featured .modern-card-image {
  flex: 1;
  /* 画像エリアを50%相当に */
  min-height: 200px;
  /* 最小高さを確保 */
}

/* Card Image */
.modern-card-image {
  height: 200px;
  background-size: cover;
  background-position: center;
  position: relative;
  overflow: hidden;
}

.modern-card-image::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0.3) 100%);
  opacity: 0;
  transition: var(--modern-transition);
}

.modern-news-card:hover .modern-card-image::before {
  opacity: 1;
}

/* Card Category Tag - 一時的に非表示 */
.modern-card-category {
  display: none;
  position: absolute;
  top: 1rem;
  left: 1rem;
  background: rgba(255, 255, 255, 0.95);
  color: var(--modern-text);
  padding: 0.3rem 0.8rem;
  border-radius: 20px;
  font-size: 2.2vw;
  font-weight: 300;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  backdrop-filter: blur(10px);
  z-index: 2;
}

/* Card Content */
.modern-card-content {
  padding: 1rem;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
}

.modern-card-title {
  font-size: 4.4vw;
  font-weight: 600;
  color: var(--modern-primary);
  margin-bottom: 0.75rem;
  line-height: 1.6em;
  letter-spacing: 0.02em;
}

.modern-news-card.featured .modern-card-content {
  flex: 1;
  /* テキストエリアを50%相当に */
  padding: 1.5rem;
  /* パディングを調整 */
}

.modern-news-card.featured .modern-card-title {
  font-size: 5.6vw;
  margin-bottom: 1rem;
  line-height: 1.6em;
}

.modern-card-date {
  font-size: 2.8vw;
  color: var(--modern-text-light);
  margin-bottom: 1rem;
  display: flex;
  align-items: center;
  letter-spacing: 0.02em;
}

.modern-card-date i {
  opacity: 0.7;
}

.modern-card-excerpt {
  color: var(--modern-text);
  line-height: 1.6em;
  margin-bottom: 1.5rem;
  flex-grow: 1;
  font-size: 3.2vw;
  letter-spacing: 0.02em;
}

.modern-news-card.featured .modern-card-excerpt {
  font-size: 3.6vw;
  margin-bottom: 2rem;
  line-height: 1.6em;
}

/* Read More Link - 非表示 */
.modern-read-more {
  display: none;
}

/* View More Button */
.modern-view-more {
  text-align: center;
  margin-top: 2rem;
}

.modern-view-more-btn {
  display: inline-block;
  background: var(--modern-primary);
  color: white;
  padding: 1rem 2.5rem;
  border-radius: 50px;
  text-decoration: none;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  transition: var(--modern-transition);
  position: relative;
  overflow: hidden;
  font-size: 3.2vw;
}

.modern-view-more-btn::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
  transition: var(--modern-transition);
}

.modern-view-more-btn:hover::before {
  left: 100%;
}

.modern-view-more-btn:hover {
  transform: translateY(-1px);
  opacity: 0.9;
}

/* Animation for cards appearing */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.modern-news-card {
  animation: fadeInUp 0.6s ease-out;
}

.modern-news-card:nth-child(2) {
  animation-delay: 0.1s;
}

.modern-news-card:nth-child(3) {
  animation-delay: 0.2s;
}

.modern-news-card:nth-child(4) {
  animation-delay: 0.3s;
}

.modern-news-card:nth-child(5) {
  animation-delay: 0.4s;
}

/* ===== SPLIT ABOUT SECTION - ABOUTセクション専用スタイル（SP版） ===== */
#split-about {
  padding: 2rem 0;
  background: white;
  margin-top: 20px;
}

/* ABOUTセクション専用のスライダーサイズ調整 - 幅を縮めて高さを伸ばす（SP版） */
#split-about .split-slider-container {
  height: 180vw;
  /* SP版：横幅に連動した可変高さ（テキスト量が多いため高めに設定） */
}

#split-about .split-slide {
  width: 85%;
  /* 85%から70%に縮小して横幅を短く（SP版） */
  margin-right: 5%;
  /* マージンを調整 */
}

/* ABOUTセクションの画像エリア - 正方形に近づけるため高くする（SP版） */
#split-about .split-news-card.featured .split-card-image {
  height: 50%;
  /* 可変高さ（全体の50%）で横幅に連動 */
  aspect-ratio: 1/1;
  /* 正方形比率（1:1）を明示的に指定してデバイス間統一 */
}

#split-about .split-news-card.featured .split-card-image img {
  object-position: top;
  /* 画像の上面を基準に表示、下面をトリミング（SP版） */
}

/* ABOUTセクションのテキストエリア - もっと高くする（SP版） */
#split-about .split-news-card.featured .split-card-content {
  height: 50%;
  /* 可変高さ（全体の50%）で横幅に連動 */
  padding: 1.5rem 0rem 1.2rem 0;
  /* SP版用にパディングを調整 */
  overflow-y: auto;
  /* テキストが多い場合のスクロール対応 */
  position: relative;
  /* フェードアウト効果のため */
  /* 下辺からのフェードアウト効果（SP版） */
  mask: linear-gradient(to bottom, black 0%, black 70%, rgba(0, 0, 0, 0.8) 85%, rgba(0, 0, 0, 0.3) 95%, rgba(0, 0, 0, 0) 100%);
  -webkit-mask: linear-gradient(to bottom, black 0%, black 70%, rgba(0, 0, 0, 0.8) 85%, rgba(0, 0, 0, 0.3) 95%, rgba(0, 0, 0, 0) 100%);
}

/* スクロールバーの設定 - 通常時は非表示、スクロール時のみ表示（SP版） */
#split-about .split-news-card.featured .split-card-content {
  /* Firefox用 - スクロールバーを細く */
  scrollbar-width: thin;
  scrollbar-color: transparent transparent;
}

#split-about .split-news-card.featured .split-card-content::-webkit-scrollbar {
  width: 0px;
  /* 通常時は非表示 */
  background: transparent;
}

#split-about .split-news-card.featured .split-card-content::-webkit-scrollbar-track {
  background: transparent;
}

#split-about .split-news-card.featured .split-card-content::-webkit-scrollbar-thumb {
  background: transparent;
  border-radius: 1px;
}

/* ホバー時またはアクティブ時にスクロールバーを表示（SP版） */
#split-about .split-news-card.featured .split-card-content:hover::-webkit-scrollbar {
  width: 2px;
  /* SP版はより細く */
}

#split-about .split-news-card.featured .split-card-content:hover::-webkit-scrollbar-thumb {
  background: rgba(31, 33, 33, 0.3);
  transition: background 0.3s ease;
}

#split-about .split-news-card.featured .split-card-content:hover::-webkit-scrollbar-thumb:hover {
  background: rgba(31, 33, 33, 0.5);
}

/* ABOUTセクションの1枚目スライドは初期状態でも表示（SP版） */
#split-about .split-slide:first-child .split-news-card.featured .split-card-image {
  opacity: 1 !important;
}

#split-about .split-slide:first-child .split-news-card.featured .split-card-content {
  opacity: 1 !important;
  transform: translateY(0) !important;
}

/* ===== SPLIT STORE SECTION - STOREセクション専用スタイル (SP版) ===== */
#split-store {
  padding: 2rem 0;
  background: white;
  margin-top: 20px;
}

/* STOREセクション専用のスライダーサイズ調整 - ABOUTセクションと同じ設定 (SP版) */
#split-store .split-slider-container {
  height: 115vw;
  /* SP版：横幅に連動した可変高さ（STOREスライダー用） */
}

#split-store .split-slide {
  width: 85%;
  /* SP版：1つ表示（大きなカード）+ 右端に次のカードが少し見える */
  margin-right: 5%;
  /* SP版：適切な余白で次のカードが見える */
}

/* STOREセクションの画像エリア - ABOUTセクションと同じ設定 (SP版) */
#split-store .split-news-card.featured .split-card-image {
  height: 45%;
  /* SP版：シネマサイズ比率に合わせて調整 */
  aspect-ratio: 2.35/1;
  /* シネマサイズ比率（2.35:1）を明示的に指定 */
}

#split-store .split-news-card.featured .split-card-image img {
  object-position: top;
  /* 画像の上面を基準に表示、下面をトリミング */
}

/* STOREセクションのテキストエリア - ABOUTセクションと同じ設定 (SP版) */
#split-store .split-news-card.featured .split-card-content {
  height: 55%;
  /* SP版：画像55%に合わせてテキストエリア拡大 */
  padding: 1.2rem 0rem 1.2rem 0;
  /* SP版：よりコンパクトなパディング */
  overflow-y: auto;
  /* テキストが多い場合のスクロール対応 */
  position: relative;
  /* フェードアウト効果のため */
  /* 下辺からのフェードアウト効果 */
  mask: linear-gradient(to bottom, black 0%, black 70%, rgba(0, 0, 0, 0.8) 85%, rgba(0, 0, 0, 0.3) 95%, rgba(0, 0, 0, 0) 100%);
  -webkit-mask: linear-gradient(to bottom, black 0%, black 70%, rgba(0, 0, 0, 0.8) 85%, rgba(0, 0, 0, 0.3) 95%, rgba(0, 0, 0, 0) 100%);
}

/* スクロールバーの設定 - 通常時は非表示、スクロール時のみ表示 (SP版) */
#split-store .split-news-card.featured .split-card-content {
  /* Firefox用 - スクロールバーを細く */
  scrollbar-width: thin;
  scrollbar-color: transparent transparent;
}

#split-store .split-news-card.featured .split-card-content::-webkit-scrollbar {
  width: 0px;
  /* 通常時は非表示 */
  background: transparent;
}

#split-store .split-news-card.featured .split-card-content::-webkit-scrollbar-track {
  background: transparent;
}

#split-store .split-news-card.featured .split-card-content::-webkit-scrollbar-thumb {
  background: transparent;
  border-radius: 2px;
}

/* ホバー時またはアクティブ時にスクロールバーを表示 (SP版) */
#split-store .split-news-card.featured .split-card-content:hover::-webkit-scrollbar {
  width: 3px;
}

#split-store .split-news-card.featured .split-card-content:hover::-webkit-scrollbar-thumb {
  background: rgba(31, 33, 33, 0.3);
  transition: background 0.3s ease;
}

#split-store .split-news-card.featured .split-card-content:hover::-webkit-scrollbar-thumb:hover {
  background: rgba(31, 33, 33, 0.5);
}

/* STOREセクションの1枚目スライドは初期状態でも表示 (SP版) */
#split-store .split-slide:first-child .split-news-card.featured .split-card-image {
  opacity: 1 !important;
}

#split-store .split-slide:first-child .split-news-card.featured .split-card-content {
  opacity: 1 !important;
  transform: translateY(0) !important;
}

/* ===== SPLIT NEWS SECTION (SP版) ===== */
#split-news {
  padding: 0rem 0;
  background: white;
  margin-top: 0px;
  /* FEATURESとEVENTSの間の余白をさらに短く */
}

.split-news-container {
  display: flex;
  flex-direction: column;
  width: 100%;
}

/* Left Pane - Category Title (SP版では上部) */
.split-news-left {
  width: 100%;
  padding: 2rem 4vw;
  /* PRODUCTSと同じ余白設定に統一 */
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  background: white;
  color: var(--modern-primary);
}

.split-news-title {
  font-family: "Cormorant Garamond", serif;
  font-size: 7.2vw;
  font-weight: 300;
  letter-spacing: 0.15em;
  margin: 0;
  text-transform: uppercase;
}
.split-news-title a {
  color: inherit;
  text-decoration: none;
  transition: all 0.3s ease;
  display: inline-block;
}
.split-news-title a:hover {
  color: var(--modern-accent);
  transform: translateY(-2px);
  text-decoration: none;
}

/* Right Pane - News Content (SP版では下部) */
.split-news-right {
  width: 100%;
  background: white;
  position: relative;
}

/* Slider Container (SP版) */
.split-slider-container {
  height: 95vw;
  /* SP版：横幅に連動した可変高さ（NEWSスライダー用） */
  position: relative;
  overflow: hidden;
  width: 100%;
  padding: 0 4vw;
  /* 左右に均等な余白を追加 */
  box-sizing: border-box;
}

.split-slider-wrapper {
  height: 100%;
  overflow: visible;
  width: 100%;
}

.split-slider-track {
  display: flex;
  height: 100%;
  transition: transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  width: 100vw;
  /* SP版：ビューポート幅基準で適切なサイズ */
}

.split-slide {
  width: 85%;
  /* SP版：1つ表示（大きなカード）+ 右端に次のカードが少し見える */
  height: 100%;
  flex-shrink: 0;
  margin-right: 5%;
  /* SP版：適切な余白で次のカードが見える */
}

/* Featured News Card (SP版) */
.split-news-card.featured {
  display: flex;
  flex-direction: column;
  height: 100%;
  text-decoration: none;
  color: inherit;
  transition: none;
}
.split-news-card.featured:hover, .split-news-card.featured:active, .split-news-card.featured:focus, .split-news-card.featured:visited {
  opacity: 1 !important;
  text-decoration: none !important;
  color: inherit !important;
  transform: none !important;
}

.split-news-card.featured .split-card-image {
  height: 60%;
  /* SP版：シネマサイズ比率に合わせて調整 */
  position: relative;
  border-radius: 8px;
  opacity: 0.6;
  transition: opacity 0.6s ease;
  overflow: hidden;
  aspect-ratio: 2.35/1;
  /* シネマサイズ比率（2.35:1）を明示的に指定 */
}

.split-news-card.featured .split-card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  /* 画像の中央を基準に表示（デバイス間統一） */
  border-radius: 8px;
  transition: none;
}

/* News画像のホバーズーム効果 (SP版) - 無効化 */
/* アクティブなスライドの画像を100%表示 */
.split-slide.active .split-news-card.featured .split-card-image {
  opacity: 1;
}

.split-news-card.featured .split-card-content {
  padding: 1.2rem 0rem 1.2rem 0;
  /* SP版：よりコンパクトなパディング */
  height: 40%;
  /* SP版：画像60%に合わせてテキストエリア拡大 */
  flex-shrink: 0;
  overflow-y: auto;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

/* アクティブなスライドのテキストエリア表示 */
.split-slide.active .split-news-card.featured .split-card-content {
  opacity: 1;
  transform: translateY(0);
}

.split-news-card.featured .split-card-title {
  font-size: 4vw;
  /* SP版：$font-lgから$font-mdに縮小 */
  font-weight: 400;
  color: var(--modern-primary);
  margin-bottom: 0.8rem;
  /* SP版：余白調整 */
  line-height: 1.6em;
  letter-spacing: 0.02em;
}

.split-news-card.featured .split-card-date {
  font-size: 2.8vw;
  font-weight: 400;
  color: var(--modern-text-light);
  margin-bottom: 0.8rem;
  /* SP版：余白調整 */
  display: flex;
  align-items: center;
}
.split-news-card.featured .split-card-date span {
  line-height: 1.6em;
  /* 改行時の行間を適切に設定 */
}

.split-news-card.featured .split-card-excerpt {
  font-size: 3.2vw;
  font-weight: 400;
  color: var(--modern-text);
  line-height: 1.6em;
  letter-spacing: 0.02em;
  text-align: justify;
  text-justify: inter-character;
  text-align-last: left;
}

/* Card Category Tag - 一時的に非表示 */
.split-card-category {
  display: none;
  position: absolute;
  top: 1rem;
  left: 1rem;
  background: rgba(255, 255, 255, 0.95);
  color: var(--modern-text);
  padding: 0.3rem 0.8rem;
  border-radius: 20px;
  font-size: 2.2vw;
  font-weight: 300;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  backdrop-filter: blur(10px);
  z-index: 2;
}

/* News Navigation Area - 構造的に分離 (SP版) - スマホでは非表示 */
.split-news-nav-area {
  display: none;
  /* スマホでは非表示 */
  align-items: center;
  justify-content: center;
  /* 右端から中央に変更 */
  gap: 1rem;
  padding: 0.8rem 0;
  /* 左右パディングを削除して中央配置 */
  margin-top: 0.8rem;
}

/* News VIEW ALL Link - 共通スタイルを使用 (SP版) */
/* Navigation Buttons - News用 (SP版) */
.split-news-nav-area .split-slider-nav {
  gap: 0.6rem;
}

.split-nav-btn {
  width: 28px;
  height: 28px;
  border: 1px solid rgba(31, 33, 33, 0.8);
  background: rgba(31, 33, 33, 0.9);
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s ease;
  font-size: 0.9rem;
  line-height: 1;
}

.split-nav-btn .material-icons {
  font-size: 1.2rem;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.split-nav-btn:hover {
  background: #1f2121;
  transform: scale(1.05);
}

/* ===== SPLIT PRODUCTS SECTION (SP版) ===== */
#split-products {
  padding: 2rem 0;
  background: white;
  margin-top: 30px;
  /* メインセクションとして特別な間隔 */
}

.split-products-container {
  display: flex;
  flex-direction: column;
  width: 100%;
}

/* Left Pane - Category Title (SP版では上部) */
.split-products-left {
  width: 100%;
  padding: 2rem 4vw;
  /* 上下・左右に均等な余白 */
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  background: white;
  color: var(--modern-primary);
}

.split-products-title {
  font-family: "Cormorant Garamond", serif;
  font-size: 7.2vw;
  font-weight: 300;
  letter-spacing: 0.15em;
  margin: 0;
  text-transform: uppercase;
  word-wrap: break-word;
  word-break: break-all;
  overflow-wrap: break-word;
  hyphens: auto;
  max-width: 100%;
  white-space: normal;
  line-height: 1.2;
  padding: 0 6vw 0 2vw;
}
.split-products-title a {
  color: inherit;
  text-decoration: none;
  transition: none;
  display: inline-block;
  word-wrap: break-word;
  word-break: break-all;
  overflow-wrap: break-word;
  hyphens: auto;
  max-width: 100%;
  white-space: normal;
  line-height: 1.2;
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
}
.split-products-title a:hover, .split-products-title a:active, .split-products-title a:focus, .split-products-title a:visited {
  color: inherit !important;
  text-decoration: none !important;
  transform: none !important;
  opacity: 1 !important;
}

/* Right Pane - Products Content (SP版では下部) */
.split-products-right {
  width: 100%;
  background: white;
  position: relative;
}

/* Slider Container (SP版) */
.split-products-slider-container {
  height: 70vw;
  /* SP版：スライド全体の高さを短縮（85vw → 70vw） */
  position: relative;
  overflow: hidden;
  width: 100%;
  padding: 0 4vw;
  /* 左右に均等な余白を追加 */
  box-sizing: border-box;
}

.split-products-slider-wrapper {
  height: 100%;
  overflow: visible;
  width: 100%;
}

.split-products-slider-track {
  display: flex;
  height: 100%;
  transition: transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  width: 100vw;
  /* SP版：ビューポート幅基準で適切なサイズ */
}

.split-products-slide {
  width: 42%;
  /* SP版：2つ表示+3点目を少し見せる（42% × 2 + 3% margin + 13% 3点目表示 = 100%） */
  height: 100%;
  flex-shrink: 0;
  margin-right: 3%;
  /* SP版：適切な余白 */
}

/* Featured Product Card (SP版) */
.split-products-card.featured {
  display: flex;
  flex-direction: column;
  height: 100%;
  text-decoration: none;
  color: inherit;
  transition: var(--modern-transition);
  position: relative;
  z-index: 1;
}

.split-products-card.featured:hover {
  opacity: 0.95;
  text-decoration: none;
  color: inherit;
}

.split-products-card.featured .split-products-card-image {
  height: 80%;
  /* SP版：70vw × 0.75 = 52.5vw（比率維持、高さ短縮） */
  position: relative;
  border-radius: 8px;
  opacity: 0.6;
  transition: opacity 0.6s ease;
  overflow: hidden;
  /* aspect-ratio: 1 / 1; 削除：自然な縦長比率を維持 */
}

.split-products-card.featured .split-products-card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  /* 画像の中央を基準に表示（デバイス間統一） */
  border-radius: 8px;
  transition: transform 0.3s ease;
}

/* Products画像のホバーズーム効果 (SP版) */
.split-products-card.featured:hover .split-products-card-image img {
  transform: scale(1.02);
  /* SP版では控えめなズーム */
}

/* Products Card Image Base Styles (SP版) */
.split-products-card.featured .split-products-card-image {
  opacity: 0.3;
  /* デフォルトは薄く表示 */
  transition: opacity 0.4s ease;
  /* スムーズなトランジション */
}

/* 表示エリア内（1-2番目）のスライドの画像を完全表示（SP版は2つ表示） */
.split-products-slide.slider-visible .split-products-card.featured .split-products-card-image {
  opacity: 1;
}

.split-products-card.featured .split-products-card-content {
  padding: 0.8rem 0.6rem 0.4rem 0;
  /* SP版：上下に余裕のあるパディング */
  height: 20%;
  /* SP版：70vw × 0.25 = 17.5vw（比率維持、高さ短縮） */
  flex-shrink: 0;
  overflow: hidden;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.4s ease, transform 0.4s ease;
}

/* 表示エリア内（1-2番目）のスライドのテキストエリア表示（SP版は2つ表示） */
.split-products-slide.slider-visible .split-products-card.featured .split-products-card-content {
  opacity: 1;
  transform: translateY(0);
}

.split-products-card.featured .split-products-card-title {
  font-size: 3.2vw;
  font-weight: 400;
  color: var(--modern-primary);
  margin-bottom: 0.5rem;
  /* SP版：商品名と価格の間に余裕のある余白 */
  line-height: 1.3;
  /* SP版：読みやすい行間 */
  letter-spacing: 0.02em;
  display: -webkit-box;
  /* 2行制限設定 */
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.split-products-card.featured .split-products-card-price {
  font-size: 3.2vw;
  color: #666;
  margin-bottom: 0;
  display: flex;
  align-items: center;
  font-weight: 400;
  /* 一段細く（500 → 400） */
}

.split-products-card.featured .split-products-card-excerpt {
  display: none;
  /* 商品説明は非表示 - タイトルと価格のみ表示 */
}

/* Card Category Tag - 削除 */
/* Empty Card Styling */
.split-products-card.featured.empty .split-products-card-image {
  background-color: #f5f5f5;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Empty Card Category - 削除 */
/* Navigation Area - 構造的に分離 (SP版) - スマホでは非表示 */
.split-products-nav-area {
  display: none;
  /* スマホでは非表示 */
  align-items: center;
  justify-content: center;
  /* 右端から中央に変更 */
  gap: 1rem;
  padding: 0.8rem 0;
  /* 左右パディングを削除して中央配置 */
  margin-top: 0.8rem;
}

/* ===== 共通UIパーツ：VIEW ALL ボタン (SP版) ===== */
.view-all-button, .ec-bookmark-view-all, .detail-bookmark-view-all, .split-products-view-all,
.split-news-view-all,
.split-view-all-btn,
.split-view-all {
  display: flex;
  align-items: center;
  background: white;
  /* 白色背景に変更 */
  border: 1px solid rgba(128, 128, 128, 0.5);
  /* スライドボタンOFF時と同じ外枠色 */
  border-radius: 16px;
  padding: 6px 12px;
  /* 左右パディングを10px→12pxに拡大 */
  backdrop-filter: blur(10px);
  transition: all 0.3s ease;
  text-decoration: none;
}
.view-all-button:hover, .ec-bookmark-view-all:hover, .detail-bookmark-view-all:hover, .split-products-view-all:hover,
.split-news-view-all:hover,
.split-view-all-btn:hover,
.split-view-all:hover {
  background: #232429;
  /* デフォルトの文字色（黒系）に変更 */
  text-decoration: none;
}
.view-all-button:hover .view-all-text, .ec-bookmark-view-all:hover .view-all-text, .detail-bookmark-view-all:hover .view-all-text, .split-products-view-all:hover .view-all-text,
.split-news-view-all:hover .view-all-text,
.split-view-all-btn:hover .view-all-text,
.split-view-all:hover .view-all-text {
  color: white;
  /* ホバー時にテキストを白色に変更 */
}
.view-all-button:hover .material-symbols-outlined, .ec-bookmark-view-all:hover .material-symbols-outlined, .detail-bookmark-view-all:hover .material-symbols-outlined, .split-products-view-all:hover .material-symbols-outlined,
.split-news-view-all:hover .material-symbols-outlined,
.split-view-all-btn:hover .material-symbols-outlined,
.split-view-all:hover .material-symbols-outlined {
  color: white;
  /* ホバー時にアイコンも白色に変更 */
}

.view-all-text {
  font-size: 2.8vw;
  color: var(--modern-text);
  font-weight: 400;
  letter-spacing: 0.5px;
  /* $letter-wideより狭く設定 */
  text-transform: uppercase;
  transition: color 0.3s ease;
  /* テキスト色のふわっとフェード切り替え */
}

/* Products・Newsセクション共通で使用 (SP版) */
/* ===== 共通UIパーツ：スライドナビゲーションボタン (SP版) ===== */
.slider-nav, .split-products-slider-nav,
.split-slider-nav {
  gap: 0.6rem;
}

.nav-button, .split-products-nav-btn,
.split-nav-btn {
  width: 28px;
  height: 28px;
  border: 1px solid rgba(31, 33, 33, 0.8);
  background: rgba(31, 33, 33, 0.9);
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s ease;
  font-size: 0.9rem;
  line-height: 1;
}
.nav-button .material-icons, .split-products-nav-btn .material-icons,
.split-nav-btn .material-icons {
  font-size: 1.2rem;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}
.nav-button:hover, .split-products-nav-btn:hover,
.split-nav-btn:hover {
  background: #1f2121;
  transform: scale(1.05);
}
.nav-button:disabled, .split-products-nav-btn:disabled,
.split-nav-btn:disabled {
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(128, 128, 128, 0.5);
  color: rgba(128, 128, 128, 0.8);
  cursor: not-allowed;
  transform: none;
}
.nav-button:disabled:hover, .split-products-nav-btn:disabled:hover,
.split-nav-btn:disabled:hover {
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(128, 128, 128, 0.5);
  color: rgba(128, 128, 128, 0.8);
  transform: none;
}

/* Products・Newsセクション共通で使用 (SP版) */
/* ===== 共通UIパーツ：スクロールフェードインアニメーション (SP版) ===== */
/* スクロール時のふわっとフェードインアニメーション */
.scroll-fade-in, .card-scroll-fade, .slide-scroll-fade, .scroll-fade-in-thumb-12, .scroll-fade-in-thumb-11, .scroll-fade-in-thumb-10, .scroll-fade-in-thumb-9, .scroll-fade-in-thumb-8, .scroll-fade-in-thumb-7, .scroll-fade-in-thumb-6, .scroll-fade-in-thumb-5, .scroll-fade-in-thumb-4, .scroll-fade-in-thumb-3, .scroll-fade-in-thumb-2, .scroll-fade-in-thumb-1, .scroll-fade-in-delay-3, .scroll-fade-in-delay-2, .scroll-fade-in-delay-1 {
  opacity: 0;
  transform: translateY(20px);
  transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.scroll-fade-in.visible, .visible.card-scroll-fade, .visible.slide-scroll-fade, .visible.scroll-fade-in-thumb-12, .visible.scroll-fade-in-thumb-11, .visible.scroll-fade-in-thumb-10, .visible.scroll-fade-in-thumb-9, .visible.scroll-fade-in-thumb-8, .visible.scroll-fade-in-thumb-7, .visible.scroll-fade-in-thumb-6, .visible.scroll-fade-in-thumb-5, .visible.scroll-fade-in-thumb-4, .visible.scroll-fade-in-thumb-3, .visible.scroll-fade-in-thumb-2, .visible.scroll-fade-in-thumb-1, .visible.scroll-fade-in-delay-3, .visible.scroll-fade-in-delay-2, .visible.scroll-fade-in-delay-1 {
  opacity: 1;
  transform: translateY(0);
}

/* アニメーション遅延バリエーション */
.scroll-fade-in-delay-1 {
  transition-delay: 0.1s;
}

.scroll-fade-in-delay-2 {
  transition-delay: 0.2s;
}

.scroll-fade-in-delay-3 {
  transition-delay: 0.3s;
}

/* サムネイル個別アニメーション用の遅延クラス（SP版は少し短めの遅延） */
.scroll-fade-in-thumb-1 {
  transition-delay: 0.1s;
}

.scroll-fade-in-thumb-2 {
  transition-delay: 0.2s;
}

.scroll-fade-in-thumb-3 {
  transition-delay: 0.3s;
}

.scroll-fade-in-thumb-4 {
  transition-delay: 0.4s;
}

.scroll-fade-in-thumb-5 {
  transition-delay: 0.5s;
}

.scroll-fade-in-thumb-6 {
  transition-delay: 0.6s;
}

.scroll-fade-in-thumb-7 {
  transition-delay: 0.7s;
}

.scroll-fade-in-thumb-8 {
  transition-delay: 0.8s;
}

.scroll-fade-in-thumb-9 {
  transition-delay: 0.9s;
}

.scroll-fade-in-thumb-10 {
  transition-delay: 1s;
}

.scroll-fade-in-thumb-11 {
  transition-delay: 1.1s;
}

.scroll-fade-in-thumb-12 {
  transition-delay: 1.2s;
}

/* セクション全体用のスクロールアニメーション */
.section-scroll-fade {
  /* セクション全体は初期表示、子要素のみアニメーション */
  opacity: 1;
  transform: none;
}

/* スライダー内の個別要素用 */
/* カード要素用 */
/* 重複スタイル削除 - 共通スタイルを使用 (SP版) */
a {
  color: inherit;
  transition: opacity 0.3s ease;
}

a:hover {
  color: #87A7AF;
  text-decoration: none;
}

a:focus {
  text-decoration: none;
}

a,
a:focus,
a:active,
a:hover,
a:visited,
:focus,
:active,
:hover,
:visited {
  outline: none !important;
  text-decoration: none;
}

p {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-size: 3.6vw;
  line-height: 1.6em;
  letter-spacing: 0.02em;
  color: inherit;
}

H2,
H3,
H4,
H5 {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-size: 5.6vw;
  font-weight: 400;
  line-height: 1.6em;
  letter-spacing: 0.08em;
  color: inherit;
}

.main_slide_area {
  /* SP版：スライダー画像（50vh）+ テキストエリア（auto）+ 余白 */
  height: auto;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  border: 0px solid red;
}

/* SP版では縦並び配置 */
.main_slide_container {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: auto;
}

/* SP版：上部スライドエリア（スマホ画面の65%の高さ） */
.main_slide_left {
  width: 100%;
  height: 90vh;
  position: relative;
  overflow: hidden;
  border-bottom-left-radius: 8px;
  border-bottom-right-radius: 8px;
}

/* SP版：下部テキストエリア（内容に応じた最適な高さ） */
.main_slide_right {
  width: 100%;
  height: auto;
  /* 自動高さ */
  background: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4vw 6vw 2vw 6vw;
  /* 上下パディングを最適化：上4vw、下2vw */
  margin-top: 3vw;
  /* 画像の下辺から適切な余白 */
  margin-bottom: 1vw;
  /* 下部に小さな余白を追加 */
  box-sizing: border-box;
}

.main_slide_text {
  text-align: left;
  max-width: 100%;
}

.main_slide_text h3 {
  font-size: 4.4vw;
  font-weight: 400;
  color: #232429;
  margin-bottom: 1.5rem;
  letter-spacing: 0.08em;
  line-height: 1.8em;
  text-align: center;
}

.main_slide_text p {
  font-size: 3.2vw;
  font-weight: 400;
  color: #232429;
  letter-spacing: 0.02em;
  line-height: 2em;
  text-align: justify;
  text-justify: inter-character;
  text-align-last: left;
}

.koma_slide_area {
  box-sizing: border-box;
  width: 100%;
  height: calc(100% - 0px);
  /*min-height: 600px;*/
  position: absolute;
  overflow: hidden;
  z-index: 2;
  right: 0;
  top: 0px;
  text-align: center;
}

.koma_slide_overlay {
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 1000;
  opacity: 0.2;
  background-color: #1f2121;
  transform: translate3d(0, 0, 0);
}

.koma_slide_infoarea {
  box-sizing: border-box;
  width: 94%;
  min-width: 280px;
  position: absolute;
  z-index: 3;
  left: 3%;
  bottom: 20px;
  margin-top: 0px;
  border: 0px solid #1f2121;
}

.koma_slide_navarea {
  width: 100%;
  min-width: 280px;
  position: absolute;
  z-index: 2;
  left: 0%;
  bottom: 1%;
  margin-top: 0px;
  border: 0px solid #1f2121;
}

.p-top-kv-season {
  font-size: 2.8vw;
  font-size: 1.2rem;
  font-weight: 400;
  color: #FFF;
}

.p-top-kv-slider {
  width: 100%;
  height: 100%;
  min-height: 100%;
  z-index: 1;
  overflow: hidden;
}

.koma_slider_item {
  width: 100%;
  height: 100%;
  min-height: 100%;
  overflow: hidden;
  position: absolute;
  z-index: 0;
  top: 0;
  left: 0;
  /*transition: width 0s cubic-bezier(0.645, 0.045, 0.355, 1);*/
  transition: all 1.5s ease-in;
  transition-delay: 0.5s;
  transform: translate3d(0px, 0px, 0px);
  /*filter: blur(3px);*/
  opacity: 0;
}

.koma_slider_item.is-animate {
  width: 100%;
  /*transition: width 1s cubic-bezier(0.645, 0.045, 0.355, 1);*/
  transition: all 1.5s ease-in;
  /*filter: blur(0px);*/
  opacity: 1;
  transition-delay: 0s;
}

.koma_slider_item.is-out {
  z-index: 50;
  width: 100%;
  /*transition: width 1s cubic-bezier(0.645, 0.045, 0.355, 1);*/
  transition: all 1.5s ease-out;
  /*filter: blur(3px);*/
  opacity: 0;
  transition-delay: 0s;
}

.koma_slider_item.is-now {
  z-index: 99;
  width: 100%;
  /*transition: width 1s cubic-bezier(0.645, 0.045, 0.355, 1);*/
  transition: all 1.5s ease-in;
  /*filter: blur(0px);*/
  opacity: 1;
  transition-delay: 0s;
}

.koma_slider_item.is-in {
  z-index: 100;
}

.koma_slider_item .is-nolink {
  cursor: default;
}

.koma_slider_inner {
  width: 78vw;
  height: 100%;
  position: absolute;
  transform: translate3d(0, 0, 0);
  left: 0;
  top: 0;
}

.koma_slider_image {
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center center;
  transform: translate3d(0, 0, 0);
}

.p-top-kv-slider__image--pc {
  display: block;
}

@media (max-width: 1023px) {
  .p-top-kv-slider__image--pc {
    display: none;
  }
}
.p-top-kv-slider__image--sp {
  display: none;
}

@media (max-width: 1023px) {
  .p-top-kv-slider__image--sp {
    display: block;
  }
}
.koma_slide_info {
  width: 100% !important;
  height: 2.6em;
  box-sizing: border-box;
  overflow: hidden;
  position: relative;
  color: #FFF;
  margin: 0;
  padding: 0;
  border: 0px solid red;
}

.kome_slide_info_item {
  width: 100% !important;
  position: absolute;
  top: 0;
  left: 0;
  margin: 0;
  padding: 0;
  transform: translateY(-100%);
  display: table;
  border: 0px solid red;
}

.kome_slide_info_item.is-out {
  animation: count-off 0.8s cubic-bezier(0.645, 0.045, 0.355, 1) 0s forwards;
}

.kome_slide_info_item.is-current {
  animation: count 0.8s cubic-bezier(0.645, 0.045, 0.355, 1) 0s forwards;
}

.koma_slide_info_category {
  box-sizing: border-box;
  display: table-cell;
  margin: 0 0 0 0;
  padding: 0 0 0 0;
  box-sizing: border-box;
  width: 15vw;
  /* 20vw → 15vw（カテゴリ部分を縮小） */
  text-align: center;
}

.koma_slide_info_category p {
  font-size: 2.8vw;
  line-height: 1em;
  background-color: white;
  color: #66777C;
  box-sizing: border-box;
  /*width: min-content;*/
  margin: 0;
  padding: 0.5em 0.6em 0.5em 0.6em;
  /* パディングを少し縮小 */
  text-align: center;
  /*display: table-cell;
  vertical-align: middle;*/
  letter-spacing: 0.02em;
  /* $letter-wide → $letter-normal（文字間隔を縮小） */
  width: 15vw;
  /* 20vw → 15vw（カテゴリ部分を縮小） */
}

.koma_slide_info_title {
  margin: 0;
  padding: 0;
  display: table-cell;
  /* block → table-cell（テーブル構造に合わせる） */
  border: 0px solid #1f2121;
  width: auto;
  /* 100% → auto（残りの幅を自動取得） */
  vertical-align: middle;
  /* 中央揃えを追加 */
}

.koma_slide_info_title h3 {
  border: 0px solid green;
  box-sizing: border-box;
  margin: 0;
  padding: 0 0 0 1vw;
  /* 左側に少し余白を追加 */
  font-size: 3.2vw;
  line-height: 1.2em;
  /* 1em → 1.2em（行間を少し広げる） */
  letter-spacing: 0.02em;
  /* $letter-loose → $letter-normal（文字間隔を縮小） */
  color: white;
  white-space: nowrap;
  /* 改行を防止 */
  overflow: hidden;
  /* はみ出し部分を隠す */
  text-overflow: ellipsis;
  /* 長すぎる場合は省略記号を表示 */
}

.koma_slide_info_title a:hover h3 {
  animation: link1 0.2s ease-in-out 0s forwards;
}

.koma_slide_nav {
  width: 240px;
  position: relative;
  left: 0;
  margin: 0 auto;
}

.p-top-kv-nav__item {
  position: absolute;
  z-index: 1000;
  bottom: 0;
  cursor: pointer;
  padding: 13px 0;
}

.p-top-kv-nav__item--right {
  right: 0;
}

.p-top-kv-nav__item--right img {
  width: 19px;
  margin-bottom: 5px;
}

.p-top-kv-nav__item--left {
  left: 0;
}

.p-top-kv-nav__item--left img {
  width: 19px;
  margin-bottom: 5px;
}

.koma_slide_count {
  position: relative;
  height: 40px;
  padding: 0 30px;
  text-align: center;
  color: #FFF;
  border: 0px solid #1f2121;
}

.koma_slide_count_current {
  width: 100px;
  height: 40px;
  font-size: 2.8vw;
  font-size: 1.2rem;
  font-weight: 400;
  line-height: 40px;
  overflow: hidden;
  position: absolute;
  right: 190px;
  text-align: right;
  top: 0;
  border: 0px solid #1f2121;
}

.koma_slide_count_current-text {
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  transform: translateY(-100%);
  transform: translate3d(0, -100%, 0);
}

.koma_slide_count_current-text.is-out {
  animation: count-off 0.8s cubic-bezier(0.645, 0.045, 0.355, 1) 0s forwards;
}

.koma_slide_count_current-text.is-current {
  transform: translateY(0);
  transform: translate3d(0, 0, 0);
  animation: count 0.8s cubic-bezier(0.645, 0.045, 0.355, 1) 0s forwards;
}

.koma_slide_count_total {
  width: 20px;
  height: 40px;
  font-size: 2.8vw;
  font-size: 1.2rem;
  font-weight: 400;
  line-height: 40px;
  position: absolute;
  right: 35px;
  top: 0;
}

.koma_count_border {
  width: 120px;
  height: 1px;
  background-color: rgba(255, 255, 255, 0.5);
  position: absolute;
  left: 50%;
  top: 50%;
  overflow: hidden;
  transform: translateX(-50%);
}

.koma_count_border_line {
  width: 100%;
  height: 1px;
  background: #FFF;
  position: absolute;
  left: 0;
  right: auto;
  top: 0;
  content: "";
  transform: scaleX(0);
  transform-origin: left;
  transition: all 0.2s linear;
}

.is-move .koma_count_border_line {
  transition: none;
  animation: count-bar-anim 0.8s cubic-bezier(0.645, 0.045, 0.355, 1) 0s forwards;
}

@keyframes count-bar-anim {
  0% {
    left: 0;
    transform: scaleX(1);
  }
  50% {
    left: 0;
    transform: scaleX(1);
  }
  100% {
    left: 100%;
  }
}
@keyframes count {
  0% {
    transform: translateY(100%);
    transform: translate3d(0, 100%, 0);
  }
  100% {
    transform: translateY(0);
    transform: translate3d(0, 0, 0);
  }
}
@keyframes count-off {
  0% {
    transform: translateY(0);
    transform: translate3d(0, 0, 0);
  }
  100% {
    transform: translateY(-100%);
    transform: translate3d(0, -100%, 0);
  }
}
.top_cart {
  position: absolute;
  top: 3%;
  right: 3%;
  margin: 0;
  padding: 0;
  width: 2.3%;
  z-index: 2;
}

.top_cart img {
  width: 100%;
}

.top_logo {
  box-sizing: border-box;
  position: absolute;
  top: 8vw;
  /* 6.5vw → 8vw（1.5vw下げる） */
  left: 4vw;
  margin: 0;
  padding: 0;
  width: auto;
  z-index: 2;
  text-align: left;
}

.top_logo img {
  width: 22vw;
  /* 20vw → 22vw（ほんの少し大きく） */
}

.top_menu {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  position: absolute;
  left: 4vw;
  top: 24.5vw;
  /* 23vw → 24.5vw（ロゴの移動に合わせて1.5vw下げる） */
  width: auto;
  justify-content: flex-start;
  z-index: 2;
  border: 0px solid red;
}

.top_menu p {
  font-size: 3.2vw;
  font-weight: 400;
  /* SP版のみ：文字を少し太く（600→400に調整） */
  line-height: 1.4em;
  color: white;
  /* 縦配置メニュー専用：ホワイト */
  z-index: 2;
  margin: 0;
  padding: 0 0 1.2em 0;
  border: 0px solid #1f2121;
}

.top_menu p:last-child {
  padding-bottom: 0;
}

.top_menu p a {
  color: white;
  /* 縦配置メニュー専用：ホワイト */
}

.top_menu p a:hover {
  color: #232429;
  /* 縦配置メニュー：統一ベース文字色 */
  transition: color 0.3s ease;
}

/* ===========================================
   🎯 水平メニュー（切り替え用スタイル）- SP版
   =========================================== */
/* 
使用方法：
- 縦配置（デフォルト）：<div class="top_menu">
- 水平配置：<div class="top_menu horizontal">
*/
.top_menu.horizontal {
  display: flex;
  /* 水平配置 */
  flex-direction: row;
  flex-wrap: nowrap;
  /* 一列表示を強制 */
  position: absolute;
  /* 通常の配置に戻す */
  right: 4vw;
  /* 右端から4vwの余白で右揃え */
  top: calc(4vw + 5vw + 4.3vw);
  /* ロゴの新しい位置に合わせて調整 */
  width: auto;
  /* 内容に応じた幅 */
  justify-content: flex-end;
  /* 右揃え */
  align-items: center;
  z-index: 2;
  gap: 3vw;
  /* 間隔を少し狭めて一列に収める */
}

.top_menu.horizontal p {
  font-size: 2.8vw;
  /* フォントサイズを小さくして収める */
  font-weight: 400;
  /* SP版のみ：文字を少し太く（600→400に調整） */
  line-height: 1.2em;
  /* 行間を詰める */
  color: #232429;
  /* 統一ベース文字色 */
  z-index: 2;
  margin: 0;
  padding: 0;
  /* 水平配置では下部パディング不要 */
  border: 0px solid #1f2121;
  white-space: nowrap;
  /* テキストの折り返し防止 */
  flex-shrink: 0;
  /* 要素の縮小を防止 */
}

.top_menu.horizontal p a {
  color: #232429;
  /* 統一ベース文字色 */
  text-decoration: none;
  transition: color 0.3s ease;
}

.top_menu.horizontal p a:hover {
  color: #cccccc;
  /* 水平配置メニュー：ライトグレー */
  transition: color 0.3s ease;
}

.icn_insta {
  position: absolute;
  bottom: 2em;
  right: 2.5em;
  box-sizing: border-box;
  margin: 0;
  padding: 1em 0 0 0;
  width: 5vw;
  z-index: 999999;
}

/* 旧言語切り替え（コメントアウト）
.lang_menu{
    position: absolute;
    top:0;
    right: 0;
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	width: 24vw;
	z-index: 99999999;
	background-color: rgba(0, 0, 0, 0.03);
}

.lang_menu p{
	color: $color-base;
	box-sizing: border-box;
	text-align: center;
	padding: .3em 1em .4em 1em;
	font-size: $font-xs;
	letter-spacing: $xs-letter;
	line-height: $xs-line;
	width: 12vw;
	background-color: $color-white;
	transition: all 0.3s ease;
}
.lang_menu  p{
	background-color: $color-white;
	color: $color-base;
}
.lang_menu  p.on{
	background-color: $color-base;
	color: $color-white;
}
*/
/* ONLINE STORE ボタン（SP版） - 言語切り替えボタンと同じスタイル */
.online-store-btn {
  position: fixed;
  top: 2vw;
  right: 21vw;
  /* 言語切り替えボタンとの適切な間隔に調整 */
  z-index: 1000;
  /* 背景オーバーレイ(1999)・ドロワー(2000)より下に配置 */
  background-color: white;
  border-radius: 1em;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  transition: all 0.3s ease;
}
.online-store-btn:hover {
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
}

.online-store-link {
  display: flex;
  align-items: center;
  gap: 0.3em;
  background-color: transparent;
  /* 背景を透明に（親要素の背景を使用） */
  color: #232429;
  border: none;
  border-radius: 0;
  /* ボタン自体の角丸を削除 */
  padding: 0.5em 0.8em;
  font-size: 2.8vw;
  font-family: inherit;
  text-decoration: none;
  transition: all 0.3s ease;
  width: 100%;
  justify-content: flex-start;
  /* space-betweenからflex-startに変更して高さを調整 */
  min-height: 1.6em;
  /* 言語切り替えボタンより少し高く調整 */
}
.online-store-link:hover {
  background-color: rgba(0, 0, 0, 0.05);
  text-decoration: none;
  color: #232429;
}
.online-store-link .material-symbols-outlined {
  font-size: 1.4em;
  font-variation-settings: "FILL" 0, "wght" 300, "GRAD" 0, "opsz" 24;
}
.online-store-link .online-store-text {
  font-weight: 500;
  letter-spacing: -0.02em;
}

/* 新しい言語切り替えドロップダウン（SP版） - 融合デザイン */
.lang-dropdown {
  position: fixed;
  top: 2vw;
  right: 2vw;
  z-index: 1000;
  /* 背景オーバーレイ(1999)・ドロワー(2000)より下に配置 */
  background-color: white;
  border-radius: 1em;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  transition: all 0.3s ease;
}
.lang-dropdown:hover {
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
}
.lang-dropdown.active {
  border-radius: 1em 1em 1em 1em;
  /* 展開時も角丸を維持 */
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
}

.lang-dropdown-btn {
  display: flex;
  align-items: center;
  gap: 0.3em;
  background-color: transparent;
  /* 背景を透明に（親要素の背景を使用） */
  color: #232429;
  border: none;
  border-radius: 0;
  /* ボタン自体の角丸を削除 */
  padding: 0.5em 0.8em;
  font-size: 2.8vw;
  font-family: inherit;
  cursor: pointer;
  transition: all 0.3s ease;
  width: 100%;
  justify-content: space-between;
}
.lang-dropdown-btn:hover {
  background-color: rgba(0, 0, 0, 0.05);
}
.lang-dropdown-btn .material-symbols-outlined {
  font-size: 1.4em;
  font-variation-settings: "FILL" 0, "wght" 300, "GRAD" 0, "opsz" 24;
}
.lang-dropdown-btn .current-lang {
  font-weight: 500;
  letter-spacing: -0.02em;
}
.lang-dropdown-btn .dropdown-arrow {
  transition: transform 0.3s ease;
}
.lang-dropdown-btn.active .dropdown-arrow {
  transform: rotate(180deg);
}

.lang-dropdown-menu {
  max-height: 0;
  overflow: hidden;
  background-color: transparent;
  /* 親要素の背景を使用 */
  transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.lang-dropdown-menu.show {
  max-height: 600px;
  /* 十分に大きい値（言語数が増えても対応可能・SP版は大きめ） */
}

.lang-option {
  display: flex;
  align-items: center;
  gap: 0.5em;
  padding: 1em 1.2em;
  /* SP版は大きめのパディング（タップしやすく） */
  color: #232429;
  text-decoration: none;
  font-size: 2.8vw;
  font-weight: 500;
  letter-spacing: -0.02em;
  transition: background-color 0.2s ease;
  border-top: 1px solid rgba(0, 0, 0, 0.1);
  /* 区切り線を追加 */
  /* 最後の要素に下部パディングを追加 */
}
.lang-option:last-child {
  padding-bottom: 1.5em;
  /* 最後の要素のみ下部パディングを大きく（SP版は特に大きく） */
}
.lang-option:hover {
  background-color: rgba(0, 0, 0, 0.05);
}
.lang-option .material-symbols-outlined {
  font-size: 1.4em;
  font-variation-settings: "FILL" 0, "wght" 300, "GRAD" 0, "opsz" 24;
}

.top_copy {
  box-sizing: border-box;
  margin: 0;
  padding: 0 0 10em 0;
}

/* FLEX BOX 
========================================================================== */
.table {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  width: 100%;
  /* 	justify-content: flex-start; */
  justify-content: space-between;
  z-index: 2;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  border: 0px solid red;
}

.table2 {
  display: flex;
  flex-direction: row;
  /*flex-wrap: nowrap;*/
  flex-wrap: wrap;
  width: 100%;
  justify-content: flex-start;
  /*align-items: normal;*/
  align-items: stretch;
  z-index: 2;
  box-sizing: border-box;
  margin: 0 0 0 0;
  padding: 0 0 0 0;
  border: 0px solid red;
}

.table3 {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  width: 100%;
  justify-content: flex-start;
  z-index: 2;
  margin: 0 0 2.6em 0;
  padding: 0;
  padding: 0 0 0 0;
  border: 0px solid red;
  border-bottom: 1px solid #BBC3C4;
}

.table_img {
  box-sizing: border-box;
  margin: 0em 0 0 0;
  padding: 0 0 0 0;
  width: 100%;
  font-size: 3.6vw;
  line-height: 1.6em;
  color: #1f2121;
  border: 0px solid red;
  align-self: center;
}

.table_img2 {
  box-sizing: border-box;
  margin: 0;
  padding: 0 2em 0 0;
  width: 60%;
  font-size: 3.6vw;
  line-height: 1.6em;
  color: #1f2121;
}

.table_img3 {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  width: 40%;
  font-size: 3.6vw;
  line-height: 1.6em;
  color: #1f2121;
}

.table_img4 {
  box-sizing: border-box;
  margin: 0;
  padding: 0 1em 0 0;
  width: 50%;
  font-size: 3.6vw;
  line-height: 1.6em;
  color: #1f2121;
}

.table_img5 {
  box-sizing: border-box;
  margin: 0;
  padding: 0 0 0 1em;
  width: 50%;
  font-size: 3.6vw;
  line-height: 1.6em;
  color: #1f2121;
}

.table_img img,
.table_img2 img,
.table_img3 img,
.table_img4 img,
.table_img5 img {
  margin: 0;
  padding: 0;
  width: 100%;
}

.table_txt {
  box-sizing: border-box;
  margin: 0;
  padding: 0 0 0 0;
  width: 100%;
  font-size: 3.6vw;
  line-height: 1.6em;
  color: #1f2121;
  align-self: center;
}

.table_txt2 {
  box-sizing: border-box;
  margin: 0;
  padding: 0 0 0 0;
  width: 100%;
  font-size: 3.6vw;
  line-height: 1.6em;
  color: #1f2121;
  align-self: start;
}

.table .box_area {
  width: 45vw;
  height: 100%;
  box-sizing: border-box;
  padding: 0;
  margin: 0 0 1em 0;
}

/*
.table .box_area:nth-of-type(4n){
	margin: 0 0 0 0;
	border: 0px solid #1f2121
}
*/
.table .box {
  background-size: cover;
  width: 45vw;
  height: 45vw;
  box-sizing: border-box;
  padding: 0;
  margin: 0;
  border-radius: 3px;
  /*background-position: calc(50%) calc(50%);*/
  position: relative;
  background-size: cover;
}

.zoom {
  transition: all 0.2s ease-out;
  transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  will-change: transform;
}

a:hover .zoom {
  transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0.9);
}

a:hover .fade {
  animation: fade2 0.3s ease-in-out 0s forwards;
}

.table2 .tag {
  box-sizing: border-box;
  background-color: rgba(0, 0, 0, 0.03);
  width: max-content;
  padding: 0.6em 1em 0.6em 1em;
  margin: 0;
  margin-right: 0.5em;
  margin-bottom: 0.6em;
  /* 	color: white; */
  border-radius: 1px;
  font-size: 2.8vw;
  font-style: italic;
}

.detail_img_area {
  width: 100%;
  box-sizing: border-box;
}
.detail_img_area.main-images {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
  margin-left: 1em;
}
.detail_img_area.main-images::-webkit-scrollbar {
  display: none;
}
.detail_img_area.main-images .slide-item {
  flex: 0 0 80%;
  margin-right: 1em;
  position: relative;
  height: 80vw;
  border-radius: 8px;
  overflow: hidden;
  scroll-snap-align: start;
  background: #fff;
}
.detail_img_area.main-images .slide-item:only-child {
  flex: 0 0 calc(100% - 1em);
}
.detail_img_area.main-images .slide-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  aspect-ratio: 5/5.5;
}
.detail_img_area.main-images .slide-item .product-caption {
  position: absolute;
  left: 0.5em;
  right: 0.5em;
  bottom: 0.5em;
  background: rgba(255, 255, 255, 0.95);
  border-radius: 8px;
  padding: 0.7em;
  font-size: 3.2vw;
  color: #232429;
  line-height: 1.4;
  letter-spacing: -0.02em;
  text-align: center;
  opacity: 0;
  transform: translateY(10px);
  transition: all 0.3s;
  pointer-events: auto;
  cursor: pointer;
}
.detail_img_area.main-images .slide-item .product-caption.active {
  opacity: 1;
  transform: translateY(0);
}
.detail_img_area.main-images .slide-item .product-caption:active {
  background: rgba(255, 255, 255, 0.85);
  transform: translateY(0) scale(0.98);
}
.detail_img_area.main-images .slide-item img {
  transition: transform 0.2s ease;
}
.detail_img_area.main-images .slide-item img:active {
  transform: scale(0.98);
}

.detail_txt_area {
  width: 100%;
  box-sizing: border-box;
  margin: 3em 0 3em 0;
  padding: 0 5% 0 5%;
}

#variation_price {
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  box-sizing: border-box;
  width: 100%;
  align-items: stretch;
  font-size: 3.2vw;
  line-height: 1.6em;
  letter-spacing: 0.1em;
  border: 0px solid green;
  padding-bottom: 2em;
  font-weight: 400;
}

.hyou1 {
  width: 1.5em;
}

.hyou1b {
  width: calc(100% - 3.5em);
}

.hyou2 {
  width: 2.5em;
}

.hyou2b {
  width: calc(100% - 4.5em);
}

.hyou3 {
  width: 3.5em;
}

.hyou3b {
  width: calc(100% - 5.5em);
}

.hyou4 {
  width: 4.5em;
}

.hyou4b {
  width: calc(100% - 6.5em);
}

.hyou5 {
  width: 5.5em;
}

.hyou5b {
  width: calc(100% - 7.5em);
}

.hyou6 {
  width: 6.5em;
}

.hyou6b {
  width: calc(100% - 8.5em);
}

.hyou7 {
  width: 7.5em;
}

.hyou7b {
  width: calc(100% - 9.5em);
}

.hyou8 {
  width: 8.5em;
}

.hyou8b {
  width: calc(100% - 10.5em);
}

.hyou9 {
  width: 9.5em;
}

.hyou9b {
  width: calc(100% - 11.5em);
}

.hyou10 {
  width: 10.5em;
}

.hyou10b {
  width: calc(100% - 12.5em);
}

.hyou11 {
  width: 11.5em;
}

.hyou11b {
  width: calc(100% - 13.5em);
}

.hyou12 {
  width: 12.5em;
}

.hyou12b {
  width: calc(100% - 14.5em);
}

.hyou13 {
  width: 13.5em;
}

.hyou13b {
  width: calc(100% - 15.5em);
}

.hyou14 {
  width: 14.5em;
}

.hyou14b {
  width: calc(100% - 16.5em);
}

/* hyou1からhyou15までの商品名クラス - 柔軟なFlexbox対応 */
.hyou1, .hyou2, .hyou3, .hyou4, .hyou5, .hyou6, .hyou7, .hyou8, .hyou9, .hyou10, .hyou11, .hyou12, .hyou13, .hyou14, .hyou15 {
  flex: 0 1 auto;
  /* 内容に応じた幅、縮小可能 */
  min-width: 0;
  /* 改行を防ぐ */
  white-space: nowrap;
  /* 改行を防ぐ */
  overflow: visible;
  /* はみ出しを表示 */
  text-overflow: clip;
  /* 省略記号を無効化 */
  margin-right: 1em;
  /* 価格との間隔 */
}

/* hyou1bからhyou15bまでの価格クラス - 柔軟なFlexbox対応 */
.hyou1b, .hyou2b, .hyou3b, .hyou4b, .hyou5b, .hyou6b, .hyou7b, .hyou8b, .hyou9b, .hyou10b, .hyou11b, .hyou12b, .hyou13b, .hyou14b, .hyou15b {
  flex-shrink: 0;
  /* 縮小しない */
  margin-left: 0;
  /* 自動配置を解除 */
  text-align: right;
  /* 右揃え */
}

/* 価格表示コンテナのFlexbox設定 */
#variation_price {
  display: flex;
  flex-direction: column;
  gap: 0.5em;
}

/* 各価格行のFlexbox設定 */
.price-row {
  display: flex;
  align-items: center;
  width: 100%;
}

/* 強制的なスペース調整 - 全hyouクラス対応 */
#variation_price .hyou1, #variation_price .hyou2, #variation_price .hyou3, #variation_price .hyou4, #variation_price .hyou5, #variation_price .hyou6, #variation_price .hyou7, #variation_price .hyou8, #variation_price .hyou9, #variation_price .hyou10, #variation_price .hyou11, #variation_price .hyou12, #variation_price .hyou13, #variation_price .hyou14, #variation_price .hyou15 {
  margin-right: 2em !important;
  /* 価格との間隔を広げる */
  overflow: visible !important;
  /* はみ出しを表示 */
  text-overflow: clip !important;
  /* 省略記号を無効化 */
  width: auto !important;
  /* 固定幅を解除 */
  flex: 0 1 auto !important;
  /* Flexbox設定を強制適用 */
  max-width: 60% !important;
  /* 商品名の最大幅を制限して価格を揃える */
}

/* 価格クラスの強制上書き */
#variation_price .hyou1b, #variation_price .hyou2b, #variation_price .hyou3b, #variation_price .hyou4b, #variation_price .hyou5b, #variation_price .hyou6b, #variation_price .hyou7b, #variation_price .hyou8b, #variation_price .hyou9b, #variation_price .hyou10b, #variation_price .hyou11b, #variation_price .hyou12b, #variation_price .hyou13b, #variation_price .hyou14b, #variation_price .hyou15b {
  width: auto !important;
  /* 固定幅を解除 */
  flex-shrink: 0 !important;
  /* 縮小しない */
  margin-left: 0 !important;
  /* 自動配置を解除 */
  text-align: right !important;
  /* 右揃え */
}

#variation_price .colon {
  display: none !important;
  /* コロンを完全に非表示 */
}

.colon {
  box-sizing: border-box;
  margin: 0;
  padding: 0 0.3em 0 0.3em;
  width: fit-content;
  text-align: center;
  border: 0px solid green;
  /* スペース調整のため最小幅を設定 */
  min-width: 0.5em;
  max-width: 1em;
}

.shopify_lay1 {
  width: 100%;
  margin: 20px 0;
  display: flex;
  justify-content: center;
}

.inquiry-container {
  width: 60%;
  text-align: center;
}

.inquiry-link {
  display: inline-block;
  width: 100%;
  background-color: #1f2121;
  color: white;
  padding: 15px 0;
  text-decoration: none;
  font-size: 4.4vw;
  font-weight: 400;
  cursor: pointer;
  transition: background-color 0.3s;
  text-align: center;
}

.inquiry-link:hover {
  background-color: #353838;
}

.add_cart {
  background-color: #1f2121;
  color: white;
  font-size: 4.4vw;
  /* 統合SCSSシステムのフォントサイズ */
  text-align: center;
  box-sizing: border-box;
  margin: 1em auto 1em auto;
  padding: 1em 1em 1em 1em;
  width: 70%;
  border-radius: 3px;
}

.table .detail_img_area .box {
  /*background-size: cover;*/
  width: 100%;
  height: auto;
  box-sizing: border-box;
  padding: 0;
  margin: 0;
  /*background-position: calc(50%) calc(50%);*/
  border: 0px solid green;
}

.table .detail_img_area .box3 {
  background-size: cover;
  width: 100%;
  height: 100vw;
  box-sizing: border-box;
  padding: 0;
  margin: 0;
  border-radius: 0px;
}

.table .detail_img_area .cap {
  width: 100%;
  box-sizing: border-box;
  margin: 0;
  padding: 0.3em 10% 1.5em 10%;
  font-size: 3.2vw;
  border: 0px solid red;
}

.table .detail_img_area .cap.s2 {
  margin-bottom: 0em !important;
}

.table .detail_img_area .box2 {
  width: 80%;
  height: auto;
  box-sizing: border-box;
  padding: 0;
  margin: 0 auto 0 auto;
  border: 0px solid green;
}

.detail_title {
  box-sizing: border-box;
  font-size: 4.4vw;
  /* 統合SCSSシステムのフォントサイズ（一段階縮小） */
  font-weight: 400;
  /* 太さを一段太く */
  color: #232429;
  /* 統合SCSSシステムのカラー */
  line-height: 1.6em;
  letter-spacing: 0.05em;
  padding-bottom: 1.3em;
}

.detail_price {
  box-sizing: border-box;
  font-size: 3.2vw;
  /* 統合SCSSシステムのフォントサイズ */
  color: #232429;
  /* 統合SCSSシステムのカラー */
  font-weight: 400;
  line-height: 1.6em;
  letter-spacing: 0.1em;
  padding-bottom: 2em;
}

.detail_honbun {
  box-sizing: border-box;
  font-size: 3.6vw;
  /* 統合SCSSシステムのフォントサイズ */
  color: #232429;
  /* 統合SCSSシステムのカラー */
  font-weight: 400;
  line-height: 1.8em;
  letter-spacing: 0.1em;
  padding-bottom: 1.5em;
  text-align: justify;
  text-justify: inter-character;
  text-align-last: left;
}

.detail_koumoku {
  width: 30%;
  box-sizing: border-box;
  font-size: 3.2vw;
  /* 統合SCSSシステムのフォントサイズ */
  color: #232429;
  /* 統合SCSSシステムのカラー */
  line-height: 1.6em;
  letter-spacing: 0.1em;
  padding-bottom: 0.5em;
  font-weight: 400;
}

.detail_spec {
  width: 70%;
  box-sizing: border-box;
  font-size: 3.2vw;
  /* 統合SCSSシステムのフォントサイズ */
  color: #232429;
  /* 統合SCSSシステムのカラー */
  line-height: 1.6em;
  letter-spacing: 0.1em;
  padding-bottom: 0.5em;
  font-weight: 400;
  text-align: justify;
  text-justify: inter-character;
  text-align-last: left;
}

.detail_spec ul {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  padding-left: 1em;
  font-size: 3.2vw;
  /* 統合SCSSシステムのフォントサイズ */
  color: #232429;
  /* 統合SCSSシステムのカラー */
  line-height: 1.6em;
  border: 0px solid red;
}

.detail_spec li {
  font-size: 3.2vw;
  /* 統合SCSSシステムのフォントサイズ */
  color: #232429;
  /* 統合SCSSシステムのカラー */
  line-height: 1.6em;
  border: 0px solid green;
  text-align: justify;
  text-justify: inter-character;
  text-align-last: left;
}

.detail_spec strong {
  font-weight: 400 !important;
  letter-spacing: -0.02em !important;
  color: #222222 !important;
}

.detail_spec .uline {
  text-decoration: underline !important;
}

.detail_spec a {
  color: #00669b !important;
}

.detail_midashi {
  box-sizing: border-box;
  font-size: 3.6vw;
  /* 統合SCSSシステムのフォントサイズ */
  color: #232429;
  /* 統合SCSSシステムのカラー */
  line-height: 1.6em;
  letter-spacing: 0.1em;
  padding-top: 2em;
  padding-bottom: 1em;
  font-style: italic;
  font-weight: 400;
}

.detail_brand {
  box-sizing: border-box;
  font-size: 3.6vw;
  /* 統合SCSSシステムのフォントサイズ */
  color: #232429;
  /* 統合SCSSシステムのカラー */
  line-height: 1.8em;
  letter-spacing: 0.1em;
  padding-bottom: 0.5em;
  font-weight: 400;
}

/* #contents
========================================================================== */
#page_contents {
  box-sizing: border-box;
  padding: 0 5% 0 5%;
  margin: 8em 0 5em 0;
  width: 100%;
  font-size: 3.6vw;
  line-height: 1.6em;
  text-align: left;
  border: 0px solid #1f2121;
  opacity: 0;
  animation: fade1 0.5s ease-in-out 0.9s forwards;
  z-index: 0;
}

#page_contents2 {
  box-sizing: border-box;
  padding: 0 5% 0 5%;
  margin: 8em 0 5em 0;
  width: 100%;
  font-size: 3.6vw;
  line-height: 1.8em;
  text-align: left;
  border: 0px solid #1f2121;
  opacity: 0;
  animation: fade1 0.5s ease-in-out 0.9s forwards;
  z-index: 0;
}

#page_contents H2,
#page_contents2 h2 {
  font-size: 5.6vw;
  line-height: 1.6em;
  text-align: center;
  margin: 0;
  padding: 0 0 1em 0;
}

#page_contents H2.t2,
#page_contents2 h2.t2 {
  text-align: left;
}

#page_contents H3,
#page_contents2 h3 {
  font-size: 4.4vw;
  line-height: 1.6em;
  text-align: center;
  margin: 0;
  padding: 2.5em 0 1em 0;
}

#page_contents h4,
#page_contents2 h4 {
  font-size: 3.6vw;
  line-height: 1.6em;
  text-align: left;
  margin: 0;
  padding: 1.5em 0 1em 0;
}

#page_contents H4.t2,
#page_contents2 h4.t2 {
  text-align: center;
}

#page_contents H4.t3,
#page_contents2 h4.t3 {
  text-align: center;
  padding: 0em 0 2em 0 !important;
}

#page_contents h5,
#page_contents2 h5 {
  font-size: 3.6vw;
  line-height: 1.6em;
  text-align: left;
  margin: 0;
  padding: 1.5em 0 1em 0;
}

#page_contents p.date,
#page_contents2 p.date {
  font-size: 2.8vw;
  line-height: 1em;
  text-align: left;
  margin: 0;
  padding: 0em 0 5em 0;
  color: grey;
}

#page_contents img,
#page_contents2 img {
  box-sizing: border-box;
  margin: 0;
  padding: 1em 0% 1em 0%;
  width: 100%;
  height: auto;
  text-align: center;
}

/* #new_arrivals 
========================================================================== */
#new_arrivals {
  box-sizing: border-box;
  margin: 5em 3% 5em 3%;
  padding: 0;
  border: 0px solid #1f2121;
}

#new_arrivals .table {
  padding-top: 1em;
}

#new_arrivals h3 {
  font-size: 4.4vw;
  line-height: 1.6em;
  text-align: center;
  margin: 0;
  padding: 0;
}

#new_arrivals p {
  font-size: 3.6vw;
  margin: 0 auto 0 auto;
  padding: 1em 0 0 0;
  line-height: 2em;
  text-align: left;
  width: 86%;
}

#new_arrivals p.pname {
  font-size: 3.2vw;
  line-height: 1.6em;
  letter-spacing: 0.02em;
  margin: 0;
  padding: 0.5em 0 0 0;
  width: 100%;
}

#new_arrivals p.price {
  font-size: 2.8vw;
  line-height: 1.2em;
  letter-spacing: -0.02em;
  margin: 0;
  padding: 0;
  width: 100%;
  color: #0eb2e1;
  /* 価格文字色をブックマーク色に統一 */
}

#new_arrivals .btn_1 {
  box-sizing: border-box;
  line-height: 1em;
  background-color: #1f2121;
  color: white;
  font-size: 2.8vw;
  text-align: center;
  box-sizing: border-box;
  margin: 1.5em auto;
  padding: 2em 1em 2em 1em;
  width: 86%;
  border-radius: 3px;
}

/* #new_arrivals 
========================================================================== */
section.products {
  margin: 3em 3% 1em 3%;
  /* SP版：下部マージンを5em→1emに削減（関連商品スライダーとの余白最適化） */
  padding: 0;
  border: 0px solid red;
  opacity: 0;
  animation: fmove1 0.5s ease-in-out 0.5s forwards;
}

section.products .table {
  padding-top: 1em;
}

section.products h3 {
  font-weight: 400;
  font-size: 7.2vw;
  line-height: 1.4em;
  text-align: center;
  letter-spacing: 0.08em;
  margin: 0;
  padding: 0;
}

section.products p {
  font-size: 3.6vw;
  text-align: center;
  margin: 0 auto 0 auto;
  padding: 2em 0 0 0;
  line-height: 1.6em;
  text-align: left;
  width: 90%;
}

section.products .tag2 {
  box-sizing: border-box;
  /* 	background-color: rgba(0, 0, 0, 0.03); */
  background-color: white;
  width: 80px;
  text-align: center;
  padding: 0.3em 1em 0.3em 1em;
  margin: 0;
  margin-right: 0.5em;
  margin-bottom: 0.6em;
  /* 	color: white; */
  border-radius: 1px;
  font-size: 2.8vw;
  position: absolute;
  top: 1em;
  left: 1em;
  font-style: italic;
  border: 0px solid green;
}

section.products p.pname {
  font-size: 3.2vw;
  line-height: 1.6em;
  letter-spacing: 0.02em;
  margin: 0;
  padding: 0.5em 0 0 0;
  width: 100%;
}

section.products p.price {
  font-size: 2.8vw;
  line-height: 1.2em;
  letter-spacing: -0.02em;
  margin: 0;
  padding: 0;
  width: 100%;
  color: #0eb2e1;
  /* 価格文字色をブックマーク色に統一 */
}

section.products .btn_1 {
  background-color: #1f2121;
  color: white;
  font-size: 2.8vw;
  text-align: center;
  box-sizing: border-box;
  margin: 1em auto 5em auto;
  padding: 1em 1em 1em 1em;
  width: 86%;
  border-radius: 3px;
}

/* #header2
========================================================================== */
.bg {
  box-sizing: border-box;
  width: 100%;
  height: auto;
  background-color: #afc0c7;
  /* E6ECED */
  background: linear-gradient(to bottom, #E5F0F5 15%, #FFF 35%);
  background-repeat: no-repeat;
}

#header2 {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 20em;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  border: 0px solid red;
}

#header2 .info_logo {
  position: absolute;
  top: 15px;
  left: 15px;
  width: 30vw;
  opacity: 0;
  animation: fade1 0.5s ease-in-out 0.9s forwards;
  z-index: 3;
}

/* #information 
========================================================================== */
#information {
  margin: 0em 0% 5em 0%;
  padding: 0;
  border: 0px solid green;
}

#information.main {
  margin: 0em 0% 5em 0% !important;
}

#information .tag {
  font-size: 2.8vw;
  line-height: 1em;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  width: 26vw;
  padding: 0.3em 0.8em 0.3em 0.8em;
  background-color: #afc0c7;
  /*color: #66777C;*/
  color: white;
  text-align: center;
  position: absolute;
  left: 1em;
  top: 3em;
  border: 0px solid #e7eded;
  /* 	background-color: rgba(0, 0, 0, 0.3); */
}

#information .tag2 {
  font-size: 2.8vw;
  line-height: 1em;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  width: 15vw;
  padding: 0.3em 1em 0.3em 1em;
  background-color: white;
  /*color: #66777C;*/
  text-align: center;
  position: absolute;
  left: 1em;
  top: 1em;
  border: 0px solid #e7eded;
  font-style: italic;
  /* 	background-color: rgba(0, 0, 0, 0.3); */
}

#information h2 {
  font-size: 4.4vw;
  line-height: 1.6em;
  text-align: center;
  margin: 0;
  padding: 0;
}

#information h3 {
  font-size: 3.6vw;
  text-align: center;
  margin: 0;
  padding: 1em 0 0 0;
  line-height: 1.6em;
}

#information p {
  font-size: 3.6vw;
  text-align: left;
  margin: 0;
  padding: 1em 0 0 0;
  line-height: 1.6em;
}

#information p.pname {
  font-size: 3.2vw;
  margin: 0;
  padding: 1em 0 0 0;
}

#information p.date {
  font-size: 2.8vw;
  margin: 0;
  padding: 0.5em 0 0 0;
}

#information .info_mainbanner {
  opacity: 0;
  animation: fade1 0.5s ease-in-out 0.5s forwards;
}

#information .info_menu {
  display: flex;
  /*flex-direction: column;*/
  flex-direction: row;
  flex-wrap: nowrap;
  position: relative;
  width: 100%;
  justify-content: center;
  z-index: 999999;
  border: 0px solid red;
  box-sizing: border-box;
  margin: 4em 0 2.5em 0;
  padding: 5em 0 0 0;
  opacity: 0;
  animation: fmove1 0.5s ease-in-out 0.5s forwards;
}

#information .info_menu p {
  font-size: 2.8vw;
  line-height: 1em;
  color: #1f2121;
  z-index: 3;
  margin: 0 0 0 0;
  padding: 0 1em 0 1em;
  border: 0px solid #1f2121;
}

#information .info_menu p a {
  color: #1f2121;
  border-bottom: 0px solid #1f2121;
  box-sizing: border-box;
  margin: 0;
  padding: 0 0 0.4em 0.2em;
}

#information .info_menu p a:hover {
  animation: link2 0.2s ease-in-out 0s forwards;
}

#information .info_menu p a.on {
  color: #87A7AF;
  border-bottom: 2px solid #1f2121;
}

/*Main Banner*/
#information .box_area100 {
  box-sizing: border-box !important;
  width: 100%;
  height: 300px;
  box-sizing: border-box;
  padding: 0;
  /*margin: 0 1.2em 1em 1.2em;*/
  margin: 1em 0 0em 0;
  border: 0px solid blue;
  position: relative;
}

#information .box_area100.main {
  margin: 0em 0 0.5em 0 !important;
}

#information .box_area100 .info_area_img {
  width: 50% !important;
  height: 300px;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  border: 0px solid red;
}

#information .box_area100 .info_area_img_b {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  height: 300px;
  width: 100%;
  background-size: cover;
  background-position: right center;
}

#information .box_area100 .info_area {
  width: 50% !important;
  box-sizing: border-box;
  border: 0px solid #1f2121;
  border: 0px solid green;
  padding-top: 2em;
  padding-right: 1em;
  padding-left: 0.5em;
  align-self: center;
  height: 300px;
  overflow-y: hidden;
  overflow-y: scroll;
}

#information .box_area100 h3.lead {
  text-align: left;
  font-size: 3.2vw;
  margin: 0;
  padding: 0 0 0.5em 0.5em;
  line-height: 1.6em;
  border: 0px solid #1f2121;
}

#information .box_area100 p.date {
  text-align: left;
  font-size: 4.4vw;
  margin: 0;
  padding: 0 0 0.5em 0.4em;
  line-height: 1.6em;
  letter-spacing: 0.15em;
  color: #202221;
  border: 0px solid #1f2121;
}

#information .box_area100 p.lead {
  text-align: center;
  font-size: 2.8vw;
  line-height: 1.6em;
  margin: 0;
  padding: 0;
  padding-bottom: 2em;
  border: 0px solid #1f2121;
}

#information .box_area100 p.honbun {
  box-sizing: border-box;
  text-align: left;
  font-size: 3.6vw;
  margin: 0;
  padding: 0 0 0 0.5em;
}

/*Default Thumbnail*/
#information .def_Thumbnail {
  box-sizing: border-box;
  margin: 0 auto 0 auto;
  padding: 3em 0.5em 0 0.5em;
  width: 100%;
  border: 0px solid red;
  opacity: 0;
  animation: fmove1 0.5s ease-in-out 0.5s forwards;
}

#information .box_area30 {
  /*width: 45% !important;*/
  width: 100% !important;
  /*height: 290px;*/
  height: auto;
  box-sizing: border-box;
  margin: 0em auto 0em auto;
  padding: 0;
  border: 0px solid red;
  /*background-color: #f8f8f8;*/
  background-color: #ffffff;
  position: relative;
  border-radius: 3px;
  overflow-y: hidden;
  overflow-y: scroll;
}

#information .box_area30 .box {
  background-size: cover;
  background-position: center;
  width: calc(100% - 2em);
  /*height: 140px;*/
  height: 300px;
  box-sizing: border-box;
  padding: 0 0 0 0;
  margin: 6em auto 0 auto;
  position: relative;
  mix-blend-mode: multiply;
  border: 0px solid green;
}

#information .box_area30 p.pname {
  padding: 1em 1em 2em 1em;
  font-size: 4.4vw;
}

#information .box_area30 p.date {
  position: absolute;
  left: 11.5em;
  top: 2.5em;
  color: gray;
}

#information .box_area30 h3.lead_t {
  text-align: left;
  font-size: 4.4vw;
  margin: 0;
  padding: 1em 0.8em 0 0.8em;
  line-height: 1.6em;
  border: 0px solid #1f2121;
}

#information .box_area30 p.date_t {
  text-align: left;
  font-size: 7vw;
  margin: 0;
  padding: 0em 0.5em 0 0.5em;
  line-height: 1.6em;
  letter-spacing: 0.15em;
  color: #202221;
  border: 0px solid green;
}

#information .box_area30 p.lead_t {
  text-align: left;
  font-size: 3.6vw;
  line-height: 1.6em;
  margin: 0;
  padding: 0.5em 1em 0 1em;
  border: 0px solid #1f2121;
}

#information .box_area30 p.honbun_t {
  box-sizing: border-box;
  text-align: left;
  font-size: 3.6vw;
  margin: 0;
  padding: 0.5em 1em 2em 1em;
}

/*Info Thumbnail*/
#information .box_area30t {
  /*width: 45% !important;*/
  width: 100% !important;
  /*height: 290px;*/
  height: auto;
  box-sizing: border-box;
  margin: 0em auto 0em auto;
  padding: 7em 1em 0em 1em;
  border: 0px solid #1f2121;
  vertical-align: middle;
  /*background-color: #f8f8f8;*/
  background-color: #ffffff;
  border-radius: 3px;
  position: relative;
  align-self: center;
  overflow-y: hidden;
  overflow-y: scroll;
}

#information .box_area30t h3 {
  text-align: left;
  /*font-size: $font-sm;*/
  font-size: 4.4vw;
  margin: 0;
  padding: 0;
  padding-bottom: 1em;
}

#information .box_area30t p.lead {
  text-align: left;
  /*font-size: $font-xs;*/
  font-size: 3.6vw;
  margin: 0;
  padding: 0;
  padding-bottom: 3em;
  border: 0px solid red;
}

#information .box_area30t p.honbun {
  text-align: center;
  /*font-size: $font-base;*/
  font-size: 3.6vw;
  margin: 0;
  padding: 0;
}

#information .box_area30t p.date {
  position: absolute;
  left: 11.5em;
  top: 2.5em;
  color: gray;
}

/*View More button*/
#information .btn_1 {
  box-sizing: border-box;
  line-height: 1em;
  background-color: #1f2121;
  color: white;
  font-size: 2.8vw;
  text-align: center;
  box-sizing: border-box;
  margin: 1.5em auto;
  padding: 2em 1em 2em 1em;
  width: 86%;
  border-radius: 3px;
}

hr.news_thumbnail {
  box-sizing: border-box;
  padding: 0em 0 0em 0;
  margin: 0;
  border: 0px solid red;
  border-top: 1px solid #e6e6e6;
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  line-height: 0em;
}

/* #product_header
========================================================================== */
@keyframes link1 {
  0% {
    color: white;
  }
  100% {
    color: #1f2121;
  }
}
@keyframes link2 {
  0% {
    color: #1f2121;
  }
  100% {
    color: #87A7AF;
  }
}
@keyframes fade1 {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes fade2 {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0.6;
  }
}
@keyframes mask {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
    transform: translate(30px, 0px);
  }
}
@keyframes fmove1 {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
    transform: translate(0px, -30px);
  }
}
#product_header {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  height: 150px;
  background-color: #afc0c7;
  /* E6ECED */
  background: linear-gradient(to bottom, #E5F0F5 30%, #FFF);
  border: 0px solid green;
}

#product_header .logo {
  position: absolute;
  top: 15px;
  left: 15px;
  width: 30vw;
  opacity: 0;
  animation: fade1 0.5s ease-in-out 0.8s forwards;
}

#product_header .flex {
  display: flex;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: center;
  padding-right: 3%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  gap: 0.8em;
  padding-bottom: 0.5em;
}

#product_header .menu1_area {
  position: absolute;
  top: 70px;
  left: 0px;
  opacity: 0;
  animation: mask 0.5s ease-in-out 0.5s forwards;
}

#product_header .menu1_area_b {
  position: absolute;
  border: 0px solid red;
  top: 70px;
  left: 27px;
  animation: fade1 0.5s ease-in-out 0s forwards;
}

#product_header .menu2_area {
  position: absolute;
  top: 12vw;
  left: 0px;
  opacity: 0;
  animation: mask 0.5s ease-in-out 0.5s forwards;
  display: none;
  width: 100%;
  box-sizing: border-box;
  padding: 0.5em 0;
}

#product_header .menu2_area_b {
  position: absolute;
  top: 12vw;
  left: 0px;
  opacity: 0;
  animation: mask 0.5s ease-in-out 0.1s forwards;
  display: none;
  width: 100%;
  box-sizing: border-box;
  padding: 0.5em 0;
}

#product_header .flex .menu {
  font-size: 3.6vw;
  padding: 0 0.7em 0 0;
  color: #999;
  white-space: normal;
  width: auto;
  min-width: 5em;
  text-align: center;
  margin-right: 0.5em;
  box-sizing: border-box;
}

#product_header .flex .on {
  color: #87A7AF;
  border-bottom: 2px solid #1f2121;
}

#product_header .flex .menu_on {
  font-size: 3.6vw;
  padding: 0 0.7em 0 0;
  color: #000;
  font-weight: 400;
  white-space: normal;
  width: auto;
  min-width: 5em;
  text-align: center;
  margin-right: 0.5em;
  box-sizing: border-box;
}

#product_header .cart_area {
  position: absolute;
  top: 5%;
  left: 14%;
  opacity: 0;
  /*animation: fade1 .5s ease-in-out .8s forwards;*/
}

.lang_menu {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  width: 24vw;
  z-index: 2;
  /* ブックマークドロワー背景（1999）より下に配置 */
  background-color: rgba(0, 0, 0, 0.03);
  position: absolute;
  top: 0%;
  right: 0%;
  opacity: 0;
  animation: fade1 0.5s ease-in-out 0.8s forwards;
}

/* 旧product_header言語切り替え（コメントアウト）
#product_header .lang_menu p{
	box-sizing: border-box;
	text-align: center;
	padding: .3em 1em .2em 1em;
	font-size: 3vw;
	letter-spacing: .1em;
	width: 12vw;
	background-color: $color-white;
    color: $color-base;

}
#product_header .lang_menu  p.on{
	background-color: $color-base;
    color: $color-white;
}
*/
/* product_header用の新しい言語切り替えドロップダウン（SP版） */
#product_header .lang-dropdown {
  position: fixed;
  top: 2vw;
  right: 2vw;
  z-index: 1000;
  /* 背景オーバーレイ(1999)・ドロワー(2000)より下に配置 */
}

#product_header .lang-dropdown-btn {
  display: flex;
  align-items: center;
  gap: 0.5em;
  background-color: white;
  color: #232429;
  border: none;
  border-radius: 1.2em;
  padding: 0.8em 1.2em;
  font-size: 2.8vw;
  font-family: inherit;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}
#product_header .lang-dropdown-btn:hover {
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
  transform: translateY(-1px);
}
#product_header .lang-dropdown-btn .material-symbols-outlined {
  font-size: 1.4em;
  font-variation-settings: "FILL" 0, "wght" 300, "GRAD" 0, "opsz" 24;
}
#product_header .lang-dropdown-btn .current-lang {
  font-weight: 500;
  letter-spacing: -0.02em;
}
#product_header .lang-dropdown-btn .dropdown-arrow {
  transition: transform 0.3s ease;
}
#product_header .lang-dropdown-btn.active .dropdown-arrow {
  transform: rotate(180deg);
}

#product_header .lang-dropdown-menu {
  position: absolute;
  top: 100%;
  right: 0;
  background-color: white;
  border-radius: 1.2em;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px);
  transition: all 0.3s ease;
  min-width: 100%;
}
#product_header .lang-dropdown-menu.show {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

#product_header .lang-option {
  display: flex;
  align-items: center;
  gap: 0.5em;
  padding: 0.8em 1.2em;
  color: #232429;
  text-decoration: none;
  font-size: 2.8vw;
  font-weight: 500;
  letter-spacing: -0.02em;
  transition: background-color 0.2s ease;
}
#product_header .lang-option:hover {
  background-color: rgba(35, 36, 41, 0.05);
}
#product_header .lang-option .material-symbols-outlined {
  font-size: 1.4em;
  font-variation-settings: "FILL" 0, "wght" 300, "GRAD" 0, "opsz" 24;
}

#product_header .icon_cart {
  width: 2.3vw;
}

#product_header .icon_cart2 {
  font-size: 2.8vw;
  box-sizing: border-box;
  padding-right: 1em;
}

#product_header .sep {
  font-size: 2.8vw;
  box-sizing: border-box;
  margin-right: 1.5em;
  margin-left: 1em;
  border-left: 1px solid #1f2121;
  height: 1.6em;
}

/* #footer 
========================================================================== */
#footer {
  margin: 4em 3% 6em 3%;
  padding: 0;
  border: 0px solid #1f2121;
}
#footer.scroll-fade-in, #footer.scroll-fade-in-delay-1, #footer.scroll-fade-in-delay-2, #footer.scroll-fade-in-delay-3, #footer.scroll-fade-in-thumb-1, #footer.scroll-fade-in-thumb-2, #footer.scroll-fade-in-thumb-3, #footer.scroll-fade-in-thumb-4, #footer.scroll-fade-in-thumb-5, #footer.scroll-fade-in-thumb-6, #footer.scroll-fade-in-thumb-7, #footer.scroll-fade-in-thumb-8, #footer.scroll-fade-in-thumb-9, #footer.scroll-fade-in-thumb-10, #footer.scroll-fade-in-thumb-11, #footer.scroll-fade-in-thumb-12, #footer.slide-scroll-fade, #footer.card-scroll-fade {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94), transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
#footer.scroll-fade-in.visible, #footer.visible.scroll-fade-in-delay-1, #footer.visible.scroll-fade-in-delay-2, #footer.visible.scroll-fade-in-delay-3, #footer.visible.scroll-fade-in-thumb-1, #footer.visible.scroll-fade-in-thumb-2, #footer.visible.scroll-fade-in-thumb-3, #footer.visible.scroll-fade-in-thumb-4, #footer.visible.scroll-fade-in-thumb-5, #footer.visible.scroll-fade-in-thumb-6, #footer.visible.scroll-fade-in-thumb-7, #footer.visible.scroll-fade-in-thumb-8, #footer.visible.scroll-fade-in-thumb-9, #footer.visible.scroll-fade-in-thumb-10, #footer.visible.scroll-fade-in-thumb-11, #footer.visible.scroll-fade-in-thumb-12, #footer.visible.slide-scroll-fade, #footer.visible.card-scroll-fade {
  opacity: 1;
  transform: translateY(0);
}

#footer .footer-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2em;
  max-width: 100%;
}

#footer .footer-brand {
  display: flex;
  align-items: center;
  gap: 4vw;
  justify-content: center;
}

#footer .footer-logo {
  display: block;
  width: 22vw;
  max-width: 120px;
  min-width: 80px;
  transition: opacity 0.3s ease;
}
#footer .footer-logo:hover {
  opacity: 0.7;
}
#footer .footer-logo img {
  width: 100%;
  height: auto;
  display: block;
}

#footer .footer-social {
  display: block;
  width: 5.2vw;
  max-width: 24px;
  min-width: 20px;
  transition: opacity 0.3s ease;
}
#footer .footer-social:hover {
  opacity: 0.7;
}
#footer .footer-social img {
  width: 100%;
  height: auto;
  display: block;
}

#footer .footer-nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 0 1em;
  row-gap: 0.6em;
  max-width: 100%;
}

#footer .footer-nav-link {
  font-size: 2.8vw;
  color: #232429;
  text-decoration: none;
  letter-spacing: 0.08em;
  line-height: 1.6;
  white-space: nowrap;
  transition: opacity 0.3s ease, color 0.3s ease;
  position: relative;
  padding: 0.3em 0;
}
#footer .footer-nav-link:hover {
  opacity: 0.7;
}
#footer .footer-nav-link:not(:last-child)::after {
  content: "｜";
  position: absolute;
  right: -0.5em;
  color: rgba(35, 36, 41, 0.3);
  font-weight: 300;
}

#footer .footer-copyright {
  text-align: center;
  font-size: 2.8vw;
  color: rgba(35, 36, 41, 0.6);
  margin: 0;
  padding-top: 1em;
  padding-bottom: 2em;
  letter-spacing: 0.08em;
}
#footer .footer-copyright.scroll-fade-in-delay-3 {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94), transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
#footer .footer-copyright.scroll-fade-in-delay-3.visible {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.6s;
}

#page_contents2 .btn {
  width: fit-content;
  border: 0px solid red;
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

#page_contents2 .btn p {
  width: 100%;
  text-align: center;
  box-sizing: border-box;
  background-color: #1f2121;
  font-size: 3.6vw;
  color: white;
  margin: 0;
  padding: 0.3em 1em 0.3em 1em;
  border-radius: 3px;
}

/* FORM
========================================================================== */
.wpcf7 {
  box-sizing: border-box;
  margin: 3em 0 0 0;
  padding: 0;
  border: 0px solid red;
}

.wpcf7 h4 {
  box-sizing: border-box;
  margin: 0 0 0 0 !important;
  padding: 3em 0 0 0 !important;
  line-height: 1em;
  border: 0px solid green;
}

.wpcf7 p {
  box-sizing: border-box;
  margin: 0;
  padding: 0 0 0 0;
  border: 0px solid red;
}

.wpcf7 P.f1 {
  box-sizing: border-box;
  margin: 0;
  padding: 1.6em 0 0.5em 0;
  border: 0px solid red;
}

.wpcf7 P.f2 {
  box-sizing: border-box;
  margin: 0 0 0em 0;
  width: 40%;
}

.wpcf7-list-item {
  box-sizing: border-box;
  margin: 0;
  padding: 0 1em 0 0;
}

input[type=submit] {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border: 0px solid gray;
  width: 100%;
  font-size: 4.4vw;
  line-height: 1.1em;
  padding: 1.5em 0 1.5em 0;
  text-align: center;
  margin-bottom: 2em;
  margin-top: 3em;
  box-sizing: border-box;
  background-color: black;
  color: white;
  border-radius: 5px;
}

input[type=button] {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border: 0px solid gray;
  width: 100%;
  font-size: 4.4vw;
  line-height: 1.1em;
  padding: 1em 0 1em 0;
  text-align: center;
  margin-bottom: 20px;
  box-sizing: border-box;
  background-color: black;
  color: white;
  border-radius: 5px;
}

.wpcf7-form-control-wrap {
  display: block;
}

.wpcf7-form-control.wpcf7-radio {
  display: flex;
}

.wpcf7-form-control.wpcf7-checkbox {
  display: flex;
  flex-wrap: wrap;
}

span.wpcf7-list-item {
  position: relative;
  /*flex-basis: 50%;*/
  /*width: 100%;
  &.first*/
  margin: 0.5em 0 1em 0 !important;
}

.wpcf7-list-item-label {
  /*項目の色や文字サイズ*/
  color: #333;
  cursor: pointer;
  font-size: 3.2vw;
}

input[type=radio] {
  position: absolute;
  opacity: 0;
}

input[type=radio] + .wpcf7-list-item-label:before {
  content: "";
  background: #fff;
  border-radius: 60px;
  border: 1px solid #888888;
  display: inline-block;
  width: 20px;
  height: 20px;
  position: relative;
  top: -0.2em;
  margin-right: 0.5em;
  vertical-align: middle;
  cursor: pointer;
  text-align: center;
  -webkit-transition: all 250ms ease;
  transition: all 250ms ease;
}

input[type=radio]:checked + .wpcf7-list-item-label:before {
  background-color: dodgerblue;
  box-shadow: inset 0 0 0 2px #fff;
}

input[type=checkbox] {
  position: absolute;
  opacity: 0;
  /*既存のチェックボックスを非表示に*/
}

input[type=checkbox] + .wpcf7-list-item-label:before {
  /*チェックボックスの枠*/
  content: "";
  border: 1px solid #333;
  display: inline-block;
  width: 20px;
  height: 20px;
  position: relative;
  top: -3px;
  margin-right: 0.5em;
  vertical-align: middle;
  cursor: pointer;
  text-align: center;
}

input[type=checkbox]:checked + .wpcf7-list-item-label:after {
  /*チェックアイコン*/
  content: "";
  display: block;
  position: absolute;
  top: -2px;
  left: 3px;
  width: 20px;
  height: 20px;
  background: url("../images/check-solid.svg") no-repeat center;
  background-size: contain;
}

input[type=text] {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border: 1px solid gray;
  width: 100%;
  font-size: 93%;
  line-height: 1.1em;
  padding: 10px 30px 10px 10px;
  margin-bottom: 20px;
  box-sizing: border-box;
  border-radius: 3px;
}

input[type=email] {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border: 1px solid gray;
  width: 100%;
  font-size: 93%;
  line-height: 1.1em;
  padding: 10px 30px 10px 10px;
  margin-bottom: 20px;
  box-sizing: border-box;
  border-radius: 3px;
}

input[type=date] {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border: 1px solid gray;
  width: 100%;
  font-size: 93%;
  line-height: 1.1em;
  padding: 10px 30px 10px 10px;
  margin-bottom: 20px;
  box-sizing: border-box;
  border-radius: 3px;
}

textarea {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border: 1px solid gray;
  width: 100%;
  font-size: 93%;
  line-height: 1.1em;
  padding: 10px 30px 10px 10px;
  margin-bottom: 0px;
  box-sizing: border-box;
  height: 10em;
  border-radius: 3px;
}

select::-ms-expand {
  display: none;
}

select {
  width: 100%;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  margin-bottom: 20px;
  padding: 12px 30px 12px 10px;
  font-size: 93%;
  line-height: 1.1em;
  border-radius: 3px;
  border: 1px solid gray;
  background-image: url(../images/icon_arrow.svg);
  background-repeat: no-repeat;
  background-size: 12px 10px;
  background-position: right 10px center;
  background-color: #FFFFFF;
}

/* swiper
--------------------------- */
.lazyload, .lazyloading {
  opacity: 0;
}

.lazyloaded {
  opacity: 1;
  transition: opacity 1000ms;
}

.swiper-slide {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  background-size: cover;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-position: 50% 50%;
  width: 100%;
  height: 50vh;
  image-rendering: crisp-edges;
}

#page_contents2 .swiper-container_shops {
  box-sizing: border-box;
  margin: 0 0 2em 0;
  padding: 0;
  width: 100%;
  height: 50vh;
  position: relative;
  border: 0px solid red;
}

#page_contents2 .info_menu {
  display: flex;
  /*flex-direction: column;*/
  flex-direction: row;
  flex-wrap: nowrap;
  position: relative;
  width: 100%;
  justify-content: center;
  z-index: 999999;
  border: 0px solid red;
  box-sizing: border-box;
  margin: 0em 0 2.5em 0;
  padding: 3em 0 0 0;
  opacity: 0;
  animation: fmove1 0.5s ease-in-out 0.5s forwards;
}

#page_contents2 .info_menu p {
  font-size: 2.8vw;
  line-height: 1em;
  color: #1f2121;
  z-index: 3;
  margin: 0 0 0 0;
  padding: 0 1em 0 1em;
  border: 0px solid #1f2121;
}

#page_contents2 .info_menu p a {
  color: #1f2121;
  border-bottom: 0px solid #1f2121;
  box-sizing: border-box;
  margin: 0;
  padding: 0 0 0.4em 0.2em;
}

#page_contents2 .info_menu p a:hover {
  animation: link2 0.2s ease-in-out 0s forwards;
}

#page_contents2 .info_menu p a.on {
  color: #87A7AF;
  border-bottom: 2px solid #1f2121;
}

.preview_icn {
  box-sizing: border-box;
  margin: 0;
  padding: 0.5em 1em 0.5em 1em;
  text-align: center;
  background-color: burlywood;
  color: black;
  font-size: 1.1vw;
  width: fit-content;
  position: fixed;
  top: 0;
  left: 45%;
  z-index: 99999999999;
  display: none;
  visibility: hidden;
}

/* スライド切り替え時のテキスト表示を防止 */
.koma_slider_item img,
.koma_slider_image img {
  font-size: 0 !important;
  color: transparent !important;
  text-indent: -9999px;
  overflow: hidden;
}

body {
  background-color: white;
  height: 100%;
}

.br-pc {
  display: block;
}

.br-sp {
  display: none;
}

.smt_only {
  visibility: hidden;
  display: none;
}

.bg_mangetsu {
  background-image: url(../images/mangetsu_0.jpg);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  height: 50vh;
  width: 100%;
  position: relative;
  left: 0;
  top: -2em;
  z-index: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}

.bg_sosan250428 {
  background-image: url(../images/sosan250428_banner.jpg);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  height: 50vh;
  width: 100%;
  position: relative;
  left: 0;
  top: -2em;
  z-index: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}

.bg_kouseiin {
  background-image: url(../images/kouseiin_5.jpg);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  height: 50vh;
  width: 100%;
  position: relative;
  left: 0;
  top: -2em;
  z-index: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}

.bg_sosan202504 {
  background-image: url(../images/sosan202504b.jpg);
  background-size: cover;
  background-position: center right;
  background-repeat: no-repeat;
  height: 50vh;
  width: 100%;
  position: relative;
  left: 0;
  top: -2em;
  z-index: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}

.bg_sinzow {
  background-image: url(../images/sinzow_1.jpg);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  height: 50vh;
  width: 100%;
  position: relative;
  left: 0;
  top: -2em;
  z-index: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}

.bg_nishio {
  background-image: url(../images/nishio_1b.jpg);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  height: 50vh;
  width: 100%;
  position: relative;
  left: 0;
  top: -2em;
  z-index: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* DETAIL_CONTENTS
--------------------------- */
#information .box_area30 h2.ex_title {
  font-size: 5.6vw;
  line-height: 1.6em;
  box-sizing: border-box;
  padding: 0;
  margin: 0;
  padding-top: 1em;
  padding-bottom: 0.5em;
  font-weight: 400;
  letter-spacing: 0.08em;
}
#information .box_area30 .ex_lead {
  font-size: 3.6vw;
  line-height: 1.6em;
  letter-spacing: 0.02em;
  box-sizing: border-box;
  padding: 0 0 0 0;
  margin: 0 auto 0 auto;
  width: 90%;
  padding-bottom: 1em;
  color: #1f2121;
}
#information .box_area30 .ex_name {
  font-size: 3vw;
  line-height: 1.6em;
  box-sizing: border-box;
  padding: 0;
  margin: 0;
  padding-bottom: 1em;
}
#information .box_area30 .date22 {
  font-size: 5.6vw;
  line-height: 1.6em;
  letter-spacing: 0.08em;
  color: black;
  box-sizing: border-box;
  padding: 0 0 1em 0;
  margin: 0;
  text-align: center;
}
#information .box_area30 P .week {
  font-size: 2.8vw;
  line-height: 1.2em;
  letter-spacing: -0.02em;
  color: black;
  box-sizing: border-box;
  padding-left: 3px;
}

#DETAIL_CONTENTS {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  position: relative;
  top: -2em;
}
#DETAIL_CONTENTS p {
  font-size: 3.2vw;
  text-align: center;
}
#DETAIL_CONTENTS .map {
  font-size: 3.2vw;
  line-height: 2em;
  box-sizing: border-box;
  padding: 5em 0 2em 0;
  margin: 0 auto 0 auto;
  width: 80%;
  text-align: left;
  display: flex;
  justify-content: center;
  align-items: top;
  flex-wrap: wrap;
}
#DETAIL_CONTENTS .map .txt {
  width: 100%;
  padding-bottom: 2em;
}
#DETAIL_CONTENTS .map .txt .t1 {
  font-size: 5.6vw;
  color: black;
  letter-spacing: 0.15em;
  box-sizing: border-box;
  padding: 0 0 0.5em 0;
  margin: 0;
  line-height: 1.6em;
  text-align: left;
}
#DETAIL_CONTENTS .map .txt .t2 {
  font-size: 3.2vw;
  color: black;
  letter-spacing: 0.15em;
  box-sizing: border-box;
  padding: 0;
  margin: 0;
  line-height: 1.6em;
  text-align: left;
}
#DETAIL_CONTENTS .map .img {
  width: 100%;
}
#DETAIL_CONTENTS .map .img img {
  box-sizing: border-box;
  margin: 0 auto 0 auto;
  width: 100%;
  text-align: left;
}
#DETAIL_CONTENTS h2 {
  font-size: 7.2vw;
  line-height: 1.6em;
  box-sizing: border-box;
  padding: 0;
  margin: 0;
  padding-top: 2em;
  padding-bottom: 0.5em;
  font-weight: 400;
  letter-spacing: 0.08em;
  text-align: center;
}
#DETAIL_CONTENTS h3 {
  font-size: 5.6vw;
  line-height: 1.6em;
  box-sizing: border-box;
  padding: 0;
  margin: 0;
  padding-top: 2em;
  padding-bottom: 0.5em;
}
#DETAIL_CONTENTS h4.txt1,
#DETAIL_CONTENTS .txt1 {
  font-size: 4.4vw;
  line-height: 1.6em;
  box-sizing: border-box;
  padding: 0;
  margin: 0;
  padding-bottom: 1em;
}
#DETAIL_CONTENTS h2.ex_title {
  font-size: 7.2vw;
  line-height: 1.6em;
  box-sizing: border-box;
  padding: 0;
  margin: 0;
  padding-top: 2em;
  padding-bottom: 0.5em;
  font-weight: 400;
  letter-spacing: 0.08em;
}
#DETAIL_CONTENTS .ex_name {
  font-size: 4.4vw;
  line-height: 1.6em;
  box-sizing: border-box;
  padding: 0;
  margin: 0;
  padding-bottom: 1em;
}
#DETAIL_CONTENTS .ex_archive {
  font-size: 7.2vw;
  line-height: 1.6em;
  box-sizing: border-box;
  padding: 0;
  margin: 0;
  padding-top: 2em;
  padding-bottom: 0.5em;
  font-weight: 400;
  letter-spacing: 0.08em;
}
#DETAIL_CONTENTS .txt2 {
  font-size: 2.8vw;
  line-height: 1.6em;
  box-sizing: border-box;
  padding: 0;
  margin: 0;
  padding-bottom: 0.5em;
}
#DETAIL_CONTENTS .txt3 {
  font-size: 4.4vw;
  line-height: 1.6em;
  box-sizing: border-box;
  padding: 0;
  margin: 0;
  padding-bottom: 0.5em;
}
#DETAIL_CONTENTS .txt4 {
  font-size: 3.2vw;
  line-height: 2em;
  box-sizing: border-box;
  padding: 3em 0 2em 0;
  margin: 0 auto 0 auto;
  width: 80%;
  text-align: left;
}
#DETAIL_CONTENTS .txt4 a {
  color: #333333;
  text-decoration: underline;
}
#DETAIL_CONTENTS .txt5 {
  font-size: 2.8vw;
  line-height: 1.6em;
  box-sizing: border-box;
  padding: 0;
  text-align: center;
}
#DETAIL_CONTENTS .txt6 {
  font-size: 3vw;
  line-height: 1.6em;
  box-sizing: border-box;
  margin: 0;
  padding: 0 0 4em 0;
  text-align: left;
}
#DETAIL_CONTENTS .txt7 {
  font-size: 2.8vw;
  line-height: 1.6em;
  box-sizing: border-box;
  margin: 0;
  padding: 0 0 4em 0;
  text-align: left;
}
#DETAIL_CONTENTS .txt8 {
  font-size: 3.6vw;
  line-height: 1.6em;
  box-sizing: border-box;
  margin: 0;
  padding: 0 0 0em 0;
  text-align: left;
}
#DETAIL_CONTENTS .txt9 {
  font-size: 3.2vw;
  line-height: 2em;
  box-sizing: border-box;
  padding: 1em 0 1em 0;
  margin: 0 auto 0 auto;
  width: 80%;
  text-align: left;
  font-style: italic;
}
#DETAIL_CONTENTS .thumb_area {
  box-sizing: border-box;
  padding: 0;
  margin: 0 0 0 0;
}
#DETAIL_CONTENTS .thumb_s .thumb_img {
  height: 10em !important;
}
#DETAIL_CONTENTS .thumb_area .thumb_s {
  width: 45%;
  box-sizing: border-box;
  margin: 0 0 2em 0;
  padding: 0;
  margin-right: 0;
  position: relative;
}
#DETAIL_CONTENTS .thumb_area .thumb_m {
  width: 50%;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  margin-right: 0;
}
#DETAIL_CONTENTS .thumb_area .thumb_m2 {
  width: 100%;
  box-sizing: border-box;
  margin: 0;
  padding: 0 0 2em 0;
  margin-right: 0;
}
#DETAIL_CONTENTS .thumb_area .thumb_m2 .thumb_img {
  height: 220px;
}
#DETAIL_CONTENTS .thumb_area .thumb_b {
  width: 100%;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  margin-right: 0;
}
#DETAIL_CONTENTS .thumb_area .thumb_s:nth-of-type(3n) {
  margin-right: 0;
}
#DETAIL_CONTENTS .thumb_area .img {
  width: 100%;
}
#DETAIL_CONTENTS .thumb_area .txt {
  width: 100%;
  box-sizing: border-box;
  padding: 1em 0 0 0;
  margin: 0 auto 0 auto;
  width: 80%;
  margin: 0;
}
#DETAIL_CONTENTS h3.title1,
#DETAIL_CONTENTS P.title1 {
  font-size: 4.4vw;
  color: black;
  letter-spacing: 0.15em;
  box-sizing: border-box;
  padding: 0;
  margin: 0;
  line-height: 1.6em;
}
#DETAIL_CONTENTS .title1b {
  font-size: 2.8vw;
  color: black;
  box-sizing: border-box;
  padding-left: 10px;
}
#DETAIL_CONTENTS P.title2 {
  font-size: 3.2vw;
  color: black;
  box-sizing: border-box;
  padding: 1em 0 1em 0;
  margin: 0;
  line-height: 1.6em;
}
#DETAIL_CONTENTS P.title3 {
  font-size: 3.2vw;
  color: black;
  box-sizing: border-box;
  text-align: left;
  line-height: 1.6em;
  padding: 0 0 0 0;
  margin: 0;
}
#DETAIL_CONTENTS P.date {
  font-size: 5.6vw;
  color: black;
  letter-spacing: 0.15em;
  box-sizing: border-box;
  padding: 0 0 0 0;
  margin: 0;
  line-height: 1.6em;
  text-align: center;
}
#DETAIL_CONTENTS P .week {
  font-size: 2.8vw;
  color: black;
  box-sizing: border-box;
  padding-left: 3px;
}
#DETAIL_CONTENTS .thumb_area_af {
  box-sizing: border-box;
  padding: 0;
  margin: 2em 0 2em 0;
}
#DETAIL_CONTENTS .reset_thumb_area_af {
  box-sizing: border-box;
  padding: 0 !important;
  margin: 0.5em 0 3.5em 0 !important;
}
#DETAIL_CONTENTS .thumb_area_af .thumb_s {
  width: 47%;
  box-sizing: border-box;
  margin: 0 0 1em 0;
  padding: 0;
  margin-right: 0;
}
#DETAIL_CONTENTS .thumb_area_af .thumb_m {
  width: 50%;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  margin-right: 0;
}
#DETAIL_CONTENTS .thumb_area_af .thumb_b {
  width: 100%;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  margin-right: 0;
}
#DETAIL_CONTENTS .thumb_area_af .thumb_s:nth-of-type(3n) {
  margin-right: 0;
}
#DETAIL_CONTENTS .thumb_area_af .img {
  width: 100%;
}
#DETAIL_CONTENTS .thumb_area_af .txt {
  width: 100%;
  box-sizing: border-box;
  padding: 2em 0 0 0;
  margin: 0;
}
#DETAIL_CONTENTS h3.af {
  font-size: 4.4vw;
  line-height: 1.6em;
  box-sizing: border-box;
  padding: 0;
  margin: 0;
  padding-top: 0em;
  padding-bottom: 0;
  font-weight: 400;
  letter-spacing: 0.08em;
  text-align: left;
}
#DETAIL_CONTENTS .thumb_area_af P.date2 {
  font-size: 3.2vw !important;
  color: black !important;
  letter-spacing: 0.1em !important;
  box-sizing: border-box !important;
  padding: 0 0 0 0 !important;
  margin: 0 !important;
  line-height: 1.6em !important;
}
#DETAIL_CONTENTS .thumb_area_af .txt1 {
  font-size: 3.6vw !important;
  line-height: 1.6em !important;
  box-sizing: border-box !important;
  padding: 1em 0 0 0 !important;
  margin: 0 !important;
  padding-bottom: 0.5em !important;
  letter-spacing: -0.02em !important;
}
#DETAIL_CONTENTS .thumb_area_af .txt2 {
  font-size: 3vw !important;
  line-height: 1.6em !important;
  box-sizing: border-box !important;
  padding: 0 !important;
  margin: 0 !important;
  padding-bottom: 0.5em !important;
  letter-spacing: -0.02em !important;
}

.img_tate {
  width: 100%;
  height: auto;
  display: block;
  margin: 0 auto;
}

/* ========================================================================== */
/* Sfera Original Slider Engine - SP版
/* ========================================================================== */
.sfera-slider {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.sfera-slider.sfera-slider-initialized .sfera-slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}
.sfera-slider.sfera-slider-initialized .sfera-slide.active {
  z-index: 2;
}

.sfera-slider-container {
  position: relative;
  width: 100%;
  height: 100%;
}

.sfera-slider-track {
  position: relative;
  width: 100%;
  height: 100%;
}

.sfera-slide {
  position: relative;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 3s ease-in-out;
}
.sfera-slide:first-child {
  opacity: 1;
}

.sfera-slide-link {
  display: block;
  width: 100%;
  height: 100%;
  text-decoration: none;
  color: inherit;
  position: relative;
}

.sfera-slide-image-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.sfera-slide-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: transform 0.3s ease;
  filter: brightness(0.85);
}
.sfera-slide-link:active .sfera-slide-image {
  transform: scale(1.02);
}

.sfera-slide-text {
  position: absolute;
  bottom: 20px;
  left: 4vw;
  right: auto;
  text-align: left;
  color: white;
  z-index: 2;
  opacity: 0;
  transform: translateY(12px);
  transition: none;
}
.sfera-slide-text h3 {
  font-size: 3.2vw;
  line-height: 1.6em;
  letter-spacing: 0.02em;
  margin: 0;
  padding: 0;
  background: none;
  backdrop-filter: none;
  border-radius: 0;
  display: block;
  font-weight: 400;
  text-shadow: none;
  max-width: none;
  /* 90% → none（横幅制限を削除） */
  /* 改行・省略設定を削除 - 商品名を全て表示 */
}

.sfera-slider-nav {
  display: none;
}

.sfera-nav-dots {
  display: none;
}

.sfera-nav-dot {
  display: none;
}

.sfera-nav-progress {
  display: none;
}

.sfera-progress-bar {
  display: none;
}

@keyframes sferaSlideInSP {
  0% {
    opacity: 0;
    transform: translateY(15px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes sferaSlideOutSP {
  0% {
    opacity: 1;
    transform: translateY(0);
  }
  100% {
    opacity: 0;
    transform: translateY(-15px);
  }
}
.sfera-slide.active .sfera-slide-text {
  animation: sferaSlideInSP 2s ease-out 0s forwards;
}

.sfera-slide.exiting .sfera-slide-text {
  animation: sferaSlideOutSP 1.5s ease-in forwards;
}

.sfera-slide-link:active .sfera-slide-text h3 {
  transform: translateY(-2px);
}

/* ========================================================================== */
/* 🎬 ページ読み込み初期アニメーションシステム - SP版
/* ========================================================================== */
.page-load-animation .main_slide_area {
  transition: opacity 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  will-change: opacity;
}
.page-load-animation .top_logo,
.page-load-animation .top_menu,
.page-load-animation .main_slide_right,
.page-load-animation .lang_menu,
.page-load-animation .icn_insta {
  transition: opacity 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94), transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  will-change: opacity, transform;
}

.initial-hidden {
  opacity: 0;
  transform: translateY(20px);
}

.slider-initial-hidden {
  opacity: 0;
}

.animation-visible {
  opacity: 1 !important;
  transform: translateY(0) !important;
}

.slider-animation-visible {
  opacity: 1 !important;
}

.main_slide_area,
.top_logo,
.top_menu,
.main_slide_right,
.lang_menu,
.icn_insta {
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  transform-origin: center;
}

/* ========================================================================== */
/* 🛒 EC商品一覧ページ（ec_index.php）専用スタイル - SP版
/* ========================================================================== */
/* ページ全体の設定 */
body#ec-index {
  background: #FFF;
  /* シンプルな白背景 */
  margin: 0;
  padding: 0;
  min-height: 100vh;
}

/* ec_index.php: 共通ヘッダークラス使用のため.ec-headerスタイル削除 */
/* ec_index.php: 共通ヘッダークラス（.top_logo, .top_menu, .lang_menu）を使用するため個別スタイル削除 */
/* メインコンテンツエリア */
.ec-main-content {
  margin-top: 100px;
  /* ヘッダー分のマージン（SP版は100pxで適切） */
  min-height: calc(100vh - 100px);
  padding: 4vw 0 4vw 0;
  /* 上 右(0) 下 左(0) - テスト用 */
}

/* ページタイトルエリア */
.ec-index-header {
  text-align: center;
  margin-bottom: 6vw;
}
.ec-index-header .ec-index-title {
  font-family: "Cormorant Garamond", serif;
  font-size: 5.6vw;
  font-weight: 400;
  color: #232429;
  margin-bottom: 2vw;
}
.ec-index-header .ec-index-subtitle {
  font-size: 3.2vw;
  color: #666;
  margin-bottom: 4vw;
}

/* 2ペイン構造（SP版では縦積み） */
.ec-index-layout {
  display: flex;
  flex-direction: column;
  gap: 4vw;
  margin: 0 4vw;
  /* 左右4vw - ヘッダーロゴと揃える */
}

/* 左ペイン（簡易ブックマーク）- SP版では左端から80vwドロワー */
.ec-preview-pane {
  position: fixed;
  top: 0;
  left: 0;
  width: 80vw;
  height: 100vh;
  /* 100% → 100vh で確実にビューポート高さに */
  background: white;
  z-index: 9999999999;
  /* 言語切り替えボタン（99999999）より確実に上に表示 */
  transform: translateX(-100%);
  transition: transform 0.3s ease;
  display: none;
  /* 初期状態では非表示 */
  /* リサイズ時の位置調整を強制 */
  will-change: transform;
}
.ec-preview-pane.active {
  display: block;
  transform: translateX(0);
  /* リサイズ時の位置確定 */
  top: 0 !important;
  left: 0 !important;
}

.ec-preview-placeholder {
  display: block;
  /* プレースホルダーを表示 */
  text-align: center;
  padding: 2rem;
  color: #666;
}

/* ブックマークリスト - SP版 */
.ec-bookmark-list {
  display: none;
  /* 初期状態では非表示 */
}
.ec-bookmark-list.active {
  display: block;
  animation: fadeInPreview 0.3s ease-in-out;
}

/* 高さ制限とスクロール（商品が多い場合のみ） - SP版 */
.ec-preview-pane.active {
  /* max-height削除 - JavaScriptで動的計算 */
  overflow-y: auto;
  /* 必要な場合のみスクロール */
}

/* ブックマーク商品アイテム - SP版 */
.ec-bookmark-item {
  background: white;
  border-radius: 8px;
  margin-bottom: 1rem;
  overflow: hidden;
  position: relative;
  animation: slideInBookmark 0.3s ease-out;
}
.ec-bookmark-item:last-child {
  margin-bottom: 0;
}

/* ブックマーク商品リンク - SP版 */
.ec-bookmark-link {
  display: block;
  text-decoration: none;
  color: inherit;
  transition: transform 0.2s ease;
}
.ec-bookmark-link:hover {
  transform: translateY(-2px);
  text-decoration: none;
  color: inherit;
}
.ec-bookmark-link:hover .ec-bookmark-image {
  transform: scale(1.02);
}
.ec-bookmark-link:focus {
  outline: 2px solid #0eb2e1;
  outline-offset: 2px;
}

@keyframes slideInBookmark {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
/* ブックマーク商品画像コンテナ - SP版 */
.ec-bookmark-image-container {
  position: relative;
  width: 100%;
  height: 200px;
  /* 150px → 200px に拡大 */
  overflow: hidden;
}

.ec-bookmark-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ブックマーク商品の削除ボタン - SP版（黒丸に白×） */
.ec-bookmark-remove {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 28px;
  /* SP版は少し大きく */
  height: 28px;
  background: rgba(0, 0, 0, 0.7);
  color: white;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  transition: background-color 0.3s ease;
  z-index: 10;
  /* リンクより上に表示 */
  /* Material Symbols Outlinedアイコンのスタイル */
}
.ec-bookmark-remove:hover {
  background: rgba(0, 0, 0, 0.9);
}
.ec-bookmark-remove .material-symbols-outlined {
  font-size: 16px;
  /* SP版は少し大きく */
  font-variation-settings: "FILL" 0, "wght" 300, "GRAD" 0, "opsz" 24;
  /* 絶対配置で完全中央配置 */
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  line-height: 1;
}

/* ブックマーク商品のLIMITEDバッジ - SP版 */
.ec-bookmark-limited-badge {
  position: absolute;
  top: 8px;
  left: 8px;
  background: #ff4444;
  color: white;
  font-size: 2.8vw;
  font-weight: 500;
  padding: 0.25rem 0.5rem;
  border-radius: 4px;
  z-index: 10;
}

/* ブックマーク商品のテキストエリア - SP版 */
.ec-bookmark-text-area {
  padding: 4vw;
  /* detail-bookmark-text-areaと統一（vw単位） */
}

.ec-bookmark-title {
  font-size: 3.6vw;
  /* $font-sm → $font-base に拡大 */
  font-weight: 500;
  color: #232429;
  margin-bottom: 0.75rem;
  /* 0.5rem → 0.75rem に拡大 */
  line-height: 1.4;
}

.ec-bookmark-price {
  font-size: 3.6vw;
  /* $font-sm → $font-base に拡大 */
  color: #666;
  margin-bottom: 1rem;
  /* 0.75rem → 1rem に拡大 */
}

.ec-bookmark-description {
  font-size: 3.2vw;
  /* 統合SCSSシステムのフォントサイズ */
  color: #666;
  line-height: 1.6;
  margin-bottom: 1.25rem;
  /* ec-bookmark-descriptionと同じmargin */
  max-height: 6.4em;
  /* SP版：4行表示 */
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  /* SP版：4行表示 */
  -webkit-box-orient: vertical;
  text-align: justify;
  text-justify: inter-character;
  text-align-last: left;
}

/* ユーザブックマークではec-bookmark-actionsは不要（削除済み） - SP版 */
/* プレビューペインの閉じるボタン（SP版） */
.ec-preview-close {
  position: absolute;
  top: 2vw;
  right: 2vw;
  width: 6vw;
  height: 6vw;
  background: rgba(255, 255, 255, 0.9);
  color: #333;
  border: 1px solid rgba(0, 0, 0, 0.2);
  border-radius: 50%;
  cursor: pointer;
  transition: all 0.3s ease;
  /* Material Symbols Outlinedアイコンのスタイル */
}
.ec-preview-close:hover {
  background: white;
  border-color: rgba(0, 0, 0, 0.3);
  transform: scale(1.05);
}
.ec-preview-close .material-symbols-outlined {
  font-size: 3.5vw;
  font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 24;
  /* 絶対配置で完全中央配置 */
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  line-height: 1;
}

/* 右ペイン（商品一覧）- SP版では下部配置 */
.ec-products-pane {
  width: 100%;
  order: 2;
}

/* フィルターエリア（SP版） */
.ec-filter-area {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 4vw;
  padding: 3vw;
  background: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(10px);
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}
.ec-filter-area .ec-filter-info {
  flex: 1;
}
.ec-filter-area .ec-filter-info #filterStatus {
  font-size: 3.2vw;
  color: #232429;
  font-weight: 500;
}
.ec-filter-area .ec-filter-info #productCount {
  font-size: 3.2vw;
  color: #666;
}
.ec-filter-area .ec-filter-btn {
  display: flex;
  align-items: center;
  gap: 2vw;
  padding: 2.5vw 4vw;
  background: #232429;
  color: white;
  border: none;
  border-radius: 4px;
  font-size: 3.2vw;
  cursor: pointer;
  transition: background-color 0.3s ease;
}
.ec-filter-area .ec-filter-btn:hover {
  background: #1a1d21;
}
.ec-filter-area .ec-filter-btn.active {
  background: #0eb2e1;
  /* ブックマーク基調色 */
}
.ec-filter-area .ec-filter-btn .material-symbols-outlined {
  font-family: "Material Symbols Outlined" !important;
  font-variation-settings: "FILL" 0, "wght" 300, "GRAD" 0, "opsz" 24 !important;
}

/* フィルターコントロール（旧スタイル - 使用されていない場合は削除予定） */
.ec-filter-controls {
  display: flex;
  flex-direction: column;
  gap: 2vw;
  margin-bottom: 4vw;
  padding: 3vw;
  background: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(10px);
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

/* ===========================================
   🏷️ 洗練されたフィルター状態表示（SP版）
   =========================================== */
/* フィルター状態表示のデフォルト状態（SP版） */
.filter-status-default {
  display: flex;
  align-items: center;
  gap: 1vw;
  color: #666;
  font-size: 3.2vw;
}
.filter-status-default .filter-icon {
  font-size: 1.2em;
  color: #888;
  display: flex;
  align-items: center;
  line-height: 1;
}
.filter-status-default .filter-text {
  font-weight: 400;
  display: flex;
  align-items: center;
  line-height: 1.2;
}

/* フィルター状態タグコンテナ（SP版） */
.filter-status-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 1vw;
  align-items: center;
}

/* 個別フィルタータグ（SP版） */
.filter-tag {
  display: inline-flex;
  align-items: center;
  gap: 1vw;
  background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
  border: 1px solid #dee2e6;
  border-radius: 20px;
  padding: 1.5vw 2.5vw;
  font-size: 2.8vw;
  color: #495057;
  font-weight: 500;
  transition: all 0.2s ease;
}
.filter-tag:hover {
  background: linear-gradient(135deg, #e9ecef 0%, #dee2e6 100%);
  border-color: #adb5bd;
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
.filter-tag .filter-icon {
  font-size: 1.1em;
  color: #6c757d;
  line-height: 1;
  display: flex;
  align-items: center;
}
.filter-tag .filter-text {
  line-height: 1.2;
  white-space: nowrap;
  display: flex;
  align-items: center;
}

/* カテゴリタグの特別なスタイル（SP版） */
.filter-tag-category {
  background: linear-gradient(135deg, #fafcfd 0%, #d4e8f1 100%);
  border-color: #add4e4;
  color: #3e96bb;
}
.filter-tag-category .filter-icon {
  color: #74b6d1;
}
.filter-tag-category:hover {
  background: linear-gradient(135deg, #d4e8f1 0%, #add4e4 100%);
  border-color: #74b6d1;
}

/* 素材タグの特別なスタイル（SP版） */
.filter-tag-material {
  /* ボタン基調色に統一 */
  background: linear-gradient(135deg, #fafcfd 0%, #d4e8f1 100%);
  border-color: #add4e4;
  color: #3e96bb;
}
.filter-tag-material .filter-icon {
  color: #74b6d1;
}
.filter-tag-material:hover {
  background: linear-gradient(135deg, #d4e8f1 0%, #add4e4 100%);
  border-color: #74b6d1;
}

/* 用途タグの特別なスタイル（SP版） */
.filter-tag-usage {
  /* ボタン基調色に統一 */
  background: linear-gradient(135deg, #fafcfd 0%, #d4e8f1 100%);
  border-color: #add4e4;
  color: #3e96bb;
}
.filter-tag-usage .filter-icon {
  color: #74b6d1;
}
.filter-tag-usage:hover {
  background: linear-gradient(135deg, #d4e8f1 0%, #add4e4 100%);
  border-color: #74b6d1;
}

/* LIMITED商品タグの特別なスタイル（SP版） */
.filter-tag-limited {
  /* ボタン基調色に統一 */
  background: linear-gradient(135deg, #fafcfd 0%, #d4e8f1 100%);
  border-color: #add4e4;
  color: #3e96bb;
}
.filter-tag-limited .filter-icon {
  color: #74b6d1;
}
.filter-tag-limited:hover {
  background: linear-gradient(135deg, #d4e8f1 0%, #add4e4 100%);
  border-color: #74b6d1;
}

/* 参考商品タグの特別なスタイル（SP版） */
.filter-tag-reference {
  /* ボタン基調色に統一 */
  background: linear-gradient(135deg, #fafcfd 0%, #d4e8f1 100%);
  border-color: #add4e4;
  color: #3e96bb;
}
.filter-tag-reference .filter-icon {
  color: #74b6d1;
}
.filter-tag-reference:hover {
  background: linear-gradient(135deg, #d4e8f1 0%, #add4e4 100%);
  border-color: #74b6d1;
}

/* ソートタグの特別なスタイル（SP版） */
.filter-tag-sort-asc,
.filter-tag-sort-desc {
  /* ボタン基調色に統一 */
  background: linear-gradient(135deg, #fafcfd 0%, #d4e8f1 100%);
  border-color: #add4e4;
  color: #3e96bb;
}
.filter-tag-sort-asc .filter-icon,
.filter-tag-sort-desc .filter-icon {
  color: #74b6d1;
}
.filter-tag-sort-asc:hover,
.filter-tag-sort-desc:hover {
  background: linear-gradient(135deg, #d4e8f1 0%, #add4e4 100%);
  border-color: #74b6d1;
}

/* 商品グリッド（SP版は2列） */
.ec-products-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 3vw;
  margin-bottom: 6vw;
}

/* ec_index.php専用コンテナ */
.ec-index-container {
  width: 100%;
  /* max-width削除：100%幅を使用 */
  margin: 0;
  padding: 0;
  /* パディングは.ec-main-contentで設定 */
}

/* 商品アイテム（SP版） */
.ec-product-item {
  background: white;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: none;
  /* ドロップシャドーを削除 */
  transition: transform 0.3s ease;
  position: relative;
  /* フェードインアニメーション用の初期状態（SP版） */
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94), transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  /* アニメーション完了状態 */
  /* ホバー時もフェードイン状態を維持 */
}
.ec-product-item.fade-in-visible {
  opacity: 1;
  transform: translateY(0);
}
.ec-product-item:hover {
  transform: translateY(-2px);
}
.ec-product-item:hover .ec-product-image {
  transform: scale(1.02);
}
.ec-product-item:hover .ec-preview-icon {
  opacity: 1;
}
.ec-product-item.fade-in-visible:hover {
  transform: translateY(-2px);
  /* ホバー効果を優先 */
}

.ec-product-image-wrapper {
  position: relative;
  width: 100%;
  height: 40vw;
  overflow: hidden;
}

.ec-product-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.ec-preview-icon {
  position: absolute;
  bottom: 2vw;
  right: 2vw;
  width: 8vw;
  height: 8vw;
  background: rgba(255, 255, 255, 0.9);
  border: none;
  border-radius: 50%;
  cursor: pointer;
  transition: all 0.3s ease;
  opacity: 1;
  /* Material Symbols Outlinedアイコンのスタイル */
}
.ec-preview-icon:hover {
  background: white;
  transform: scale(1.1);
}
.ec-preview-icon .material-symbols-outlined {
  font-size: 4vw;
  font-variation-settings: "FILL" 0, "wght" 300, "GRAD" 0, "opsz" 24;
  /* 絶対配置で完全中央配置 */
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  line-height: 1;
  color: #0eb2e1;
}

.ec-limited-badge {
  position: absolute;
  top: 2vw;
  left: 2vw;
  background: #ff4444;
  color: white;
  font-size: 2.8vw;
  font-weight: 500;
  padding: 1vw 2vw;
  border-radius: 4px;
  z-index: 10;
}

.ec-product-info {
  padding: 3vw;
}

/* 商品リンクスタイル（SP版） */
.ec-product-link {
  text-decoration: none;
  color: inherit;
  display: block;
  transition: color 0.3s ease;
}
.ec-product-link:hover {
  color: #232429;
  text-decoration: none;
}
.ec-product-link:hover .ec-product-title {
  color: #0066cc;
}
.ec-product-link:visited {
  color: inherit;
}

/* 画像ラッパー内のリンクは親要素のサイズに合わせる（SP版） */
.ec-product-image-wrapper .ec-product-link {
  width: 100%;
  height: 100%;
  display: block;
}

.ec-product-title {
  font-size: 3.2vw;
  font-weight: 500;
  color: #232429;
  margin-bottom: 1vw;
  line-height: 1.4;
  transition: color 0.3s ease;
}

.ec-product-price {
  font-size: 3.2vw;
  color: #666;
  font-weight: 400;
}

/* ===========================================
   🎛️ フィルターモーダル（SP版対応）
   =========================================== */
/* フィルターモーダル背景 */
.ec-filter-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.7);
  display: none;
  z-index: 999999999;
  /* 言語切り替えボタン(99999999)より高く設定 */
  overflow-y: auto;
  /* モーダル全体でスクロール可能に */
}
.ec-filter-modal.active {
  display: flex;
  align-items: flex-start;
  /* フルスクリーンなので上揃え */
  justify-content: flex-start;
  /* フルスクリーンなので左揃え */
  animation: overlayFadeIn 0.3s ease-out;
}

/* オーバーレイのフェードインアニメーション（SP版） */
@keyframes overlayFadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
/* フィルターモーダルコンテンツ（SP版） */
.ec-filter-modal-content {
  background: white;
  border-radius: 0;
  /* 角丸を削除してフルスクリーン */
  width: 100%;
  /* フルスクリーン幅 */
  min-height: 100%;
  /* 最小高さを100%に設定（コンテンツが長い場合は伸びる） */
  max-width: none;
  /* max-width制限を削除してより広く */
  max-height: none;
  /* max-height制限を削除してフルスクリーン */
  overflow: visible;
  /* オーバーフローを表示可能に */
  box-shadow: none;
  /* フルスクリーンなので影を削除 */
  opacity: 0;
  transform: translateY(-20px) scale(0.9);
  pointer-events: auto;
  margin: 0;
  /* マージンを削除してフルスクリーン */
  display: flex;
  flex-direction: column;
  /* フレックスレイアウトでフッター固定 */
  /* モーダルがアクティブ状態の時のみアニメーション実行（SP版） */
}
.ec-filter-modal.active .ec-filter-modal-content {
  animation: modalContentZoom 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

/* モーダルコンテンツのズームアップアニメーション（SP版） */
@keyframes modalContentZoom {
  from {
    opacity: 0;
    transform: translateY(-20px) scale(0.9);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
/* フィルターモーダルヘッダー（SP版） - 最小限設計 */
.ec-filter-modal-header {
  display: flex;
  justify-content: flex-end;
  /* 閉じるボタンのみ右寄せ */
  align-items: center;
  padding: 1.5vw 3vw;
  /* さらにパディング縮小 */
  border-bottom: none;
  /* ボーダー完全削除 */
  background: transparent;
  /* 背景完全削除 */
  position: relative;
  flex-shrink: 0;
}
.ec-filter-modal-header h3 {
  display: none;
  /* タイトル完全非表示 */
}

.ec-filter-modal-close {
  width: 8vw;
  /* サイズを少し大きく */
  height: 8vw;
  border: 2px solid #202221;
  /* ブラック系の丸枠 */
  background: #202221;
  /* ブラック系の背景 */
  cursor: pointer;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  pointer-events: auto;
  position: fixed;
  /* absolute → fixed に変更（固定表示） */
  top: 1.5vw;
  /* ヘッダーパディングに合わせて調整 */
  right: 3vw;
  z-index: 9999999999;
  /* 最前面に表示 */
}
.ec-filter-modal-close:active {
  background: #333;
  /* アクティブ時は少し明るい色 */
  transform: scale(0.95);
}
.ec-filter-modal-close .material-symbols-outlined {
  font-size: 4.5vw;
  /* サイズを少し大きく */
  color: white;
  /* ホワイトの×アイコン */
  font-variation-settings: "FILL" 0, "wght" 300, "GRAD" 0, "opsz" 24;
}

/* フィルターモーダルボディ（SP版） */
.ec-filter-modal-body {
  padding: 3vw;
  /* パディングを元に戻す */
  flex: 1;
  /* フレックスで残り空間を占有 */
  overflow-y: auto;
  /* ボディ内でスクロール */
  padding-bottom: 4vw;
  /* 下部余白を追加 */
}

/* フィルターセクション（SP版） */
.ec-filter-section {
  margin-bottom: 4vw;
}
.ec-filter-section:last-child {
  margin-bottom: 0;
}
.ec-filter-section h4 {
  font-size: 2.8vw;
  font-weight: 500;
  color: #232429;
  margin-bottom: 2vw;
  display: flex;
  align-items: center;
  gap: 1.5vw;
}
.ec-filter-section h4 .material-icons {
  font-size: 3.6vw;
  color: #666;
  font-weight: 300;
}

/* フィルターオプション（SP版） */
.ec-filter-options {
  display: flex;
  flex-direction: column;
  gap: 1.5vw;
}

.ec-filter-option {
  display: flex;
  align-items: center;
  gap: 2.5vw;
  padding: 2.5vw;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.3s ease;
  pointer-events: auto;
}
.ec-filter-option:hover {
  background: #f8f9fa;
}
.ec-filter-option.selected {
  background: #e3f2fd;
  border: 1px solid #2196f3;
}
.ec-filter-option.selected .category-count {
  background: white;
  color: #2196f3;
  border: 1px solid #2196f3;
}
.ec-filter-option input[type=radio],
.ec-filter-option input[type=checkbox] {
  margin: 0;
  cursor: pointer;
  pointer-events: auto;
  accent-color: #232429;
  width: 3.5vw;
  height: 3.5vw;
}
.ec-filter-option label {
  flex: 1;
  cursor: pointer;
  font-size: 2.8vw;
  color: #333;
  margin: 0;
  pointer-events: auto;
}
.ec-filter-option label .category-count {
  color: #666;
  font-size: 2.8vw;
  margin-left: 1.5vw;
}

/* カテゴリオプション（SP版） */
.ec-category-options {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1vw;
}

/* フィルターモーダルフッター（SP版） */
.ec-filter-modal-footer {
  display: flex;
  justify-content: center;
  /* 中央配置 */
  align-items: center;
  gap: 2.5vw;
  padding: 15vw 7vw 3vw 7vw;
  /* 上部パディングをさらに大きく（8vw → 15vw）してフェードアウト効果を強化 */
  background: linear-gradient(to bottom, transparent 0%, rgba(255, 255, 255, 0.5) 20%, rgba(255, 255, 255, 0.9) 50%, white 80%);
  /* フェードアウト効果を早く完了 */
  border-radius: 0;
  /* フルスクリーンなので角丸を削除 */
  flex-shrink: 0;
  position: sticky;
  bottom: 0;
  z-index: 10;
  /* backdrop-filter削除（グラデーション効果のため） */
}

.ec-filter-actions {
  display: flex;
  gap: 2.5vw;
  justify-content: center;
  /* ボタン群の中央配置 */
  width: 100%;
}

/* フィルターボタン共通スタイル（SP版） */
.ec-action-btn {
  flex: 1;
  padding: 2.5vw 3vw;
  border: none;
  border-radius: 6px;
  font-size: 2.8vw;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;
  pointer-events: auto;
  position: relative;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.5vw;
}
.ec-action-btn .material-symbols-outlined {
  font-size: 3.6vw;
  font-variation-settings: "FILL" 0, "wght" 300, "GRAD" 0, "opsz" 24;
}

.ec-reset-btn {
  background: #e3f2fd;
  /* 薄い青色で少し目立たせる */
  color: #1976d2;
  /* 青色テキスト */
  border: 1px solid #bbdefb;
  /* 薄い青色のボーダー */
}
.ec-reset-btn:active {
  background: #bbdefb;
  /* タップ時はより濃い青 */
  color: #1565c0;
  /* より濃い青色テキスト */
  transform: scale(0.98);
}

.ec-apply-btn {
  background: #232429;
  color: white;
}
.ec-apply-btn:hover {
  background: #1a1d21;
}

/* ===========================================
   🎛️ 追加フィルターモーダルスタイル（SP版）
   =========================================== */
/* 古いスタイル削除（新しいヘッダー構造に統一） */
/* メインフィルターエリア（SP版：1カラムレイアウト） */
.ec-filter-main-area {
  display: block;
}

/* 主要フィルター（SP版） */
.ec-filter-primary-column {
  background: white;
  padding: 6vw 4vw 3vw 4vw;
  /* パディングを元に戻す */
}

/* 補助フィルター（SP版） */
.ec-filter-secondary-column {
  background: white;
  /* SP版は1ペイン構成なので白背景 */
  padding: 3vw 4vw;
  border-top: 1px solid #e9ecef;
}

/* セクションヘッダー（SP版） */
.ec-section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 0 2vw 0;
  border-bottom: 2px solid #e9ecef;
  margin-bottom: 2.5vw;
}

.ec-section-title {
  font-size: 3.2vw;
  font-weight: 600;
  color: #232429;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 1.5vw;
}
.ec-section-title .material-symbols-outlined {
  font-size: 1.2em;
  color: #666;
  background: #f0f0f0;
  padding: 1vw;
  border-radius: 10px;
}

.ec-section-badge {
  display: none;
  /* 選択数バッジを非表示 */
}

.ec-section-content {
  padding: 0;
}

/* カテゴリグリッド（SP版） */
.ec-category-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2vw;
}

/* カスタムセレクションオプション（SP版） */
.ec-custom-selection-options {
  display: flex;
  flex-direction: column;
  gap: 2vw;
}

.ec-custom-selection-option {
  background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
  border: 2px solid #e9ecef;
  border-radius: 12px;
  padding: 3.5vw 3vw;
  /* 上下パディングを3vw → 3.5vw に拡大 */
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}
.ec-custom-selection-option:hover {
  border-color: #9caeb3;
  /* フィルターボタン色に統一 */
  background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
}
.ec-custom-selection-option.selected {
  border-color: #9caeb3;
  /* フィルターボタン色に統一 */
  background: linear-gradient(135deg, #9caeb3 0%, #7f969d 100%);
  /* フィルターボタン色のグラデーション */
  color: white;
  /* 白文字 */
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(156, 174, 179, 0.25);
  /* フィルターボタン色のシャドウ */
}
.ec-custom-selection-option.selected .ec-custom-selection-description {
  color: rgba(255, 255, 255, 0.8);
  /* 白文字（透明度80%） */
}

.ec-custom-selection-name {
  font-size: 4vw;
  /* $font-sm → $font-md に変更（一段大きく） */
  font-weight: 500;
  line-height: 1.3;
  margin: 0 0 1.5vw 0;
  /* 1vw → 1.5vw に変更（余白を少し大きく） */
  text-align: left;
}

.ec-custom-selection-description {
  font-size: 3.2vw;
  /* $font-xs → $font-sm に変更（一段大きく） */
  font-weight: 400;
  line-height: 1.6;
  /* 1.4 → 1.6 に変更（行間を増やす） */
  margin: 0;
  text-align: left;
  color: #666;
  opacity: 0.8;
  /* 空の場合は非表示 */
}
.ec-custom-selection-description:empty {
  display: none;
}

/* カスタムセレクション用フィルタータグ（SP版） */
.filter-tag-custom-selection {
  /* ボタン基調色に統一 */
  background: linear-gradient(135deg, #fafcfd 0%, #d4e8f1 100%);
  border-color: #add4e4;
  color: #3e96bb;
}
.filter-tag-custom-selection .filter-icon {
  color: #74b6d1;
}
.filter-tag-custom-selection:hover {
  background: linear-gradient(135deg, #d4e8f1 0%, #add4e4 100%);
  border-color: #74b6d1;
}

.ec-category-option {
  background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
  border: 2px solid #e9ecef;
  border-radius: 12px;
  padding: 2.5vw 2vw;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  text-align: center;
  position: relative;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}
.ec-category-option:hover {
  border-color: #9caeb3;
  /* フィルターボタン色に統一 */
  background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
}
.ec-category-option.selected {
  border-color: #9caeb3;
  /* フィルターボタン色に統一 */
  background: linear-gradient(135deg, #9caeb3 0%, #7f969d 100%);
  /* フィルターボタン色のグラデーション */
  color: white;
  /* 白文字 */
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(156, 174, 179, 0.25);
  /* フィルターボタン色のシャドウ */
}
.ec-category-option.selected .ec-category-count {
  color: #9caeb3;
  /* フィルターボタン色 */
  background: white;
  border: 1px solid #e9ecef;
  /* ボーダー */
}

.ec-category-name {
  font-size: 2.8vw;
  font-weight: 500;
  margin-bottom: 1vw;
  line-height: 1.2;
}

.ec-category-count {
  font-size: 2.8vw;
  color: #666;
  background: #f0f0f0;
  padding: 0.8vw 1.2vw;
  /* 上下パディングを0.5vw → 0.8vw に拡大 */
  border-radius: 10px;
  display: inline-block;
  font-weight: 500;
}

/* ソートオプション（SP版） */
.ec-sort-options {
  display: flex;
  flex-direction: column;
  gap: 2vw;
}

.ec-sort-option {
  display: flex;
  align-items: center;
  padding: 2.5vw;
  border: 2px solid #e9ecef;
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
}
.ec-sort-option:hover {
  border-color: #9caeb3;
  /* フィルターボタン色に統一 */
  background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}
.ec-sort-option.active {
  border-color: #9caeb3;
  /* フィルターボタン色に統一 */
  background: linear-gradient(135deg, #9caeb3 0%, #7f969d 100%);
  /* フィルターボタン色のグラデーション */
  color: white;
  /* 白文字 */
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(156, 174, 179, 0.2);
  /* フィルターボタン色のシャドウ */
}
.ec-sort-option.active .ec-sort-label {
  color: white;
  /* 白文字 */
}

.ec-sort-radio {
  position: relative;
  margin-right: 2.5vw;
}
.ec-sort-radio input {
  opacity: 0;
  position: absolute;
}

.ec-radio-indicator {
  width: 5vw;
  height: 5vw;
  border: 2px solid #ccc;
  border-radius: 50%;
  display: block;
  position: relative;
  transition: all 0.3s ease;
  background: white;
}
.ec-radio-indicator::after {
  content: "";
  width: 2.5vw;
  height: 2.5vw;
  background: #9caeb3;
  /* フィルターボタン色に統一 */
  border-radius: 50%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0);
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.ec-sort-option.active .ec-radio-indicator {
  border-color: white;
  /* 白ボーダー */
  background: white;
}
.ec-sort-option.active .ec-radio-indicator::after {
  background: #9caeb3;
  /* フィルターボタン色に統一 */
  transform: translate(-50%, -50%) scale(1);
}

.ec-sort-content {
  flex: 1;
}

.ec-sort-label {
  font-size: 2.8vw;
  font-weight: 500;
  color: #232429;
  display: block;
  cursor: pointer;
}

/* トグルスイッチ（SP版） */
.ec-type-toggles {
  display: flex;
  flex-direction: column;
  gap: 2.5vw;
}

.ec-toggle-item {
  display: flex;
  align-items: center;
  padding: 2vw;
  border: 2px solid #e9ecef;
  border-radius: 10px;
  transition: all 0.2s ease;
}
.ec-toggle-item:hover {
  border-color: #dee2e6;
  background: #f8f9fa;
}

.ec-toggle-switch {
  margin-right: 2.5vw;
}
.ec-toggle-switch input {
  opacity: 0;
  position: absolute;
}

.ec-switch-slider {
  width: 10vw;
  height: 5.5vw;
  background: #ccc;
  border-radius: 11px;
  position: relative;
  cursor: pointer;
  transition: background 0.3s ease;
  display: block;
}

.ec-switch-handle {
  width: 4.5vw;
  height: 4.5vw;
  background: white;
  border-radius: 50%;
  position: absolute;
  top: 0.5vw;
  left: 0.5vw;
  transition: transform 0.3s ease;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

input:checked + .ec-switch-slider {
  background: #9caeb3;
  /* フィルターボタン色に統一 */
}

input:checked + .ec-switch-slider .ec-switch-handle {
  transform: translateX(4.5vw);
}

.ec-toggle-content {
  flex: 1;
}

.ec-toggle-label {
  font-size: 2.8vw;
  font-weight: 500;
  color: #232429;
  display: block;
}

.ec-toggle-badge {
  font-size: 2.8vw;
  font-weight: 600;
  padding: 0.5vw 1vw;
  border-radius: 6px;
}
.ec-toggle-badge.limited-badge {
  background: #ff4444;
  color: white;
}
.ec-toggle-badge.reference-badge {
  background: #4caf50;
  color: white;
}

/* 古いフィルターフッター削除（新しい構造に統一） */
/* ===========================================
   🌟 デフォルトブックマーク（おすすめ商品）SP版
   =========================================== */
/* ヘッダー削除（不要） */
/* ボタンの均等配置とサイズ調整（SP版） */
.ec-bookmark-actions-equal {
  display: flex;
  gap: 1.5vw;
  margin-top: 3vw;
}
.ec-bookmark-actions-equal .ec-bookmark-detail-btn,
.ec-bookmark-actions-equal .ec-add-bookmark-btn {
  flex: 1;
  height: 10vw;
  padding: 2.5vw 2vw;
  border-radius: 6px;
  font-size: 2.8vw;
  font-weight: 500;
  text-decoration: none;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1vw;
  transition: all 0.3s ease;
  box-sizing: border-box;
  cursor: pointer;
  border: none;
  outline: none;
  white-space: nowrap;
}
.ec-bookmark-actions-equal .ec-bookmark-detail-btn {
  background: #f8f9fa;
  color: #495057;
  border: 1px solid #dee2e6;
}
.ec-bookmark-actions-equal .ec-bookmark-detail-btn:hover {
  background: #e9ecef;
  color: #343a40;
  transform: translateY(-1px);
}
.ec-bookmark-actions-equal .ec-add-bookmark-btn {
  background: #f8f9fa;
  color: #0eb2e1;
  border: 1px solid #dee2e6;
}
.ec-bookmark-actions-equal .ec-add-bookmark-btn:hover {
  background: #e9ecef;
  transform: translateY(-1px);
}
.ec-bookmark-actions-equal .ec-add-bookmark-btn .material-symbols-outlined {
  font-size: 3.6vw;
  font-variation-settings: "FILL" 0, "wght" 300, "GRAD" 0, "opsz" 24;
  color: #0eb2e1;
}

/* ===== DETAIL PAGE BOOKMARK SYSTEM - 商品詳細ページブックマーク機能（SP版） ===== */
/* ec-index.phpとの互換性のためのエイリアス（SP版） */
.ec-bookmark-description {
  font-size: 3.2vw;
  color: #666;
  line-height: 1.6;
  margin-bottom: 3vw;
  max-height: 6.4em;
  /* SP版：4行表示 */
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  /* SP版：4行表示 */
  -webkit-box-orient: vertical;
}

.ec-bookmark-actions {
  display: flex;
  gap: 2vw;
}

.ec-bookmark-limited-badge {
  position: absolute;
  top: 2vw;
  left: 2vw;
  background: #ff4444;
  color: white;
  font-size: 2.8vw;
  font-weight: 500;
  padding: 0.5vw 1vw;
  border-radius: 4px;
  z-index: 10;
}

/* カート下のブックマークボタン */
.detail-bookmark-container {
  margin-top: 4vw;
  display: flex;
  /* フレックスボックスで中央配置 */
  justify-content: center;
  /* 水平中央配置 */
}

.detail-bookmark-btn {
  width: 82%;
  /* 横幅を50%に変更 */
  padding: 4vw 5vw;
  /* SP版は既存のvw単位を維持 */
  background: #f8f9fa;
  color: #0eb2e1;
  /* ブックマーク基調色 */
  border: 1px solid #dee2e6;
  border-radius: 6px;
  font-size: 3.2vw;
  /* SP版は統一フォントサイズを維持 */
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2vw;
  /* モバイルタッチ対応 */
  -webkit-tap-highlight-color: rgba(14, 178, 225, 0.2);
  /* ブックマーク基調色に変更 */
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  touch-action: manipulation;
  /* タッチ時のアクティブ状態 */
}
.detail-bookmark-btn:hover, .detail-bookmark-btn:active {
  background: #e9ecef;
  color: #0eb2e1;
  /* ホバー時もブックマーク基調色を維持 */
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
.detail-bookmark-btn:active {
  transform: translateY(0);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
}
.detail-bookmark-btn.bookmarked {
  background: #0eb2e1;
  /* ブックマーク基調色 */
  color: white;
  border-color: #0eb2e1;
  /* ブックマーク基調色 */
}
.detail-bookmark-btn.bookmarked:hover, .detail-bookmark-btn.bookmarked:active {
  background: #0b8cb1;
  /* ブックマーク基調色を10%暗く */
  border-color: #0b8cb1;
  /* ブックマーク基調色を10%暗く */
}
.detail-bookmark-btn .bookmark-icon {
  font-size: 5.6vw;
  /* テキストより大きく調整してバランス改善 */
  color: #0eb2e1;
  /* アイコンにブックマーク基調色 */
  font-variation-settings: "FILL" 0, "wght" 300, "GRAD" 0, "opsz" 24;
  display: inline-flex;
  /* インラインフレックスで位置制御 */
  align-items: center;
  /* 垂直中央配置 */
  transform: translateY(0.5vw);
  /* SP版は微細な下方向調整（vw単位） */
  pointer-events: none;
  /* アイコンのクリックイベントを無効化 */
}
.detail-bookmark-btn.bookmarked .bookmark-icon {
  font-variation-settings: "FILL" 1, "wght" 400, "GRAD" 0, "opsz" 24;
  color: white;
  /* ブックマーク済み時は白色 */
}
.detail-bookmark-btn .bookmark-text {
  color: #0eb2e1;
  /* テキストにブックマーク基調色 */
  pointer-events: none;
  /* テキストのクリックイベントを無効化 */
}
.detail-bookmark-btn.bookmarked .bookmark-text {
  color: white;
  /* ブックマーク済み時は白色 */
}

/* 左端固定ブックマークペイン表示ボタン - ec_index.phpと統一（画面左下固定） */
.detail-bookmark-toggle {
  position: fixed;
  left: 3vw;
  bottom: 3vw;
  /* top: 50% から bottom: 3vw に変更 */
  z-index: 1000;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  border: 1px solid #dee2e6;
  border-radius: 50px;
  padding: 3vw;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1vw;
  /* モバイルタッチ対応 */
  -webkit-tap-highlight-color: rgba(255, 107, 53, 0.2);
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  touch-action: manipulation;
  /* タッチ時のアクティブ状態 */
}
.detail-bookmark-toggle:hover, .detail-bookmark-toggle:active {
  background: white;
  transform: scale(1.05);
  /* translateY(-50%) を削除 */
  box-shadow: 0 6px 25px rgba(0, 0, 0, 0.15);
}
.detail-bookmark-toggle:active {
  transform: scale(1.02);
  /* translateY(-50%) を削除 */
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
}
.detail-bookmark-toggle .material-symbols-outlined {
  font-size: 7.2vw;
  /* 統合SCSSシステムのフォントサイズ（6vw相当） */
  color: #0eb2e1;
  /* ブックマーク基調色 */
  font-variation-settings: "FILL" 0, "wght" 300, "GRAD" 0, "opsz" 24;
}
.detail-bookmark-toggle .bookmark-count {
  display: none;
  background: #0eb2e1;
  /* ブックマーク基調色 */
  color: white;
  font-size: 2.8vw;
  /* 統合SCSSシステムのフォントサイズ */
  font-weight: 600;
  padding: 0.5vw 1vw;
  border-radius: 10px;
  min-width: 4vw;
  text-align: center;
  line-height: 1;
}

/* 固定配置Features記事ボタンコンテナ（SP版では1つのみ表示） */
.detail-features-container {
  position: fixed;
  left: 20vw;
  /* ブックマークトグルボタンの右側に配置 */
  bottom: 3vw;
  /* ブックマークトグルボタンと同じ高さ */
  z-index: 1000;
  display: flex;
  flex-direction: column;
  gap: 1vw;
  /* ボタン間の縦の間隔 */
}

/* SP版では2番目以降のボタンを非表示 */
.detail-features-toggle:nth-child(n+2) {
  display: none;
}

/* 固定配置Features記事ボタン（ブックマークトグルと同じスタイル） */
.detail-features-toggle {
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  border: 1px solid #dee2e6;
  border-radius: 50px;
  padding: 3vw;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 1vw;
  max-width: 70vw;
  /* 記事タイトルが長い場合の制限を拡大 */
  /* モバイルタッチ対応 */
  -webkit-tap-highlight-color: rgba(14, 178, 225, 0.2);
  /* Features記事基調色 */
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  touch-action: manipulation;
  /* タッチ時のアクティブ状態 */
}
.detail-features-toggle:hover, .detail-features-toggle:active {
  background: white;
  transform: scale(1.05);
  box-shadow: 0 6px 25px rgba(0, 0, 0, 0.15);
}
.detail-features-toggle:active {
  transform: scale(1.02);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
}
.detail-features-toggle .material-symbols-outlined {
  font-size: 7.2vw;
  /* 統合SCSSシステムのフォントサイズ（6vw相当） */
  color: #0eb2e1;
  /* ブックマーク基調色 */
  font-variation-settings: "FILL" 0, "wght" 300, "GRAD" 0, "opsz" 24;
}
.detail-features-toggle .features-text {
  font-size: 3.2vw;
  /* 統合SCSSシステムのフォントサイズ */
  color: #0eb2e1;
  /* ブックマーク基調色 */
  font-weight: 500;
  text-align: left;
  /* 左寄せに変更 */
  line-height: 1.2;
  word-break: break-word;
  /* 長いタイトルの改行対応 */
  max-width: 70vw;
  /* テキスト幅制限 */
  white-space: nowrap;
  /* 改行を防ぐ */
  overflow: hidden;
  /* はみ出しを隠す */
  text-overflow: ellipsis;
  /* 省略記号を表示 */
}

/* ブックマークペイン（ドロワー） */
.detail-bookmark-drawer {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 2000;
  display: none;
}
.detail-bookmark-drawer.active {
  display: block;
}

.detail-bookmark-drawer-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.3);
  /* 透明度を下げてぼかし効果を軽減 */
  /* backdrop-filter: blur(4px); ← ぼかし効果を削除 */
}

.detail-bookmark-drawer-content {
  position: absolute;
  top: 0;
  left: 0;
  width: 80vw;
  /* 85vw → 80vw（ec_index.phpと統一） */
  height: 100%;
  background: white;
  box-shadow: 4px 0 20px rgba(0, 0, 0, 0.15);
  transform: translateX(-100%);
  transition: transform 0.3s ease;
  overflow-y: auto;
}
.detail-bookmark-drawer.active .detail-bookmark-drawer-content {
  transform: translateX(0);
}

/* ブックマークドロワーヘッダー */
.detail-bookmark-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4vw;
  border-bottom: 1px solid #dee2e6;
  background: #f8f9fa;
  position: relative;
  /* 閉じるボタンの絶対配置のため */
}

.detail-bookmark-view-all {
  display: flex;
  align-items: center;
  gap: 1vw;
}
.detail-bookmark-view-all .back-icon {
  font-size: 4vw;
  font-variation-settings: "FILL" 0, "wght" 300, "GRAD" 0, "opsz" 24;
  color: inherit;
  transition: color 0.3s ease;
}
.detail-bookmark-view-all:hover .back-icon {
  color: white;
}

/* detail.php用閉じるボタン - ec_index.phpと完全統一 */
/* ブックマークプレースホルダー */
.detail-bookmark-placeholder, .ec-bookmark-placeholder {
  text-align: center;
  padding: 8vw 5vw;
  color: #666;
}
.detail-bookmark-placeholder .material-symbols-outlined, .ec-bookmark-placeholder .material-symbols-outlined {
  font-size: 15vw;
  font-variation-settings: "FILL" 0, "wght" 300, "GRAD" 0, "opsz" 24;
  margin-bottom: 3vw;
}
.detail-bookmark-placeholder p, .ec-bookmark-placeholder p {
  margin: 0;
  font-size: 3.2vw;
  line-height: 1.6;
}

/* ブックマーク商品リスト */
.detail-bookmark-list, .ec-bookmark-list {
  padding: 3vw;
}

.detail-bookmark-item, .ec-bookmark-item {
  background: white;
  border: 1px solid #dee2e6;
  border-radius: 8px;
  margin-bottom: 3vw;
  overflow: hidden;
  transition: all 0.3s ease;
  position: relative;
  /* 閉じるボタンの配置のため */
  /* ホバー効果はリンク側で制御するため削除 */
}
.detail-bookmark-item:last-child, .ec-bookmark-item:last-child {
  margin-bottom: 0;
}

.detail-bookmark-image-container, .ec-bookmark-image-container {
  position: relative;
  width: 100%;
  height: 200px;
  /* ec-bookmark-image-containerと同じ高さに統一（200px） */
  overflow: hidden;
}

.detail-bookmark-image, .ec-bookmark-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}
.detail-bookmark-item:hover .detail-bookmark-image, .ec-bookmark-item:hover .detail-bookmark-image, .detail-bookmark-item:hover .ec-bookmark-image, .ec-bookmark-item:hover .ec-bookmark-image {
  transform: scale(1.05);
}

/* detail.php用削除ボタン - ec_index.phpと完全統一 */
.detail-bookmark-remove, .ec-bookmark-close, .detail-bookmark-close {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 28px;
  /* SP版は少し大きく */
  height: 28px;
  background: rgba(0, 0, 0, 0.7);
  color: white;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  transition: background-color 0.3s ease;
  z-index: 10;
  /* リンクより上に表示 */
  /* Material Symbols Outlinedアイコンのスタイル */
}
.detail-bookmark-remove:hover, .ec-bookmark-close:hover, .detail-bookmark-close:hover {
  background: rgba(0, 0, 0, 0.9);
}
.detail-bookmark-remove .material-symbols-outlined, .ec-bookmark-close .material-symbols-outlined, .detail-bookmark-close .material-symbols-outlined {
  font-size: 16px;
  /* SP版は少し大きく */
  font-variation-settings: "FILL" 0, "wght" 300, "GRAD" 0, "opsz" 24;
  /* 絶対配置で完全中央配置 */
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  line-height: 1;
}

.detail-bookmark-text-area, .ec-bookmark-text-area {
  padding: 4vw;
  /* SP版：ec_index.phpと同じパディング（4vw） */
}

.detail-bookmark-title, .ec-bookmark-title {
  font-size: 3.6vw;
  /* 統合SCSSシステムのフォントサイズ */
  font-weight: 500;
  /* ec-bookmark-titleと同じweight */
  color: #232429;
  margin-bottom: 0.75rem;
  /* ec-bookmark-titleと同じmargin */
  line-height: 1.4;
}

.detail-bookmark-price, .ec-bookmark-price {
  font-size: 3.6vw;
  /* 統合SCSSシステムのフォントサイズ（ec-bookmark-priceと同じ） */
  color: #666;
  margin-bottom: 1rem;
  /* ec-bookmark-priceと同じmargin */
  font-weight: 500;
}

/* detail.php用ブックマーク項目リンク（全体リンク） - SP版 */
.detail-bookmark-link, .ec-bookmark-detail-btn {
  display: block;
  text-decoration: none;
  color: inherit;
  transition: transform 0.2s ease;
}
.detail-bookmark-link:hover, .ec-bookmark-detail-btn:hover {
  text-decoration: none;
  color: inherit;
  transform: translateY(-2px);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}
.detail-bookmark-link:hover .detail-bookmark-image, .ec-bookmark-detail-btn:hover .detail-bookmark-image, .detail-bookmark-link:hover .ec-bookmark-image, .ec-bookmark-detail-btn:hover .ec-bookmark-image {
  transform: scale(1.02);
}
.detail-bookmark-link:focus, .ec-bookmark-detail-btn:focus {
  outline: 2px solid #0eb2e1;
  outline-offset: 2px;
}

/* ===== SP版専用：ドロワートグルボタン（画面左下固定） ===== */
.ec-bookmark-toggle-sp {
  position: fixed;
  left: 3vw;
  bottom: 3vw;
  /* top: 50% から bottom: 3vw に変更 */
  z-index: 1000;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  border: 1px solid #dee2e6;
  border-radius: 50px;
  padding: 3vw;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1vw;
  /* モバイルタッチ対応 */
  -webkit-tap-highlight-color: rgba(255, 107, 53, 0.2);
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  touch-action: manipulation;
  /* タッチ時のアクティブ状態 */
}
.ec-bookmark-toggle-sp:hover, .ec-bookmark-toggle-sp:active {
  background: white;
  transform: scale(1.05);
  /* translateY(-50%) を削除 */
  box-shadow: 0 6px 25px rgba(0, 0, 0, 0.15);
}
.ec-bookmark-toggle-sp:active {
  transform: scale(1.02);
  /* translateY(-50%) を削除 */
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
}
.ec-bookmark-toggle-sp .material-symbols-outlined {
  font-size: 7.2vw;
  /* 統合SCSSシステムのフォントサイズ（7.2vw相当） */
  color: #0eb2e1;
  /* ブックマーク基調色 */
  font-variation-settings: "FILL" 0, "wght" 300, "GRAD" 0, "opsz" 24;
}
.ec-bookmark-toggle-sp .ec-bookmark-count {
  display: none;
  background: #0eb2e1;
  /* ブックマーク基調色 */
  color: white;
  font-size: 2.8vw;
  /* 統合SCSSシステムのフォントサイズ */
  font-weight: 600;
  padding: 0.5vw 1vw;
  border-radius: 10px;
  min-width: 4vw;
  text-align: center;
  line-height: 1;
}
.ec-bookmark-toggle-sp .ec-bookmark-count.visible {
  display: block;
}

/* ===== Step 2: ヘッダー・ボタンをdetail.phpと完全同一に ===== */
/* ドロワーヘッダー（detail.phpと完全同一） */
.ec-bookmark-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4vw;
  border-bottom: 1px solid #dee2e6;
  background: #f8f9fa;
  position: relative;
  /* 閉じるボタンの絶対配置のため */
}

/* VIEW ALLボタン（detail.phpと完全同一） */
.ec-bookmark-view-all {
  display: flex;
  align-items: center;
  gap: 1vw;
}
.ec-bookmark-view-all .back-icon {
  font-size: 4vw;
  font-variation-settings: "FILL" 0, "wght" 300, "GRAD" 0, "opsz" 24;
  color: inherit;
  transition: color 0.3s ease;
}
.ec-bookmark-view-all:hover .back-icon {
  color: white;
}

/* 閉じるボタン（サイズのみブックマーク削除ボタンと同じ） */
.ec-bookmark-close, .detail-bookmark-close {
  position: absolute;
  /* 絶対配置で位置調整 */
  top: 50%;
  /* 垂直中央基準 */
  right: calc(3vw + 8px);
  /* ブックマークリストのパディング(3vw) + 削除ボタンの位置(8px) */
  transform: translateY(-40%);
  /* 少し下に移動（-50%より浅く） */
  width: 28px;
  /* ブックマーク削除ボタンと同じサイズ */
  height: 28px;
  background: white;
  /* デフォルト状態をホワイト背景に変更 */
  color: #666;
  /* 元のグレー色に戻す */
  border: none;
  border-radius: 50%;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  /* モバイルタッチ対応 */
  -webkit-tap-highlight-color: rgba(222, 226, 230, 0.5);
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  touch-action: manipulation;
  /* タッチ時のアクティブ状態 */
}
.ec-bookmark-close:hover, .detail-bookmark-close:hover, .ec-bookmark-close:active, .detail-bookmark-close:active {
  background: #dee2e6;
  /* 元のライトグレー背景に戻す */
  color: #232429;
  /* 元の色に戻す */
}
.ec-bookmark-close:active, .detail-bookmark-close:active {
  background: #ced4da;
  transform: translateY(-40%) scale(0.95);
  /* 位置調整を維持 */
}
.ec-bookmark-close .material-symbols-outlined, .detail-bookmark-close .material-symbols-outlined {
  font-size: 16px;
  /* ブックマーク削除ボタンと同じサイズ */
  font-variation-settings: "FILL" 0, "wght" 300, "GRAD" 0, "opsz" 24;
  pointer-events: none;
}

/* ===== Step 3: ドロワー開放時のメイン背景オーバーレイ（detail.phpと完全同一） ===== */
/* オーバーレイ（detail.phpと完全同一） */
.ec-drawer-overlay {
  display: none;
  /* 使用しない */
}

/* SP版：ドロワー開放時のメイン画面オーバーレイ（body疑似要素で実装） */
body.ec-drawer-open::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.3);
  z-index: 1999;
  /* 言語切り替えボタン（2）より上、ドロワー（2000）より下 */
  pointer-events: auto;
  /* クリック可能 */
}

/* ===== detail.php専用 商品画像フェードインアニメーション（SP版） ===== */
.detail-image-fade-in {
  opacity: 0;
  /* スライダーアニメーションとの競合を避けるため、transformは使用しない */
  transition: opacity 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.detail-image-fade-in.fade-in-visible {
  opacity: 1;
}

/* スライダー内の商品画像専用フェードイン（スライダーアニメーションと分離） */
.detail_img_area.main-images .slide-item.detail-image-fade-in {
  /* スライダーのscroll-snap-alignを維持 */
  scroll-snap-align: start;
  /* フェードインアニメーションのみ適用 */
  opacity: 0;
  transition: opacity 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.detail_img_area.main-images .slide-item.detail-image-fade-in.fade-in-visible {
  opacity: 1;
}

/* ===== detail.php専用 商品詳細テキストエリアフェードインアニメーション（SP版） ===== */
.detail-text-fade-in {
  opacity: 0;
  transform: translateY(30px);
  /* SP版は移動距離を小さく */
  transition: opacity 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94), transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.detail-text-fade-in.fade-in-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ===== detail.php専用 関連商品スライダー ===== */
#detail-related-products {
  margin: 2rem 0;
  /* SP版：上部マージンを4rem→2remに削減（商品紹介との余白最適化） */
  padding: 1rem 0;
  /* SP版：上下パディングを2rem→1remに削減（無駄な余白を解消） */
  background: #fff;
}

/* detail.php専用の縦配置設定 - SP版はindex.phpと同じ縦並び */
#detail-related-products .split-products-container {
  display: flex;
  flex-direction: column;
  width: 100%;
}

#detail-related-products .split-products-left {
  width: 100%;
  padding: 0.8rem 4vw;
  /* SP版：上下パディングを2rem→0.8remに削減（無駄な余白を解消） */
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  background: white;
  color: var(--modern-primary);
}

.detail-related-products-right {
  width: 100%;
  background: white;
  position: relative;
}

.detail-related-slider-container {
  position: relative;
  overflow: hidden;
  height: 70vw;
  /* SP版：3点目プレビューを考慮した最適な高さ（85vw→70vw） */
  border-radius: 8px;
  display: block;
  visibility: visible;
  padding: 0 0 0 4vw;
  /* SP版：左側のみパディング（3点目プレビューのため右端余白不要） */
  box-sizing: border-box;
}

.detail-related-slider-wrapper {
  position: relative;
  height: 100%;
  overflow: hidden;
}

.detail-related-slider-track {
  display: flex;
  height: 100%;
  transition: transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  width: 100vw;
}

.detail-related-slide {
  width: 42%;
  /* SP版：2つ表示 + 3点目プレビュー（42% × 2 + 3% margin + 13% 3点目表示 = 100%） */
  height: 100%;
  flex-shrink: 0;
  margin-right: 3%;
  /* SP版：適切な余白 */
  display: block;
  visibility: visible;
  opacity: 1;
}

/* Featured Product Card */
.detail-related-card.featured {
  display: flex;
  flex-direction: column;
  height: 100%;
  text-decoration: none;
  color: inherit;
  transition: var(--modern-transition);
  position: relative;
  z-index: 1;
}

.detail-related-card.featured:hover {
  opacity: 0.95;
  text-decoration: none;
  color: inherit;
}

.detail-related-card.featured .detail-related-card-image {
  height: 76%;
  position: relative;
  border-radius: 8px;
  opacity: 0.6;
  transition: opacity 0.6s ease;
  overflow: hidden;
  /* aspect-ratio削除：自然な縦横比を維持 */
}

.detail-related-card.featured .detail-related-card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  border-radius: 8px;
  transition: transform 0.3s ease;
}

/* Products画像のホバーズーム効果 */
.detail-related-card.featured:hover .detail-related-card-image img {
  transform: scale(1.02);
}

/* Products Card Image Base Styles */
.detail-related-card.featured .detail-related-card-image {
  opacity: 0.3;
  transition: opacity 0.4s ease;
}

/* 表示エリア内のスライドの画像を完全表示 */
.detail-related-slide.slider-visible .detail-related-card.featured .detail-related-card-image {
  opacity: 1;
}

.detail-related-card.featured .detail-related-card-content {
  padding: 0.8rem 0.6rem 0.4rem 0;
  height: 24%;
  flex-shrink: 0;
  overflow: hidden;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.4s ease, transform 0.4s ease;
}

/* 表示エリア内のスライドのテキストエリア表示 */
.detail-related-slide.slider-visible .detail-related-card.featured .detail-related-card-content {
  opacity: 1;
  transform: translateY(0);
}

.detail-related-card.featured .detail-related-card-title {
  font-size: 3.2vw;
  font-weight: 400;
  color: var(--modern-primary);
  margin-bottom: 0.5rem;
  line-height: 1.3;
  letter-spacing: 0.02em;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.detail-related-card.featured .detail-related-card-price {
  font-size: 3.2vw;
  color: #0eb2e1;
  /* 価格文字色をブックマーク色に統一 */
  margin-bottom: 0;
  display: flex;
  align-items: center;
  font-weight: 500;
}

/* Navigation Area */
.detail-related-nav-area {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  padding: 0.8rem 0;
  margin-top: 0.8rem;
}

/* VIEW ALL ボタン */
.detail-related-view-all {
  display: flex;
  align-items: center;
  background: white;
  border: 1px solid rgba(128, 128, 128, 0.5);
  border-radius: 16px;
  padding: 6px 12px;
  backdrop-filter: blur(10px);
  transition: all 0.3s ease;
  text-decoration: none;
}
.detail-related-view-all:hover {
  background: #232429;
  text-decoration: none;
}
.detail-related-view-all:hover .view-all-text {
  color: white;
}

/* スライドナビゲーションボタン */
.detail-related-slider-nav {
  display: flex;
  gap: 0.6rem;
}

.detail-related-nav-btn {
  width: 28px;
  height: 28px;
  border: 1px solid rgba(31, 33, 33, 0.8);
  background: rgba(31, 33, 33, 0.9);
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s ease;
  font-size: 0.9rem;
  line-height: 1;
}
.detail-related-nav-btn .material-symbols-outlined {
  font-size: 1.2rem;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-variation-settings: "FILL" 0, "wght" 300, "GRAD" 0, "opsz" 24;
}
.detail-related-nav-btn:hover {
  background: #1f2121;
  transform: scale(1.05);
}
.detail-related-nav-btn:disabled {
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(128, 128, 128, 0.5);
  color: rgba(128, 128, 128, 0.8);
  cursor: not-allowed;
  transform: none;
}

/* ===== 既存の関連商品スライダー設定を削除 ===== */
/* ===== カスタムセレクションスライダー（SP版） ===== */
.detail-custom-selection-slider-container {
  position: relative;
  overflow: hidden;
  height: 70vw;
  /* SP版：3点目プレビューを考慮した最適な高さ（関連スライダーと同じ） */
  border-radius: 8px;
  display: block;
  visibility: visible;
  padding: 0 0 0 4vw;
  /* SP版：左側のみパディング（3点目プレビューのため右端余白不要） */
  box-sizing: border-box;
  margin-bottom: 2rem;
  /* 関連スライダーとの間隔 */
}

.detail-custom-selection-slider-wrapper {
  position: relative;
  height: 100%;
  overflow: hidden;
}

.detail-custom-selection-slider-track {
  display: flex;
  height: 100%;
  transition: transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  width: 100vw;
}

.detail-custom-selection-slide {
  width: 42%;
  /* SP版：2つ表示 + 3点目プレビュー（42% × 2 + 3% margin + 13% 3点目表示 = 100%） */
  height: 100%;
  flex-shrink: 0;
  margin-right: 3%;
  /* SP版：適切な余白 */
  display: block;
  visibility: visible;
  opacity: 1;
}

/* Featured Product Card */
.detail-custom-selection-card.featured {
  display: flex;
  flex-direction: column;
  height: 100%;
  text-decoration: none;
  color: inherit;
  transition: var(--modern-transition);
  position: relative;
  z-index: 1;
}

.detail-custom-selection-card.featured:hover {
  opacity: 0.95;
  text-decoration: none;
  color: inherit;
}

.detail-custom-selection-card.featured .detail-custom-selection-card-image {
  height: 76%;
  position: relative;
  border-radius: 8px;
  opacity: 0.6;
  transition: opacity 0.6s ease;
  overflow: hidden;
  /* aspect-ratio削除：自然な縦横比を維持 */
}

.detail-custom-selection-card.featured .detail-custom-selection-card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  border-radius: 8px;
  transition: transform 0.3s ease;
}

/* Products画像のホバーズーム効果 */
.detail-custom-selection-card.featured:hover .detail-custom-selection-card-image img {
  transform: scale(1.02);
}

/* Products Card Image Base Styles */
.detail-custom-selection-card.featured .detail-custom-selection-card-image {
  opacity: 0.3;
  transition: opacity 0.4s ease;
}

/* 表示エリア内のスライドの画像を完全表示 */
.detail-custom-selection-slide.slider-visible .detail-custom-selection-card.featured .detail-custom-selection-card-image {
  opacity: 1;
}

.detail-custom-selection-card.featured .detail-custom-selection-card-content {
  padding: 0.8rem 0.6rem 0.4rem 0;
  height: 24%;
  flex-shrink: 0;
  overflow: hidden;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.4s ease, transform 0.4s ease;
}

/* 表示エリア内のスライドのテキストエリア表示 */
.detail-custom-selection-slide.slider-visible .detail-custom-selection-card.featured .detail-custom-selection-card-content {
  opacity: 1;
  transform: translateY(0);
}

.detail-custom-selection-card.featured .detail-custom-selection-card-title {
  font-size: 3.2vw;
  font-weight: 400;
  color: var(--modern-primary);
  margin-bottom: 0.5rem;
  line-height: 1.3;
  letter-spacing: 0.02em;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.detail-custom-selection-card.featured .detail-custom-selection-card-price {
  font-size: 3.2vw;
  color: #0eb2e1;
  /* 価格文字色をブックマーク色に統一 */
  margin-bottom: 0;
  display: flex;
  align-items: center;
  font-weight: 500;
}

/* Navigation Area */
.detail-custom-selection-nav-area {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  padding: 0.8rem 0;
  margin-top: 0.8rem;
}

/* VIEW ALL ボタン */
.detail-custom-selection-view-all {
  display: flex;
  align-items: center;
  background: white;
  border: 1px solid rgba(128, 128, 128, 0.5);
  border-radius: 16px;
  padding: 6px 12px;
  backdrop-filter: blur(10px);
  transition: all 0.3s ease;
  text-decoration: none;
}
.detail-custom-selection-view-all:hover {
  background: #232429;
  text-decoration: none;
}
.detail-custom-selection-view-all:hover .view-all-text {
  color: white;
}

/* スライドナビゲーションボタン */
.detail-custom-selection-slider-nav {
  display: flex;
  gap: 0.6rem;
}

.detail-custom-selection-nav-btn {
  width: 28px;
  height: 28px;
  border: 1px solid rgba(31, 33, 33, 0.8);
  background: rgba(31, 33, 33, 0.9);
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s ease;
  font-size: 0.9rem;
  line-height: 1;
}
.detail-custom-selection-nav-btn .material-symbols-outlined {
  font-size: 1.2rem;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-variation-settings: "FILL" 0, "wght" 300, "GRAD" 0, "opsz" 24;
}
.detail-custom-selection-nav-btn:hover {
  background: #1f2121;
  transform: scale(1.05);
}
.detail-custom-selection-nav-btn:disabled {
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(128, 128, 128, 0.5);
  color: rgba(128, 128, 128, 0.8);
  cursor: not-allowed;
  transform: none;
}

/* ===== お問い合わせモーダルスタイル（SP版） ===== */
.inquiry-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  z-index: 1000;
  display: none;
  align-items: center;
  justify-content: center;
}
.inquiry-modal.active {
  display: flex;
}

.inquiry-modal-content {
  background: white;
  width: 100%;
  height: 100%;
  overflow-y: auto;
  animation: inquiryModalSlideIn 0.3s ease-out;
  margin: 0rem;
  display: flex;
  flex-direction: column;
}

@keyframes inquiryModalSlideIn {
  from {
    opacity: 0;
    transform: translateY(-50px) scale(0.9);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
@keyframes inquiryModalSlideOut {
  from {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
  to {
    opacity: 0;
    transform: translateY(-50px) scale(0.9);
  }
}
.inquiry-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.2rem 1.5rem;
  border-bottom: 1px solid #eee;
  background: #f9f9f9;
  border-radius: 8px 8px 0 0;
}
.inquiry-modal-header h2 {
  margin: 0;
  font-size: 4.4vw;
  font-weight: 500;
  color: #232429;
  letter-spacing: 0.02em;
}

.inquiry-modal-close {
  background: none;
  border: none;
  font-size: 1.5rem;
  color: #666;
  cursor: pointer;
  padding: 0.5rem;
  border-radius: 4px;
  transition: all 0.2s ease;
}
.inquiry-modal-close:hover {
  background: #eee;
  color: #232429;
}

.inquiry-form {
  padding: 1.5rem;
  flex: 1;
  overflow-y: auto;
}
.inquiry-form .product-info-section {
  margin-top: 1rem;
  margin-bottom: 3rem;
}
.inquiry-form .product-info-section .product-info-item {
  margin-bottom: 0.6rem;
  font-size: 3.6vw;
  line-height: 1.4;
}
.inquiry-form .product-info-section .product-info-item:last-child {
  margin-bottom: 0;
}
.inquiry-form .product-info-section .product-info-item strong {
  color: #232429;
  font-weight: 500;
  margin-right: 0.4rem;
}
.inquiry-form .product-info-section .product-info-item span {
  color: #232429;
  font-weight: 400;
}
.inquiry-form .form-group {
  margin-bottom: 1.2rem;
}
.inquiry-form .form-group label {
  display: block;
  margin-bottom: 0.4rem;
  font-size: 3.6vw;
  font-weight: 500;
  color: #232429;
  letter-spacing: 0.02em;
  padding-bottom: 0.5em;
}
.inquiry-form .form-group label .required {
  color: #e74c3c;
  margin-left: 0.2rem;
}
.inquiry-form .form-group input, .inquiry-form .form-group select, .inquiry-form .form-group textarea {
  width: 100%;
  padding: 0.8rem;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 4.4vw;
  font-family: inherit;
  transition: border-color 0.2s ease;
  box-sizing: border-box;
}
.inquiry-form .form-group input:focus, .inquiry-form .form-group select:focus, .inquiry-form .form-group textarea:focus {
  outline: none;
  border-color: #0eb2e1;
  box-shadow: 0 0 0 2px rgba(14, 178, 225, 0.1);
}
.inquiry-form .form-group input::placeholder, .inquiry-form .form-group select::placeholder, .inquiry-form .form-group textarea::placeholder {
  color: #999;
}
.inquiry-form .form-group textarea {
  resize: vertical;
  min-height: 80px;
  line-height: 1.5;
}

.form-actions, .confirm-actions {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1rem;
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid #eee;
}

.btn-confirm, .btn-cancel, .btn-send, .btn-back {
  padding: 0.75rem 1.5rem;
  border: none;
  border-radius: 4px;
  font-size: 3.6vw;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 100px;
  width: auto;
}

.btn-confirm {
  background: #0eb2e1;
  color: white;
}
.btn-confirm:hover {
  background: #0b8cb1;
  transform: translateY(-1px);
}

.btn-cancel {
  background: #f5f5f5;
  color: #232429;
  border: 1px solid #ddd;
}
.btn-cancel:hover {
  background: #eee;
}

.btn-send {
  background: #0eb2e1;
  color: white;
}
.btn-send:hover {
  background: #0b8cb1;
  transform: translateY(-1px);
}

.btn-back {
  background: #6c757d;
  color: white;
}
.btn-back:hover {
  background: #545b62;
}

.detail-inquiry-container {
  margin-top: 4vw;
  display: flex;
  justify-content: center;
}

.detail-inquiry-btn {
  width: 82%;
  padding: 4vw 5vw;
  background: #f8f9fa;
  color: #0eb2e1;
  border: 1px solid #dee2e6;
  border-radius: 6px;
  font-size: 3.2vw;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2vw;
  -webkit-tap-highlight-color: rgba(14, 178, 225, 0.2);
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  touch-action: manipulation;
}
.detail-inquiry-btn:hover, .detail-inquiry-btn:active {
  background: #e9ecef;
  color: #0eb2e1;
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.inquiry-icon {
  font-size: 5.6vw;
  color: #0eb2e1;
  font-variation-settings: "FILL" 0, "wght" 300, "GRAD" 0, "opsz" 24;
  display: inline-flex;
  align-items: center;
  transform: translateY(0.5vw);
  pointer-events: none;
}

/* ===== お問い合わせモーダル確認画面・送信完了画面スタイル（SP版） ===== */
.inquiry-confirm {
  padding: 1.5rem;
  flex: 1;
  overflow-y: auto;
  opacity: 0;
  transform: translateX(100%);
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.inquiry-confirm.active {
  opacity: 1;
  transform: translateX(0);
}
.inquiry-confirm .confirm-content h3 {
  margin: 0 0 1.2rem 0;
  font-size: 4.4vw;
  font-weight: 500;
  color: #232429;
  letter-spacing: 0.02em;
  opacity: 0;
  transform: translateY(20px);
  animation: slideInFromBottom 0.5s ease-out 0.2s forwards;
}

.confirm-item {
  margin-bottom: 0.8rem;
  padding: 0.6rem;
  background: #f9f9f9;
  border-radius: 4px;
  font-size: 3.6vw;
  line-height: 1.4;
  opacity: 0;
  transform: translateY(20px);
  animation: slideInFromBottom 0.5s ease-out forwards;
}
.confirm-item:nth-child(1) {
  animation-delay: 0.3s;
}
.confirm-item:nth-child(2) {
  animation-delay: 0.4s;
}
.confirm-item:nth-child(3) {
  animation-delay: 0.5s;
}
.confirm-item:nth-child(4) {
  animation-delay: 0.6s;
}
.confirm-item:nth-child(5) {
  animation-delay: 0.7s;
}
.confirm-item:nth-child(6) {
  animation-delay: 0.8s;
}
.confirm-item:nth-child(7) {
  animation-delay: 0.9s;
}
.confirm-item strong {
  color: #232429;
  margin-right: 0.4rem;
  font-weight: 500;
}

/* フォーム画面のトランジション */
.inquiry-form {
  opacity: 1;
  transform: translateX(0);
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.inquiry-form.slide-out {
  opacity: 0;
  transform: translateX(-100%);
}

/* 送信完了画面 */
.inquiry-complete {
  padding: 2rem 1.5rem;
  text-align: center;
  flex: 1;
  overflow-y: auto;
  opacity: 0;
  transform: scale(0.8);
  transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}
.inquiry-complete.active {
  opacity: 1;
  transform: scale(1);
}
.inquiry-complete .complete-icon {
  font-size: 4rem;
  color: #28a745;
  margin-bottom: 1rem;
  opacity: 0;
  transform: scale(0);
  animation: bounceIn 0.6s ease-out 0.3s forwards;
}
.inquiry-complete .complete-title {
  font-size: 5.6vw;
  font-weight: 500;
  color: #232429;
  margin-bottom: 1rem;
  opacity: 0;
  transform: translateY(20px);
  animation: slideInFromBottom 0.5s ease-out 0.5s forwards;
}
.inquiry-complete .complete-message {
  font-size: 3.6vw;
  color: #666;
  line-height: 1.6;
  margin-bottom: 2rem;
  opacity: 0;
  transform: translateY(20px);
  animation: slideInFromBottom 0.5s ease-out 0.7s forwards;
}

/* アニメーション定義 */
@keyframes slideInFromBottom {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes slideInFromRight {
  from {
    opacity: 0;
    transform: translateX(50px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}
@keyframes slideOutToLeft {
  from {
    opacity: 1;
    transform: translateX(0);
  }
  to {
    opacity: 0;
    transform: translateX(-50px);
  }
}
@keyframes bounceIn {
  0% {
    opacity: 0;
    transform: scale(0);
  }
  50% {
    opacity: 1;
    transform: scale(1.2);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes fadeInScale {
  from {
    opacity: 0;
    transform: scale(0.9);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
/* スクロール禁止スタイル（SP版） - iOS Safari対応 */
body.modal-open {
  overflow: hidden !important;
  /* touch-action: none; 削除 - フォーム入力のため */
  overscroll-behavior: contain;
  /* position: fixed; 削除 - iOS Safari仮想キーボード対応のため */
  width: 100%;
}

body.modal-open,
html.modal-open {
  overflow: hidden !important;
  /* touch-action: none; 削除 - フォーム入力のため */
  overscroll-behavior: contain;
}

body.modal-open .ec-main-content {
  overflow: hidden !important;
  position: relative;
}

/* iOS Safari用の追加対応 */
.inquiry-modal {
  /* iOS Safariでの仮想キーボード対応 */
  -webkit-overflow-scrolling: touch;
}
.inquiry-modal .inquiry-modal-content {
  /* モーダル内のスクロールを有効化 */
  -webkit-overflow-scrolling: touch;
  overflow-y: auto;
  /* フォーム要素のタッチ操作を有効化 */
}
.inquiry-modal .inquiry-modal-content input, .inquiry-modal .inquiry-modal-content select, .inquiry-modal .inquiry-modal-content textarea {
  -webkit-appearance: none;
  -webkit-tap-highlight-color: rgba(14, 178, 225, 0.2);
  touch-action: manipulation;
}

/* ========================================================================== */
/* 📰 トップページ簡易ニュース表示エリア - SP版 */
/* 簡易ニュース表示エリア */
.top-news-area {
  position: fixed;
  bottom: 2vw;
  right: 2vw;
  width: auto;
  max-width: 60%;
  z-index: 100;
}

.top-news-area {
  transition: opacity 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94), transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.top-news-area.initial-hidden {
  opacity: 0;
  transform: translateY(20px);
}

.top-news-area.animation-visible {
  opacity: 1;
  transform: translateY(0);
}

.top-news-container {
  position: relative;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.95);
  border-radius: 8px;
  padding: 3.5vw 3.5vw;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(10px);
  cursor: pointer;
  transition: all 0.3s ease;
}

.top-news-item {
  display: flex;
  align-items: center;
  gap: 1vw;
  opacity: 0;
  transform: translateY(20px);
  transition: all 0.5s ease;
}
.top-news-item.active {
  opacity: 1;
  transform: translateY(0);
}
.top-news-item .top-news-date {
  font-size: 2.8vw;
  color: #666666;
  font-weight: 400;
  white-space: nowrap;
  letter-spacing: -0.02em;
  line-height: 1.2em;
}
.top-news-item .top-news-title {
  font-size: 3.2vw;
  color: #232429;
  font-weight: 400;
  letter-spacing: 0.02em;
  line-height: 1.6em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ニュースモーダル */
.news-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 999999999;
  display: none;
}
.news-modal.active {
  display: block;
}

.news-modal-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
}

.news-modal-content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: white;
  border-radius: 12px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
  min-width: 300px;
  min-height: 200px;
  max-width: 90vw;
  max-height: 80vh;
  overflow: hidden;
  animation: newsModalIn 0.3s ease-out;
  display: flex;
  flex-direction: column;
}

@keyframes newsModalIn {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.9);
  }
  100% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
}
.news-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 3.5vw 4.5vw 3.5vw 4.5vw;
  border-bottom: 1px solid #eee;
}
.news-modal-header .news-modal-title {
  font-size: 4.4vw;
  color: #232429;
  font-weight: 500;
  margin: 0;
  letter-spacing: 0.08em;
  line-height: 1.8em;
}
.news-modal-header .news-modal-close {
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.5vw;
  border-radius: 50%;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: -0.5vw;
  -webkit-tap-highlight-color: rgba(14, 178, 225, 0.2);
  touch-action: manipulation;
}
.news-modal-header .news-modal-close:hover {
  background: #f5f5f5;
}
.news-modal-header .news-modal-close .material-symbols-outlined {
  font-size: 4.4vw;
  color: #666666;
}

.news-modal-body {
  padding: 3.5vw 4.5vw 3.5vw 4.5vw;
  overflow-y: auto;
  max-height: 60vh;
  flex: 1 1 auto;
  min-height: 0;
}
.news-modal-body .news-modal-date {
  font-size: 3.2vw;
  color: #666666;
  margin-bottom: 1vw;
  letter-spacing: 0.02em;
  line-height: 1.6em;
  font-weight: 400;
}
.news-modal-body .news-modal-text {
  font-size: 3.6vw;
  color: #232429;
  line-height: 2em;
  letter-spacing: 0.02em;
  white-space: pre-line;
  font-weight: 400;
}

/* ===== detail.php ツールチップ（SP版専用） ===== */
.bookmark-toggle-tooltip {
  position: fixed;
  left: 5.7em;
  bottom: 1.8em;
  max-width: 280px;
  background: #ffffff;
  color: #232429;
  border-radius: 8px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
  font-family: "Noto Sans JP", sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.8em;
  letter-spacing: 0.02em;
  padding: 12px 14px;
  white-space: nowrap;
  z-index: 9999999999;
  /* 初期状態：非表示 */
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.8s ease, transform 0.8s ease;
  /* 表示状態 */
}
.bookmark-toggle-tooltip.show {
  opacity: 1;
  transform: translateY(0);
}
.bookmark-toggle-tooltip::before {
  content: "";
  position: absolute;
  top: 50%;
  left: -16px;
  transform: translateY(-50%);
  width: 0;
  height: 0;
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
  border-right: 16px solid #ffffff;
}

/* ===== フルスクリーンイベント詳細モーダル（SP版専用） ===== */
.event-detail-fullscreen-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: white;
  overflow-y: auto;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.4s ease-out, visibility 0.4s ease-out;
  z-index: 999999;
  /* ===== イベント詳細モーダル Closeボタン（SP版専用） ===== */
}
.event-detail-fullscreen-modal.active {
  opacity: 1;
  visibility: visible;
}
.event-detail-fullscreen-modal .event-detail-content {
  padding: 4vw;
  margin-bottom: 15em;
  max-width: 100%;
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.5s ease-out, transform 0.5s ease-out;
}
.event-detail-fullscreen-modal .event-detail-content .event-detail-title {
  font-size: 7.2vw;
  color: #232429;
  font-weight: 400;
  text-align: center;
  margin: 0 0 5vw 0;
  letter-spacing: 0.05em;
  /* 字間を狭める（$xxl-letterより狭く） */
  line-height: 1.6em;
}
.event-detail-fullscreen-modal .event-detail-content .event-detail-date {
  font-size: 3.6vw;
  color: #666666;
  text-align: center;
  margin: 0 0 15vw 0;
  letter-spacing: 0.02em;
  line-height: 1.6em;
  font-weight: 500;
}
.event-detail-fullscreen-modal .event-detail-content .event-detail-lead {
  font-size: 4.4vw;
  color: #232429;
  text-align: left;
  line-height: 1.8em;
  letter-spacing: 0.08em;
  margin-bottom: 4vw;
  font-weight: 400;
}
.event-detail-fullscreen-modal .event-detail-content .event-detail-text {
  font-size: 3.6vw;
  color: #232429;
  text-align: left;
  line-height: 1.8em;
  letter-spacing: 0.02em;
  white-space: pre-line;
  margin-bottom: 15vw;
  /* セクション間の余白を増やす（3vw → 5vw） */
  font-weight: 400;
  /* リンクスタイル */
}
.event-detail-fullscreen-modal .event-detail-content .event-detail-text:last-child {
  margin-bottom: 0;
}
.event-detail-fullscreen-modal .event-detail-content .event-detail-text.highlight {
  color: #8e2236;
  font-weight: 400;
}
.event-detail-fullscreen-modal .event-detail-content .event-detail-text.italic {
  font-style: italic;
}
.event-detail-fullscreen-modal .event-detail-content .event-detail-text a {
  color: #338698;
  /* さりげない青色 */
  text-decoration: none;
  transition: color 0.2s ease;
}
.event-detail-fullscreen-modal .event-detail-content .event-detail-text a:hover {
  color: #2a6b7a;
  /* ホバー時は少し濃い青色 */
  text-decoration: underline;
}
.event-detail-fullscreen-modal .event-detail-content .event-detail-text a:visited {
  color: #5a8a9a;
  /* 訪問済みは少し薄い青色 */
}
.event-detail-fullscreen-modal .event-detail-content .event-detail-images {
  margin: 6vw 0;
  /* セクション間の余白を増やす（4vw → 6vw） */
  text-align: center;
  /* 画像コンテナを中揃え */
}
.event-detail-fullscreen-modal .event-detail-content .event-detail-images .event-detail-image {
  width: 80%;
  /* 横幅を60%に変更 */
  height: auto;
  margin-bottom: 1vw;
  /* 画像とキャプションの間の余白を縮小 */
  border-radius: 2px;
}
.event-detail-fullscreen-modal .event-detail-content .event-detail-images .event-detail-image:last-child {
  margin-bottom: 0;
}
.event-detail-fullscreen-modal .event-detail-content .event-detail-images .event-detail-image-caption {
  font-size: 2.8vw;
  color: #666666;
  text-align: center;
  margin-top: 1vw;
  /* キャプションと画像の間の余白を縮小 */
  margin-bottom: 5vw;
  /* キャプションと次のセクションの間の余白を増やす（3vw → 5vw） */
  letter-spacing: -0.02em;
  line-height: 1.6em;
  max-width: 80%;
  /* キャプションも画像と同じ幅に制限 */
  margin-left: auto;
  margin-right: auto;
}
.event-detail-fullscreen-modal .event-detail-content .event-detail-images .event-detail-image-caption:last-child {
  margin-bottom: 0;
  /* 最後のキャプションは下の余白なし */
}
.event-detail-fullscreen-modal .event-detail-content .event-detail-section-title {
  font-size: 5.6vw;
  color: #232429;
  font-weight: 400;
  text-align: left;
  margin: 6vw 0 3vw 0;
  /* セクション間の余白を増やす（4vw → 6vw, 2vw → 3vw） */
  letter-spacing: 0.08em;
  line-height: 1.6em;
}
.event-detail-fullscreen-modal .event-detail-content .event-detail-section-subtitle {
  font-size: 4.4vw;
  color: #232429;
  font-weight: 400;
  text-align: left;
  margin: 0 0 3vw 0;
  letter-spacing: 0.08em;
  line-height: 1.8em;
}
.event-detail-fullscreen-modal .event-detail-content .event-detail-info {
  background: #f8f8f8;
  padding: 3vw;
  border-radius: 4px;
  margin: 5vw 0;
  /* セクション間の余白を増やす（3vw → 5vw） */
}
.event-detail-fullscreen-modal .event-detail-content .event-detail-info .event-detail-info-item {
  margin-bottom: 2vw;
}
.event-detail-fullscreen-modal .event-detail-content .event-detail-info .event-detail-info-item:last-child {
  margin-bottom: 0;
}
.event-detail-fullscreen-modal .event-detail-content .event-detail-info .event-detail-info-title {
  font-size: 3.2vw;
  color: #232429;
  font-weight: 500;
  margin: 0 0 1vw 0;
  letter-spacing: 0.02em;
  line-height: 1.6em;
}
.event-detail-fullscreen-modal .event-detail-content .event-detail-info .event-detail-info-content {
  font-size: 3.6vw;
  color: #232429;
  margin: 0 0 1vw 0;
  letter-spacing: 0.02em;
  line-height: 1.6em;
  font-weight: 400;
}
.event-detail-fullscreen-modal .event-detail-content .event-detail-info .event-detail-info-note {
  font-size: 2.8vw;
  color: #666666;
  margin: 0;
  letter-spacing: -0.02em;
  line-height: 1.2em;
}
.event-detail-fullscreen-modal .event-detail-content .event-detail-map {
  background: #f8f8f8;
  padding: 3vw;
  border-radius: 4px;
  margin: 5vw 0;
  /* セクション間の余白を増やす（3vw → 5vw） */
}
.event-detail-fullscreen-modal .event-detail-content .event-detail-map .event-detail-map-title {
  font-size: 4.4vw;
  color: #232429;
  font-weight: 500;
  margin: 0 0 2vw 0;
  letter-spacing: 0.08em;
  line-height: 1.8em;
}
.event-detail-fullscreen-modal .event-detail-content .event-detail-map .event-detail-map-address,
.event-detail-fullscreen-modal .event-detail-content .event-detail-map .event-detail-map-tel,
.event-detail-fullscreen-modal .event-detail-content .event-detail-map .event-detail-map-open,
.event-detail-fullscreen-modal .event-detail-content .event-detail-map .event-detail-map-close {
  font-size: 3.6vw;
  color: #232429;
  margin: 0 0 1vw 0;
  letter-spacing: 0.02em;
  line-height: 1.6em;
  font-weight: 400;
}
.event-detail-fullscreen-modal .event-detail-content .event-detail-map .event-detail-map-note {
  font-size: 3.6vw;
  color: #666666;
  margin: 0 0 5vw 0;
  letter-spacing: -0.02em;
  line-height: 1.6em;
}
.event-detail-fullscreen-modal .event-detail-content .event-detail-map .event-detail-map-image {
  width: 80%;
  /* 横幅を60%に変更 */
  height: auto;
  margin-top: 2vw;
  margin-left: auto;
  /* 中揃え */
  margin-right: auto;
  /* 中揃え */
  border-radius: 2px;
  display: block;
  /* ブロック要素として表示 */
}
.event-detail-fullscreen-modal .event-detail-close {
  position: fixed;
  bottom: 4vw;
  right: 4vw;
  background: rgba(35, 36, 41, 0.9);
  /* 半透明のダークグレー */
  color: white;
  border: none;
  border-radius: 50%;
  /* 円形ボタン */
  width: 12vw;
  height: 12vw;
  font-size: 3.2vw;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;
  z-index: 9999999999;
  /* 最前面に表示 */
  letter-spacing: 0.02em;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
  /* 洗練された影 */
  backdrop-filter: blur(10px);
  /* 背景ぼかし効果 */
  -webkit-backdrop-filter: blur(10px);
  /* Safari対応 */
  /* ホバー効果 */
  /* アクティブ効果 */
  /* タッチデバイス用の最適化 */
}
.event-detail-fullscreen-modal .event-detail-close:hover {
  background: #232429;
  /* 完全な不透明 */
  transform: scale(1.05);
  /* 少し拡大 */
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  /* 影を強調 */
}
.event-detail-fullscreen-modal .event-detail-close:active {
  transform: scale(0.95);
  /* 押下時の縮小 */
  transition: transform 0.1s ease;
}
@media (hover: none) {
  .event-detail-fullscreen-modal .event-detail-close:hover {
    background: rgba(35, 36, 41, 0.9);
    /* ホバー効果を無効化 */
    transform: none;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
  }
}

/* ===== SPLIT FEATURES SECTION (SP版) ===== */
#split-features {
  padding: 2rem 0;
  background: white;
  margin-top: 20px;
}

/* ===== Features・Eventsセクション：最初のスライドの強制表示（SP版） ===== */
#split-features .split-slide:first-child .split-news-card.featured .split-card-content,
#split-news .split-slide:first-child .split-news-card.featured .split-card-content {
  opacity: 1 !important;
  transform: translateY(0) !important;
}

/* ===== Features モーダル表示スタイル（SP版） - Eventsモーダルと同じデザイン ===== */
.feature-detail-fullscreen-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: white;
  overflow-y: auto;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.4s ease-out, visibility 0.4s ease-out;
  z-index: 999999;
}
.feature-detail-fullscreen-modal.active {
  opacity: 1;
  visibility: visible;
}
.feature-detail-fullscreen-modal .feature-detail-content {
  padding: 4vw;
  margin-bottom: 15em;
  max-width: 100%;
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.5s ease-out, transform 0.5s ease-out;
  position: relative;
  /* ローディングUIの基準位置 */
  /* モーダル内ローディングUI */
}
.feature-detail-fullscreen-modal .feature-detail-content .feature-modal-loading {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100vw;
  /* モーダルの幅に合わせる */
  height: 100vh;
  /* 高さを明示的に指定 */
  background: rgba(255, 255, 255, 0.95);
  display: none;
  /* デフォルトは非表示（JavaScriptでflexに変更） */
  flex-direction: column;
  /* 縦方向の中央配置のため */
  justify-content: center;
  align-items: center;
  z-index: 10;
}
.feature-detail-fullscreen-modal .feature-detail-content .feature-modal-loading .loading-spinner {
  width: 40px;
  height: 40px;
  border: 2px solid rgba(0, 0, 0, 0.1);
  border-top-color: rgba(0, 0, 0, 0.6);
  border-radius: 50%;
  animation: spinner-spin 1s cubic-bezier(0.5, 0, 0.5, 1) infinite;
}
@keyframes spinner-spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
.feature-detail-fullscreen-modal .feature-detail-content .event-detail-title {
  font-size: 5.6vw;
  color: #232429;
  font-weight: 500;
  text-align: center;
  margin: 0 0 4vw 0;
  letter-spacing: 0.1em;
  line-height: 1.4;
  padding: 30px 0 30px 0;
}
.feature-detail-fullscreen-modal .feature-detail-content .event-detail-date {
  font-size: 3.2vw;
  color: #666666;
  text-align: center;
  margin: 0 0 6vw 0;
  letter-spacing: 0.05em;
  line-height: 1.6;
  font-weight: 500;
}
.feature-detail-fullscreen-modal .feature-detail-content .event-detail-lead {
  font-size: 3.6vw;
  color: #232429;
  text-align: left;
  line-height: 1.8;
  letter-spacing: 0.02em;
  margin: 0 0 4vw 0;
  font-weight: 400;
}
.feature-detail-fullscreen-modal .feature-detail-content .event-detail-text {
  font-size: 3.6vw;
  color: #232429;
  text-align: left;
  line-height: 1.8;
  letter-spacing: 0.02em;
  margin: 0 0 4vw 0;
  font-weight: 400;
}
.feature-detail-fullscreen-modal .feature-detail-content .event-detail-images {
  margin: 4vw 0;
  text-align: center;
}
.feature-detail-fullscreen-modal .feature-detail-content .event-detail-images .event-detail-image {
  max-width: 100%;
  height: auto;
  border-radius: 1vw;
  box-shadow: 0 0.5vw 2vw rgba(0, 0, 0, 0.1);
  margin: 2vw 0;
}
.feature-detail-fullscreen-modal .feature-detail-content .event-detail-section-title {
  font-size: 4.4vw;
  color: #232429;
  font-weight: 500;
  text-align: left;
  margin: 6vw 0 3vw 0;
  letter-spacing: 0.05em;
  line-height: 1.4;
  border-bottom: 0.2vw solid #666666;
  padding-bottom: 2vw;
}
.feature-detail-fullscreen-modal .feature-detail-close {
  position: fixed;
  bottom: 4vw;
  right: 4vw;
  background: #666666;
  color: white;
  border: none;
  border-radius: 4vw;
  padding: 2vw 4vw;
  font-size: 3.2vw;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 0.2s ease;
  z-index: 20;
  letter-spacing: 0.02em;
  line-height: 1.6em;
}
.feature-detail-fullscreen-modal .feature-detail-close:hover {
  background: #4d4d4d;
}

/* ===== Features モーダル内商品グループスタイル（SP版） ===== */
.event-detail-product-group {
  margin: 4vw 0;
  position: relative;
  z-index: 1;
}
.event-detail-product-group .event-detail-product-group-title {
  font-size: 4.5vw;
  font-weight: 500;
  color: #232429;
  margin-bottom: 2vw;
  letter-spacing: 0.05em;
  line-height: 1.4;
}
.event-detail-product-group .event-detail-product-group-description {
  font-size: 3.5vw;
  color: #666666;
  margin-bottom: 3vw;
  letter-spacing: 0.02em;
  line-height: 1.6;
}
.event-detail-product-group .event-detail-product-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 3vw;
  margin: 3vw 0;
  position: relative;
  z-index: 2;
}
.event-detail-product-group .event-detail-product-grid .ec-product-item {
  background: white !important;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  position: relative;
  z-index: 1;
  border: 1px solid #e0e0e0;
  /* Featuresモーダル内の商品アイテムは常に表示 */
  opacity: 1 !important;
  transform: translateY(0) !important;
}
.event-detail-product-group .event-detail-product-grid .ec-product-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
}
.event-detail-product-group .event-detail-product-grid .ec-product-item .ec-product-image-wrapper {
  position: relative;
  width: 100%;
  height: 35vw;
  overflow: hidden;
  background: #f5f5f5;
  border: 1px solid #e0e0e0;
}
.event-detail-product-group .event-detail-product-grid .ec-product-item .ec-product-image-wrapper .ec-product-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
  visibility: visible !important;
  display: block !important;
  opacity: 1 !important;
}
.event-detail-product-group .event-detail-product-grid .ec-product-item .ec-product-image-wrapper .ec-product-link:hover .ec-product-image {
  transform: scale(1.05);
}
.event-detail-product-group .event-detail-product-grid .ec-product-item .ec-product-image-wrapper .ec-limited-badge {
  position: absolute;
  top: 2vw;
  right: 2vw;
  background: #ff4444;
  color: white;
  padding: 1vw 2vw;
  border-radius: 4px;
  font-size: 2.5vw;
  font-weight: bold;
  letter-spacing: 0.02em;
  line-height: 1.2;
  width: fit-content !important;
  min-width: auto !important;
  max-width: none !important;
  display: inline-block !important;
}
.event-detail-product-group .event-detail-product-grid .ec-product-item .ec-product-info {
  padding: 2.5vw;
}
.event-detail-product-group .event-detail-product-grid .ec-product-item .ec-product-info .ec-product-title {
  font-size: 3.2vw;
  font-weight: 500;
  color: #232429;
  margin-bottom: 1vw;
  letter-spacing: 0.02em;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  min-height: 2.8em;
}
.event-detail-product-group .event-detail-product-grid .ec-product-item .ec-product-info .ec-product-price {
  font-size: 3.2vw;
  color: #87A7AF;
  font-weight: 500;
  letter-spacing: 0.02em;
  line-height: 1.2;
}
.event-detail-product-group .event-detail-product-grid .ec-product-item .ec-product-info .ec-product-link {
  text-decoration: none;
  color: inherit;
}
.event-detail-product-group .event-detail-product-grid .ec-product-item .ec-product-info .ec-product-link:hover {
  text-decoration: none;
  color: inherit;
}

#page_contents {
  margin-bottom: 5em;
  /* お問い合わせタイプ選択画面用の余白 */
}

.features-section {
  margin-top: 2rem;
}
.features-section .features-lead {
  font-size: 3.2vw;
  /* 統合SCSSシステムのフォントサイズ */
  color: #232429;
  /* 統合SCSSシステムのカラー */
  line-height: 1.8em;
  letter-spacing: 0.1em;
  padding-bottom: 1.5em;
  margin-top: 0.5rem;
  text-align: justify;
  text-justify: inter-character;
  text-align-last: left;
}
.features-section .features-articles {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: 1rem;
}
.features-section .features-article-button {
  background: white;
  color: #232429;
  /* 統合SCSSシステムのカラー */
  border: 1px solid #333;
  border-radius: 20px;
  padding: 8px 16px;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.3s ease;
  font-family: inherit;
}
.features-section .features-article-button:hover {
  background: #333;
  color: white;
}
.features-section .features-article-button:active {
  transform: translateY(1px);
}

/* ===== ツールチップローディング（3点丸アニメーション） ===== */
.tooltip-guide .tooltip-loading {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 16px 20px;
  min-height: 60px;
}
.tooltip-guide .tooltip-loading .tooltip-loading-dots {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.tooltip-guide .tooltip-loading .tooltip-loading-dots span {
  display: inline-block;
  font-size: 24px;
  line-height: 1;
  color: #232429;
  animation: tooltip-dot-bounce 1.4s ease-in-out infinite;
}
.tooltip-guide .tooltip-loading .tooltip-loading-dots span:nth-child(1) {
  animation-delay: 0s;
}
.tooltip-guide .tooltip-loading .tooltip-loading-dots span:nth-child(2) {
  animation-delay: 0.2s;
}
.tooltip-guide .tooltip-loading .tooltip-loading-dots span:nth-child(3) {
  animation-delay: 0.4s;
}

@keyframes tooltip-dot-bounce {
  0%, 60%, 100% {
    transform: translateY(0);
    opacity: 0.3;
  }
  30% {
    transform: translateY(-8px);
    opacity: 1;
  }
}