@charset "UTF-8";
/**
 * SHOP@BLUETREE Main Stylesheet
 * 
 * Entry point for all SCSS files
 * Imports layers in the correct order:
 * 1. Foundation - Browser reset and base styles
 * 2. Global - Variables, functions, mixins
 * 3. Layout - Page structure components
 * 4. Object - Reusable components and utilities
 * 
 * Style: 「信頼のブルー」- コーポレートトラスト × 親しみやすさ
 * Target: Elderly Japanese users with accessibility focus
 */
/**
 * Global Layer Index
 * 
 * Imports all global configuration files:
 * - Variables: Color, typography, spacing, breakpoints
 * - Functions: Unit conversion, color manipulation, calculations
 * - Mixins: Responsive design, layout patterns, accessibility
 */
/**
 * SHOP@BLUETREE SCSS Functions
 * 
 * Utility functions for calculations, color manipulation, and responsive design
 */
/**
 * px を rem に変換する関数
 * 
 * @param {number} $pixels - ピクセル値
 * @return {number} rem単位の値
 * 
 * @example
 *   padding: rem(12) rem(16);  // 0.75rem 1rem
 *   font-size: rem(14);        // 0.875rem
 */
/**
 * px を em に変換する関数
 * 
 * @param {number} $pixels - ピクセル値
 * @param {number} $context - コンテキストフォントサイズ（デフォルト16px）
 * @return {number} em単位の値
 * 
 * @example
 *   font-size: em(14);         // 0.875em
 *   font-size: em(14, 12);     // 1.167em (12pxコンテキスト)
 */
/**
 * ビューポート幅に応じた流動的なサイズを計算
 * 
 * @param {number} $min-size - 最小サイズ（px）
 * @param {number} $max-size - 最大サイズ（px）
 * @param {number} $min-vw - 最小ビューポート幅（px）
 * @param {number} $max-vw - 最大ビューポート幅（px）
 * @return {string} calc式
 * 
 * @example
 *   font-size: fluid(12, 24, 480, 1920);  // 480px〜1920pxで12px〜24pxに変化
 */
/**
 * ビューポート幅（vw）を使用した流動的なサイズ
 * 
 * @param {number} $size - 基準サイズ（px）
 * @param {number} $viewport - 基準ビューポート幅（px）
 * @return {number} vw単位の値
 * 
 * @example
 *   font-size: vw(16, 1440);  // 1440pxで16pxになるvw値
 */
/**
 * 色を明るくする
 * 
 * @param {color} $color - 対象色
 * @param {number} $percent - 明度調整（0-100）
 * @return {color} 明るくなった色
 * 
 * @example
 *   background-color: lighten-color($color-primary, 10);
 */
/**
 * 色を暗くする
 * 
 * @param {color} $color - 対象色
 * @param {number} $percent - 暗度調整（0-100）
 * @return {color} 暗くなった色
 * 
 * @example
 *   background-color: darken-color($color-primary, 10);
 */
/**
 * 色の透明度を調整
 * 
 * @param {color} $color - 対象色
 * @param {number} $opacity - 透明度（0-1）
 * @return {color} 透明度が調整された色
 * 
 * @example
 *   background-color: opacity-color($color-primary, 0.5);
 */
/**
 * コントラスト比を計算（WCAG準拠判定用）
 * 
 * @param {color} $color1 - 色1
 * @param {color} $color2 - 色2
 * @return {number} コントラスト比
 * 
 * @example
 *   $ratio: contrast-ratio($color-primary, #fff);
 */
/**
 * スペーシングスケールから値を取得
 * 
 * @param {number} $multiplier - スケール倍数
 * @return {number} スペーシング値
 * 
 * @example
 *   margin: scale-spacing(2);  // 16px (8px * 2)
 */
/**
 * ブレイクポイント値を取得
 * 
 * @param {string} $bp - ブレイクポイント名
 * @param {string} $direction - 方向（up または down）
 * @return {string} メディアクエリ文字列
 * 
 * @example
 *   @media get-breakpoint("sm", "up") { ... }
 */
/**
 * 文字列の最初の文字を大文字にする
 * 
 * @param {string} $string - 対象文字列
 * @return {string} 大文字化された文字列
 * 
 * @example
 *   content: capitalize('hello');  // 'Hello'
 */
/**
 * 最大値を取得
 * 
 * @param {number} $numbers - 数値（可変長）
 * @return {number} 最大値
 * 
 * @example
 *   width: max-value(100px, 50%, 80vw);
 */
/**
 * 最小値を取得
 * 
 * @param {number} $numbers - 数値（可変長）
 * @return {number} 最小値
 * 
 * @example
 *   width: min-value(100px, 50%, 80vw);
 */
/**
 * 値をクランプ（最小値と最大値の間に制限）
 * 
 * @param {number} $value - 値
 * @param {number} $min - 最小値
 * @param {number} $max - 最大値
 * @return {number} クランプされた値
 * 
 * @example
 *   width: clamp-value(50%, 200px, 800px);
 */
/**
 * アスペクト比を計算
 * 
 * @param {number} $width - 幅
 * @param {number} $height - 高さ
 * @return {number} アスペクト比（パーセンテージ）
 * 
 * @example
 *   padding-bottom: aspect-ratio(16, 9);  // 56.25%
 */
/**
 * タッチターゲットサイズが十分か確認
 * 
 * @param {number} $size - サイズ
 * @return {boolean} 十分な場合true
 * 
 * @example
 *   @if is-touch-target-valid($button-height) { ... }
 */
/**
 * 高齢者向けのフォントサイズが適切か確認
 * 
 * @param {number} $size - フォントサイズ
 * @return {boolean} 適切な場合true
 * 
 * @example
 *   @if is-font-size-accessible($font-size) { ... }
 */
/**
 * SHOP@BLUETREE SCSS Variables
 * Style: 「信頼のブルー」- コーポレートトラスト × 親しみやすさ
 * 
 * Design Philosophy:
 * - Primary: Royal Blue (#2563EB) - ブランドカラー、信頼と誠実さ
 * - Secondary: Coral Orange (#F97316) - CTAボタン、注目を集める
 * - Text: Dark Navy (#1F2937) - 高コントラストで読みやすく
 * - Background: Pure White (#FFFFFF) - シンプルで清潔感
 * 
 * Typography:
 * - Font: Noto Sans JP - 高い可読性、高齢者にも読みやすい
 * - Base size: 16px (rem基準)
 * - Line height: 1.6 - 十分な行間
 * 
 * Spacing:
 * - 余白多め、情報密度を下げて見やすく
 * - タッチターゲットは最低48px
 */
/**
 * SHOP@BLUETREE SCSS Mixins
 * 
 * Reusable style patterns for responsive design, layout, and common patterns
 */
/**
 * メディアクエリ（指定ブレイクポイント以上）
 * 
 * @param {string} $bp - ブレイクポイント（xs, sm, md, lg, xl, xxl）
 * 
 * @example
 *   @include mq-up(sm) { ... }  // 769px以上
 *   @include mq-up(lg) { ... }  // 1025px以上
 */
/**
 * メディアクエリ（指定ブレイクポイント以下）
 * 
 * @param {string} $bp - ブレイクポイント（xs, sm, md, lg, xl, xxl）
 * 
 * @example
 *   @include mq-down(sm) { ... }  // 768px以下
 *   @include mq-down(lg) { ... }  // 1024px以下
 */
/**
 * ダーク モード対応
 * 
 * @example
 *   @include dark-mode {
 *     background-color: #1f2937;
 *     color: #ffffff;
 *   }
 */
/**
 * ライト モード対応
 * 
 * @example
 *   @include light-mode {
 *     background-color: #ffffff;
 *     color: #1f2937;
 *   }
 */
/**
 * 高コントラスト モード対応
 * 
 * @example
 *   @include high-contrast {
 *     border-width: 2px;
 *   }
 */
/**
 * 縮小モーション対応（アニメーション無効化）
 * 
 * @example
 *   @include prefers-reduced-motion {
 *     animation: none;
 *     transition: none;
 *   }
 */
/**
 * Flexbox 中央配置（水平・垂直）
 * 
 * @example
 *   @include flex-center;
 */
/**
 * Flexbox 水平配置
 * 
 * @param {string} $justify - justify-content値（デフォルト: space-between）
 * @param {string} $align - align-items値（デフォルト: center）
 * @param {string} $gap - gap値（デフォルト: 0）
 * 
 * @example
 *   @include flex-row;
 *   @include flex-row(flex-start, flex-start, 1rem);
 */
/**
 * Flexbox 垂直配置
 * 
 * @param {string} $justify - justify-content値（デフォルト: flex-start）
 * @param {string} $align - align-items値（デフォルト: stretch）
 * @param {string} $gap - gap値（デフォルト: 0）
 * 
 * @example
 *   @include flex-column;
 *   @include flex-column(center, center, 1rem);
 */
/**
 * Grid レイアウト
 * 
 * @param {string} $columns - grid-template-columns値
 * @param {string} $gap - gap値（デフォルト: 1rem）
 * 
 * @example
 *   @include grid(repeat(3, 1fr), 1.5rem);
 *   @include grid(repeat(auto-fit, minmax(280px, 1fr)));
 */
/**
 * Grid 自動レイアウト
 * 
 * @param {number} $min-width - 最小幅
 * @param {string} $gap - gap値（デフォルト: 1rem）
 * 
 * @example
 *   @include grid-auto(280px);
 */
/**
 * 絶対配置 中央
 * 
 * @example
 *   @include absolute-center;
 */
/**
 * 絶対配置 フル
 * 
 * @example
 *   @include absolute-full;
 */
/**
 * 固定配置 フル
 * 
 * @example
 *   @include fixed-full;
 */
/**
 * テキスト省略（1行）
 * 
 * @example
 *   @include text-truncate;
 */
/**
 * テキスト省略（複数行）
 * 
 * @param {number} $lines - 行数（デフォルト: 2）
 * 
 * @example
 *   @include text-clamp(3);
 */
/**
 * テキストシャドウ
 * 
 * @param {string} $shadow - シャドウ値
 * 
 * @example
 *   @include text-shadow($shadow-md);
 */
/**
 * 見出しスタイル
 * 
 * @param {number} $size - フォントサイズ
 * @param {number} $weight - フォントウェイト
 * @param {number} $line-height - 行の高さ
 * 
 * @example
 *   @include heading($font-size-2xl, $font-weight-bold, $line-height-tight);
 */
/**
 * 本文スタイル
 * 
 * @param {number} $size - フォントサイズ
 * @param {number} $line-height - 行の高さ
 * 
 * @example
 *   @include body-text($font-size-base, $line-height-relaxed);
 */
/**
 * ボタン基本スタイル
 * 
 * @example
 *   @include button-base;
 */
/**
 * ボタン プライマリ
 * 
 * @example
 *   @include button-primary;
 */
/**
 * ボタン セカンダリ
 * 
 * @example
 *   @include button-secondary;
 */
/**
 * ボタン アウトライン
 * 
 * @example
 *   @include button-outline;
 */
/**
 * カード基本スタイル
 * 
 * @example
 *   @include card-base;
 */
/**
 * カード ホバーエフェクト
 * 
 * @example
 *   @include card-hover;
 */
/**
 * フォーム入力基本スタイル
 * 
 * @example
 *   @include form-input;
 */
/**
 * スクリーンリーダーのみ表示
 * 
 * @example
 *   @include sr-only;
 */
/**
 * フォーカス可視化
 * 
 * @example
 *   @include focus-visible;
 */
/**
 * 高齢者向けアクセシビリティ
 * 
 * @example
 *   @include accessible-elderly;
 */
/**
 * フェードイン アニメーション
 * 
 * @param {string} $duration - 期間（デフォルト: 300ms）
 * @param {string} $delay - 遅延（デフォルト: 0）
 * 
 * @example
 *   @include fade-in(500ms, 100ms);
 */
/**
 * スライドイン アニメーション
 * 
 * @param {string} $direction - 方向（up, down, left, right）
 * @param {string} $distance - 距離（デフォルト: 20px）
 * @param {string} $duration - 期間（デフォルト: 300ms）
 * 
 * @example
 *   @include slide-in(up, 30px, 500ms);
 */
/**
 * クリアフィックス（浮動要素のクリア）
 * 
 * @example
 *   @include clearfix;
 */
/**
 * ハードウェアアクセラレーション
 * 
 * @example
 *   @include gpu-accelerate;
 */
/**
 * スムーズスクロール
 * 
 * @example
 *   @include smooth-scroll;
 */
/**
 * ユーザー選択禁止
 * 
 * @example
 *   @include user-select-none;
 */
/**
 * ポインタイベント無効化
 * 
 * @example
 *   @include pointer-events-none;
 */
/* 

上向き(upward)、右向き(rightward)、下向き(downward)、左向き(leftward)、左上(upper-left)、右上(upper-right)、右下(lower-right)、左下(lower-left)の８方向から選択します


@include triangle(upward, 20px, 15px, #cd5c5c);

@include triangle(upper-left, 12px, 12px);
---*/
/* 

上向き(upward)、右向き(rightward)、下向き(downward)、左向き(leftward)、左上(upper-left)、右上(upper-right)、右下(lower-right)、左下(lower-left)の８方向から選択します


@include triangle(upward, 20px, 15px, #cd5c5c);

@include triangle(upper-left, 12px, 12px);
---*/
/**
 * Foundation Layer Index
 * 
 * Imports all foundation files in the correct order:
 * 1. Reset - Browser default reset
 * 2. Base - Base HTML element styles
 */
/**
 * SHOP@BLUETREE Reset Styles
 * 
 * Normalize and reset browser default styles for consistent rendering
 * across different browsers and devices.
 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

*::before,
*::after {
  box-sizing: border-box;
}

html {
  font-size: 16px;
  -webkit-text-size-adjust: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

body {
  margin: 0;
  padding: 0;
  font-family: "Noto Sans JP", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 1rem;
  line-height: 1.6;
  color: #1f2937;
  background-color: #edf2f8;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

main {
  display: block;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0;
  padding: 0;
  font-weight: 700;
  line-height: 1.2;
}

h1 {
  font-size: 3rem;
}

h2 {
  font-size: 2.5rem;
}

h3 {
  font-size: 2rem;
}

h4 {
  font-size: 1.75rem;
}

h5 {
  font-size: 1.5rem;
}

h6 {
  font-size: 1.25rem;
}

p {
  margin: 0;
  padding: 0;
}

small {
  font-size: 0.875rem;
}

strong,
b {
  font-weight: 700;
}

em,
i {
  font-style: italic;
}

mark {
  background-color: #fef08a;
  color: #1f2937;
  padding: 0 0.125rem;
}

del,
s {
  text-decoration: line-through;
}

ins,
u {
  text-decoration: underline;
}

sub,
sup {
  position: relative;
  font-size: 0.75rem;
  line-height: 0;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

ul,
ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

ul {
  list-style-type: none;
}

ol {
  list-style-type: none;
}

li {
  margin: 0;
  padding: 0;
}

dl,
dt,
dd {
  margin: 0;
  padding: 0;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
  border: 0;
  vertical-align: middle;
}

picture {
  display: block;
}

svg {
  display: block;
  vertical-align: middle;
  overflow: visible;
}

button,
input,
optgroup,
select,
textarea {
  font-family: "Noto Sans JP", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 1rem;
  line-height: 1.5;
  color: #1f2937;
  margin: 0;
  padding: 0;
  background-color: transparent;
  border: 0;
}

button {
  cursor: pointer;
  background-color: transparent;
  border: none;
  padding: 0;
}
button::-moz-focus-inner {
  border: 0;
  padding: 0;
}

input[type=button], input[type=reset], input[type=submit] {
  cursor: pointer;
}
input[type=checkbox], input[type=radio] {
  box-sizing: border-box;
  padding: 0;
}
input[type=search] {
  -webkit-appearance: textfield;
  outline-offset: -2px;
}
input[type=search]::-webkit-search-cancel-button, input[type=search]::-webkit-search-decoration {
  -webkit-appearance: none;
}
input::-webkit-outer-spin-button, input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
input[type=number]::-webkit-outer-spin-button, input[type=number]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
input[type=date]::-webkit-calendar-picker-indicator, input[type=datetime-local]::-webkit-calendar-picker-indicator, input[type=month]::-webkit-calendar-picker-indicator, input[type=time]::-webkit-calendar-picker-indicator, input[type=week]::-webkit-calendar-picker-indicator {
  cursor: pointer;
  border-radius: 4px;
  margin-right: 2px;
  opacity: 0.6;
  filter: invert(0.8);
}

textarea {
  resize: vertical;
  overflow: auto;
  vertical-align: top;
}

select {
  text-transform: none;
}

optgroup {
  font-weight: 700;
}

option {
  padding: 0;
}

label {
  display: inline-block;
  cursor: pointer;
}

fieldset {
  margin: 0;
  padding: 0;
  border: 0;
}

legend {
  display: block;
  width: 100%;
  max-width: 100%;
  margin-bottom: 0.5rem;
  padding: 0;
  color: inherit;
  white-space: normal;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
  width: 100%;
}

thead {
  background-color: #f3f4f6;
}

tbody,
tfoot {
  border-top: 1px solid #e0e0e0;
}

th {
  text-align: left;
  font-weight: 700;
  padding: 0.5rem 0.75rem;
  border-bottom: 1px solid #e0e0e0;
}

td {
  padding: 0.5rem 0.75rem;
  border-bottom: 1px solid #e0e0e0;
}

code,
kbd,
pre,
samp {
  font-family: "Monaco", "Courier New", monospace;
  font-size: 0.875rem;
  line-height: 1.5;
}

code {
  background-color: #f3f4f6;
  color: #d63384;
  padding: 0.125rem 0.375rem;
  border-radius: 0.25rem;
}

pre {
  display: block;
  margin: 0;
  padding: 0.75rem;
  background-color: #f3f4f6;
  border: 1px solid #e0e0e0;
  border-radius: 0.375rem;
  overflow: auto;
}
pre code {
  background-color: transparent;
  color: inherit;
  padding: 0;
}

kbd {
  background-color: #1f2937;
  color: #edf2f8;
  padding: 0.25rem 0.5rem;
  border-radius: 0.25rem;
}

blockquote {
  margin: 0;
  padding: 0.75rem 1rem;
  border-left: 4px solid #0053b3;
  background-color: #f3f4f6;
}

cite {
  font-style: italic;
}

hr {
  display: block;
  height: 1px;
  margin: 1rem 0;
  padding: 0;
  border: 0;
  background-color: #e0e0e0;
}

details {
  display: block;
}

summary {
  display: list-item;
  cursor: pointer;
  font-weight: 600;
}

dialog {
  background-color: #edf2f8;
  border: 1px solid #e0e0e0;
  border-radius: 0.5rem;
  padding: 1rem;
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

nav ul,
nav ol {
  list-style: none;
  list-style-image: none;
}

form {
  margin: 0;
  padding: 0;
}

p,
dl,
dt,
dd,
ul,
ol,
li,
pre,
form,
fieldset,
legend,
button,
input,
textarea,
select {
  margin: 0;
  padding: 0;
}

embed,
iframe,
object {
  max-width: 100%;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

:focus-visible {
  outline: 2px solid #0053b3;
  outline-offset: 2px;
}

@media print {
  *,
  *::before,
  *::after {
    background: transparent !important;
    color: #000 !important;
    box-shadow: none !important;
    text-shadow: none !important;
  }
  a,
  a:visited {
    text-decoration: underline;
  }
  a[href]::after {
    content: " (" attr(href) ")";
  }
  img {
    max-width: 100% !important;
  }
  @page {
    margin: 0.5cm;
  }
  p,
  h2,
  h3 {
    orphans: 3;
    widows: 3;
  }
  h2,
  h3 {
    page-break-after: avoid;
  }
}
/**
 * SHOP@BLUETREE Base Styles
 * 
 * Base styles for HTML elements to ensure consistent rendering
 * and establish the foundation for the design system.
 * 
 * Design Philosophy:
 * - Large, readable typography for elderly users
 * - High contrast for accessibility
 * - Generous spacing and padding
 * - Clear visual hierarchy
 */
html {
  font-size: 16px;
  -webkit-text-size-adjust: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
@media screen and (max-width: 1800px) {
  html {
    font-size: 0.8888888889vw;
  }
}
@media screen and (max-width: 1439px) {
  html {
    font-size: 0.9722222222vw;
  }
}
@media screen and (max-width: 1024px) {
  html {
    font-size: 1.3658536585vw;
  }
}
@media screen and (max-width: 768px) {
  html {
    font-size: 3.3854166667vw;
  }
}

html {
  overflow-x: hidden;
}

body {
  font-family: "Noto Sans JP", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 1rem;
  line-height: 1.6;
  color: #1f2937;
  background-color: #edf2f8;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  overflow-x: clip;
  position: relative;
  width: 100%;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: 700;
  line-height: 1.2;
  color: #1f2937;
  margin-bottom: 0.75rem;
}

h1 {
  font-size: 3rem;
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: 1rem;
}
@media screen and (max-width: 768px) {
  h1 {
    font-size: 2.5rem;
  }
}

h2 {
  font-size: 2.5rem;
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: 1rem;
}
@media screen and (max-width: 768px) {
  h2 {
    font-size: 2rem;
  }
}

h3 {
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: 0.75rem;
}
@media screen and (max-width: 768px) {
  h3 {
    font-size: 1.75rem;
  }
}

h4 {
  font-size: 1.75rem;
  font-weight: 600;
  line-height: 1.2;
  margin-bottom: 0.75rem;
}

h5 {
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 1.2;
  margin-bottom: 0.5rem;
}

h6 {
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1.2;
  margin-bottom: 0.5rem;
}

p {
  margin-bottom: 0.75rem;
  line-height: 1.6;
}
p:last-child {
  margin-bottom: 0;
}

small {
  font-size: 0.875rem;
  line-height: 1.5;
}

strong,
b {
  font-weight: 700;
  color: #1f2937;
}

em,
i {
  font-style: italic;
}

mark {
  background-color: #fef08a;
  color: #1f2937;
  padding: 0.125rem 0.375rem;
  border-radius: 0.25rem;
}

del,
s {
  text-decoration: line-through;
  opacity: 0.6;
}

ins,
u {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.25rem;
}

sub,
sup {
  position: relative;
  font-size: 0.75rem;
  line-height: 0;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

a {
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.25rem;
  transition: all 200ms ease-in-out;
  cursor: pointer;
}
a:hover {
  color: #3b82f6;
  text-decoration-thickness: 2px;
}
a:active {
  color: #1e40af;
}
@media (prefers-contrast: more) {
  a {
    text-decoration-thickness: 2px;
  }
}

.entry-content ul,
.entry-content ol,
.p-single-news__body ul,
.p-single-news__body ol,
.p-single-news__content ul,
.p-single-news__content ol {
  margin-bottom: 0.75rem;
  padding-left: 1.5rem;
}
.entry-content ul:last-child,
.entry-content ol:last-child,
.p-single-news__body ul:last-child,
.p-single-news__body ol:last-child,
.p-single-news__content ul:last-child,
.p-single-news__content ol:last-child {
  margin-bottom: 0;
}
.entry-content ul,
.p-single-news__body ul,
.p-single-news__content ul {
  list-style-type: disc;
}
.entry-content ul ul,
.p-single-news__body ul ul,
.p-single-news__content ul ul {
  list-style-type: circle;
  margin-top: 0.5rem;
  margin-bottom: 0;
}
.entry-content ul ul ul,
.p-single-news__body ul ul ul,
.p-single-news__content ul ul ul {
  list-style-type: square;
}
.entry-content ol,
.p-single-news__body ol,
.p-single-news__content ol {
  list-style-type: decimal;
}
.entry-content ol ol,
.p-single-news__body ol ol,
.p-single-news__content ol ol {
  list-style-type: lower-alpha;
  margin-top: 0.5rem;
  margin-bottom: 0;
}
.entry-content ol ol ol,
.p-single-news__body ol ol ol,
.p-single-news__content ol ol ol {
  list-style-type: lower-roman;
}
.entry-content li,
.p-single-news__body li,
.p-single-news__content li {
  margin-bottom: 0.5rem;
  line-height: 1.6;
}
.entry-content li:last-child,
.p-single-news__body li:last-child,
.p-single-news__content li:last-child {
  margin-bottom: 0;
}

dl {
  margin-bottom: 0.75rem;
}
dl:last-child {
  margin-bottom: 0;
}

dt {
  font-weight: 700;
  margin-top: 0.75rem;
  margin-bottom: 0.5rem;
}

dd {
  margin-left: 1.5rem;
  margin-bottom: 0.5rem;
}
dd:last-child {
  margin-bottom: 0;
}

blockquote {
  margin-bottom: 0.75rem;
  padding: 0.75rem 1rem;
  border-left: 4px solid #0053b3;
  background-color: #f3f4f6;
  font-style: italic;
  color: #4b5563;
}
blockquote:last-child {
  margin-bottom: 0;
}
blockquote p {
  margin-bottom: 0;
}
blockquote p:not(:last-child) {
  margin-bottom: 0.5rem;
}

cite {
  font-style: italic;
  color: #6b7280;
}

code {
  font-family: "Monaco", "Courier New", monospace;
  font-size: 0.875rem;
  background-color: #f3f4f6;
  color: #d63384;
  padding: 0.125rem 0.375rem;
  border-radius: 0.25rem;
  line-height: 1.5;
}

pre {
  display: block;
  margin-bottom: 0.75rem;
  padding: 0.75rem;
  background-color: #f3f4f6;
  border: 1px solid #e0e0e0;
  border-radius: 0.375rem;
  overflow-x: auto;
  font-family: "Monaco", "Courier New", monospace;
  font-size: 0.875rem;
  line-height: 1.5;
}
pre:last-child {
  margin-bottom: 0;
}
pre code {
  background-color: transparent;
  color: inherit;
  padding: 0;
  border-radius: 0;
}

kbd {
  font-family: "Monaco", "Courier New", monospace;
  font-size: 0.75rem;
  background-color: #1f2937;
  color: #edf2f8;
  padding: 0.25rem 0.5rem;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.2);
}

samp {
  font-family: "Monaco", "Courier New", monospace;
  font-size: 0.875rem;
  background-color: #f3f4f6;
  padding: 0.125rem 0.375rem;
  border-radius: 0.25rem;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
  vertical-align: middle;
}

picture {
  display: block;
}

svg {
  display: block;
  vertical-align: middle;
  overflow: visible;
}

figure {
  margin-bottom: 1rem;
}
figure:last-child {
  margin-bottom: 0;
}

figcaption {
  font-size: 0.875rem;
  color: #6b7280;
  margin-top: 0.5rem;
  font-style: italic;
}

hr {
  display: block;
  height: 1px;
  margin: 1.5rem 0;
  padding: 0;
  border: 0;
  background-color: #e0e0e0;
}
hr:last-child {
  margin-bottom: 0;
}

form {
  margin-bottom: 1rem;
}
form:last-child {
  margin-bottom: 0;
}

fieldset {
  margin-bottom: 1rem;
  padding: 1rem;
  border: 1px solid #e0e0e0;
  border-radius: 0.375rem;
  background-color: #f3f4f6;
}
fieldset:last-child {
  margin-bottom: 0;
}

legend {
  font-weight: 700;
  font-size: 1.25rem;
  padding: 0 0.75rem;
  color: #1f2937;
}

label {
  display: inline-block;
  margin-bottom: 0.5rem;
  font-weight: 500;
  cursor: pointer;
  color: #1f2937;
  display: inline-block;
}

input,
textarea,
select {
  width: 100%;
  padding: 0.5rem 0.75rem;
  border: 1px solid #e0e0e0;
  border-radius: 0.375rem;
  font-family: "Noto Sans JP", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 1rem;
  line-height: 1.5;
  color: #1f2937;
  background-color: #edf2f8;
  transition: all 200ms ease-in-out;
  min-height: 3rem;
}
input:focus,
textarea:focus,
select:focus {
  outline: none;
  border-color: #0053b3;
  box-shadow: 0 0 0 3px rgba(0, 83, 179, 0.1);
}
input:disabled,
textarea:disabled,
select:disabled {
  background-color: #f3f4f6;
  cursor: not-allowed;
  opacity: 0.6;
}
input::placeholder,
textarea::placeholder,
select::placeholder {
  color: #6b7280;
}

input[type=checkbox],
input[type=radio] {
  width: 1.25rem;
  height: 1.25rem;
  min-height: auto;
  margin-right: 0.5rem;
  cursor: pointer;
  vertical-align: middle;
}

button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.5rem 0.75rem;
  border: none;
  border-radius: 0.375rem;
  font-family: "Noto Sans JP", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 1rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 200ms ease-in-out;
  min-height: 3rem;
  min-width: 3rem;
}
button:focus {
  /* outline: 2px solid $color-primary;
  outline-offset: 2px; */
}
button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

table {
  width: 100%;
  margin-bottom: 1rem;
  border-collapse: collapse;
  border-spacing: 0;
}
table:last-child {
  margin-bottom: 0;
}

thead {
  background-color: #f3f4f6;
}

tbody {
  border-top: 1px solid #e0e0e0;
}

tfoot {
  border-top: 2px solid #e0e0e0;
  background-color: #f3f4f6;
}

th {
  text-align: left;
  font-weight: 700;
  padding: 0.75rem;
  border-bottom: 1px solid #e0e0e0;
  background-color: #f3f4f6;
  color: #1f2937;
}

td {
  padding: 0.75rem;
  border-bottom: 1px solid #e0e0e0;
  vertical-align: top;
}

details {
  margin-bottom: 0.75rem;
  padding: 0.75rem;
  border: 1px solid #e0e0e0;
  border-radius: 0.375rem;
  background-color: #f3f4f6;
}
details:last-child {
  margin-bottom: 0;
}

summary {
  cursor: pointer;
  font-weight: 600;
  padding: 0.5rem;
  user-select: none;
}
dialog {
  background-color: #edf2f8;
  border: 1px solid #e0e0e0;
  border-radius: 0.5rem;
  padding: 1.5rem;
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  max-width: 90vw;
}

.skip-to-main {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}
.skip-to-main:focus {
  position: static;
  width: auto;
  height: auto;
  padding: 0.75rem;
  margin: 0;
  overflow: visible;
  clip: auto;
  white-space: normal;
  background-color: #0053b3;
  color: #ffffff;
  z-index: 1030;
}

:focus-visible {
  outline: 2px solid #0053b3;
  outline-offset: 2px;
}

@media screen and (max-width: 768px) {
  h1 {
    font-size: 2.5rem;
  }
  h2 {
    font-size: 2rem;
  }
  h3 {
    font-size: 1.75rem;
  }
  ul,
  ol {
    padding-left: 1rem;
  }
  table {
    font-size: 0.875rem;
  }
  table th,
  table td {
    padding: 0.5rem;
  }
  pre {
    padding: 0.75rem;
    font-size: 0.75rem;
  }
}
@media print {
  body {
    background-color: #ffffff;
    color: #000000;
  }
  a {
    color: #0066cc;
    text-decoration: underline;
  }
  a[href]::after {
    content: " (" attr(href) ")";
  }
  img {
    max-width: 100%;
  }
  h1,
  h2,
  h3 {
    page-break-after: avoid;
  }
  p,
  ul,
  ol {
    orphans: 3;
    widows: 3;
  }
  pre {
    page-break-inside: avoid;
  }
}
.section {
  padding: 5rem 0;
  text-align: center;
}

/**
 * Global Layer Index
 * 
 * Imports all global configuration files:
 * - Variables: Color, typography, spacing, breakpoints
 * - Functions: Unit conversion, color manipulation, calculations
 * - Mixins: Responsive design, layout patterns, accessibility
 */
/**
 * SHOP@BLUETREE SCSS Functions
 * 
 * Utility functions for calculations, color manipulation, and responsive design
 */
/**
 * px を rem に変換する関数
 * 
 * @param {number} $pixels - ピクセル値
 * @return {number} rem単位の値
 * 
 * @example
 *   padding: rem(12) rem(16);  // 0.75rem 1rem
 *   font-size: rem(14);        // 0.875rem
 */
/**
 * px を em に変換する関数
 * 
 * @param {number} $pixels - ピクセル値
 * @param {number} $context - コンテキストフォントサイズ（デフォルト16px）
 * @return {number} em単位の値
 * 
 * @example
 *   font-size: em(14);         // 0.875em
 *   font-size: em(14, 12);     // 1.167em (12pxコンテキスト)
 */
/**
 * ビューポート幅に応じた流動的なサイズを計算
 * 
 * @param {number} $min-size - 最小サイズ（px）
 * @param {number} $max-size - 最大サイズ（px）
 * @param {number} $min-vw - 最小ビューポート幅（px）
 * @param {number} $max-vw - 最大ビューポート幅（px）
 * @return {string} calc式
 * 
 * @example
 *   font-size: fluid(12, 24, 480, 1920);  // 480px〜1920pxで12px〜24pxに変化
 */
/**
 * ビューポート幅（vw）を使用した流動的なサイズ
 * 
 * @param {number} $size - 基準サイズ（px）
 * @param {number} $viewport - 基準ビューポート幅（px）
 * @return {number} vw単位の値
 * 
 * @example
 *   font-size: vw(16, 1440);  // 1440pxで16pxになるvw値
 */
/**
 * 色を明るくする
 * 
 * @param {color} $color - 対象色
 * @param {number} $percent - 明度調整（0-100）
 * @return {color} 明るくなった色
 * 
 * @example
 *   background-color: lighten-color($color-primary, 10);
 */
/**
 * 色を暗くする
 * 
 * @param {color} $color - 対象色
 * @param {number} $percent - 暗度調整（0-100）
 * @return {color} 暗くなった色
 * 
 * @example
 *   background-color: darken-color($color-primary, 10);
 */
/**
 * 色の透明度を調整
 * 
 * @param {color} $color - 対象色
 * @param {number} $opacity - 透明度（0-1）
 * @return {color} 透明度が調整された色
 * 
 * @example
 *   background-color: opacity-color($color-primary, 0.5);
 */
/**
 * コントラスト比を計算（WCAG準拠判定用）
 * 
 * @param {color} $color1 - 色1
 * @param {color} $color2 - 色2
 * @return {number} コントラスト比
 * 
 * @example
 *   $ratio: contrast-ratio($color-primary, #fff);
 */
/**
 * スペーシングスケールから値を取得
 * 
 * @param {number} $multiplier - スケール倍数
 * @return {number} スペーシング値
 * 
 * @example
 *   margin: scale-spacing(2);  // 16px (8px * 2)
 */
/**
 * ブレイクポイント値を取得
 * 
 * @param {string} $bp - ブレイクポイント名
 * @param {string} $direction - 方向（up または down）
 * @return {string} メディアクエリ文字列
 * 
 * @example
 *   @media get-breakpoint("sm", "up") { ... }
 */
/**
 * 文字列の最初の文字を大文字にする
 * 
 * @param {string} $string - 対象文字列
 * @return {string} 大文字化された文字列
 * 
 * @example
 *   content: capitalize('hello');  // 'Hello'
 */
/**
 * 最大値を取得
 * 
 * @param {number} $numbers - 数値（可変長）
 * @return {number} 最大値
 * 
 * @example
 *   width: max-value(100px, 50%, 80vw);
 */
/**
 * 最小値を取得
 * 
 * @param {number} $numbers - 数値（可変長）
 * @return {number} 最小値
 * 
 * @example
 *   width: min-value(100px, 50%, 80vw);
 */
/**
 * 値をクランプ（最小値と最大値の間に制限）
 * 
 * @param {number} $value - 値
 * @param {number} $min - 最小値
 * @param {number} $max - 最大値
 * @return {number} クランプされた値
 * 
 * @example
 *   width: clamp-value(50%, 200px, 800px);
 */
/**
 * アスペクト比を計算
 * 
 * @param {number} $width - 幅
 * @param {number} $height - 高さ
 * @return {number} アスペクト比（パーセンテージ）
 * 
 * @example
 *   padding-bottom: aspect-ratio(16, 9);  // 56.25%
 */
/**
 * タッチターゲットサイズが十分か確認
 * 
 * @param {number} $size - サイズ
 * @return {boolean} 十分な場合true
 * 
 * @example
 *   @if is-touch-target-valid($button-height) { ... }
 */
/**
 * 高齢者向けのフォントサイズが適切か確認
 * 
 * @param {number} $size - フォントサイズ
 * @return {boolean} 適切な場合true
 * 
 * @example
 *   @if is-font-size-accessible($font-size) { ... }
 */
/**
 * SHOP@BLUETREE SCSS Variables
 * Style: 「信頼のブルー」- コーポレートトラスト × 親しみやすさ
 * 
 * Design Philosophy:
 * - Primary: Royal Blue (#2563EB) - ブランドカラー、信頼と誠実さ
 * - Secondary: Coral Orange (#F97316) - CTAボタン、注目を集める
 * - Text: Dark Navy (#1F2937) - 高コントラストで読みやすく
 * - Background: Pure White (#FFFFFF) - シンプルで清潔感
 * 
 * Typography:
 * - Font: Noto Sans JP - 高い可読性、高齢者にも読みやすい
 * - Base size: 16px (rem基準)
 * - Line height: 1.6 - 十分な行間
 * 
 * Spacing:
 * - 余白多め、情報密度を下げて見やすく
 * - タッチターゲットは最低48px
 */
/**
 * SHOP@BLUETREE SCSS Mixins
 * 
 * Reusable style patterns for responsive design, layout, and common patterns
 */
/**
 * メディアクエリ（指定ブレイクポイント以上）
 * 
 * @param {string} $bp - ブレイクポイント（xs, sm, md, lg, xl, xxl）
 * 
 * @example
 *   @include mq-up(sm) { ... }  // 769px以上
 *   @include mq-up(lg) { ... }  // 1025px以上
 */
/**
 * メディアクエリ（指定ブレイクポイント以下）
 * 
 * @param {string} $bp - ブレイクポイント（xs, sm, md, lg, xl, xxl）
 * 
 * @example
 *   @include mq-down(sm) { ... }  // 768px以下
 *   @include mq-down(lg) { ... }  // 1024px以下
 */
/**
 * ダーク モード対応
 * 
 * @example
 *   @include dark-mode {
 *     background-color: #1f2937;
 *     color: #ffffff;
 *   }
 */
/**
 * ライト モード対応
 * 
 * @example
 *   @include light-mode {
 *     background-color: #ffffff;
 *     color: #1f2937;
 *   }
 */
/**
 * 高コントラスト モード対応
 * 
 * @example
 *   @include high-contrast {
 *     border-width: 2px;
 *   }
 */
/**
 * 縮小モーション対応（アニメーション無効化）
 * 
 * @example
 *   @include prefers-reduced-motion {
 *     animation: none;
 *     transition: none;
 *   }
 */
/**
 * Flexbox 中央配置（水平・垂直）
 * 
 * @example
 *   @include flex-center;
 */
/**
 * Flexbox 水平配置
 * 
 * @param {string} $justify - justify-content値（デフォルト: space-between）
 * @param {string} $align - align-items値（デフォルト: center）
 * @param {string} $gap - gap値（デフォルト: 0）
 * 
 * @example
 *   @include flex-row;
 *   @include flex-row(flex-start, flex-start, 1rem);
 */
/**
 * Flexbox 垂直配置
 * 
 * @param {string} $justify - justify-content値（デフォルト: flex-start）
 * @param {string} $align - align-items値（デフォルト: stretch）
 * @param {string} $gap - gap値（デフォルト: 0）
 * 
 * @example
 *   @include flex-column;
 *   @include flex-column(center, center, 1rem);
 */
/**
 * Grid レイアウト
 * 
 * @param {string} $columns - grid-template-columns値
 * @param {string} $gap - gap値（デフォルト: 1rem）
 * 
 * @example
 *   @include grid(repeat(3, 1fr), 1.5rem);
 *   @include grid(repeat(auto-fit, minmax(280px, 1fr)));
 */
/**
 * Grid 自動レイアウト
 * 
 * @param {number} $min-width - 最小幅
 * @param {string} $gap - gap値（デフォルト: 1rem）
 * 
 * @example
 *   @include grid-auto(280px);
 */
/**
 * 絶対配置 中央
 * 
 * @example
 *   @include absolute-center;
 */
/**
 * 絶対配置 フル
 * 
 * @example
 *   @include absolute-full;
 */
/**
 * 固定配置 フル
 * 
 * @example
 *   @include fixed-full;
 */
/**
 * テキスト省略（1行）
 * 
 * @example
 *   @include text-truncate;
 */
/**
 * テキスト省略（複数行）
 * 
 * @param {number} $lines - 行数（デフォルト: 2）
 * 
 * @example
 *   @include text-clamp(3);
 */
/**
 * テキストシャドウ
 * 
 * @param {string} $shadow - シャドウ値
 * 
 * @example
 *   @include text-shadow($shadow-md);
 */
/**
 * 見出しスタイル
 * 
 * @param {number} $size - フォントサイズ
 * @param {number} $weight - フォントウェイト
 * @param {number} $line-height - 行の高さ
 * 
 * @example
 *   @include heading($font-size-2xl, $font-weight-bold, $line-height-tight);
 */
/**
 * 本文スタイル
 * 
 * @param {number} $size - フォントサイズ
 * @param {number} $line-height - 行の高さ
 * 
 * @example
 *   @include body-text($font-size-base, $line-height-relaxed);
 */
/**
 * ボタン基本スタイル
 * 
 * @example
 *   @include button-base;
 */
/**
 * ボタン プライマリ
 * 
 * @example
 *   @include button-primary;
 */
/**
 * ボタン セカンダリ
 * 
 * @example
 *   @include button-secondary;
 */
/**
 * ボタン アウトライン
 * 
 * @example
 *   @include button-outline;
 */
/**
 * カード基本スタイル
 * 
 * @example
 *   @include card-base;
 */
/**
 * カード ホバーエフェクト
 * 
 * @example
 *   @include card-hover;
 */
/**
 * フォーム入力基本スタイル
 * 
 * @example
 *   @include form-input;
 */
/**
 * スクリーンリーダーのみ表示
 * 
 * @example
 *   @include sr-only;
 */
/**
 * フォーカス可視化
 * 
 * @example
 *   @include focus-visible;
 */
/**
 * 高齢者向けアクセシビリティ
 * 
 * @example
 *   @include accessible-elderly;
 */
/**
 * フェードイン アニメーション
 * 
 * @param {string} $duration - 期間（デフォルト: 300ms）
 * @param {string} $delay - 遅延（デフォルト: 0）
 * 
 * @example
 *   @include fade-in(500ms, 100ms);
 */
/**
 * スライドイン アニメーション
 * 
 * @param {string} $direction - 方向（up, down, left, right）
 * @param {string} $distance - 距離（デフォルト: 20px）
 * @param {string} $duration - 期間（デフォルト: 300ms）
 * 
 * @example
 *   @include slide-in(up, 30px, 500ms);
 */
/**
 * クリアフィックス（浮動要素のクリア）
 * 
 * @example
 *   @include clearfix;
 */
/**
 * ハードウェアアクセラレーション
 * 
 * @example
 *   @include gpu-accelerate;
 */
/**
 * スムーズスクロール
 * 
 * @example
 *   @include smooth-scroll;
 */
/**
 * ユーザー選択禁止
 * 
 * @example
 *   @include user-select-none;
 */
/**
 * ポインタイベント無効化
 * 
 * @example
 *   @include pointer-events-none;
 */
/* 

上向き(upward)、右向き(rightward)、下向き(downward)、左向き(leftward)、左上(upper-left)、右上(upper-right)、右下(lower-right)、左下(lower-left)の８方向から選択します


@include triangle(upward, 20px, 15px, #cd5c5c);

@include triangle(upper-left, 12px, 12px);
---*/
/* 

上向き(upward)、右向き(rightward)、下向き(downward)、左向き(leftward)、左上(upper-left)、右上(upper-right)、右下(lower-right)、左下(lower-left)の８方向から選択します


@include triangle(upward, 20px, 15px, #cd5c5c);

@include triangle(upper-left, 12px, 12px);
---*/
/**
 * SHOP@BLUETREE Container Layout
 * 
 * BEM: .l-container
 * 
 * コンテナレイアウト - ページ全体の最大幅と余白を管理
 * 高齢者向けアクセシビリティを考慮した設計
 */
/**
 * .l-container
 * 
 * ページコンテンツの最大幅と横方向の余白を管理
 * 
 * Modifiers:
 * - .l-container--full: 最大幅なし（フルWidth）
 * - .l-container--narrow: 狭い幅（800px）
 * - .l-container--wide: 広い幅（1400px）
 * 
 * @example
 *   <div class="l-container">
 *     <div class="l-container__inner">
 *       Content here
 *     </div>
 *   </div>
 */
.l-container {
  width: 100%;
  margin-inline: auto;
  padding-inline: 1.25rem;
  max-width: 1536px;
}

@media screen and (min-width: 769px) {
  .l-container {
    padding-inline: 2.5rem;
  }
}
/**
 * .l-container__inner
 * 
 * コンテナ内部のコンテンツラッパー
 * 追加の余白やグリッドレイアウトを適用する場合に使用
 */
.l-container__inner {
  width: 100%;
}

/**
 * .l-container--full
 * 
 * 最大幅制限なし（フルWidth）
 * ヒーロー画像やバナーなど、フルWidthで表示する場合に使用
 */
.l-container--full {
  max-width: none;
  padding-left: 0;
  padding-right: 0;
}

/**
 * .l-container--narrow
 * 
 * 狭い幅（800px）
 * テキストコンテンツが中心のページに使用
 */
.l-container--narrow {
  max-width: 800px;
}

.l-container--nomarl {
  max-width: 1240px;
}

/**
 * .l-container--wide
 * 
 * 広い幅（1400px）
 * グリッドレイアウトや複数カラムが必要な場合に使用
 */
.l-container--wide {
  max-width: 1400px;
  margin-inline: auto;
}

/**
 * .l-section
 * 
 * ページセクション - 上下の余白を管理
 * 
 * Modifiers:
 * - .l-section--hero: ヒーロー（大きな余白）
 * - .l-section--compact: コンパクト（小さな余白）
 * 
 * @example
 *   <section class="l-section">
 *     <div class="l-container">
 *       Content here
 *     </div>
 *   </section>
 */
.l-section {
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
}

@media screen and (min-width: 1025px) {
  .l-section {
    padding-top: 2rem;
    padding-bottom: 2rem;
  }
}
@media screen and (min-width: 1440px) {
  .l-section {
    padding-top: 3rem;
    padding-bottom: 3rem;
  }
}
.l-section:nth-child(even) {
  background-color: #f3f4f6;
}

/**
 * .l-section--hero
 * 
 * ヒーロー/バナーセクション - 大きな余白
 */
.l-section--hero {
  padding-top: 2rem;
  padding-bottom: 2rem;
}

@media screen and (min-width: 1025px) {
  .l-section--hero {
    padding-top: 3rem;
    padding-bottom: 3rem;
  }
}
@media screen and (min-width: 1440px) {
  .l-section--hero {
    padding-top: 4rem;
    padding-bottom: 4rem;
  }
}
/**
 * .l-section--compact
 * 
 * コンパクトセクション - 小さな余白
 */
.l-section--compact {
  padding-top: 1rem;
  padding-bottom: 1rem;
}

@media screen and (min-width: 1025px) {
  .l-section--compact {
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
  }
}
/**
 * .l-section--no-padding
 * 
 * パディングなし
 */
.l-section--no-padding {
  padding-top: 0;
  padding-bottom: 0;
}

/**
 * .l-grid
 * 
 * グリッドレイアウト - 複数カラムのコンテンツを配置
 * 
 * Modifiers:
 * - .l-grid--2col: 2カラム
 * - .l-grid--3col: 3カラム
 * - .l-grid--4col: 4カラム
 * - .l-grid--auto: 自動配置
 * 
 * @example
 *   <div class="l-grid l-grid--3col">
 *     <div class="l-grid__item">Item 1</div>
 *     <div class="l-grid__item">Item 2</div>
 *     <div class="l-grid__item">Item 3</div>
 *   </div>
 */
.l-grid {
  display: grid;
  gap: 1rem;
}

@media screen and (min-width: 1025px) {
  .l-grid {
    gap: 1.5rem;
  }
}
/**
 * .l-grid__item
 * 
 * グリッドアイテム
 */
.l-grid__item {
  width: 100%;
}

/**
 * .l-grid--2col
 * 
 * 2カラムグリッド
 */
.l-grid--2col {
  grid-template-columns: 1fr;
}

@media screen and (min-width: 769px) {
  .l-grid--2col {
    grid-template-columns: repeat(2, 1fr);
  }
}
/**
 * .l-grid--3col
 * 
 * 3カラムグリッド
 */
.l-grid--3col {
  grid-template-columns: 1fr;
}

@media screen and (min-width: 769px) {
  .l-grid--3col {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media screen and (min-width: 1025px) {
  .l-grid--3col {
    grid-template-columns: repeat(3, 1fr);
  }
}
/**
 * .l-grid--4col
 * 
 * 4カラムグリッド
 */
.l-grid--4col {
  grid-template-columns: 1fr;
}

@media screen and (min-width: 769px) {
  .l-grid--4col {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media screen and (min-width: 901px) {
  .l-grid--4col {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media screen and (min-width: 1025px) {
  .l-grid--4col {
    grid-template-columns: repeat(4, 1fr);
  }
}
/**
 * .l-grid--auto
 * 
 * 自動配置グリッド（最小幅指定）
 */
.l-grid--auto {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1rem;
}

/**
 * .l-flex
 * 
 * Flexboxレイアウト
 * 
 * Modifiers:
 * - .l-flex--row: 水平配置
 * - .l-flex--col: 垂直配置
 * - .l-flex--center: 中央配置
 * 
 * @example
 *   <div class="l-flex l-flex--row">
 *     <div class="l-flex__item">Item 1</div>
 *     <div class="l-flex__item">Item 2</div>
 *   </div>
 */
.l-flex {
  display: flex;
  gap: 1rem;
}

@media screen and (min-width: 1025px) {
  .l-flex {
    gap: 1.5rem;
  }
}
/**
 * .l-flex__item
 * 
 * Flexアイテム
 */
.l-flex__item {
  flex: 1 1 auto;
  min-width: 0;
}

/**
 * .l-flex--row
 * 
 * 水平配置
 */
.l-flex--row {
  flex-direction: row;
}

/**
 * .l-flex--col
 * 
 * 垂直配置
 */
.l-flex--col {
  flex-direction: column;
}

/**
 * .l-flex--center
 * 
 * 中央配置
 */
.l-flex--center {
  display: flex;
  align-items: center;
  justify-content: center;
}

/**
 * .l-flex--between
 * 
 * 両端揃え
 */
.l-flex--between {
  justify-content: space-between;
}

/**
 * .l-flex--around
 * 
 * 均等配置
 */
.l-flex--around {
  justify-content: space-around;
}

/**
 * .l-flex--wrap
 * 
 * 折り返し
 */
.l-flex--wrap {
  flex-wrap: wrap;
}

/**
 * .l-sidebar
 * 
 * サイドバーレイアウト
 * 
 * Modifiers:
 * - .l-sidebar--left: サイドバー左
 * - .l-sidebar--right: サイドバー右
 * 
 * @example
 *   <div class="l-sidebar l-sidebar--right">
 *     <div class="l-sidebar__main">Main content</div>
 *     <aside class="l-sidebar__side">Sidebar</aside>
 *   </div>
 */
.l-sidebar {
  display: grid;
  gap: 1.5rem;
}

@media screen and (min-width: 1025px) {
  .l-sidebar {
    gap: 2rem;
  }
}
/**
 * .l-sidebar__main
 * 
 * メインコンテンツエリア
 */
.l-sidebar__main {
  width: 100%;
  min-width: 0;
}

/**
 * .l-sidebar__side
 * 
 * サイドバーエリア
 */
.l-sidebar__side {
  width: 100%;
  min-width: 0;
}

/**
 * .l-sidebar--left
 * 
 * サイドバー左配置
 */
@media screen and (min-width: 1025px) {
  .l-sidebar--left {
    grid-template-columns: 300px 1fr;
  }
  .l-sidebar--left .l-sidebar__side {
    order: -1;
  }
}
@media screen and (min-width: 1440px) {
  .l-sidebar--left {
    grid-template-columns: 350px 1fr;
  }
}
/**
 * .l-sidebar--right
 * 
 * サイドバー右配置
 */
@media screen and (min-width: 1025px) {
  .l-sidebar--right {
    grid-template-columns: 1fr 300px;
  }
}
@media screen and (min-width: 1440px) {
  .l-sidebar--right {
    grid-template-columns: 1fr 350px;
  }
}
/**
 * .l-stack
 * 
 * スタックレイアウト - 垂直配置で均等な間隔
 * 
 * Modifiers:
 * - .l-stack--tight: 小さな間隔
 * - .l-stack--loose: 大きな間隔
 * 
 * @example
 *   <div class="l-stack">
 *     <div class="l-stack__item">Item 1</div>
 *     <div class="l-stack__item">Item 2</div>
 *     <div class="l-stack__item">Item 3</div>
 *   </div>
 */
.l-stack {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

@media screen and (min-width: 1025px) {
  .l-stack {
    gap: 1.5rem;
  }
}
/**
 * .l-stack__item
 * 
 * スタックアイテム
 */
.l-stack__item {
  width: 100%;
}

/**
 * .l-stack--tight
 * 
 * 小さな間隔
 */
.l-stack--tight {
  gap: 0.5rem;
}

@media screen and (min-width: 1025px) {
  .l-stack--tight {
    gap: 0.75rem;
  }
}
/**
 * .l-stack--loose
 * 
 * 大きな間隔
 */
.l-stack--loose {
  gap: 2rem;
}

@media screen and (min-width: 1025px) {
  .l-stack--loose {
    gap: 3rem;
  }
}
/**
 * .l-aspect-ratio
 * 
 * アスペクト比を保つコンテナ
 * 
 * Modifiers:
 * - .l-aspect-ratio--16-9: 16:9
 * - .l-aspect-ratio--4-3: 4:3
 * - .l-aspect-ratio--1-1: 1:1
 * 
 * @example
 *   <div class="l-aspect-ratio l-aspect-ratio--16-9">
 *     <img src="image.jpg" alt="">
 *   </div>
 */
.l-aspect-ratio {
  position: relative;
  width: 100%;
  overflow: hidden;
  background-color: #f3f4f6;
}

.l-aspect-ratio > * {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  object-fit: cover;
}

/**
 * .l-aspect-ratio--16-9
 * 
 * 16:9 アスペクト比
 */
.l-aspect-ratio--16-9 {
  padding-bottom: 56.25%;
}

/**
 * .l-aspect-ratio--4-3
 * 
 * 4:3 アスペクト比
 */
.l-aspect-ratio--4-3 {
  padding-bottom: 75%;
}

/**
 * .l-aspect-ratio--1-1
 * 
 * 1:1 アスペクト比
 */
.l-aspect-ratio--1-1 {
  padding-bottom: 100%;
}

/**
 * .l-aspect-ratio--3-2
 * 
 * 3:2 アスペクト比
 */
.l-aspect-ratio--3-2 {
  padding-bottom: 66.6666666667%;
}

/**
 * .l-hide-mobile
 * 
 * モバイルで非表示
 */
@media screen and (max-width: 768px) {
  .l-hide-mobile {
    display: none;
  }
}
/**
 * .l-hide-tablet
 * 
 * タブレットで非表示
 */
@media screen and (max-width: 900px) {
  .l-hide-tablet {
    display: none;
  }
}
/**
 * .l-hide-desktop
 * 
 * デスクトップで非表示
 */
@media screen and (min-width: 1025px) {
  .l-hide-desktop {
    display: none;
  }
}
/**
 * .l-show-mobile
 * 
 * モバイルのみ表示
 */
@media screen and (min-width: 769px) {
  .l-show-mobile {
    display: none;
  }
}
/**
 * .l-show-desktop
 * 
 * デスクトップのみ表示
 */
@media screen and (max-width: 1024px) {
  .l-show-desktop {
    display: none;
  }
}
/**
 * .l-sr-only
 * 
 * スクリーンリーダーのみ表示
 */
.l-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

/**
 * .l-skip-link
 * 
 * スキップリンク
 */
.l-skip-link {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

.l-skip-link:focus {
  position: static;
  width: auto;
  height: auto;
  padding: 0.75rem;
  margin: 0;
  overflow: visible;
  clip: auto;
  white-space: normal;
  background-color: #0053b3;
  color: #ffffff;
  z-index: 1030;
}

/**
 * SHOP@BLUETREE Header Layout
 * 
 * Header Structure:
 * - Top Bar: 日本語サポート、SNSアイコン
 * - Main Header: ロゴ、ナビゲーション、検索、カート、マイページ
 * - Mobile Menu: モバイル用ドロワーメニュー
 * 
 * Style: 「信頼のブルー」- コーポレートトラスト × 親しみやさ
 * 高齢者向けアクセシビリティ対応
 */
/**
 * .shop-bluetree-topbar
 * 
 * トップバー - 日本語サポート、SNSアイコン表示
 */
.shop-bluetree-topbar {
  background-color: #0053b3;
  border-bottom: 1px solid #e0e0e0;
  padding: 0.5rem 0;
}

@media screen and (min-width: 769px) {
  .shop-bluetree-topbar {
    padding: 0.75rem 0;
  }
}
@media screen and (min-width: 1025px) {
  .shop-bluetree-topbar {
    padding: 0.75rem 0;
  }
}
/**
 * .topbar-content
 * 
 * トップバーコンテンツ - 左右の配置
 */
.topbar-content {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  gap: 0.75rem;
  margin: 0 auto;
}

/**
 * .topbar-tagline
 * 
 * トップバータグライン
 */
.topbar-tagline {
  font-size: 0.875rem;
  color: #fff;
  margin: 0;
  white-space: nowrap;
  font-size: 1.5rem;
  font-weight: bold;
}

@media screen and (max-width: 768px) {
  .topbar-tagline {
    font-size: 1.2rem;
  }
}
/**
 * .topbar-right
 * 
 * トップバー右側 - サポート、SNS
 */
.topbar-right {
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  align-items: center;
  gap: 1rem;
}

/**
 * .topbar-support
 * 
 * 日本語サポート表示
 */
.topbar-support {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.875rem;
  color: #fff;
  white-space: nowrap;
  text-decoration: none;
}

.topbar-support .icon-phone {
  flex-shrink: 0;
  color: #0053b3;
  stroke: #fff;
  stroke-width: 2px;
}

@media screen and (max-width: 768px) {
  .topbar-support {
    display: none;
  }
}
/**
 * .topbar-sns
 * 
 * SNSアイコングループ
 */
.topbar-sns {
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  align-items: center;
  gap: 0.75rem;
}

/**
 * .sns-link
 * 
 * SNSリンク
 */
.sns-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 9999px;
  color: #1f2937;
  transition: all 200ms ease-in-out;
}

.sns-link:hover {
  background-color: #0053b3;
  color: #ffffff;
}

.sns-link:focus {
  outline: 2px solid #0053b3;
  outline-offset: 2px;
}

/**
 * .icon-sns
 * 
 * SNSアイコン
 */
.icon-sns {
  width: 1rem;
  height: 1rem;
  fill: #fff;
}

/**
 * .shop-bluetree-header
 * 
 * メインヘッダー - ロゴ、ナビゲーション、アクション
 */
.shop-bluetree-header {
  background-color: #edf2f8;
  border-bottom: 1px solid #e0e0e0;
  padding: 0.75rem 0;
  position: sticky;
  top: 0;
  z-index: 1020;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.1);
}

@media screen and (min-width: 1025px) {
  .shop-bluetree-header {
    padding: 1rem 0;
  }
}
/**
 * .header-content
 * 
 * ヘッダーコンテンツ - ロゴ、ナビ、アクション
 */
.header-content {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  margin: 0 auto;
}

@media screen and (min-width: 1025px) {
  .header-content {
    gap: 1.5rem;
  }
}
@media screen and (max-width: 768px) {
  .header-content {
    gap: 0.75rem;
  }
  .nav-menu a {
    padding: 0 0.75rem;
    font-size: 0.875rem;
  }
  .header-actions {
    gap: 0.5rem;
  }
  .search-form {
    min-width: calc(100vw - 2rem);
  }
}
/**
 * .header-logo
 * 
 * ロゴエリア
 */
.header-logo {
  flex: 0 0 auto;
}

.header-logo a {
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  transition: opacity 200ms ease-in-out;
  background: #0053b3;
  border-radius: 0.3125rem;
  display: block;
  padding: 0.5rem 0.625rem;
}

.header-logo a:hover {
  opacity: 0.8;
}

.header-logo a:focus {
  /*   outline: 2px solid $color-primary;
              outline-offset: 2px; */
}

/**
 * .logo-image
 * 
 * ロゴ画像
 */
.logo-image {
  height: auto;
  width: 7.5rem;
}

@media screen and (max-width: 768px) {
  .logo-image {
    width: 6.25rem;
  }
}
/**
 * .header-nav
 * 
 * ヘッダーナビゲーション
 */
.header-nav {
  flex: 1 1 auto;
  display: none;
}

@media screen and (min-width: 1025px) {
  .header-nav {
    display: block;
  }
}
/**
 * .desktop-nav
 * 
 * デスクトップナビゲーション
 */
@media screen and (max-width: 1024px) {
  .desktop-nav {
    display: none;
  }
}
/**
 * .nav-menu
 * 
 * ナビゲーションメニュー
 */
.nav-menu {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 0;
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav-menu li {
  margin: 0;
  padding: 0;
}

.nav-menu a {
  display: inline-flex;
  align-items: center;
  height: 3rem;
  padding: 0 1rem;
  font-size: 1rem;
  font-weight: 500;
  color: #1f2937;
  text-decoration: none;
  border-bottom: 3px solid transparent;
  transition: all 200ms ease-in-out;
  position: relative;
  font-weight: bold;
}

.nav-menu a:hover {
  color: #0053b3;
  border-bottom-color: #0053b3;
}

.nav-menu a.current-menu-item {
  color: #0053b3;
  border-bottom-color: #0053b3;
  font-weight: 700;
}

/**
 * .header-actions
 * 
 * ヘッダーアクション - 検索、カート、アカウント
 */
.header-actions {
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  align-items: center;
  gap: 0.75rem;
  flex-shrink: 0;
}

@media screen and (min-width: 1025px) {
  .header-actions {
    gap: 1rem;
  }
}
/**
 * .search-wrapper
 * 
 * 検索ラッパー
 */
.search-wrapper {
  position: relative;
}

/**
 * .search-toggle
 * 
 * 検索トグルボタン
 */
.search-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.5rem 0.75rem;
  border: none;
  border-radius: 0.375rem;
  font-family: "Noto Sans JP", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 1rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 200ms ease-in-out;
  min-height: 3rem;
  min-width: 3rem;
  background-color: transparent;
  color: #1f2937;
  width: 2.5rem;
  height: 2.5rem;
  padding: 0;
  border: none;
}

.search-toggle:focus {
  /* outline: 2px solid $color-primary;
  outline-offset: 2px; */
}

.search-toggle:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.search-toggle:hover {
  background-color: #f3f4f6;
}

.search-toggle:focus {
  outline: 2px solid #0053b3;
  outline-offset: 2px;
}

.search-toggle svg {
  width: 1.25rem;
  height: 1.25rem;
}

/**
 * .search-form
 * 
 * 検索フォーム
 */
.search-form {
  display: none;
  position: absolute;
  top: 100%;
  right: 0;
  background-color: #edf2f8;
  border: 1px solid #e0e0e0;
  border-radius: 0.375rem;
  padding: 0.75rem;
  margin-top: 0.5rem;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  z-index: 1000;
  min-width: 17.5rem;
}

.search-form.active {
  display: block;
}

@media screen and (min-width: 1025px) {
  .search-form {
    min-width: 20rem;
  }
}
/**
 * .search-input-group
 * 
 * 検索入力グループ
 */
.search-input-group {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  gap: 0;
}

/**
 * .search-input
 * 
 * 検索入力フィールド
 */
.search-input {
  width: 100%;
  padding: 0.5rem 0.75rem;
  border: 1px solid #e0e0e0;
  border-radius: 0.375rem;
  font-family: "Noto Sans JP", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 1rem;
  line-height: 1.5;
  color: #1f2937;
  background-color: #edf2f8;
  transition: all 200ms ease-in-out;
  min-height: 3rem;
  flex: 1 1 auto;
  border-radius: 0.375rem 0 0 0.375rem;
  border-right: none;
  font-size: 1rem;
}

.search-input:focus {
  outline: none;
  border-color: #0053b3;
  box-shadow: 0 0 0 3px rgba(0, 83, 179, 0.1);
}

.search-input:disabled {
  background-color: #f3f4f6;
  cursor: not-allowed;
  opacity: 0.6;
}

.search-input::placeholder {
  color: #6b7280;
}

/**
 * .search-submit
 * 
 * 検索送信ボタン
 */
.search-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.5rem 0.75rem;
  border: none;
  border-radius: 0.375rem;
  font-family: "Noto Sans JP", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 1rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 200ms ease-in-out;
  min-height: 3rem;
  min-width: 3rem;
  background-color: #0053b3;
  color: #ffffff;
  border-radius: 0 0.375rem 0.375rem 0;
  border: 1px solid #0053b3;
  padding: 0.5rem 0.75rem;
  min-width: auto;
}

.search-submit:focus {
  /* outline: 2px solid $color-primary;
  outline-offset: 2px; */
}

.search-submit:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.search-submit:hover {
  background-color: #3b82f6;
}

.search-submit svg {
  width: 1.25rem;
  height: 1.25rem;
}

/**
 * .header-icon
 * 
 * ヘッダーアイコン
 */
.header-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  width: 2.5rem;
  height: 2.5rem;
  color: #1f2937;
  text-decoration: none;
  border-radius: 0.375rem;
  transition: all 200ms ease-in-out;
}

.header-icon:hover {
  background-color: #f3f4f6;
  color: #0053b3;
}

.header-icon:focus {
  outline: 2px solid #0053b3;
  outline-offset: 2px;
}

.header-icon svg {
  width: 1.25rem;
  height: 1.25rem;
}

/**
 * .cart-icon
 * 
 * カートアイコン
 */
.cart-icon {
  position: relative;
}

/**
 * .cart-count
 * 
 * カート数表示
 */
.cart-count {
  position: absolute;
  top: -0.375rem;
  right: -0.25rem;
  background-color: #f97316;
  color: #ffffff;
  font-size: 0.625rem;
  font-weight: 700;
  width: 1.0625rem;
  height: 1.0625rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  line-height: 1;
}

/**
 * .account-icon
 * 
 * アカウントアイコン
 */
@media screen and (max-width: 1024px) {
  .account-icon.desktop-only {
    display: none;
  }
}
/**
 * .mobile-menu-toggle
 * 
 * モバイルメニュートグルボタン
 */
.mobile-menu-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.5rem 0.75rem;
  border: none;
  border-radius: 0.375rem;
  font-family: "Noto Sans JP", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 1rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 200ms ease-in-out;
  min-height: 3rem;
  min-width: 3rem;
  background-color: transparent;
  color: #1f2937;
  width: 2.5rem;
  height: 2.5rem;
  padding: 0;
  border: none;
  display: flex;
}

.mobile-menu-toggle:focus {
  /* outline: 2px solid $color-primary;
  outline-offset: 2px; */
}

.mobile-menu-toggle:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

@media screen and (min-width: 1025px) {
  .mobile-menu-toggle {
    display: none;
  }
}
.mobile-menu-toggle:hover {
  background-color: #f3f4f6;
}

.mobile-menu-toggle:focus {
  outline: 2px solid #0053b3;
  outline-offset: 2px;
}

.mobile-menu-toggle svg {
  width: 1.5rem;
  height: 1.5rem;
}

.mobile-menu-toggle.active {
  background-color: #0053b3;
  color: #ffffff;
}

/**
 * .mobile-menu
 * 
 * モバイルメニュー - ドロワー
 */
.mobile-menu {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 1040;
}

@media screen and (max-width: 1024px) {
  .mobile-menu.active {
    display: block;
  }
}
@media screen and (min-width: 1025px) {
  .mobile-menu {
    display: none;
  }
}
/**
 * .mobile-menu-content
 * 
 * モバイルメニューコンテンツ
 */
.mobile-menu-content {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  max-width: 20rem;
  background-color: #edf2f8;
  overflow-y: auto;
  z-index: 1050;
  transform: translateX(100%);
  transition: transform 200ms ease-in-out;
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  /* display: flex;
  flex-direction: column;
  justify-content: center; */
}

.mobile-menu.active .mobile-menu-content {
  transform: translateX(0);
}

/**
 * .mobile-search
 * 
 * モバイル検索
 */
.mobile-search {
  padding: 1rem;
  border-bottom: 1px solid #e0e0e0;
}

.mobile-search form {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  gap: 0;
}

.mobile-search input {
  width: 100%;
  padding: 0.5rem 0.75rem;
  border: 1px solid #e0e0e0;
  border-radius: 0.375rem;
  font-family: "Noto Sans JP", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 1rem;
  line-height: 1.5;
  color: #1f2937;
  background-color: #edf2f8;
  transition: all 200ms ease-in-out;
  min-height: 3rem;
  flex: 1 1 auto;
}

.mobile-search input:focus {
  outline: none;
  border-color: #0053b3;
  box-shadow: 0 0 0 3px rgba(0, 83, 179, 0.1);
}

.mobile-search input:disabled {
  background-color: #f3f4f6;
  cursor: not-allowed;
  opacity: 0.6;
}

.mobile-search input::placeholder {
  color: #6b7280;
}

/**
 * .mobile-nav
 * 
 * モバイルナビゲーション
 */
.mobile-nav {
  padding: 1rem 0;
  border-bottom: 1px solid #e0e0e0;
}

.mobile-menu-close {
  position: fixed;
  width: 4.0625rem;
  aspect-ratio: 1/1;
  right: 0.625rem;
  top: 0rem;
  z-index: 11;
}

.mobile-menu-close svg {
  width: 100%;
  height: 100%;
}

/**
 * .mobile-nav-menu
 * 
 * モバイルナビメニュー
 */
.mobile-nav-menu {
  list-style: none;
  margin: 0;
  padding: 0;
}

.mobile-nav-menu li {
  margin: 0;
  padding: 0;
  border-bottom: 1px solid #f3f4f6;
}

.mobile-nav-menu li:last-child {
  border-bottom: none;
}

.mobile-nav-menu a {
  display: block;
  padding: 0.75rem 1rem;
  font-size: 1rem;
  font-weight: 500;
  color: #1f2937;
  text-decoration: none;
  transition: all 200ms ease-in-out;
}

.mobile-nav-menu a:hover {
  background-color: #f3f4f6;
  color: #0053b3;
  padding-left: 1.5rem;
}

.mobile-account-list {
  display: flex;
  border-bottom: 1px solid #e0e0e0;
}

/**
 * .mobile-account
 * 
 * モバイルアカウント
 */
.mobile-account {
  padding: 1rem;
  flex: 0 0 50%;
}

.mobile-account:not(:last-of-type) {
  border-right: 1px solid #e0e0e0;
}

/**
 * .mobile-account-link
 * 
 * モバイルアカウントリンク
 */
.mobile-account-link {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  gap: 0.75rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0.5rem 1rem;
  text-decoration: none;
  border-radius: 0.375rem;
  font-weight: 500;
  transition: all 200ms ease-in-out;
  min-height: 3rem;
}

.mobile-account-link:hover {
  background-color: #3b82f6;
}

.mobile-account-link:focus {
  /* outline: 2px solid $color-primary;
          outline-offset: 2px; */
}

.mobile-account-link svg {
  width: 1.25rem;
  height: 1.25rem;
  flex-shrink: 0;
}

/**
 * .mobile-sns
 * 
 * モバイルSNS
 */
.mobile-sns {
  padding: 1rem;
}

/**
 * .mobile-sns-label
 * 
 * モバイルSNSラベル
 */
.mobile-sns-label {
  font-size: 0.875rem;
  font-weight: 700;
  color: #1f2937;
  margin: 0 0 0.75rem 0;
}

/**
 * .mobile-sns-links
 * 
 * モバイルSNSリンクグループ
 */
.mobile-sns-links {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}

/**
 * .mobile-sns-link
 * 
 * モバイルSNSリンク
 */
.mobile-sns-link {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  background-color: #f3f4f6;
  color: #1f2937;
  text-decoration: none;
  border-radius: 0.375rem;
  font-size: 0.875rem;
  font-weight: 500;
  transition: all 200ms ease-in-out;
  min-height: 3rem;
}

.mobile-sns-link:hover {
  background-color: #0053b3;
  color: #ffffff;
}

.mobile-sns-link:focus {
  outline: 2px solid #0053b3;
  outline-offset: 2px;
}

.mobile-sns-link svg {
  width: 1.25rem;
  height: 1.25rem;
  flex-shrink: 0;
}

/**
 * .skip-to-main
 * 
 * メインコンテンツへスキップ
 */
.skip-to-main {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

.skip-to-main:focus {
  position: static;
  width: auto;
  height: auto;
  padding: 0.75rem;
  margin: 0;
  overflow: visible;
  clip: auto;
  white-space: normal;
  background-color: #0053b3;
  color: #ffffff;
  z-index: 1030;
}

.c-search-modal {
  position: fixed;
  inset: 0;
  z-index: 1050;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 5rem;
}

.c-search-modal[hidden] {
  display: none;
}

.c-search-modal__overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  cursor: pointer;
}

.c-search-modal__inner {
  position: relative;
  width: 100%;
  max-width: 37.5rem;
  margin: 0 0.75rem;
  z-index: 1;
  animation: searchModalIn 0.2s ease;
}

.c-search-modal__form {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: #fff;
  border-radius: 1rem;
  padding: 0.75rem 1rem;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

.c-search-modal__icon {
  flex-shrink: 0;
  color: #4b5563;
}

.c-search-modal__input {
  flex: 1;
  border: none;
  outline: none;
  font-size: 1.0625rem;
  color: #1f2937;
  background: transparent;
  min-width: 0;
}

.c-search-modal__input::placeholder {
  color: #6b7280;
}

.c-search-modal__submit {
  flex-shrink: 0;
  background: #0053b3;
  color: #fff;
  border: none;
  border-radius: 0.5rem;
  padding: 0.5rem 1rem;
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.15s ease;
}

.c-search-modal__submit:hover {
  background: #1e40af;
}

.c-search-modal__close {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  cursor: pointer;
  color: #4b5563;
  padding: 0.25rem;
  border-radius: 0.25rem;
}

.c-search-modal__close:hover {
  color: #1f2937;
}

body.search-modal-open {
  overflow: hidden;
}

@keyframes searchModalIn {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
/**
 * .site-footer
 * 
 * メインフッターコンテナ
 * 背景: プライマリカラー（#2563eb）
 * テキスト: 白
 */
.site-footer {
  background-color: #0053b3;
  color: #ffffff;
  padding: 3rem 1rem;
}

@media screen and (min-width: 769px) {
  .site-footer {
    padding: 4rem 1.5rem;
  }
}
@media screen and (min-width: 1025px) {
  .site-footer {
    padding: 5rem 2rem;
  }
}
/**
 * .site-footer-inner
 * 
 * フッター内部ラッパー
 */
.site-footer-inner {
  max-width: 1280px;
  margin: 0 auto;
}

/**
 * .site-footer-grid
 * 
 * フッターグリッドレイアウト
 * モバイル: 1カラム
 * タブレット: 2カラム
 * デスクトップ: 4カラム
 */
.site-footer-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  margin-bottom: 3rem;
}

@media screen and (min-width: 769px) {
  .site-footer-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 3rem;
  }
}
@media screen and (min-width: 1025px) {
  .site-footer-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 2rem;
  }
}
@media screen and (min-width: 769px) and (max-width: 1024px) {
  .lg-order01 {
    order: 1;
  }
  .lg-order02 {
    order: 2;
  }
  .lg-order03 {
    order: 3;
  }
  .lg-order04 {
    order: 4;
  }
}
/**
 * .site-footer-company
 * 
 * 会社情報セクション
 */
.site-footer-company {
  display: flex;
  flex-direction: column;
}

/**
 * .site-footer-logo
 * 
 * フッターロゴ
 */
.site-footer-logo {
  width: 10.9375rem;
  margin-bottom: 1rem;
  display: block;
}

@media screen and (min-width: 1025px) {
  .site-footer-logo {
    width: 9.0625rem;
    margin-bottom: 0.75rem;
  }
}
/**
 * .site-footer-description
 * 
 * 会社説明文
 */
.site-footer-description {
  font-size: 1rem;
  line-height: 1.6;
  margin: 0 0 1rem 0;
}

@media screen and (min-width: 769px) {
  .site-footer-description {
    margin-bottom: 1.5rem;
    font-size: 0.875rem;
  }
}
/**
 * .site-footer-sns
 * 
 * SNSアイコングループ
 */
.site-footer-sns {
  display: flex;
  gap: 0.75rem;
  align-items: center;
}

/**
 * .site-footer-sns-link
 * 
 * SNSリンク
 */
.site-footer-sns-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.1);
  color: #ffffff;
  transition: background-color 200ms ease-in-out;
}

.site-footer-sns-link:hover {
  background-color: rgba(255, 255, 255, 0.2);
}

.site-footer-sns-link:focus {
  outline: 2px solid #ffffff;
  outline-offset: 2px;
}

@media screen and (min-width: 1025px) {
  .site-footer-sns-link {
    width: 3rem;
    height: 3rem;
  }
}
/**
 * .site-footer-sns-icon
 * 
 * SNSアイコン
 */
.site-footer-sns-icon {
  width: 1.25rem;
  height: 1.25rem;
}

@media screen and (min-width: 1025px) {
  .site-footer-sns-icon {
    width: 1.5rem;
    height: 1.5rem;
  }
}
/**
 * .site-footer-section
 * 
 * フッターセクション（リンク、ニュースレター）
 */
.site-footer-section {
  display: flex;
  flex-direction: column;
}

/**
 * .site-footer-section-title
 * 
 * セクションタイトル
 */
.site-footer-section-title {
  font-size: 1.5rem;
  font-weight: 700;
  color: #ffffff;
  margin: 0 0 1rem 0;
  line-height: 1.2;
}

@media screen and (min-width: 769px) {
  .site-footer-section-title {
    font-size: 1.25rem;
    margin-bottom: 1.5rem;
  }
}
/**
 * .site-footer-links
 * 
 * フッターリンクリスト
 */
.site-footer-links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

@media screen and (min-width: 769px) {
  .site-footer-links {
    gap: 0.75rem;
  }
}
/**
 * .site-footer-link
 * 
 * フッターリンク
 */
.site-footer-link {
  font-size: 1.125rem;
  text-decoration: none;
  transition: color 200ms ease-in-out;
  display: inline-block;
}

@media screen and (min-width: 769px) {
  .site-footer-link {
    font-size: 1rem;
  }
}
.site-footer-link:hover {
  color: #ffffff;
}

/**
 * .site-footer-newsletter-description
 * 
 * ニュースレター説明文
 */
.site-footer-newsletter-description {
  font-size: 1.125rem;
  line-height: 1.6;
  margin: 0 0 1rem 0;
}

@media screen and (min-width: 769px) {
  .site-footer-newsletter-description {
    margin-bottom: 1.5rem;
    font-size: 0.875rem;
  }
}
/**
 * .site-footer-newsletter-form
 * 
 * ニュースレターフォーム
 */
.site-footer-newsletter-form {
  display: flex;
  gap: 0.5rem;
}

@media screen and (min-width: 769px) {
  .site-footer-newsletter-form {
    gap: 0.75rem;
  }
}
/**
 * .site-footer-newsletter-input
 * 
 * ニュースレター入力フィールド
 */
.site-footer-newsletter-input {
  flex: 1;
  min-width: 11.25rem;
  padding: 0.25rem 0.75rem;
  background-color: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #ffffff;
  font-size: 1rem;
  border-radius: 0.375rem;
  transition: border-color 200ms ease-in-out, background-color 200ms ease-in-out;
}

.site-footer-newsletter-input::placeholder {
  color: rgba(255, 255, 255, 0.6);
}

.site-footer-newsletter-input:hover {
  border-color: rgba(255, 255, 255, 0.4);
}

.site-footer-newsletter-input:focus {
  outline: none;
  border-color: rgba(255, 255, 255, 0.4);
  background-color: rgba(255, 255, 255, 0.15);
}

@media screen and (min-width: 769px) {
  .site-footer-newsletter-input {
    padding: 0.75rem 1rem;
  }
}
/**
 * .site-footer-newsletter-submit
 * 
 * ニュースレター購読ボタン
 */
.site-footer-newsletter-submit {
  padding: 0.5rem 1rem;
  background-color: #f14d4c;
  color: #ffffff;
  font-weight: 500;
  font-size: 1rem;
  border: none;
  border-radius: 0.375rem;
  cursor: pointer;
  transition: background-color 200ms ease-in-out;
  flex-shrink: 0;
  min-width: 4.375rem;
}

.site-footer-newsletter-submit:hover {
  background-color: #ed1e1d;
}

.site-footer-newsletter-submit:focus {
  outline: 2px solid #ffffff;
  outline-offset: 2px;
}

@media screen and (min-width: 769px) {
  .site-footer-newsletter-submit {
    padding: 0.75rem 1.5rem;
    min-width: 5rem;
  }
}
/**
 * .site-footer-bottom
 * 
 * フッターボトムバー
 */
.site-footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.2);
  padding-top: 2rem;
}

/**
 * .site-footer-bottom-content
 * 
 * ボトムバーコンテンツ
 */
.site-footer-bottom-content {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

@media screen and (min-width: 769px) {
  .site-footer-bottom-content {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: 1.5rem;
  }
}
/**
 * .site-footer-info
 * 
 * フッター情報（住所、メール）
 */
.site-footer-info {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
}

@media screen and (min-width: 769px) {
  .site-footer-info {
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
  }
}
/**
 * .site-footer-info-item
 * 
 * 情報項目（住所、メール）
 */
.site-footer-info-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.875rem;
}

@media screen and (min-width: 769px) {
  .site-footer-info-item {
    font-size: 1rem;
  }
}
/**
 * .site-footer-info-icon
 * 
 * 情報項目アイコン
 */
.site-footer-info-icon {
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
}

@media screen and (min-width: 769px) {
  .site-footer-info-icon {
    width: 1.125rem;
    height: 1.125rem;
  }
}
/**
 * .site-footer-copyright
 * 
 * コピーライト表記
 */
.site-footer-copyright {
  font-size: 0.875rem;
  color: rgba(255, 255, 255, 0.9);
  margin: 0;
  text-align: center;
}

@media screen and (min-width: 769px) {
  .site-footer-copyright {
    font-size: 1rem;
    text-align: left;
  }
}
/**
 * .site-footer-newsletter-mc4wp
 *
 * MC4WP（Mailchimp for WordPress）フォームラッパー
 */
.site-footer-newsletter-mc4wp .mc4wp-form-fields {
  display: flex;
  gap: 0.5rem;
}

@media screen and (min-width: 769px) {
  .site-footer-newsletter-mc4wp .mc4wp-form-fields {
    gap: 0.75rem;
  }
}
.site-footer-newsletter-mc4wp input[type=email] {
  flex: 1;
  min-width: 11.25rem;
  padding: 0.25rem 0.75rem;
  background-color: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #ffffff;
  font-size: 1rem;
  border-radius: 0.375rem;
  transition: border-color 200ms ease-in-out, background-color 200ms ease-in-out;
  width: auto;
}

.site-footer-newsletter-mc4wp input[type=email]::placeholder {
  color: rgba(255, 255, 255, 0.6);
}

.site-footer-newsletter-mc4wp input[type=email]:focus {
  outline: none;
  border-color: rgba(255, 255, 255, 0.4);
  background-color: rgba(255, 255, 255, 0.15);
}

@media screen and (min-width: 769px) {
  .site-footer-newsletter-mc4wp input[type=email] {
    padding: 0.75rem 1rem;
  }
}
.site-footer-newsletter-mc4wp input[type=submit] {
  padding: 0.5rem 1rem;
  background-color: #f14d4c;
  color: #ffffff;
  font-weight: 500;
  font-size: 1rem;
  border: none;
  border-radius: 0.375rem;
  cursor: pointer;
  transition: background-color 200ms ease-in-out;
  flex-shrink: 0;
  width: auto;
}

.site-footer-newsletter-mc4wp input[type=submit]:hover {
  background-color: #ed1e1d;
}

@media screen and (min-width: 769px) {
  .site-footer-newsletter-mc4wp input[type=submit] {
    padding: 0.75rem 1.5rem;
  }
}
.site-footer-newsletter-mc4wp p {
  margin: 0;
  display: contents;
}

/**
 * Global Layer Index
 * 
 * Imports all global configuration files:
 * - Variables: Color, typography, spacing, breakpoints
 * - Functions: Unit conversion, color manipulation, calculations
 * - Mixins: Responsive design, layout patterns, accessibility
 */
/**
 * SHOP@BLUETREE SCSS Functions
 * 
 * Utility functions for calculations, color manipulation, and responsive design
 */
/**
 * px を rem に変換する関数
 * 
 * @param {number} $pixels - ピクセル値
 * @return {number} rem単位の値
 * 
 * @example
 *   padding: rem(12) rem(16);  // 0.75rem 1rem
 *   font-size: rem(14);        // 0.875rem
 */
/**
 * px を em に変換する関数
 * 
 * @param {number} $pixels - ピクセル値
 * @param {number} $context - コンテキストフォントサイズ（デフォルト16px）
 * @return {number} em単位の値
 * 
 * @example
 *   font-size: em(14);         // 0.875em
 *   font-size: em(14, 12);     // 1.167em (12pxコンテキスト)
 */
/**
 * ビューポート幅に応じた流動的なサイズを計算
 * 
 * @param {number} $min-size - 最小サイズ（px）
 * @param {number} $max-size - 最大サイズ（px）
 * @param {number} $min-vw - 最小ビューポート幅（px）
 * @param {number} $max-vw - 最大ビューポート幅（px）
 * @return {string} calc式
 * 
 * @example
 *   font-size: fluid(12, 24, 480, 1920);  // 480px〜1920pxで12px〜24pxに変化
 */
/**
 * ビューポート幅（vw）を使用した流動的なサイズ
 * 
 * @param {number} $size - 基準サイズ（px）
 * @param {number} $viewport - 基準ビューポート幅（px）
 * @return {number} vw単位の値
 * 
 * @example
 *   font-size: vw(16, 1440);  // 1440pxで16pxになるvw値
 */
/**
 * 色を明るくする
 * 
 * @param {color} $color - 対象色
 * @param {number} $percent - 明度調整（0-100）
 * @return {color} 明るくなった色
 * 
 * @example
 *   background-color: lighten-color($color-primary, 10);
 */
/**
 * 色を暗くする
 * 
 * @param {color} $color - 対象色
 * @param {number} $percent - 暗度調整（0-100）
 * @return {color} 暗くなった色
 * 
 * @example
 *   background-color: darken-color($color-primary, 10);
 */
/**
 * 色の透明度を調整
 * 
 * @param {color} $color - 対象色
 * @param {number} $opacity - 透明度（0-1）
 * @return {color} 透明度が調整された色
 * 
 * @example
 *   background-color: opacity-color($color-primary, 0.5);
 */
/**
 * コントラスト比を計算（WCAG準拠判定用）
 * 
 * @param {color} $color1 - 色1
 * @param {color} $color2 - 色2
 * @return {number} コントラスト比
 * 
 * @example
 *   $ratio: contrast-ratio($color-primary, #fff);
 */
/**
 * スペーシングスケールから値を取得
 * 
 * @param {number} $multiplier - スケール倍数
 * @return {number} スペーシング値
 * 
 * @example
 *   margin: scale-spacing(2);  // 16px (8px * 2)
 */
/**
 * ブレイクポイント値を取得
 * 
 * @param {string} $bp - ブレイクポイント名
 * @param {string} $direction - 方向（up または down）
 * @return {string} メディアクエリ文字列
 * 
 * @example
 *   @media get-breakpoint("sm", "up") { ... }
 */
/**
 * 文字列の最初の文字を大文字にする
 * 
 * @param {string} $string - 対象文字列
 * @return {string} 大文字化された文字列
 * 
 * @example
 *   content: capitalize('hello');  // 'Hello'
 */
/**
 * 最大値を取得
 * 
 * @param {number} $numbers - 数値（可変長）
 * @return {number} 最大値
 * 
 * @example
 *   width: max-value(100px, 50%, 80vw);
 */
/**
 * 最小値を取得
 * 
 * @param {number} $numbers - 数値（可変長）
 * @return {number} 最小値
 * 
 * @example
 *   width: min-value(100px, 50%, 80vw);
 */
/**
 * 値をクランプ（最小値と最大値の間に制限）
 * 
 * @param {number} $value - 値
 * @param {number} $min - 最小値
 * @param {number} $max - 最大値
 * @return {number} クランプされた値
 * 
 * @example
 *   width: clamp-value(50%, 200px, 800px);
 */
/**
 * アスペクト比を計算
 * 
 * @param {number} $width - 幅
 * @param {number} $height - 高さ
 * @return {number} アスペクト比（パーセンテージ）
 * 
 * @example
 *   padding-bottom: aspect-ratio(16, 9);  // 56.25%
 */
/**
 * タッチターゲットサイズが十分か確認
 * 
 * @param {number} $size - サイズ
 * @return {boolean} 十分な場合true
 * 
 * @example
 *   @if is-touch-target-valid($button-height) { ... }
 */
/**
 * 高齢者向けのフォントサイズが適切か確認
 * 
 * @param {number} $size - フォントサイズ
 * @return {boolean} 適切な場合true
 * 
 * @example
 *   @if is-font-size-accessible($font-size) { ... }
 */
/**
 * SHOP@BLUETREE SCSS Variables
 * Style: 「信頼のブルー」- コーポレートトラスト × 親しみやすさ
 * 
 * Design Philosophy:
 * - Primary: Royal Blue (#2563EB) - ブランドカラー、信頼と誠実さ
 * - Secondary: Coral Orange (#F97316) - CTAボタン、注目を集める
 * - Text: Dark Navy (#1F2937) - 高コントラストで読みやすく
 * - Background: Pure White (#FFFFFF) - シンプルで清潔感
 * 
 * Typography:
 * - Font: Noto Sans JP - 高い可読性、高齢者にも読みやすい
 * - Base size: 16px (rem基準)
 * - Line height: 1.6 - 十分な行間
 * 
 * Spacing:
 * - 余白多め、情報密度を下げて見やすく
 * - タッチターゲットは最低48px
 */
/**
 * SHOP@BLUETREE SCSS Mixins
 * 
 * Reusable style patterns for responsive design, layout, and common patterns
 */
/**
 * メディアクエリ（指定ブレイクポイント以上）
 * 
 * @param {string} $bp - ブレイクポイント（xs, sm, md, lg, xl, xxl）
 * 
 * @example
 *   @include mq-up(sm) { ... }  // 769px以上
 *   @include mq-up(lg) { ... }  // 1025px以上
 */
/**
 * メディアクエリ（指定ブレイクポイント以下）
 * 
 * @param {string} $bp - ブレイクポイント（xs, sm, md, lg, xl, xxl）
 * 
 * @example
 *   @include mq-down(sm) { ... }  // 768px以下
 *   @include mq-down(lg) { ... }  // 1024px以下
 */
/**
 * ダーク モード対応
 * 
 * @example
 *   @include dark-mode {
 *     background-color: #1f2937;
 *     color: #ffffff;
 *   }
 */
/**
 * ライト モード対応
 * 
 * @example
 *   @include light-mode {
 *     background-color: #ffffff;
 *     color: #1f2937;
 *   }
 */
/**
 * 高コントラスト モード対応
 * 
 * @example
 *   @include high-contrast {
 *     border-width: 2px;
 *   }
 */
/**
 * 縮小モーション対応（アニメーション無効化）
 * 
 * @example
 *   @include prefers-reduced-motion {
 *     animation: none;
 *     transition: none;
 *   }
 */
/**
 * Flexbox 中央配置（水平・垂直）
 * 
 * @example
 *   @include flex-center;
 */
/**
 * Flexbox 水平配置
 * 
 * @param {string} $justify - justify-content値（デフォルト: space-between）
 * @param {string} $align - align-items値（デフォルト: center）
 * @param {string} $gap - gap値（デフォルト: 0）
 * 
 * @example
 *   @include flex-row;
 *   @include flex-row(flex-start, flex-start, 1rem);
 */
/**
 * Flexbox 垂直配置
 * 
 * @param {string} $justify - justify-content値（デフォルト: flex-start）
 * @param {string} $align - align-items値（デフォルト: stretch）
 * @param {string} $gap - gap値（デフォルト: 0）
 * 
 * @example
 *   @include flex-column;
 *   @include flex-column(center, center, 1rem);
 */
/**
 * Grid レイアウト
 * 
 * @param {string} $columns - grid-template-columns値
 * @param {string} $gap - gap値（デフォルト: 1rem）
 * 
 * @example
 *   @include grid(repeat(3, 1fr), 1.5rem);
 *   @include grid(repeat(auto-fit, minmax(280px, 1fr)));
 */
/**
 * Grid 自動レイアウト
 * 
 * @param {number} $min-width - 最小幅
 * @param {string} $gap - gap値（デフォルト: 1rem）
 * 
 * @example
 *   @include grid-auto(280px);
 */
/**
 * 絶対配置 中央
 * 
 * @example
 *   @include absolute-center;
 */
/**
 * 絶対配置 フル
 * 
 * @example
 *   @include absolute-full;
 */
/**
 * 固定配置 フル
 * 
 * @example
 *   @include fixed-full;
 */
/**
 * テキスト省略（1行）
 * 
 * @example
 *   @include text-truncate;
 */
/**
 * テキスト省略（複数行）
 * 
 * @param {number} $lines - 行数（デフォルト: 2）
 * 
 * @example
 *   @include text-clamp(3);
 */
/**
 * テキストシャドウ
 * 
 * @param {string} $shadow - シャドウ値
 * 
 * @example
 *   @include text-shadow($shadow-md);
 */
/**
 * 見出しスタイル
 * 
 * @param {number} $size - フォントサイズ
 * @param {number} $weight - フォントウェイト
 * @param {number} $line-height - 行の高さ
 * 
 * @example
 *   @include heading($font-size-2xl, $font-weight-bold, $line-height-tight);
 */
/**
 * 本文スタイル
 * 
 * @param {number} $size - フォントサイズ
 * @param {number} $line-height - 行の高さ
 * 
 * @example
 *   @include body-text($font-size-base, $line-height-relaxed);
 */
/**
 * ボタン基本スタイル
 * 
 * @example
 *   @include button-base;
 */
/**
 * ボタン プライマリ
 * 
 * @example
 *   @include button-primary;
 */
/**
 * ボタン セカンダリ
 * 
 * @example
 *   @include button-secondary;
 */
/**
 * ボタン アウトライン
 * 
 * @example
 *   @include button-outline;
 */
/**
 * カード基本スタイル
 * 
 * @example
 *   @include card-base;
 */
/**
 * カード ホバーエフェクト
 * 
 * @example
 *   @include card-hover;
 */
/**
 * フォーム入力基本スタイル
 * 
 * @example
 *   @include form-input;
 */
/**
 * スクリーンリーダーのみ表示
 * 
 * @example
 *   @include sr-only;
 */
/**
 * フォーカス可視化
 * 
 * @example
 *   @include focus-visible;
 */
/**
 * 高齢者向けアクセシビリティ
 * 
 * @example
 *   @include accessible-elderly;
 */
/**
 * フェードイン アニメーション
 * 
 * @param {string} $duration - 期間（デフォルト: 300ms）
 * @param {string} $delay - 遅延（デフォルト: 0）
 * 
 * @example
 *   @include fade-in(500ms, 100ms);
 */
/**
 * スライドイン アニメーション
 * 
 * @param {string} $direction - 方向（up, down, left, right）
 * @param {string} $distance - 距離（デフォルト: 20px）
 * @param {string} $duration - 期間（デフォルト: 300ms）
 * 
 * @example
 *   @include slide-in(up, 30px, 500ms);
 */
/**
 * クリアフィックス（浮動要素のクリア）
 * 
 * @example
 *   @include clearfix;
 */
/**
 * ハードウェアアクセラレーション
 * 
 * @example
 *   @include gpu-accelerate;
 */
/**
 * スムーズスクロール
 * 
 * @example
 *   @include smooth-scroll;
 */
/**
 * ユーザー選択禁止
 * 
 * @example
 *   @include user-select-none;
 */
/**
 * ポインタイベント無効化
 * 
 * @example
 *   @include pointer-events-none;
 */
/* 

上向き(upward)、右向き(rightward)、下向き(downward)、左向き(leftward)、左上(upper-left)、右上(upper-right)、右下(lower-right)、左下(lower-left)の８方向から選択します


@include triangle(upward, 20px, 15px, #cd5c5c);

@include triangle(upper-left, 12px, 12px);
---*/
/* 

上向き(upward)、右向き(rightward)、下向き(downward)、左向き(leftward)、左上(upper-left)、右上(upper-right)、右下(lower-right)、左下(lower-left)の８方向から選択します


@include triangle(upward, 20px, 15px, #cd5c5c);

@include triangle(upper-left, 12px, 12px);
---*/
/**
 * .btn
 * 
 * ボタン基本スタイル
 */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.75rem 1rem;
  font-size: 1rem;
  font-weight: 500;
  border: none;
  border-radius: 0.375rem;
  cursor: pointer;
  text-decoration: none;
  transition: all 200ms ease-in-out;
  min-height: 3rem;
  min-width: 7.5rem;
  white-space: nowrap;
  color: #fff;
  gap: 0.9375rem;
  font-weight: 600;
}

.btn:focus {
  /*   outline: 2px solid #fff;
    outline-offset: 2px; */
}

.btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.btn:disabled:hover {
  transform: none;
  box-shadow: none;
}

.btn__arrow {
  display: flex;
  align-items: center;
}

/**
 * .btn-primary
 * 
 * プライマリボタン
 */
.btn-primary {
  background-color: #0053b3;
  color: #ffffff;
  border: 2px solid #0053b3;
}

.btn-primary:hover {
  background-color: #00479a;
  border-color: transparent;
  color: #fff;
}

/**
 * .btn-secondary
 * 
 * セカンダリボタン
 */
.btn-secondary {
  background-color: #f97316;
  color: #ffffff;
  border: 2px solid #f97316;
}

.btn-secondary:hover {
  background-color: #fb923c;
  border-color: #fb923c;
}

.btn-secondary:active {
  background-color: #ea580c;
  border-color: #ea580c;
}

/**
 * .btn-outline
 * 
 * アウトラインボタン
 */
.btn-outline {
  background-color: transparent;
  color: #0053b3;
  border: 2px solid #0053b3;
}

.btn-outline:hover {
  background-color: #0053b3;
  color: #ffffff;
}

/**
 * .btn-ghost
 * 
 * ゴーストボタン（背景なし）
 */
.btn-ghost {
  background-color: transparent;
  color: #ffffff;
  border: 2px solid #ffffff;
}

.btn-ghost:hover {
  background-color: rgba(255, 255, 255, 0.1);
}

/**
 * .btn-sm
 * 
 * 小さいボタン
 */
.btn-sm {
  padding: 0.5rem 0.75rem;
  font-size: 0.875rem;
  min-height: 2.5rem;
  min-width: 6.25rem;
}

/**
 * .btn-lg
 * 
 * 大きいボタン
 */
.btn-lg {
  padding: 1rem 1.5rem;
  font-size: 1.25rem;
  min-height: 3.5rem;
  min-width: 8.75rem;
}

/**
 * .btn-full
 * 
 * フルウィドスボタン
 */
.btn-full {
  width: 100%;
}

.c-quantity {
  display: inline-flex;
  align-items: center;
  border: 1px solid #e0e0e0;
  border-radius: 0.5rem;
  overflow: hidden;
  background: #fff;
  height: 2.75rem;
}

.c-quantity__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 100%;
  flex-shrink: 0;
  background: none;
  border: none;
  cursor: pointer;
  color: #1f2937;
  transition: background-color 0.15s ease, color 0.15s ease;
  padding: 0;
}

.c-quantity__btn:hover {
  background-color: #f3f4f6;
  color: #0053b3;
}

.c-quantity__btn:active {
  background-color: #e0e0e0;
}

.c-quantity__btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.c-quantity__btn svg {
  display: block;
  pointer-events: none;
}

.c-quantity input.qty,
.c-quantity input[type=number] {
  width: 3.25rem;
  height: 100%;
  border: none;
  border-left: 1px solid #e0e0e0;
  border-right: 1px solid #e0e0e0;
  border-radius: 0;
  text-align: center;
  font-size: 1rem;
  font-weight: 600;
  color: #1f2937;
  background: #fff;
  padding: 0;
  box-shadow: none;
  outline: none;
  -moz-appearance: textfield;
}

.c-quantity input.qty::-webkit-inner-spin-button, .c-quantity input.qty::-webkit-outer-spin-button,
.c-quantity input[type=number]::-webkit-inner-spin-button,
.c-quantity input[type=number]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.c-quantity input.qty:focus,
.c-quantity input[type=number]:focus {
  background-color: #f8fbff;
  outline: none;
  box-shadow: none;
}

/**
 * SHOP@BLUETREE Top Page Styles
 * 
 * Hero Slider & Top Page Specific Styles
 * 
 * Style: 「信頼のブルー」- コーポレートトラスト × 親しみやさ
 * 高齢者向けアクセシビリティ対応
 */
/**
 * .hero-slider
 * 
 * ヒーロースライダーコンテナ
 */
.hero-slider-wrap {
  overflow: hidden;
  overflow: clip;
  overflow-clip-margin: 0;
  contain: paint;
  width: 100%;
  max-width: 100vw;
  background-color: #f3f4f6;
  margin-block: 3.75rem;
}

@media screen and (max-width: 768px) {
  .hero-slider-wrap {
    margin-block: 1.375rem;
  }
}
.hero-slider .slick-list {
  overflow: visible;
  position: relative;
  display: block;
}

.hero-slider .slick-track {
  display: flex;
  position: relative;
}

.hero-slider:not(.slick-initialized) {
  min-height: 32.5rem;
  visibility: hidden;
}

@media screen and (max-width: 768px) {
  .hero-slider:not(.slick-initialized) {
    min-height: 20rem;
  }
}
.hero-slider.slick-initialized {
  animation: heroSliderFadeIn 0.25s ease-out both;
}

@keyframes heroSliderFadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.hero-slider {
  position: relative;
  width: 100%;
  height: auto;
}

.hero-slider .slick-list {
  overflow: visible;
}

.hero-slider .slick-slide {
  position: relative;
  display: flex !important;
  align-items: center;
  justify-content: flex-start;
  min-height: 32.5rem;
  padding: 2rem 8.75rem;
  border-radius: 0.75rem;
  overflow: hidden;
  transition: opacity 0.4s ease, transform 0.4s ease;
  will-change: opacity, transform;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.hero-slider .slick-slide:not(.slick-current):not(.slick-center):not(.slick-active) {
  opacity: 0.6;
  transform: scale(0.97);
}

@media screen and (max-width: 768px) {
  .hero-slider .slick-slide {
    min-height: 20rem;
    padding: 2rem 2rem;
    border-radius: 0.5rem;
  }
}
/**
 * .slide-image
 * 
 * スライド背景画像
 */
.slide-image {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  z-index: 1;
}

/**
 * .slide-overlay
 * 
 * スライドオーバーレイ（ダークフィルター）
 */
.slide-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.4);
  z-index: 2;
  transition: background-color 200ms ease-in-out;
}

/**
 * .slider-content
 * 
 * スライドコンテンツ（テキスト・CTA）
 */
.slider-content {
  position: relative;
  z-index: 3;
  color: #ffffff;
  max-width: 50rem;
  width: 100%;
}

@media screen and (max-width: 768px) {
  .slider-content {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-flow: column;
  }
}
.slider-content .slider-content-title {
  font-size: 1.75rem;
  font-weight: 700;
  margin: 0 0 1rem 0;
  line-height: 1.2;
  color: #ffffff;
  text-shadow: 0 2px 4px rgba(31, 41, 55, 0.3);
  margin-bottom: 0.5rem;
}

@media screen and (min-width: 769px) {
  .slider-content .slider-content-title {
    font-size: 3rem;
  }
}
.slider-content .slider-content-sub {
  font-size: 1.125rem;
  margin-bottom: 1.5625rem;
}

.slider-content .slider-content-button-wrap {
  display: flex;
}

.slider-content .slider-content-button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.9375rem;
}

/** Slick ページネーション（ドット）*/
.hero-slider .slick-dots {
  position: absolute;
  bottom: 1.5rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  display: flex !important;
  justify-content: center;
  gap: 0.5rem;
  list-style: none;
  padding: 0;
  margin: 0;
}

.hero-slider .slick-dots li {
  display: flex;
  align-items: center;
  width: auto;
  height: auto;
  margin: 0;
}

.hero-slider .slick-dots li button {
  width: 0.75rem;
  height: 0.75rem;
  min-width: 0;
  min-height: 0;
  background-color: rgba(255, 255, 255, 0.5);
  border-radius: 9999px;
  border: 2px solid transparent;
  cursor: pointer;
  transition: all 200ms ease-in-out;
  font-size: 0;
  padding: 0;
}

.hero-slider .slick-dots li button::before {
  display: none;
}

.hero-slider .slick-dots li button:hover {
  background-color: rgba(255, 255, 255, 0.7);
}

.hero-slider .slick-dots li button:focus {
  outline: 2px solid #ffffff;
  outline-offset: 2px;
}

.hero-slider .slick-dots li.slick-active button {
  background-color: #ffffff;
}

/** Slick 前後ボタン */
.slick-prev,
.slick-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  width: 3rem;
  height: 3rem;
  background-color: white;
  border-radius: 50%;
  border: none;
  color: #ffffff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 200ms ease-in-out;
  padding: 0;
  box-shadow: 1px 1px 1px rgba(255, 255, 255, 0.3);
  min-width: auto;
  min-height: auto;
}

@media screen and (max-width: 768px) {
  .slick-prev,
  .slick-next {
    width: 2.1875rem;
    height: 2.1875rem;
  }
}
.slick-prev::before,
.slick-next::before {
  display: none;
}

.slick-prev svg,
.slick-next svg {
  width: 1.125rem;
  height: 1.125rem;
  color: #666;
  flex-shrink: 0;
}

@media screen and (max-width: 768px) {
  .slick-prev svg,
  .slick-next svg {
    width: 1.5625rem;
    height: 1.5625rem;
  }
}
.slick-prev:hover,
.slick-next:hover {
  background-color: rgba(255, 255, 255, 0.3);
}

.slick-prev:focus,
.slick-next:focus {
  outline: 2px solid #ffffff;
  outline-offset: 2px;
}

.slick-prev.slick-disabled,
.slick-next.slick-disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

@media screen and (max-width: 768px) {
  .slick-prev svg,
  .slick-next svg {
    width: 0.9375rem;
    height: 0.9375rem;
  }
}
.slick-prev {
  left: 1rem;
}

@media screen and (min-width: 1025px) {
  .slick-prev {
    left: 1.5rem;
  }
}
.slick-next {
  right: 1rem;
}

@media screen and (min-width: 1025px) {
  .slick-next {
    right: 1.5rem;
  }
}
/**
 * .monthly-content
 * 
 * 月替わりコンテンツセクション
 */
.monthly-content {
  padding: 2rem 0;
  background-color: #0053b3;
  color: #fff;
}

@media screen and (max-width: 768px) {
  .monthly-content {
    padding: 1.5rem 0.75rem;
  }
}
.monthly-content-col {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 7.5rem;
}

@media screen and (min-width: 1025px) {
  .monthly-content-col {
    padding-inline: 15.625rem;
  }
}
@media screen and (max-width: 768px) {
  .monthly-content-col {
    flex-flow: column;
    gap: 0.9375rem;
    padding: 0;
  }
}
/**
 * .monthly-header
 * 
 * 月替わりコンテンツヘッダー
 */
.monthly-header {
  text-align: center;
  text-align: left;
}

@media screen and (max-width: 768px) {
  .monthly-header {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
}
@media screen and (min-width: 1025px) {
  .monthly-header {
    flex: 1 1 auto;
  }
}
.monthly-header .monthly-label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.25rem 0.75rem;
  background-color: rgba(255, 255, 255, 0.2);
  color: inherit;
  font-size: 0.875rem;
  font-weight: bold;
  border-radius: 9999px;
  margin-bottom: 1.25rem;
  width: fit-content;
}

@media screen and (max-width: 768px) {
  .monthly-header .monthly-label {
    margin-bottom: 0.6875rem;
  }
}
.monthly-header h2 {
  color: inherit;
  font-size: 1.5rem;
  font-weight: 700;
  margin: 0 0 0.6875rem;
  line-height: 1.2;
}

@media screen and (min-width: 769px) {
  .monthly-header h2 {
    font-size: 1.75rem;
    margin: 0 0 1.375rem;
  }
}
@media screen and (min-width: 1025px) {
  .monthly-header h2 {
    font-size: 2rem;
  }
}
.monthly-header .monthly-text {
  color: inherit;
  font-size: 0.875rem;
  line-height: 1.6;
}

.monthly-header .monthly-text p {
  margin-bottom: 0;
}

@media screen and (min-width: 769px) {
  .monthly-header .monthly-text {
    font-size: 1.125rem;
  }
}
/**
 * .monthly-content-wrapper
 * 
 * 月替わりコンテンツラッパー
 */
.monthly-content-wrapper {
  /*    display: grid;
      grid-template-columns: 1fr;
      gap: $spacing-2xl; */
  /**
       * .monthly-image
       * 
       * 月替わりコンテンツ画像
       */
}

@media screen and (min-width: 769px) {
  .monthly-content-wrapper {
    flex: 0 0 23%;
  }
}
.monthly-content-wrapper .monthly-image {
  position: relative;
  width: 100%;
  aspect-ratio: 1/1;
  border-radius: 50%;
  overflow: hidden;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

@media screen and (max-width: 768px) {
  .monthly-content-wrapper .monthly-image {
    width: 9.6875rem;
  }
}
.monthly-content-wrapper .monthly-image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 200ms ease-in-out;
}

/**
 * .three-branch-cards
 * 
 * 3分岐カードセクション
 */
.three-branch-cards {
  padding: 3rem 1rem;
  background-color: #edf2f8;
}

@media screen and (min-width: 769px) {
  .three-branch-cards {
    padding: 3rem 1.5rem;
  }
}
@media screen and (min-width: 1025px) {
  .three-branch-cards {
    padding: 4rem 2rem;
  }
}
.three-branch-cards-head {
  text-align: center;
  margin-bottom: 2rem;
}

/**
 * .three-branch-cards-grid
 * 
 * 3分岐カードグリッド
 */
.three-branch-cards-grid {
  display: grid;
  grid-template-columns: 1fr;
  justify-content: center;
  gap: 1rem;
}

@media screen and (min-width: 769px) {
  .three-branch-cards-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
  }
}
@media screen and (min-width: 1025px) {
  .three-branch-cards-grid {
    gap: 2rem;
  }
}
/**
 * .three-branch-card
 * 
 * 3分岐カード
 */
.three-branch-card {
  display: flex;
  flex-flow: column;
  justify-content: space-between;
  align-items: flex-start;
  overflow: hidden;
  background-color: #edf2f8;
  border: 1px solid #e0e0e0;
  border-radius: 0.5rem;
  text-decoration: none;
  color: inherit;
  justify-content: center;
  background-color: #fff;
}

.three-branch-card:hover {
  border-color: #0053b3;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

/**
 * .three-branch-card-icon
 * 
 * 3分岐カードアイコン
 */
.three-branch-card-thumb {
  height: 13.75rem;
  flex: 0 0 auto;
  margin-bottom: 0;
  overflow: hidden;
  width: 100%;
}

@media screen and (min-width: 769px) {
  .three-branch-card-thumb {
    height: 16.25rem;
  }
}
.three-branch-card-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.three-branch-card-content {
  padding: 1.5625rem 1.25rem;
  display: flex;
  flex-flow: column;
  gap: 1rem;
  flex: 1 1 auto;
}

.three-branch-card-head {
  display: flex;
  align-items: center;
  gap: 0.875rem;
}

.three-branch-card-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.875rem;
  height: 1.875rem;
  color: #0053b3;
}

.three-branch-card-icon svg {
  width: 100%;
  height: 100%;
}

@media screen and (min-width: 1025px) {
  .three-branch-card-icon {
    width: 2.1875rem;
    height: 2.1875rem;
  }
}
/**
 * .three-branch-card-title
 * 
 * 3分岐カードタイトル
 */
.three-branch-card-title {
  font-size: 1.25rem;
  font-weight: 700;
  color: #1f2937;
  line-height: 1.2;
  margin-bottom: 0;
}

@media screen and (min-width: 769px) {
  .three-branch-card-title {
    font-size: 1.75rem;
  }
}
/**
 * .three-branch-card-description
 * 
 * 3分岐カード説明文
 */
.three-branch-card-description {
  font-size: 1.125rem;
  color: #6b7280;
  margin: 0;
  line-height: 1.6;
  min-height: 3em;
}

@media screen and (min-width: 769px) {
  .three-branch-card-description {
    font-size: 1.25rem;
  }
}
.three-branch-card-more {
  color: #0053b3;
  font-weight: bold;
  display: flex;
  align-items: center;
  gap: 0.625rem;
  font-size: 1.25rem;
}

/**
 * .seasonal-features
 * 
 * 季節特集セクション
 */
.seasonal-features {
  padding: 2rem 1rem;
  background-color: #d64c29;
}

@media screen and (min-width: 769px) {
  .seasonal-features {
    padding: 3rem 1.5rem;
  }
}
@media screen and (min-width: 1025px) {
  .seasonal-features {
    padding: 4rem 2rem;
  }
}
/**
 * .seasonal-features-title
 * 
 * 季節特集タイトル
 */
.seasonal-features-title {
  font-size: 1.75rem;
  font-weight: 700;
  color: #fff;
  margin: 0 0 2rem 0;
  text-align: center;
  line-height: 1.2;
}

@media screen and (min-width: 769px) {
  .seasonal-features-title {
    font-size: 2rem;
    margin-bottom: 3rem;
  }
}
@media screen and (min-width: 1025px) {
  .seasonal-features-title {
    font-size: 2.5rem;
    margin-bottom: 4rem;
  }
}
/**
 * .seasonal-features-grid
 * 
 * 季節特集グリッド
 */
.seasonal-features-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}

@media screen and (min-width: 769px) {
  .seasonal-features-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
  }
}
@media screen and (min-width: 1025px) {
  .seasonal-features-grid {
    gap: 2rem;
  }
}
/**
 * .seasonal-features-card
 * 
 * 季節特集カード
 */
.seasonal-features-card {
  display: grid;
  grid-template-columns: 0.65fr 1fr;
  align-items: center;
  background-color: #edf2f8;
  border-radius: 0.5rem;
  overflow: hidden;
  text-decoration: none;
}

@media screen and (min-width: 1025px) {
  .seasonal-features-card {
    grid-template-columns: 0.7fr 1fr;
  }
}
.seasonal-features-card:hover {
  color: #0053b3;
}

.seasonal-features-card:hover .seasonal-features-image img {
  scale: 1.1;
}

.seasonal-features-card:hover .seasonal-features-card-title {
  color: inherit;
}

/**
 * .seasonal-features-image
 * 
 * 季節特集画像
 */
.seasonal-features-image {
  position: relative;
  width: 100%;
  aspect-ratio: 1/1;
  height: 100%;
  overflow: hidden;
}

.seasonal-features-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: ease 0.22s;
}

/**
 * .seasonal-features-overlay
 * 
 * 季節特集オーバーレイ
 */
.seasonal-features-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(31, 41, 55, 0.1);
}

/**
 * .seasonal-features-content
 * 
 * 季節特集コンテンツ
 */
.seasonal-features-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 1.375rem;
}

@media screen and (min-width: 769px) {
  .seasonal-features-content {
    padding: 1.5625rem;
  }
}
.seasonal-features-content-sub-title {
  margin-bottom: 0.32rem;
  font-size: 0.88rem;
  color: #6b7280;
}

/**
 * .seasonal-features-card-title
 * 
 * 季節特集カードタイトル
 */
.seasonal-features-card-title {
  font-size: 1.25rem;
  font-weight: 700;
  margin: 0 0 0.5rem 0;
  line-height: 1.2;
}

@media screen and (min-width: 769px) {
  .seasonal-features-card-title {
    font-size: 1.75rem;
    margin-bottom: 0.75rem;
  }
}
@media screen and (min-width: 1025px) {
  .seasonal-features-card-title {
    font-size: 2rem;
  }
}
/**
 * .seasonal-features-card-description
 * 
 * 季節特集カード説明文
 */
.seasonal-features-card-description {
  font-size: 0.875rem;
  color: #4b5563;
  margin: 0 0 1rem 0;
  line-height: 1.275;
}

@media screen and (min-width: 769px) {
  .seasonal-features-card-description {
    font-size: 1.125rem;
    margin-bottom: 1.5rem;
  }
}
@media screen and (min-width: 1025px) {
  .seasonal-features-card-description {
    margin-bottom: 2rem;
  }
}
.seasonal-features-button {
  width: 60%;
  display: flex;
  align-items: center;
}

@media screen and (max-width: 768px) {
  .seasonal-features-button {
    padding: 0.3125rem 0.625rem;
    min-height: auto;
    min-width: auto;
    width: 75%;
    gap: 0.5rem;
    font-size: 1rem;
  }
}
/**
 * .featured-products
 * 
 * おすすめ商品セクション
 */
.featured-products {
  padding: 2rem 1rem;
  background-color: #edf2f8;
}

@media screen and (min-width: 769px) {
  .featured-products {
    padding: 3rem 1.5rem;
  }
}
@media screen and (min-width: 1025px) {
  .featured-products {
    padding: 4rem 2rem;
  }
}
/**
 * .featured-products-title
 * 
 * セクションタイトル
 */
.featured-products-title {
  font-size: 1.75rem;
  font-weight: 700;
  color: #1f2937;
  margin: 0 0 2rem 0;
  text-align: center;
  line-height: 1.2;
}

@media screen and (min-width: 769px) {
  .featured-products-title {
    font-size: 2rem;
    margin-bottom: 3rem;
  }
}
@media screen and (min-width: 1025px) {
  .featured-products-title {
    font-size: 2.5rem;
    margin-bottom: 4rem;
  }
}
/**
 * .featured-products-grid
 * 
 * 商品グリッドレイアウト
 * モバイル: 1カラム
 * タブレット: 2カラム
 * デスクトップ: 3カラム
 */
.featured-products-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}

@media screen and (max-width: 768px) {
  .featured-products-grid {
    padding-bottom: 1.5625rem;
    overflow-x: auto;
    display: flex;
    gap: 1.5625rem;
  }
  .featured-products-grid .product-card {
    flex: 0 0 23.125rem;
  }
}
@media screen and (min-width: 769px) {
  .featured-products-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
  }
}
@media screen and (min-width: 1025px) {
  .featured-products-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
  }
}
/**
 * .featured-product-card
 * 
 * 商品カード
 */
.featured-product-card {
  display: flex;
  flex-direction: column;
  background-color: #edf2f8;
  border: 1px solid #e0e0e0;
  border-radius: 0.5rem;
  overflow: hidden;
  transition: box-shadow 200ms ease-in-out, border-color 200ms ease-in-out;
}

.featured-product-card:hover {
  border-color: #0053b3;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

/**
 * .featured-product-image
 * 
 * 商品画像
 */
.featured-product-image {
  width: 100%;
  aspect-ratio: 1;
  overflow: hidden;
  background-color: #f9fafb;
  display: flex;
  align-items: center;
  justify-content: center;
}

.featured-product-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 200ms ease-in-out;
}

.featured-product-image:hover img {
  transform: scale(1.05);
}

/**
 * .featured-product-info
 * 
 * 商品情報
 */
.featured-product-info {
  padding: 1rem;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

@media screen and (min-width: 769px) {
  .featured-product-info {
    padding: 1.5rem;
  }
}
/**
 * .featured-product-name
 * 
 * 商品名
 */
.featured-product-name {
  font-size: 1.25rem;
  font-weight: 700;
  color: #1f2937;
  margin: 0 0 0.75rem 0;
  line-height: 1.2;
}

@media screen and (min-width: 769px) {
  .featured-product-name {
    font-size: 1.5rem;
    margin-bottom: 1rem;
  }
}
/**
 * .featured-product-price
 * 
 * 商品価格
 */
.featured-product-price {
  font-size: 1rem;
  font-weight: 700;
  color: #0053b3;
  margin: 0 0 1rem 0;
  line-height: 1.2;
}

@media screen and (min-width: 769px) {
  .featured-product-price {
    font-size: 1.25rem;
    margin-bottom: 1.5rem;
  }
}
/**
 * .featured-product-link
 * 
 * 商品詳細リンク
 */
.featured-product-link {
  display: inline-block;
  padding: 0.5rem 1rem;
  background-color: #f97316;
  color: #ffffff;
  text-decoration: none;
  font-weight: 500;
  font-size: 0.875rem;
  border-radius: 0.375rem;
  text-align: center;
  transition: background-color 200ms ease-in-out;
  align-self: flex-start;
}

@media screen and (min-width: 769px) {
  .featured-product-link {
    font-size: 1rem;
    padding: 0.75rem 1.5rem;
  }
}
.featured-product-link:hover {
  background-color: #d65b06;
  color: #fff;
}

/**
 * .ranking-section
 * 
 * 人気ランキングセクション
 */
.ranking-section {
  padding: 2rem 1rem;
  background-color: #f9fafb;
}

@media screen and (min-width: 769px) {
  .ranking-section {
    padding: 3rem 1.5rem;
  }
}
@media screen and (min-width: 1025px) {
  .ranking-section {
    padding: 4rem 2rem;
  }
}
/**
 * .ranking-title
 * 
 * セクションタイトル
 */
.ranking-title {
  font-size: 1.75rem;
  font-weight: 700;
  color: #1f2937;
  margin: 0 0 0.75rem 0;
  text-align: center;
  line-height: 1.2;
}

@media screen and (min-width: 769px) {
  .ranking-title {
    font-size: 2rem;
  }
}
@media screen and (min-width: 1025px) {
  .ranking-title {
    font-size: 2.5rem;
  }
}
.ranking-desc {
  text-align: center;
  margin-bottom: 2rem;
  color: #666;
}

@media screen and (min-width: 769px) {
  .ranking-desc {
    margin-bottom: 4rem;
  }
}
/**
 * .ranking-list
 * 
 * ランキングリスト
 */
.ranking-list {
  overflow-x: auto;
  display: flex;
  gap: 1.5625rem;
}

@media screen and (max-width: 768px) {
  .ranking-list {
    padding-bottom: 1.5625rem;
  }
}
@media screen and (min-width: 769px) {
  .ranking-list {
    display: grid;
    gap: 1rem;
    overflow-x: visible;
    grid-template-columns: repeat(3, 1fr);
  }
}
@media screen and (min-width: 1025px) {
  .ranking-list {
    gap: 1.5rem;
    grid-template-columns: repeat(5, 1fr);
  }
}
@media screen and (max-width: 768px) {
  .ranking-list .product-card {
    flex: 0 0 23.125rem;
  }
}
@media screen and (min-width: 769px) {
  .ranking-list .product-card .product-image-wrapper {
    height: 13.75rem;
  }
  .ranking-list .product-card .product-title {
    font-size: 1.25rem;
  }
}
/**
 * .ranking-item
 * 
 * ランキング項目
 */
.ranking-item {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem;
  background-color: #edf2f8;
  border: 1px solid #e0e0e0;
  border-radius: 0.5rem;
  transition: box-shadow 200ms ease-in-out, border-color 200ms ease-in-out;
}

@media screen and (min-width: 769px) {
  .ranking-item {
    gap: 1.5rem;
    padding: 1.5rem;
  }
}
.ranking-item:hover {
  border-color: #0053b3;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

.ranking-item:focus-within {
  outline: 2px solid #0053b3;
  outline-offset: 2px;
}

/**
 * .ranking-item-rank
 * 
 * ランク番号
 */
.ranking-item-rank {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  background-color: #0053b3;
  color: #ffffff;
  font-size: 1.5rem;
  font-weight: 700;
  border-radius: 50%;
  flex-shrink: 0;
  line-height: 1;
}

@media screen and (min-width: 769px) {
  .ranking-item-rank {
    width: 3.5rem;
    height: 3.5rem;
    font-size: 1.75rem;
  }
}
/**
 * .ranking-item-info
 * 
 * ランキング項目情報
 */
.ranking-item-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

/**
 * .ranking-item-name
 * 
 * 商品名
 */
.ranking-item-name {
  font-size: 1rem;
  font-weight: 700;
  color: #1f2937;
  margin: 0;
  line-height: 1.2;
}

@media screen and (min-width: 769px) {
  .ranking-item-name {
    font-size: 1.25rem;
  }
}
/**
 * .ranking-item-sales
 * 
 * 販売数
 */
.ranking-item-sales {
  font-size: 0.875rem;
  color: #6b7280;
  margin: 0;
  line-height: 1.6;
}

@media screen and (min-width: 769px) {
  .ranking-item-sales {
    font-size: 1rem;
  }
}
/**
 * .ranking-item-link
 * 
 * 詳細リンク
 */
.ranking-item-link {
  display: inline-block;
  padding: 0.25rem 0.75rem;
  background-color: #f97316;
  color: #ffffff;
  text-decoration: none;
  font-weight: 500;
  font-size: 0.875rem;
  border-radius: 0.375rem;
  transition: background-color 200ms ease-in-out;
  flex-shrink: 0;
  white-space: nowrap;
}

@media screen and (min-width: 769px) {
  .ranking-item-link {
    font-size: 1rem;
    padding: 0.5rem 1rem;
  }
}
.ranking-item-link:hover {
  background-color: #d65b06;
}

.ranking-item-link:focus {
  outline: 2px solid #f97316;
  outline-offset: 2px;
}

/**
 * .why-chosen
 * 
 * SHOP@BLUETREEが選ばれる理由セクション
 */
.why-chosen {
  padding: 3rem 1rem;
  background-color: #edf2f8;
}

@media screen and (min-width: 769px) {
  .why-chosen {
    padding: 3rem 1.5rem;
  }
}
@media screen and (min-width: 1025px) {
  .why-chosen {
    padding: 4rem 2rem;
  }
}
/**
 * .why-chosen-header
 * 
 * セクションヘッダー
 */
.why-chosen-header {
  margin-bottom: 2rem;
  text-align: center;
}

@media screen and (min-width: 1025px) {
  .why-chosen-header {
    margin-bottom: 3rem;
  }
}
/**
 * .why-chosen-title
 * 
 * セクションタイトル
 */
.why-chosen-title {
  font-size: 1.75rem;
  font-weight: 700;
  color: #1f2937;
  margin: 0 0 0.75rem 0;
  line-height: 1.2;
}

@media screen and (min-width: 769px) {
  .why-chosen-title {
    font-size: 2rem;
    margin-bottom: 1rem;
  }
}
@media screen and (min-width: 1025px) {
  .why-chosen-title {
    font-size: 2.5rem;
  }
}
/**
 * .why-chosen-subtitle
 * 
 * セクションサブタイトル
 */
.why-chosen-subtitle {
  font-size: 1rem;
  color: #6b7280;
  margin: 0;
  line-height: 1.6;
}

@media screen and (min-width: 769px) {
  .why-chosen-subtitle {
    font-size: 1.125rem;
  }
}
/**
 * .why-chosen-grid
 * 
 * 理由カードグリッド
 */
.why-chosen-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}

@media screen and (min-width: 769px) {
  .why-chosen-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
  }
}
@media screen and (min-width: 1025px) {
  .why-chosen-grid {
    grid-template-columns: repeat(3, 25%);
    gap: 2rem;
    justify-content: center;
  }
}
/**
 * .why-chosen-card
 * 
 * 理由カード
 */
.why-chosen-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 1.5rem;
  background-color: #fff;
  border: 1px solid #e0e0e0;
  border-radius: 0.5rem;
  min-height: 17.5rem;
  justify-content: flex-start;
}

@media screen and (min-width: 769px) {
  .why-chosen-card {
    padding: 1.5rem;
    min-height: 20rem;
  }
}
@media screen and (min-width: 1025px) {
  .why-chosen-card {
    padding: 2rem;
    min-height: 22.5rem;
  }
}
.why-chosen-card:hover {
  border-color: #0053b3;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

.why-chosen-card:focus-within {
  outline: 2px solid #0053b3;
  outline-offset: 2px;
}

/**
 * .why-chosen-card-icon
 * 
 * 理由カードアイコン
 */
.why-chosen-card-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 4rem;
  height: 4rem;
  margin-bottom: 0.75rem;
  color: #0053b3;
  flex-shrink: 0;
}

.why-chosen-card-icon svg {
  width: 100%;
  height: 100%;
}

@media screen and (min-width: 1025px) {
  .why-chosen-card-icon {
    width: 4.5rem;
    height: 4.5rem;
    margin-bottom: 1rem;
  }
}
/**
 * .why-chosen-card-title
 * 
 * 理由カードタイトル
 */
.why-chosen-card-title {
  font-size: 1.5rem;
  font-weight: 700;
  color: #1f2937;
  margin: 0 0 0.75rem 0;
  line-height: 1.2;
}

@media screen and (min-width: 769px) {
  .why-chosen-card-title {
    font-size: 1.5rem;
    margin-bottom: 1rem;
  }
}
/**
 * .why-chosen-card-description
 * 
 * 理由カード説明文
 */
.why-chosen-card-description {
  font-size: 1.125rem;
  color: #6b7280;
  margin: 0 0 1.5rem 0;
  line-height: 1.6;
  flex-grow: 1;
}

@media screen and (min-width: 769px) {
  .why-chosen-card-description {
    font-size: 1rem;
    margin-bottom: 1.5rem;
  }
}
/**
 * .why-chosen-card-link
 * 
 * 理由カードリンク
 */
.why-chosen-card-link {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  padding: 0.75rem 0.75rem;
  color: #0053b3;
  text-decoration: none;
  font-weight: 500;
  font-size: 1.125rem;
  border: 1px solid #0053b3;
  border-radius: 0.375rem;
  transition: all 200ms ease-in-out;
}

@media screen and (min-width: 769px) {
  .why-chosen-card-link {
    font-size: 1rem;
    padding: 0.5rem 1rem;
  }
}
/**
 * .footer-cta
 * 
 * フッターCTAセクション
 * 国内通販と変わらぬ気軽さで
 */
.footer-cta {
  padding: 3rem 1rem;
  background-color: #0053b3;
  color: #ffffff;
}

@media screen and (min-width: 769px) {
  .footer-cta {
    padding: 4rem 1.5rem;
  }
}
@media screen and (min-width: 1025px) {
  .footer-cta {
    padding: 5rem 2rem;
  }
}
/**
 * .footer-cta-content
 * 
 * フッターCTAコンテンツ
 */
.footer-cta-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

/**
 * .footer-cta-icon
 * 
 * フッターCTAアイコン
 */
.footer-cta-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 4rem;
  height: 4rem;
  margin-bottom: 1rem;
  color: #ffffff;
  flex-shrink: 0;
}

.footer-cta-icon svg {
  width: 100%;
  height: 100%;
}

@media screen and (min-width: 1025px) {
  .footer-cta-icon {
    width: 5rem;
    height: 5rem;
    margin-bottom: 1.5rem;
  }
}
/**
 * .footer-cta-title
 * 
 * フッターCTAタイトル
 */
.footer-cta-title {
  font-size: 1.75rem;
  font-weight: 700;
  color: #ffffff;
  margin: 0 0 0.75rem 0;
  line-height: 1.2;
}

@media screen and (min-width: 769px) {
  .footer-cta-title {
    font-size: 2rem;
    margin-bottom: 1rem;
  }
}
@media screen and (min-width: 1025px) {
  .footer-cta-title {
    font-size: 2.5rem;
    margin-bottom: 1.5rem;
  }
}
/**
 * .footer-cta-description
 * 
 * フッターCTA説明文
 */
.footer-cta-description {
  font-size: 1rem;
  color: rgba(255, 255, 255, 0.9);
  margin: 0 0 2rem 0;
  line-height: 1.6;
  max-width: 37.5rem;
}

@media screen and (min-width: 769px) {
  .footer-cta-description {
    font-size: 1.125rem;
    margin-bottom: 3rem;
  }
}
@media screen and (min-width: 1025px) {
  .footer-cta-description {
    margin-bottom: 4rem;
  }
}
/**
 * .footer-cta-buttons
 * 
 * フッターCTAボタングループ
 */
.footer-cta-buttons {
  display: flex;
  gap: 0.75rem;
  justify-content: center;
  align-items: center;
}

@media screen and (min-width: 769px) {
  .footer-cta-buttons {
    gap: 1rem;
  }
}
/**
 * .footer-cta-btn-primary
 * 
 * フッターCTAプライマリボタン
 */
.footer-cta-btn-primary {
  background-color: #ffffff;
  color: #0053b3;
  border: 1px solid #fff;
  min-width: 10rem;
  font-weight: bold;
}

.footer-cta-btn-primary:hover {
  background-color: rgba(255, 255, 255, 0.9);
  color: #0053b3;
}

.footer-cta-btn-primary:focus {
  /* outline: 2px solid $color-primary-foreground;
          outline-offset: 2px; */
}

/**
 * .footer-cta-btn-secondary
 * 
 * フッターCTAセカンダリボタン
 */
.footer-cta-btn-secondary {
  background-color: transparent;
  color: #ffffff;
  border: 1px solid #fff;
  min-width: 10rem;
  font-weight: bold;
}

.footer-cta-btn-secondary:hover {
  background-color: rgba(255, 255, 255, 0.1);
}

.footer-cta-btn-secondary:focus {
  /* outline: 2px solid $color-primary-foreground;
          outline-offset: 2px; */
}

/**
 * .breadcrumb
 * 
 * パンクズナビゲーション
 */
.breadcrumb {
  background-color: #edf2f8;
  border-bottom: 1px solid #fff;
  padding: 0.75rem 1rem;
}

@media screen and (min-width: 769px) {
  .breadcrumb {
    padding: 1rem 1.5rem;
  }
}
@media screen and (min-width: 1025px) {
  .breadcrumb {
    padding: 1.5rem 2rem;
  }
}
/**
 * .breadcrumb-list
 * 
 * パンクズリスト
 */
.breadcrumb-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: nowrap;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.breadcrumb-list::-webkit-scrollbar {
  display: none;
}

@media screen and (min-width: 769px) {
  .breadcrumb-list {
    gap: 0.75rem;
  }
}
/**
 * .breadcrumb-item
 * 
 * パンクズ項目
 */
.breadcrumb-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.875rem;
  margin: 0;
  font-weight: 400;
  white-space: nowrap;
  flex-shrink: 0;
}

@media screen and (min-width: 769px) {
  .breadcrumb-item {
    font-size: 1rem;
    gap: 0.75rem;
  }
}
.breadcrumb-item::after {
  content: "/";
  color: #6b7280;
}

.breadcrumb-item:last-child::after {
  content: none;
}

/**
 * .breadcrumb-current
 * 
 * 現在のページ（最後の項目）
 */
/**
 * .breadcrumb-link
 * 
 * パンクズリンク
 */
.breadcrumb-link {
  text-decoration: none;
  display: inline-block;
}

.breadcrumb-current .breadcrumb-link {
  font-weight: bold;
  cursor: default;
}

/**
 * .page-hero
 * 
 * Hero section for pages
 * Background: Primary color (#2563eb)
 * Text color: White
 * Padding: 64px (lg), 48px (md), 32px (sm)
 * Min height: 400px (sm), 500px (md), 600px (lg)
 */
.page-hero {
  background-color: #0053b3;
  color: #fff;
  padding: 1.5rem 1.5rem;
  min-height: 12.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

@media screen and (min-width: 769px) {
  .page-hero {
    padding: 2rem 1.5rem;
    min-height: 18.125rem;
  }
}
/**
 * .page-hero-content
 * 
 * Hero content wrapper
 * Center aligned
 */
.page-hero-content {
  text-align: center;
  width: 100%;
}

.page-hero-icon {
  display: flex;
  justify-content: center;
  margin-bottom: 1rem;
}

.page-hero-icon svg {
  width: 3.625rem;
  height: 3.625rem;
}

/**
 * .page-hero-title
 * 
 * Hero section title
 * Font size: 32px (sm), 40px (md), 48px (lg)
 * Font weight: Bold
 * Margin: 0 0 16px 0
 * Line height: Tight
 */
.page-hero-title {
  font-size: 2.5rem;
  font-weight: 700;
  margin: 0 0 0.75rem 0;
  line-height: 1.2;
  color: #fff;
}

@media screen and (min-width: 769px) {
  .page-hero-title {
    font-size: 3rem;
    margin-bottom: 1rem;
  }
}
/**
 * .page-hero-subtitle
 * 
 * Hero section subtitle
 * Font size: 16px (sm), 18px (lg)
 * Color: White with 90% opacity
 * Margin: 0
 * Line height: Relaxed
 */
.page-hero-subtitle {
  font-size: 1rem;
  margin: 0;
  line-height: 1.6;
}

@media screen and (min-width: 1025px) {
  .page-hero-subtitle {
    font-size: 1.25rem;
  }
}
/* 


*/
.section-title {
  font-size: 1.75rem;
  color: #0053b3;
  margin: 0 0 2rem;
  text-align: center;
}

@media screen and (min-width: 769px) {
  .section-title {
    font-size: 2.5rem;
    margin-bottom: 3rem;
  }
}
/**
 * .story-hero
 * 
 * ヒーロセクション
 * 背景: グレー
 * テキスト: 白
 */
.story-hero {
  background-color: #5a5a5a;
  color: #ffffff;
  padding: 1.5rem 1rem;
  min-height: 19.375rem;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

@media screen and (min-width: 769px) {
  .story-hero {
    padding: 4rem 1.5rem;
    min-height: 25rem;
  }
}
@media screen and (min-width: 1025px) {
  .story-hero {
    padding: 5rem 2rem;
    min-height: 31.25rem;
  }
}
.story-hero__bg {
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: cover;
  left: 0;
  top: 0;
  z-index: 1;
}

.story-hero::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  background-color: rgba(0, 0, 0, 0.55);
  z-index: 2;
}

/**
 * .story-hero-content
 * 
 * ヒーロコンテンツ
 */
.story-hero-content {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  text-align: left;
  position: relative;
  position: relative;
  z-index: 3;
}

@media screen and (min-width: 769px) {
  .story-hero-content {
    gap: 1.5rem;
  }
}
@media screen and (min-width: 1025px) {
  .story-hero-content {
    gap: 2rem;
  }
}
/**
 * .story-hero-label
 * 
 * ヒーロラベル
 */
.story-hero-label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.9);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

@media screen and (min-width: 769px) {
  .story-hero-label {
    font-size: 1.25rem;
    gap: 0.75rem;
  }
}
/**
 * .story-hero-label-icon
 * 
 * ヒーロラベルアイコン
 */
.story-hero-label-icon {
  width: 1.25rem;
  height: 1.25rem;
  flex-shrink: 0;
}

@media screen and (min-width: 769px) {
  .story-hero-label-icon {
    width: 2.125rem;
    height: 2.125rem;
  }
}
/**
 * .story-hero-title
 * 
 * ヒーロタイトル
 */
.story-hero-title {
  font-size: 2rem;
  font-weight: 700;
  color: #ffffff;
  margin: 0;
  line-height: 1.2;
}

@media screen and (min-width: 769px) {
  .story-hero-title {
    font-size: 2.5rem;
  }
}
@media screen and (min-width: 1025px) {
  .story-hero-title {
    font-size: 3rem;
  }
}
/**
 * .story-hero-description
 * 
 * ヒーロ説明文
 */
.story-hero-description {
  font-size: 1rem;
  line-height: 1.6;
  margin: 0;
  max-width: 37.5rem;
}

@media screen and (min-width: 769px) {
  .story-hero-description {
    font-size: 1.25rem;
  }
}
@media screen and (min-width: 1025px) {
  .story-hero-description {
    font-size: 1.5rem;
  }
}
/**
 * .story-quality
 * 
 * 品質へのこだわりセクション
 */
.story-quality {
  padding: 3rem 1rem;
  background-color: #edf2f8;
}

@media screen and (min-width: 769px) {
  .story-quality {
    padding: 4rem 1.5rem;
  }
}
@media screen and (min-width: 1025px) {
  .story-quality {
    padding: 5rem 2rem;
  }
}
/**
 * .story-quality-header
 * 
 * セクションヘッダー
 */
.story-quality-header {
  text-align: center;
  margin-bottom: 3rem;
}

@media screen and (min-width: 769px) {
  .story-quality-header {
    margin-bottom: 4rem;
  }
}
@media screen and (min-width: 1025px) {
  .story-quality-header {
    margin-bottom: 5rem;
  }
}
/**
 * .story-quality-title
 * 
 * セクションタイトル
 */
.story-quality-title {
  font-size: 1.75rem;
  font-weight: 700;
  color: #1f2937;
  margin: 0 0 0.75rem 0;
  line-height: 1.2;
}

@media screen and (min-width: 769px) {
  .story-quality-title {
    font-size: 2rem;
    margin-bottom: 1rem;
  }
}
@media screen and (min-width: 1025px) {
  .story-quality-title {
    font-size: 2.5rem;
    margin-bottom: 1.5rem;
  }
}
/**
 * .story-quality-subtitle
 * 
 * セクションサブタイトル
 */
.story-quality-subtitle {
  font-size: 1rem;
  color: #6b7280;
  line-height: 1.6;
  margin: 0;
}

@media screen and (min-width: 769px) {
  .story-quality-subtitle {
    font-size: 1.25rem;
  }
}
@media screen and (min-width: 1025px) {
  .story-quality-subtitle {
    font-size: 1.5rem;
  }
}
/**
 * .story-reasons
 * 
 * 理由カードグリッド
 * モバイル: 1カラム
 * タブレット: 2カラム
 * デスクトップ: 2カラム（交互配置）
 */
.story-reasons {
  display: grid;
  grid-template-columns: 1fr;
  gap: 3rem;
}

@media screen and (min-width: 769px) {
  .story-reasons {
    gap: 4rem;
  }
}
@media screen and (min-width: 1025px) {
  .story-reasons {
    grid-template-columns: 1fr;
    gap: 5rem;
  }
}
/**
 * .story-reason-card
 * 
 * 理由カード
 * デスクトップでは交互配置（1番目・3番目は左、2番目・4番目は右）
 */
.story-reason-card {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  align-items: center;
}

@media screen and (min-width: 769px) {
  .story-reason-card {
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
  }
}
@media screen and (min-width: 1025px) {
  .story-reason-card {
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
  }
}
@media screen and (min-width: 769px) {
  .story-reason-card:nth-of-type(even) .story-reason-card-content {
    order: 2;
  }
  .story-reason-card:nth-of-type(even) .story-reason-card-image {
    order: 1;
  }
}
.story-reason-card-head {
  display: flex;
  align-items: center;
  gap: 0.9375rem;
}

/**
 * .story-reason-card-icon
 * 
 * 理由カードアイコン
 */
.story-reason-card-icon {
  width: 3rem;
  height: 3rem;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #0053b3;
  flex-shrink: 0;
  background-color: rgba(0, 83, 179, 0.12);
  border-radius: 50%;
}

@media screen and (min-width: 769px) {
  .story-reason-card-icon {
    width: 3.5rem;
    height: 3.5rem;
  }
}
@media screen and (min-width: 1025px) {
  .story-reason-card-icon {
    width: 4rem;
    height: 4rem;
  }
}
.story-reason-card-icon svg {
  width: 53%;
  height: 53%;
}

/**
 * .story-reason-card-content
 * 
 * 理由カードコンテンツ（テキスト）
 */
.story-reason-card-content {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

@media screen and (min-width: 769px) {
  .story-reason-card-content {
    gap: 1rem;
  }
}
@media screen and (min-width: 1025px) {
  .story-reason-card-content {
    gap: 1.5rem;
  }
}
/**
 * .story-reason-card-title
 * 
 * 理由カードタイトル
 */
.story-reason-card-title {
  font-size: 1.5rem;
  font-weight: 700;
  color: #1f2937;
  margin: 0;
  line-height: 1.2;
}

@media screen and (min-width: 769px) {
  .story-reason-card-title {
    font-size: 1.75rem;
  }
}
@media screen and (min-width: 1025px) {
  .story-reason-card-title {
    font-size: 1.75rem;
  }
}
/**
 * .story-reason-card-description
 * 
 * 理由カード説明文
 */
.story-reason-card-description {
  font-size: 1rem;
  line-height: 1.6;
  margin: 0;
}

@media screen and (min-width: 769px) {
  .story-reason-card-description {
    font-size: 1.25rem;
  }
}
@media screen and (min-width: 1025px) {
  .story-reason-card-description {
    font-size: 1.25rem;
  }
}
/**
 * .story-reason-card-image
 * 
 * 理由カード画像
 */
.story-reason-card-image {
  width: 100%;
  aspect-ratio: 4/3;
  overflow: hidden;
  border-radius: 0.5rem;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

@media screen and (min-width: 1025px) {
  .story-reason-card-image {
    aspect-ratio: 16/9;
  }
}
.story-reason-card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/**
 * .story-reason-card-list
 * 
 * 理由カード内のサポートリスト
 */
.story-reason-card-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

/**
 * .story-reason-card-list-item
 * 
 * リスト項目（チェックアイコン付き）
 */
.story-reason-card-list-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 1rem;
  color: #1f2937;
  line-height: 1.6;
}

@media screen and (min-width: 769px) {
  .story-reason-card-list-item {
    font-size: 1rem;
    gap: 0.75rem;
  }
}
@media screen and (min-width: 1025px) {
  .story-reason-card-list-item {
    font-size: 1rem;
    gap: 0.75rem;
  }
}
.story-reason-card-list-item span {
  display: block;
}

/**
 * .story-reason-card-list-icon
 * 
 * リスト項目のチェックアイコン
 */
.story-reason-card-list-icon {
  width: 1.25rem;
  height: 1.25rem;
  color: #0053b3;
  flex-shrink: 0;
}

@media screen and (min-width: 769px) {
  .story-reason-card-list-icon {
    width: 1.25rem;
    height: 1.25rem;
  }
}
@media screen and (min-width: 1025px) {
  .story-reason-card-list-icon {
    width: 1.25rem;
    height: 1.25rem;
  }
}
/**
 * .story-reason-card-button
 * 
 * 理由カード内の CTA ボタン
 */
.story-reason-card-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  padding: 0.75rem 1.5rem;
  background-color: #0053b3;
  color: #fff;
  text-decoration: none;
  border-radius: 0.375rem;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.2;
  border: 2px solid transparent;
  cursor: pointer;
  align-self: flex-start;
}

@media screen and (min-width: 769px) {
  .story-reason-card-button {
    padding: 0.75rem 1.5rem;
    font-size: 1rem;
    gap: 0.75rem;
  }
}
@media screen and (min-width: 1025px) {
  .story-reason-card-button {
    padding: 0.75rem 1.5rem;
    font-size: 1rem;
    gap: 0.75rem;
  }
}
/**
 * .story-reason-card-button-icon
 * 
 * ボタン内のアイコン（矢印）
 */
.story-reason-card-button-icon {
  width: 1.125rem;
  height: 1.125rem;
  flex-shrink: 0;
}

@media screen and (min-width: 769px) {
  .story-reason-card-button-icon {
    width: 1.125rem;
    height: 1.125rem;
  }
}
@media screen and (min-width: 1025px) {
  .story-reason-card-button-icon {
    width: 1.125rem;
    height: 1.125rem;
  }
}
/**
 * .story-canada-gift
 * 
 * カナダからの贈り物セクション
 * 背景: 白
 */
.story-canada-gift {
  padding: 4rem 1rem;
  background-color: #edf2f8;
}

@media screen and (min-width: 769px) {
  .story-canada-gift {
    padding: 5rem 1.5rem;
  }
}
@media screen and (min-width: 1025px) {
  .story-canada-gift {
    padding: 5rem 2rem;
  }
}
/**
 * .story-canada-gift-content
 * 
 * カナダからの贈り物コンテンツ
 * 中央配置、最大幅 3xl
 */
.story-canada-gift-content {
  max-width: 48rem;
  margin: 0 auto;
  text-align: center;
}

/**
 * .story-canada-gift-icon-wrapper
 * 
 * アイコンラッパー
 */
.story-canada-gift-icon-wrapper {
  width: 4rem;
  height: 4rem;
  background-color: rgba(0, 83, 179, 0.1);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1rem;
}

@media screen and (min-width: 769px) {
  .story-canada-gift-icon-wrapper {
    width: 5rem;
    height: 5rem;
    margin-bottom: 1.5rem;
  }
}
@media screen and (min-width: 1025px) {
  .story-canada-gift-icon-wrapper {
    width: 6rem;
    height: 6rem;
    margin-bottom: 2rem;
  }
}
/**
 * .story-canada-gift-icon
 * 
 * グローブアイコン
 */
.story-canada-gift-icon {
  width: 2rem;
  height: 2rem;
  color: #0053b3;
}

@media screen and (min-width: 769px) {
  .story-canada-gift-icon {
    width: 2.5rem;
    height: 2.5rem;
  }
}
@media screen and (min-width: 1025px) {
  .story-canada-gift-icon {
    width: 3rem;
    height: 3rem;
  }
}
/**
 * .story-canada-gift-title
 * 
 * セクションタイトル
 */
.story-canada-gift-title {
  font-size: 1.75rem;
  font-weight: 700;
  color: #1f2937;
  margin: 0 0 1rem 0;
  line-height: 1.2;
}

@media screen and (min-width: 769px) {
  .story-canada-gift-title {
    font-size: 2rem;
    margin-bottom: 1.5rem;
  }
}
@media screen and (min-width: 1025px) {
  .story-canada-gift-title {
    font-size: 2.5rem;
    margin-bottom: 2rem;
  }
}
/**
 * .story-canada-gift-description
 * 
 * セクション説明文
 */
.story-canada-gift-description {
  font-size: 1rem;
  line-height: 1.6;
  margin: 0 0 2rem 0;
}

@media screen and (min-width: 769px) {
  .story-canada-gift-description {
    font-size: 1.25rem;
    margin-bottom: 3rem;
  }
}
@media screen and (min-width: 1025px) {
  .story-canada-gift-description {
    font-size: 1.25rem;
    margin-bottom: 3rem;
  }
}
/**
 * .story-canada-gift-button
 * 
 * CTA ボタン
 */
.story-canada-gift-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  padding: 0.75rem 2rem;
  background-color: #0053b3;
  color: #fff;
  text-decoration: none;
  border-radius: 0.375rem;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.2;
  border: 2px solid transparent;
  cursor: pointer;
}

@media screen and (min-width: 769px) {
  .story-canada-gift-button {
    padding: 0.875rem 2.5rem;
    font-size: 1.25rem;
    gap: 1rem;
  }
}
@media screen and (min-width: 1025px) {
  .story-canada-gift-button {
    padding: 1rem 3rem;
    font-size: 1.25rem;
    gap: 1rem;
  }
}
.story-canada-gift-button:hover {
  color: #fff;
}

/**
 * .story-canada-gift-button-icon
 * 
 * ボタン内のアイコン（矢印）
 */
.story-canada-gift-button-icon {
  width: 1.25rem;
  height: 1.25rem;
  flex-shrink: 0;
}

@media screen and (min-width: 769px) {
  .story-canada-gift-button-icon {
    width: 1.5rem;
    height: 1.5rem;
  }
}
@media screen and (min-width: 1025px) {
  .story-canada-gift-button-icon {
    width: 1.5rem;
    height: 1.5rem;
  }
}
/**
 * .order-flow
 * 
 * ご注文の流れセクション
 * 背景: 白
 * パディング: レスポンシブ対応
 */
.order-flow {
  padding: 3rem 1rem;
  background-color: #ffffff;
}

@media screen and (min-width: 769px) {
  .order-flow {
    padding: 4rem 1.5rem;
  }
}
@media screen and (min-width: 1025px) {
  .order-flow {
    padding: 5rem 2rem;
  }
}
/**
 * .order-flow-header
 * 
 * セクションヘッダー
 * 中央配置
 */
.order-flow-header {
  text-align: center;
  margin-bottom: 3rem;
}

@media screen and (min-width: 769px) {
  .order-flow-header {
    margin-bottom: 4rem;
  }
}
@media screen and (min-width: 1025px) {
  .order-flow-header {
    margin-bottom: 5rem;
  }
}
/**
 * .order-flow-title
 * 
 * セクションタイトル
 * フォントサイズ: 28px (sm), 36px (md), 40px (lg)
 * 太さ: Bold
 * 色: テキスト色
 */
.order-flow-title {
  font-size: 1.75rem;
  font-weight: 700;
  color: #1a1a2e;
  margin: 0 0 0.75rem 0;
  line-height: 1.2;
}

@media screen and (min-width: 769px) {
  .order-flow-title {
    font-size: 2rem;
    margin-bottom: 1rem;
  }
}
@media screen and (min-width: 1025px) {
  .order-flow-title {
    font-size: 2.5rem;
    margin-bottom: 1.5rem;
  }
}
/**
 * .order-flow-subtitle
 * 
 * セクションサブタイトル
 * フォントサイズ: 16px (sm), 18px (lg)
 * 色: ライトテキスト
 */
.order-flow-subtitle {
  font-size: 1rem;
  color: #666666;
  line-height: 1.6;
  margin: 0;
}

@media screen and (min-width: 769px) {
  .order-flow-subtitle {
    font-size: 1.25rem;
  }
}
@media screen and (min-width: 1025px) {
  .order-flow-subtitle {
    font-size: 1.25rem;
  }
}
/**
 * .order-flow-steps
 * 
 * ステップコンテナ
 * モバイル: 1カラム（縦配置）
 * タブレット以上: 4カラム（横配置）
 */
.order-flow-steps {
  display: grid;
  grid-template-columns: 1fr;
  gap: 4rem;
}

@media screen and (min-width: 769px) {
  .order-flow-steps {
    grid-template-columns: repeat(4, 1fr);
    gap: 3rem;
  }
}
/**
 * .order-flow-step
 * 
 * ステップアイテム
 * 各ステップの親コンテナ
 */
.order-flow-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  border: 1px solid #dadada;
  gap: 1.5625rem;
  padding-block: 1.5625rem;
  border-radius: 0.625rem;
  background-color: #fff;
}

@media screen and (min-width: 769px) {
  .order-flow-step {
    gap: 1.5625rem;
  }
}
.order-flow-step:not(:last-child)::after {
  content: "";
}

@media screen and (max-width: 768px) {
  .order-flow-step:not(:last-child)::after {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: -2.8125rem;
    border-style: solid;
    height: 0;
    width: 0;
    border-color: #919191 transparent transparent transparent;
    border-width: 1.6875rem 1.09375rem 0 1.09375rem;
  }
}
@media screen and (min-width: 769px) {
  .order-flow-step:not(:last-child)::after {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: -2.4375rem;
    border-style: solid;
    height: 0;
    width: 0;
    border-color: transparent transparent transparent #919191;
    border-width: 1.09375rem 0 1.09375rem 1.6875rem;
  }
}
.order-flow-step-image {
  flex: 0 0 auto;
  margin-bottom: 0;
  border-radius: 50%;
  overflow: hidden;
  width: 10.9375rem;
  aspect-ratio: 1/1;
  max-width: 70%;
}

.order-flow-step-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/**
 * .order-flow-step-content
 * 
 * ステップコンテンツ（テキスト）
 * 中央配置
 */
.order-flow-step-content {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  text-align: center;
  width: 100%;
  flex: 1 1 auto;
  padding-inline: 1.25rem;
}

@media screen and (min-width: 769px) {
  .order-flow-step-content {
    gap: 0.75rem;
  }
}
@media screen and (min-width: 1025px) {
  .order-flow-step-content {
    gap: 1rem;
  }
}
.order-flow-step-content-head {
  display: flex;
  align-items: center;
  flex-flow: column;
}

.order-flow-step-content-num {
  background-color: #0053b3;
  color: #fff;
  border-radius: 8.75rem;
  margin-bottom: 0.53125rem;
  font-weight: bold;
  padding: 0.25rem 0.875rem;
}

/**
 * .order-flow-step-title
 * 
 * ステップタイトル
 * フォントサイズ: 18px (sm), 20px (lg)
 * 太さ: Bold
 * 色: テキスト色
 */
.order-flow-step-title {
  font-size: 1.25rem;
  font-weight: 700;
  color: #1a1a2e;
  margin: 0;
  line-height: 1.2;
}

@media screen and (min-width: 769px) {
  .order-flow-step-title {
    font-size: 1.25rem;
  }
}
@media screen and (min-width: 1025px) {
  .order-flow-step-title {
    font-size: 1.5rem;
  }
}
/**
 * .order-flow-step-description
 * 
 * ステップ説明文
 * フォントサイズ: 14px (sm), 16px (lg)
 * 色: ライトテキスト
 */
.order-flow-step-description {
  font-size: 1rem;
  color: #666666;
  line-height: 1.6;
  margin: 0;
}

@media screen and (min-width: 769px) {
  .order-flow-step-description {
    font-size: 0.875rem;
  }
}
@media screen and (min-width: 1025px) {
  .order-flow-step-description {
    font-size: 1.125rem;
  }
}
/**
 * .order-flow-step-arrow
 * 
 * モバイル用矢印
 * タブレット以上では非表示
 */
.order-flow-step-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #0066cc;
  font-size: 1.75rem;
  margin: 0.75rem 0;
}

@media screen and (min-width: 769px) {
  .order-flow-step-arrow {
    display: none;
  }
}
.order-flow-step-arrow svg {
  width: 1.5rem;
  height: 1.5rem;
  stroke-width: 2;
}

.payment-methods {
  padding: 3rem 0;
  background-color: #f5f7fa;
}

@media screen and (min-width: 769px) {
  .payment-methods {
    padding: 4rem 0;
  }
}
.payment-methods-header {
  text-align: center;
  margin-bottom: 3rem;
}

@media screen and (min-width: 769px) {
  .payment-methods-header {
    margin-bottom: 4rem;
  }
}
.payment-methods-title {
  font-size: 1.75rem;
  font-weight: 700;
  color: #1a1a2e;
  margin: 0 0 0.75rem 0;
  line-height: 1.2;
}

@media screen and (min-width: 769px) {
  .payment-methods-title {
    font-size: 2.5rem;
    margin-bottom: 1rem;
  }
}
.payment-methods-subtitle {
  font-size: 1rem;
  color: #666666;
  line-height: 1.6;
  margin: 0;
}

@media screen and (min-width: 769px) {
  .payment-methods-subtitle {
    font-size: 1.25rem;
  }
}
@media screen and (min-width: 1025px) {
  .payment-methods-subtitle {
    font-size: 1.25rem;
  }
}
.payment-methods-content {
  display: flex;
  justify-content: center;
}

.payment-method-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
  padding: 1.5rem;
  background-color: #ffffff;
  border: 1px solid #e0e0e0;
  border-radius: 0.625rem;
  width: fit-content;
  max-width: 100%;
}

@media screen and (min-width: 769px) {
  .payment-method-card {
    gap: 3rem;
    padding: 3rem;
  }
}
.payment-method-icon {
  width: 4rem;
  height: 4rem;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #0066cc;
  flex-shrink: 0;
}

@media screen and (min-width: 769px) {
  .payment-method-icon {
    width: 4.5rem;
    height: 4.5rem;
  }
}
.payment-method-icon svg {
  width: 100%;
  height: 100%;
  stroke-width: 1.5;
}

.payment-method-card-content {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  text-align: center;
  width: 100%;
}

.payment-method-card-title {
  font-size: 1.5rem;
  font-weight: 700;
  color: #1a1a2e;
  margin: 0;
  line-height: 1.2;
}

@media screen and (min-width: 1025px) {
  .payment-method-card-title {
    font-size: 1.5rem;
  }
}
.payment-method-card-brands {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  justify-content: center;
  gap: 0.75rem;
}

@media screen and (min-width: 769px) {
  .payment-method-card-brands {
    grid-template-columns: repeat(3, 8.4375rem);
  }
}
.payment-method-brand {
  display: inline-block;
  font-size: 0.875rem;
  color: #1a1a2e;
  margin-bottom: 0;
  border-radius: 0.625rem;
  overflow: hidden;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

@media screen and (min-width: 1025px) {
  .payment-method-brand {
    font-size: 1rem;
  }
}
.payment-method-card-description {
  font-size: 0.875rem;
  color: #666666;
  line-height: 1.6;
  margin: 0;
}

@media screen and (min-width: 1025px) {
  .payment-method-card-description {
    font-size: 1rem;
  }
}
.shipping-info {
  padding: 3rem 0;
  background-color: #ffffff;
}

@media screen and (min-width: 1025px) {
  .shipping-info {
    padding: 5rem 0;
  }
}
.shipping-info-header {
  text-align: center;
  margin-bottom: 3rem;
}

@media screen and (min-width: 769px) {
  .shipping-info-header {
    margin-bottom: 4rem;
  }
}
.shipping-info-title {
  font-size: 1.75rem;
  font-weight: 700;
  color: #1a1a2e;
  margin: 0 0 0.75rem 0;
  line-height: 1.2;
}

@media screen and (min-width: 769px) {
  .shipping-info-title {
    font-size: 2.5rem;
    margin-bottom: 1rem;
  }
}
.shipping-info-subtitle {
  font-size: 1rem;
  color: #666666;
  line-height: 1.6;
  margin: 0;
}

@media screen and (min-width: 769px) {
  .shipping-info-subtitle {
    font-size: 1.25rem;
  }
}
@media screen and (min-width: 1025px) {
  .shipping-info-subtitle {
    font-size: 1.25rem;
  }
}
.shipping-methods {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
}

@media screen and (min-width: 769px) {
  .shipping-methods {
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
  }
}
@media screen and (min-width: 1025px) {
  .shipping-methods {
    gap: 2rem;
  }
}
.shipping-method-temperature {
  display: inline-block;
  padding: 1rem 0.625rem;
  font-size: 0.875rem;
  font-weight: 700;
  color: #ffffff;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #7e2a0c;
  gap: 0.375rem;
  border-radius: 0.5rem 0.5rem 0 0;
}

@media screen and (min-width: 769px) {
  .shipping-method-temperature {
    padding: 0.9375rem 0.75rem;
    font-size: 1rem;
  }
}
.shipping-method-temperature--room {
  background-color: #fef3c6;
  color: #bb4d00;
  border: 1px solid #fef3c6;
}

.shipping-method-temperature--cold {
  border: 1px solid #dbeafe;
  background-color: #dbeafe;
  color: #1e40af;
}

.shipping-method-temperature--frozen {
  border: 1px solid #cffafe;
  background-color: #cffafe;
  color: #164e63;
}

.shipping-method-temperature .shipping-method-name {
  font-size: 1.5rem;
  font-weight: 700;
  margin: 0;
  line-height: 1.2;
  color: currentColor;
}

@media screen and (min-width: 1025px) {
  .shipping-method-temperature .shipping-method-name {
    font-size: 1.5rem;
  }
}
.shipping-method-content {
  padding: 0;
  border: 1px solid #e0e0e0;
  border-top: 0;
  border-radius: 0 0 0.5rem 0.5rem;
}

.shipping-method-description {
  font-size: 1.125rem;
  line-height: 1.6;
  margin: 0;
  padding: 2.8125rem 1.5625rem;
}

@media screen and (min-width: 1025px) {
  .shipping-method-description {
    font-size: 1.125rem;
  }
}
.shipping-method-delvary {
  border-top: 1px solid #e0e0e0;
  padding: 0.9375rem 1.5625rem;
  background-color: #f9fafb;
  display: flex;
  align-items: center;
  overflow: hidden;
  border-radius: 0 0 0.5rem 0.5rem;
}

.shipping-method-delvary-ttl {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  margin: 0;
}

.shipping-method-delvary-ttl svg {
  color: #0053b3;
}

.shipping-method-delvary-data {
  margin: 0;
}

.shipping-method-delvary-data::before {
  content: "：";
}

.shipping-method-delvary-guide {
  display: flex;
  justify-content: center;
  width: 100%;
  margin-top: 2.8125rem;
}

@media screen and (min-width: 769px) {
  .shipping-method-delvary-guide {
    margin-top: 5rem;
  }
}
.shipping-method-delvary-guide .shipping-method-delvary-guide-content {
  padding: 2.1875rem;
  background-color: #edf2f8;
  border-radius: 0.625rem;
}

.shipping-method-delvary-guide .shipping-method-delvary-guide-ttl {
  text-align: center;
  font-size: 1.5rem;
  margin-bottom: 1.5rem;
  color: #0053b3;
}

.shipping-method-delvary-guide .shipping-method-delvary-guide-list {
  padding: 0;
}

.shipping-method-delvary-guide .shipping-method-delvary-guide-item {
  display: flex;
  align-items: flex-start;
  list-style-type: none;
  gap: 0.8125rem;
  font-size: 1.2rem;
}

.shipping-method-delvary-guide .shipping-method-delvary-guide-item:not(:last-of-type) {
  margin-bottom: 0.625rem;
}

.shipping-method-delvary-guide .shipping-method-delvary-guide-item svg {
  color: #0053b3;
  margin-top: 0.375rem;
}

@media screen and (min-width: 769px) {
  .shipping-method-delvary-guide .shipping-method-delvary-guide-item svg {
    margin-top: 0.1875rem;
  }
}
.shipping-method-cta {
  padding-block: 3.125rem;
}

@media screen and (min-width: 769px) {
  .shipping-method-cta {
    padding-block: 5rem;
  }
}
.shipping-method-cta .shipping-method-cta-head {
  display: flex;
  flex-flow: column;
  align-items: center;
  gap: 0.9375rem;
  margin-bottom: 2.5rem;
}

.shipping-method-cta .shipping-method-cta-head__icon {
  color: #0053b3;
}

.shipping-method-cta .shipping-method-cta-head__ttl {
  margin: 0;
  font-size: 1.75rem;
}

@media screen and (min-width: 769px) {
  .shipping-method-cta .shipping-method-cta-head__ttl {
    font-size: 2rem;
  }
}
.shipping-method-cta .shipping-method-cta-head__lead {
  font-size: 1rem;
  text-align: center;
}

@media screen and (min-width: 769px) {
  .shipping-method-cta .shipping-method-cta-head__lead {
    font-size: 1.125rem;
  }
}
.shipping-method-cta .shipping-method-cta-btns {
  display: flex;
  justify-content: center;
  gap: 0.9375rem;
}

@media screen and (min-width: 769px) {
  .shipping-method-cta .shipping-method-cta-btns {
    gap: 1.5625rem;
  }
}
/**
 * 会社情報ページ（page-about.php）のページ固有スタイル
 * 
 * セクション構成：
 * 1. 会社概要（テーブル）
 * 2. 事業案内（テキスト）
 * 3. 拠点情報（3カラムカード）
 * 4. 私たちの使命（テキスト）
 * 5. お問い合わせ（CTA）
 * 
 * 注：パンクズナビゲーション、ページヒーロは共有スタイルのため除外
 */
.company-overview {
  padding: 3rem 1rem;
  background-color: #ffffff;
}

@media screen and (min-width: 769px) {
  .company-overview {
    padding: 5rem 1.5rem;
  }
}
.company-overview-col {
  display: flex;
  flex-flow: column;
  gap: 2rem;
}

@media screen and (min-width: 1025px) {
  .company-overview-col {
    flex-flow: row;
    justify-content: space-between;
    gap: 3rem;
  }
}
.company-overview-map {
  flex: 0 0 40.625rem;
}

@media screen and (max-width: 1024px) {
  .company-overview-map {
    height: 21.875rem;
    flex-basis: auto;
  }
}
@media screen and (max-width: 768px) {
  .company-overview-map {
    aspect-ratio: 1/1;
    height: auto;
  }
}
.company-overview-table-wrapper {
  flex: 1 1 auto;
}

.company-overview-table {
  width: 100%;
  border-collapse: collapse;
  margin: 0;
  padding: 0;
}

.company-overview-table-header {
  padding: 1rem 0.75rem 1rem;
  background-color: #f5f7fa;
  border: 1px solid #e0e0e0;
  font-size: 0.875rem;
  font-weight: 700;
  color: #1a1a2e;
  text-align: center;
  line-height: 1.6;
  vertical-align: middle;
  white-space: nowrap;
}

@media screen and (min-width: 769px) {
  .company-overview-table-header {
    text-align: left;
    padding: 1.5rem;
    font-size: 1.25rem;
  }
}
.company-overview-table-cell {
  padding: 1rem 0.5rem 0.75rem;
  border: 1px solid #e0e0e0;
  font-size: 0.875rem;
  color: #666666;
  line-height: 1.6;
  vertical-align: middle;
}

@media screen and (min-width: 769px) {
  .company-overview-table-cell {
    padding: 1.5rem;
    font-size: 1rem;
  }
}
.business-overview {
  padding: 3rem 1rem;
  background-color: #f5f7fa;
}

@media screen and (min-width: 769px) {
  .business-overview {
    padding: 5rem 1.5rem;
  }
}
.business-overview-col {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

@media screen and (min-width: 1025px) {
  .business-overview-col {
    flex-direction: row;
    justify-content: space-between;
    gap: 3rem;
  }
}
.business-overview-photo {
  margin: 0;
  aspect-ratio: 1/0.5;
}

@media screen and (min-width: 1025px) {
  .business-overview-photo {
    flex: 0 0 34.375rem;
    aspect-ratio: 2/1.23;
  }
}
@media screen and (max-width: 1024px) {
  .business-overview-photo {
    order: 2;
  }
}
.business-overview-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.business-overview-content {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

@media screen and (max-width: 1024px) {
  .business-overview-content {
    order: 1;
  }
}
@media screen and (min-width: 769px) {
  .business-overview-content {
    flex: 1 1 auto;
    gap: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  }
}
@media screen and (min-width: 769px) {
  .business-overview-title {
    text-align: left;
    margin-bottom: 0;
  }
}
.business-overview-text {
  font-size: 1rem;
  line-height: 1.6;
  margin: 0;
}

@media screen and (min-width: 769px) {
  .business-overview-text {
    font-size: 1.25rem;
    line-height: 2;
  }
}
.locations {
  padding: 3rem 1rem;
  background-color: #ffffff;
}

@media screen and (min-width: 769px) {
  .locations {
    padding: 5rem 1.5rem;
  }
}
.locations-header {
  text-align: center;
  margin-bottom: 3rem;
}

@media screen and (min-width: 769px) {
  .locations-header {
    margin-bottom: 4rem;
  }
}
.locations-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  justify-content: center;
}

@media screen and (min-width: 769px) {
  .locations-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
  }
}
@media screen and (min-width: 1025px) {
  .locations-grid {
    gap: 4rem;
  }
}
.location-card {
  display: flex;
  flex-direction: column;
  padding: 0;
  background-color: #ffffff;
  border: 1px solid #e0e0e0;
  border-radius: 0.5rem;
  overflow: hidden;
  transition: all 0.3s ease;
}

.location-card-image {
  width: 100%;
  height: 12.5rem;
  overflow: hidden;
  background-color: #f5f7fa;
}

@media screen and (min-width: 769px) {
  .location-card-image {
    height: 13.75rem;
  }
}
@media screen and (min-width: 1025px) {
  .location-card-image {
    height: 21.875rem;
  }
}
.location-card-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.location-card-content {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 2rem;
}

@media screen and (min-width: 769px) {
  .location-card-content {
    padding: 1.5rem;
  }
}
@media screen and (min-width: 1025px) {
  .location-card-content {
    gap: 1.5rem;
    padding: 3rem;
  }
}
.location-card-title {
  font-size: 1.5rem;
  font-weight: 700;
  color: #0053b3;
  margin: 0;
  line-height: 1.2;
}

@media screen and (min-width: 769px) {
  .location-card-title {
    font-size: 1.5rem;
  }
}
@media screen and (min-width: 1025px) {
  .location-card-title {
    font-size: 1.75rem;
  }
}
.location-card-subtitle {
  font-size: 0.875rem;
  margin: 0;
  line-height: 1.6;
  color: #666666;
}

@media screen and (min-width: 769px) {
  .location-card-subtitle {
    font-size: 1rem;
  }
}
.location-card-info {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

@media screen and (min-width: 769px) {
  .location-card-info {
    gap: 1.5rem;
  }
}
.location-info-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 0.875rem;
  line-height: 1.6;
}

@media screen and (min-width: 769px) {
  .location-info-item {
    gap: 0.75rem;
    font-size: 0.875rem;
  }
}
.location-info-icon {
  flex: 0 0 auto;
  color: #3b82f6;
}

.location-info-icon svg {
  aspect-ratio: 1/1;
}

@media screen and (min-width: 769px) {
  .location-info-icon svg {
    width: 1.6875rem;
  }
}
.location-info-text {
  display: block;
  word-break: break-word;
}

.location-info-link {
  color: #0053b3;
  text-decoration: none;
  transition: color 0.3s ease;
}

.location-info-link:hover {
  text-decoration: underline;
}

.mission {
  padding: 3rem 1rem;
  background-color: #f5f7fa;
}

@media screen and (min-width: 769px) {
  .mission {
    padding: 4rem 1.5rem;
  }
}
.mission-content {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  max-width: 56.25rem;
  margin: 0 auto;
}

.mission-text {
  font-size: 1rem;
  line-height: 1.6;
  margin: 0;
  text-align: center;
}

@media screen and (min-width: 769px) {
  .mission-text {
    font-size: 1.25rem;
  }
}
.contact-cta {
  padding: 3rem 1rem;
  background-color: #0053b3;
}

@media screen and (min-width: 769px) {
  .contact-cta {
    padding: 4rem 1.5rem;
  }
}
.contact-cta-header {
  text-align: center;
  margin-bottom: 3rem;
}

@media screen and (min-width: 769px) {
  .contact-cta-header {
    margin-bottom: 2rem;
  }
}
.contact-cta-header .section-title {
  margin: 0 0 1rem;
  color: #fff;
}

.contact-cta-icon {
  display: block;
  width: 3.4375rem;
  height: 4.0625rem;
  margin: 0 auto 0.9375rem;
  color: #fff;
}

.contact-cta-icon svg {
  width: 100%;
  height: 100%;
}

.contact-cta-subtitle {
  font-size: 1rem;
  color: #fff;
  line-height: 1.6;
  margin: 0;
}

@media screen and (min-width: 769px) {
  .contact-cta-subtitle {
    font-size: 1.25rem;
  }
}
.contact-cta-button-wrapper {
  display: flex;
  justify-content: center;
}

.contact-cta-button {
  padding: 1.0625rem 2rem;
  background-color: #fff;
  color: #0053b3;
  text-decoration: none;
  font-size: 1rem;
  font-weight: 700;
  border-radius: 0.25rem;
  transition: all 0.3s ease;
  border: 2px solid #0053b3;
  cursor: pointer;
  line-height: 1.2;
  border-radius: 0.625rem;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1rem;
}

@media screen and (min-width: 769px) {
  .contact-cta-button {
    padding: 1.4375rem 2.8125rem;
    font-size: 1.25rem;
  }
}
.contact-cta-button:hover {
  opacity: 0.8;
}

/**
 * お問い合わせページ（page-contact.php）のページ固有スタイル
 * 
 * セクション構成：
 * 1. 連絡先情報（3カード）
 * 2. お問い合わせフォーム（標準HTML）
 * 
 * 注：パンクズナビゲーション、ページヒーロは共有スタイルのため除外
 */
.contact-info {
  padding: 3rem 1rem;
  background-color: #ffffff;
}

@media screen and (min-width: 769px) {
  .contact-info {
    padding: 5rem 1.5rem;
  }
}
.contact-info-header {
  margin-bottom: 3rem;
}

@media screen and (min-width: 769px) {
  .contact-info-header {
    margin-bottom: 4rem;
  }
}
.contact-info-cards {
  display: grid;
  gap: 1.5rem;
}

@media screen and (max-width: 1024px) {
  .contact-info-cards {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media screen and (max-width: 768px) {
  .contact-info-cards {
    grid-template-columns: 1fr;
  }
}
@media screen and (min-width: 1025px) {
  .contact-info-cards {
    gap: 3rem;
    grid-template-columns: repeat(3, 23.125rem);
    justify-content: center;
  }
}
.contact-info-card {
  display: flex;
  gap: 1.5rem;
  padding: 1.5rem;
  border-radius: 0.5rem;
  border: 1px solid #e0e0e0;
  transition: all 0.3s ease;
  align-items: center;
}

@media screen and (min-width: 769px) {
  .contact-info-card {
    flex-direction: column;
    gap: 2rem;
    text-align: center;
    padding: 2rem 1rem;
  }
}
.contact-info-card-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 3rem;
  height: 3rem;
  color: #0053b3;
  border-radius: 50%;
  background-color: #edf2f8;
}

@media screen and (min-width: 769px) {
  .contact-info-card-icon {
    width: 4.1875rem;
    height: 4.1875rem;
  }
}
.contact-info-card-icon svg {
  width: 50%;
  height: 50%;
}

.contact-info-card-content {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  flex: 1;
}

@media screen and (min-width: 769px) {
  .contact-info-card-content {
    gap: 1rem;
  }
}
.contact-info-card-title {
  font-size: 1.25rem;
  font-weight: 700;
  color: #1a1a2e;
  margin: 0;
  line-height: 1.2;
}

@media screen and (min-width: 769px) {
  .contact-info-card-title {
    font-size: 1.5rem;
  }
}
.contact-info-card-description {
  font-size: 0.875rem;
  color: #666666;
  margin: 0;
  line-height: 1.6;
}

@media screen and (min-width: 769px) {
  .contact-info-card-description {
    font-size: 1rem;
  }
}
.contact-info-card-address {
  font-size: 0.875rem;
  color: #666666;
  margin: 0;
  line-height: 1.6;
}

@media screen and (min-width: 769px) {
  .contact-info-card-address {
    font-size: 1rem;
  }
}
.contact-info-card-phone {
  font-size: 0.875rem;
  color: #666666;
  margin: 0;
  line-height: 1.6;
  font-weight: 700;
}

@media screen and (min-width: 769px) {
  .contact-info-card-phone {
    font-size: 1rem;
  }
}
.contact-info-card-note {
  font-size: 0.75rem;
  color: #999999;
  margin: 0;
  line-height: 1.6;
}

@media screen and (min-width: 769px) {
  .contact-info-card-note {
    font-size: 0.875rem;
  }
}
.contact-form-section {
  padding: 3rem 1rem;
  background-color: #f5f7fa;
}

@media screen and (min-width: 769px) {
  .contact-form-section {
    padding: 5rem 1.5rem;
  }
}
.contact-form-header {
  margin-bottom: 3rem;
}

@media screen and (min-width: 769px) {
  .contact-form-header {
    margin-bottom: 4rem;
  }
}
.contact-form-wrapper {
  max-width: 50rem;
  margin: 0 auto;
}

.contact-form {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

@media screen and (min-width: 769px) {
  .contact-form {
    gap: 2rem;
  }
}
.contact-form-group {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.contact-form-label {
  font-size: 1rem;
  font-weight: 700;
  color: #1a1a2e;
  display: block;
  line-height: 1.2;
  min-height: auto;
}

@media screen and (min-width: 769px) {
  .contact-form-label {
    font-size: 1.125rem;
  }
}
.contact-form-required {
  color: #dc2626;
  margin-left: 0.25rem;
}

.contact-form-input,
.contact-form-select,
.contact-form-textarea {
  width: 100%;
  padding: 0.75rem 1rem;
  font-size: 0.875rem;
  color: #1a1a2e;
  border: 1px solid #e0e0e0;
  border-radius: 0.25rem;
  background-color: #ffffff;
  font-family: inherit;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
  line-height: 1.6;
}

@media screen and (min-width: 769px) {
  .contact-form-input,
  .contact-form-select,
  .contact-form-textarea {
    padding: 0.875rem 1.125rem;
    font-size: 1rem;
  }
}
.contact-form-input:focus,
.contact-form-select:focus,
.contact-form-textarea:focus {
  outline: none;
  border-color: #0066cc;
  box-shadow: 0 0 0 3px rgba(0, 102, 204, 0.1);
}

.contact-form-input::placeholder,
.contact-form-select::placeholder,
.contact-form-textarea::placeholder {
  color: #999999;
}

.contact-form-textarea {
  min-height: 9.375rem;
  resize: vertical;
}

@media screen and (min-width: 769px) {
  .contact-form-textarea {
    min-height: 11.25rem;
  }
}
.contact-form-select {
  appearance: none;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  background-size: 1.25rem;
  padding-right: 2.5rem;
  color: #1a1a2e;
}

.contact-form-button-wrapper {
  display: flex;
  margin-top: 1rem;
  align-items: center;
  flex-direction: column;
}

.contact-form-button {
  display: inline-block;
  padding: 0.875rem 2rem;
  background-color: #0066cc;
  color: #ffffff;
  font-size: 1rem;
  font-weight: 700;
  border: 2px solid #0066cc;
  border-radius: 0.25rem;
  cursor: pointer;
  transition: all 0.3s ease;
  line-height: 1.2;
  max-width: 100%;
  width: 18.75rem;
}

@media screen and (min-width: 769px) {
  .contact-form-button {
    padding: 1rem 2.5rem;
    font-size: 1.25rem;
  }
}
.contact-form-button:hover {
  background-color: #0052a3;
  border-color: #0052a3;
}

.wpcf7-spinner {
  display: none !important;
}

/**
 * よくある質問ページ（page-faq.php）のページ固有スタイル
 * 
 * セクション構成：
 * 1. FAQ カテゴリタブ（4つ）
 * 2. FAQ アコーディオン（カテゴリ別）
 * 
 * 注：パンクズナビゲーション、ページヒーロは共有スタイルのため除外
 */
.faq {
  padding: 3rem 0;
  padding-top: 0;
  background-color: #ffffff;
}

@media screen and (min-width: 769px) {
  .faq {
    padding: 5rem 1.5rem;
  }
}
@media screen and (max-width: 768px) {
  .faq-container-col {
    padding-inline: 0;
  }
}
@media screen and (min-width: 769px) {
  .faq-container-col {
    display: flex;
    justify-content: space-between;
    gap: 3.125rem;
    align-items: flex-start;
  }
  .faq-container-col .faq-category-tabs {
    flex: 0 0 15rem;
  }
  .faq-container-col .faq-items {
    flex: 1 1 auto;
  }
}
.faq-category-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-bottom: 3rem;
  background-color: #edf2f8;
  padding: 1.5rem 2rem;
}

@media screen and (min-width: 769px) {
  .faq-category-tabs {
    justify-content: center;
    gap: 1rem;
    flex-direction: column;
    justify-content: flex-start;
    margin-bottom: 4rem;
    padding: 1rem 0;
    border-radius: 0.625rem;
    background-color: #f9fafb;
  }
}
.faq-category-tab {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.75rem 1rem;
  background-color: #fff;
  border-radius: 5.625rem;
  cursor: pointer;
  transition: all 0.3s ease;
  color: #666666;
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.1);
}

@media screen and (min-width: 769px) {
  .faq-category-tab {
    padding: 1rem 1.5rem;
    font-size: 1rem;
    border: none;
    gap: 0.75rem;
    background: transparent;
    position: relative;
    border-radius: 0;
    box-shadow: none;
  }
}
.faq-category-tab:hover {
  border-color: #0066cc;
  background-color: #ffffff;
}

@media screen and (min-width: 769px) {
  .faq-category-tab:hover {
    background-color: transparent;
  }
}
.faq-category-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 1.0625rem;
  aspect-ratio: 1/1;
  color: inherit;
}

@media screen and (min-width: 769px) {
  .faq-category-icon {
    width: 1.75rem;
  }
}
.faq-category-icon svg {
  width: 100%;
  height: 100%;
}

.faq-category-label {
  white-space: nowrap;
}

.faq-items {
  display: flex;
  flex-direction: column;
  gap: 3rem;
}

@media screen and (min-width: 769px) {
  .faq-items {
    gap: 4rem;
  }
}
.faq-category-content {
  padding: 0 2rem;
}

@media screen and (min-width: 769px) {
  .faq-category-content {
    padding: 0;
  }
}
.faq-category-title-wrapper {
  margin-bottom: 1.5rem;
  display: flex;
  align-items: center;
  gap: 0.875rem;
}

@media screen and (min-width: 769px) {
  .faq-category-title-wrapper {
    gap: 1.125rem;
    margin-bottom: 2rem;
  }
}
.faq-category-title-icon {
  border-radius: 50%;
  width: 2.3125rem;
  aspect-ratio: 1/1;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #edf2f8;
  color: #0053b3;
}

@media screen and (min-width: 769px) {
  .faq-category-title-icon {
    width: 3.4375rem;
    gap: 3.4375rem;
  }
}
.faq-category-title-icon svg {
  width: 55%;
  height: 55%;
}

.faq-category-title {
  margin: 0;
  font-size: 1.5rem;
  color: #0053b3;
}

@media screen and (min-width: 769px) {
  .faq-category-title {
    font-size: 2.5rem;
  }
}
.faq-accordion {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

@media screen and (min-width: 769px) {
  .faq-accordion {
    gap: 1rem;
  }
}
.faq-item {
  border: 2px solid #e0e0e0;
  border-radius: 0.5rem;
  overflow: hidden;
  transition: all 0.3s ease;
  background-color: #fff;
  padding: 0;
}

.faq-item[open] .faq-item-toggle svg {
  transform: rotate(180deg);
}

.faq-item:hover {
  border-color: #0066cc;
}

.faq-item-question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem;
  background-color: #ffffff;
  cursor: pointer;
  user-select: none;
  transition: all 0.3s ease;
  line-height: 1.2;
}

@media screen and (min-width: 769px) {
  .faq-item-question {
    padding: 1.5rem;
  }
}
.faq-item-question-text {
  flex: 1;
  text-align: left;
  font-size: 1rem;
  font-weight: 700;
  color: #1a1a2e;
  margin: 0;
}

@media screen and (min-width: 769px) {
  .faq-item-question-text {
    font-size: 1.25rem;
  }
}
.faq-item-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 1.5rem;
  height: 1.5rem;
  color: #0066cc;
  transition: transform 0.3s ease;
}

.faq-item-toggle svg {
  width: 100%;
  height: 100%;
}

.faq-item-answer {
  padding: 1rem;
  background-color: #fff;
  font-size: 0.875rem;
  color: #1a1a2e;
  line-height: 1.6;
  padding-top: 0;
}

@media screen and (min-width: 769px) {
  .faq-item-answer {
    padding: 1.5rem;
    padding-top: 0;
    font-size: 1.125rem;
  }
}
.faq-item-answer p {
  margin: 0;
}

.faq-item-answer p:not(:last-child) {
  margin-bottom: 0.75rem;
}

@media screen and (min-width: 769px) {
  .faq-item-answer p:not(:last-child) {
    margin-bottom: 1rem;
  }
}
.products-section {
  padding: 2.5rem 0;
  background-color: #ffffff;
}

@media screen and (min-width: 769px) {
  .products-section {
    padding: 3.75rem 0;
  }
}
.products-wrapper {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
}

@media screen and (min-width: 769px) {
  .products-wrapper {
    grid-template-columns: 17.5rem 1fr;
    gap: 3.75rem;
  }
}
.products-sidebar {
  order: 1;
}

@media screen and (min-width: 769px) {
  .products-sidebar {
    order: 1;
  }
}
.filter-accordion-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 0.75rem 1rem;
  background: #f8f9fa;
  border: 1px solid #e0e0e0;
  border-radius: 0.375rem;
  cursor: pointer;
  font-size: 0.9375rem;
  font-weight: 600;
  color: #1f2937;
}

@media screen and (min-width: 769px) {
  .filter-accordion-trigger {
    display: none;
  }
}
.filter-accordion-label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.filter-accordion-badge {
  display: inline-block;
  width: 0.5rem;
  height: 0.5rem;
  background: #0053b3;
  border-radius: 50%;
}

.filter-accordion-chevron {
  transition: transform 200ms ease-in-out;
}

.filter-accordion-trigger[aria-expanded=true] .filter-accordion-chevron {
  transform: rotate(180deg);
}

@media screen and (max-width: 768px) {
  .filter-accordion-body {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.3s ease;
    overflow: hidden;
  }
  .filter-accordion-body > * {
    min-height: 0;
    overflow: hidden;
  }
  .filter-accordion-body.is-open {
    grid-template-rows: 1fr;
    margin-top: 1.5625rem;
  }
}
@media screen and (min-width: 769px) {
  .filter-accordion-body {
    display: block;
  }
}
.products-filters {
  display: flex;
  flex-direction: column;
}

.filter-group-clear {
  display: inline-block;
  margin-top: 0.5rem;
  font-size: 0.75rem;
  color: #6b7280;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  text-decoration: none;
}

.filter-group-clear:hover {
  color: #ef4444;
  text-decoration: underline;
}

.filter-clear-btn {
  display: inline-block;
  margin-top: 1rem;
  font-size: 0.8125rem;
  color: #6b7280;
  text-decoration: none;
}

.filter-clear-btn:hover {
  color: #ef4444;
  text-decoration: underline;
}

.filter-group {
  border-bottom: 1px solid #e0e0e0;
  padding-bottom: 1rem;
  margin-bottom: 1rem;
}

.filter-group:last-child {
  border-bottom: none;
  padding-bottom: 0;
  margin-bottom: 0;
}

.filter-title {
  font-size: 1rem;
  font-weight: 600;
  margin-bottom: 0.625rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.filter-search {
  display: flex;
  align-items: center;
  gap: 0;
  border: 1px solid #e0e0e0;
  border-radius: 0.375rem;
  overflow: hidden;
  background: #fff;
}

.filter-search:focus-within {
  border-color: #0053b3;
  box-shadow: 0 0 0 2px rgba(0, 83, 179, 0.1);
}

.filter-search-input {
  flex: 1;
  padding: 0.5rem 0.625rem;
  border: none;
  background: transparent;
  font-size: 0.875rem;
  color: #1f2937;
  min-width: 0;
}

.filter-search-input:focus {
  outline: none;
  box-shadow: none;
}

.filter-search-input::placeholder {
  color: #6b7280;
}

.filter-search-btn {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border: none;
  background: #0053b3;
  color: #fff;
  cursor: pointer;
  transition: background 150ms ease-in-out;
}

.filter-search-btn:hover {
  background: #1e40af;
}

.filter-options {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.filter-label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
  font-size: 1.0625rem;
  color: #666666;
  transition: color 0.2s ease;
  min-height: auto;
}

.filter-label:hover {
  color: #1a1a2e;
}

.filter-label--child {
  padding-left: 1.25rem;
  font-size: 0.9375rem;
}

.filter-label--child .filter-text__bullet {
  color: #aaaaaa;
  margin-right: 0.125rem;
  font-weight: bold;
}

.filter-options .filter-input {
  width: 1rem;
  height: 1rem;
  min-height: auto;
  cursor: pointer;
  accent-color: #0066cc;
}

.filter-text {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.filter-count {
  font-size: 0.875rem;
  color: #999999;
  font-weight: 400;
}

.filter-submit {
  width: 100%;
  padding: 0.75rem 1rem;
  background-color: #0066cc;
  color: #ffffff;
  border: none;
  border-radius: 0.25rem;
  font-size: 1.0625rem;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.filter-submit:hover {
  background-color: #0052a3;
}

.filter-submit:active {
  background-color: #003d7a;
}

.products-main {
  order: 1;
}

.products-header {
  scroll-margin-top: var(--header-offset, 80px);
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-bottom: 2rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid #e0e0e0;
}

@media screen and (min-width: 769px) {
  .products-header {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: 1.5rem;
  }
}
.products-count {
  font-size: 1.5rem;
  color: #0053b3;
  font-weight: 600;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.products-active-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
}

.active-filter-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.8125rem;
  font-weight: 400;
  color: #1f2937;
  background: #eef4ff;
  border: 1px solid rgba(0, 83, 179, 0.25);
  border-radius: 0.25rem;
  padding: 0.1875rem 0.5rem;
}

.active-filter-remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #6b7280;
  text-decoration: none;
  font-size: 0.875rem;
  line-height: 1;
  margin-left: 0.125rem;
}

.active-filter-remove:hover {
  color: #ef4444;
}

.products-controls {
  display: flex;
  align-items: center;
  gap: 1rem;
}

@media screen and (min-width: 769px) {
  .products-controls {
    gap: 1.5rem;
  }
}
.products-sort-form {
  display: flex;
  align-items: center;
}

.products-sort {
  padding: 0.5rem 0.75rem;
  border: 1px solid #e0e0e0;
  border-radius: 0.25rem;
  font-size: 1.0625rem;
  color: #1a1a2e;
  background-color: #ffffff;
  cursor: pointer;
  transition: border-color 0.2s ease;
}

.products-sort:hover {
  border-color: #0066cc;
}

.products-sort:focus {
  outline: none;
  border-color: #0066cc;
  box-shadow: 0 0 0 2px rgba(0, 102, 204, 0.1);
}

.products-view-toggle {
  display: flex;
  gap: 0.5rem;
  border: 1px solid #e0e0e0;
  border-radius: 0.25rem;
  padding: 0.25rem;
  background-color: #f5f7fa;
}

.view-btn {
  width: 2rem;
  height: 2rem;
  padding: 0;
  border: none;
  background-color: transparent;
  color: #666666;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.125rem;
  transition: all 0.2s ease;
}

.view-btn:hover {
  color: #1a1a2e;
  background-color: #ffffff;
}

.view-btn.active {
  background-color: #ffffff;
  color: #0066cc;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.products-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  margin-bottom: 2.5rem;
}

@media screen and (min-width: 769px) {
  .products-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
  }
}
@media screen and (min-width: 1025px) {
  .products-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}
.product-card {
  display: flex;
  flex-direction: column;
  background-color: #ffffff;
  border: 1px solid #e0e0e0;
  border-radius: 0.5rem;
  overflow: hidden;
}

.product-card:hover {
  border-color: #0053b3;
}

.product-card-link {
  transition: all 0.3s ease;
  text-decoration: none;
}

.product-card-link:hover {
  box-shadow: 0 4px 12px rgba(0, 102, 204, 0.1);
}

.product-image-wrapper {
  position: relative;
  width: 100%;
  height: 21.875rem;
  overflow: hidden;
  background-color: #f5f7fa;
}

.product-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.product-card:hover .product-image {
  transform: scale(1.05);
}

.product-image-placeholder {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #f5f7fa;
  color: #999999;
  font-size: 0.875rem;
}

.product-tag {
  position: absolute;
  top: 0.75rem;
  left: 0.75rem;
  padding: 0.25rem 0.5rem;
  background-color: #ff4444;
  color: #ffffff;
  font-size: 0.875rem;
  font-weight: 600;
  border-radius: 0.25rem;
  z-index: 1;
}

.product-temperature {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.25rem 0.5rem;
  font-size: 0.875rem;
  font-weight: 600;
  border-radius: 1.25rem;
  z-index: 1;
}

.product-temperature svg {
  display: block;
  flex-shrink: 0;
  width: 1.0625rem;
  height: 1.0625rem;
}

.product-temperature--normal {
  background-color: #fef3c7;
  color: #b45309;
}

.product-temperature--chilled {
  background-color: #dbeafe;
  color: #1d4ed8;
}

.product-temperature--frozen {
  background-color: #cffafe;
  color: #0e7490;
}

.product-content {
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  flex: 1;
}

.product-title {
  font-size: 1.375rem;
  font-weight: 600;
  color: #1a1a2e;
  margin: 0;
  line-height: 1.4;
  min-height: 3.75rem;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.product-link {
  color: #1a1a2e;
  text-decoration: none;
  transition: color 0.2s ease;
}

.product-link:hover {
  color: #0066cc;
}

.product-rating {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.875rem;
}

.product-stars {
  color: #ffc107;
  font-size: 0.9375rem;
  letter-spacing: 1px;
}

.product-review-count {
  color: #666;
  font-size: 0.9375rem;
}

.product-price {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.25rem 0.375rem;
  margin-top: auto;
  padding-top: 0.75rem;
  border-top: 1px solid #e0e0e0;
}

.product-price-original {
  font-size: 1.375rem;
  color: #666;
  text-decoration: line-through;
}

.product-price-sale {
  font-size: 1.75rem;
  font-weight: 700;
  color: #ff4444;
}

.product-price-current {
  font-size: 1.5625rem;
  font-weight: 700;
  color: #0053b3;
  white-space: nowrap;
}

.product-price-current del {
  font-weight: 400;
  opacity: 0.6;
  margin-right: 0.25rem;
}

.product-price-note {
  font-size: 0.875rem;
  color: #666;
  white-space: nowrap;
}

.products-empty {
  grid-column: 1/-1;
  padding: 3.75rem 1.25rem;
  text-align: center;
  background-color: #f5f7fa;
  border-radius: 0.5rem;
}

.products-empty p {
  font-size: 1.25rem;
  color: #666666;
  margin: 0;
}

.products-pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.pagination-btn {
  min-width: 2.5rem;
  height: 2.5rem;
  padding: 0 0.5rem;
  border: 1px solid #e0e0e0;
  background-color: #ffffff;
  color: #1a1a2e;
  font-size: 1.0625rem;
  font-weight: 500;
  border-radius: 0.25rem;
  cursor: pointer;
  text-decoration: none;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}

.pagination-btn:hover {
  border-color: #0066cc;
  color: #0066cc;
}

.pagination-btn.active {
  background-color: #0066cc;
  color: #ffffff;
  border-color: #0066cc;
}

.pagination-btn.pagination-next {
  min-width: auto;
  padding: 0 1rem;
}

.product-add-to-cart {
  margin-top: 0.75rem;
}

.product-add-to-cart .add_to_cart_button,
.btn-add-to-cart {
  display: block;
  width: 100%;
  text-align: center;
  background: #0053b3;
  color: #fff;
  border: none;
  border-radius: 0.25rem;
  padding: 0.5rem 0.75rem;
  font-size: 1.125rem;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  transition: background 200ms ease-in-out;
  line-height: 1.5;
}

.product-add-to-cart .add_to_cart_button:hover,
.btn-add-to-cart:hover {
  background: #1e40af;
  color: #fff;
}

.product-add-to-cart .added_to_cart {
  display: none;
}

.news-section {
  padding: 2.5rem 0;
}

@media screen and (min-width: 769px) {
  .news-section {
    padding: 3.75rem 0;
  }
}
.news-wrapper {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
}

@media screen and (min-width: 769px) {
  .news-wrapper {
    grid-template-columns: 17.5rem 1fr;
  }
}
.news-sidebar {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.news-filter-group {
  background: #fff;
  border-radius: 0.5rem;
  padding: 1.25rem;
}

.news-filter-title {
  font-size: 1.125rem;
  font-weight: 600;
  color: #1a1a2e;
  margin: 0 0 1rem 0;
}

.news-category-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.news-category-item {
  margin: 0;
  padding: 0;
}

.news-category-link {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.625rem 0.75rem;
  color: #666666;
  text-decoration: none;
  font-size: 0.9375rem;
  border-radius: 0.25rem;
  transition: all 0.2s ease;
}

.news-category-link:hover {
  background: #e8eef5;
  color: #0066cc;
}

.news-category-link--active {
  background: #0066cc;
  color: #ffffff;
}

.news-category-count {
  font-size: 0.8125rem;
  font-weight: 500;
  opacity: 0.8;
}

.news-tag-cloud {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.news-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.5rem 0.75rem;
  background: #ffffff;
  border: 1px solid #e0e0e0;
  border-radius: 1.25rem;
  color: #666666;
  text-decoration: none;
  font-size: 0.8125rem;
  transition: all 0.2s ease;
}

.news-tag:hover {
  border-color: #0066cc;
  color: #0066cc;
  background: #f0f5ff;
}

.news-tag-icon {
  flex-shrink: 0;
}

.news-main {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.news-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}

@media screen and (min-width: 769px) {
  .news-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
.news-featured-article {
  background: #ffffff;
  border: 1px solid #e0e0e0;
  border-radius: 0.5rem;
  overflow: hidden;
  margin-bottom: 2.5rem;
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}

@media screen and (min-width: 769px) {
  .news-featured-article {
    grid-template-columns: 1fr 1fr;
  }
}
.news-featured-article:hover {
  border-color: #0053b3;
  box-shadow: 0 0.25rem 0.75rem rgba(0, 102, 204, 0.1);
}

.news-featured-link {
  display: block;
  text-decoration: none;
  overflow: hidden;
}

.news-featured-image {
  width: 100%;
  height: 15rem;
  overflow: hidden;
  background: #f5f7fa;
}

@media screen and (min-width: 769px) {
  .news-featured-image {
    height: 100%;
  }
}
.news-featured-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.news-featured-article:hover .news-featured-image img {
  transform: scale(1.05);
}

.news-featured-image-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f5f7fa;
  color: #999999;
  font-size: 0.875rem;
}

.news-featured-content {
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.news-featured-category {
  display: inline-block;
  background: #0053b3;
  color: #ffffff;
  padding: 0.5rem 0.75rem 0.375rem;
  border-radius: 0.25rem;
  font-size: 0.8125rem;
  line-height: 1.25;
  font-weight: 600;
  width: fit-content;
  border-radius: 5.625rem;
}

.news-featured-date {
  font-size: 0.875rem;
  color: #999999;
}

.news-featured-title {
  margin: 0;
  font-size: 2.125rem;
  font-weight: bold;
  line-height: 1.4;
}

@media screen and (max-width: 768px) {
  .news-featured-title {
    font-size: 1.625rem;
  }
}
.news-featured-title-link {
  color: #1a1a2e;
  text-decoration: none;
  transition: color 0.2s ease;
}

.news-featured-title-link:hover {
  color: #0066cc;
}

.news-featured-excerpt {
  margin: 0;
  font-size: 1.125rem;
  line-height: 1.6;
}

.news-featured-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: auto;
  padding-top: 1rem;
  border-top: 1px solid #f0f0f0;
}

.news-featured-reading-time {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.875rem;
  color: #999999;
}

.news-featured-reading-icon {
  flex-shrink: 0;
}

.news-featured-read-more {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  color: #0066cc;
  text-decoration: none;
  font-size: 0.875rem;
  font-weight: 600;
  transition: all 0.2s ease;
}

.news-featured-read-more:hover {
  gap: 0.5rem;
}

.news-featured-arrow {
  flex-shrink: 0;
  transition: transform 0.2s ease;
}

.news-card {
  background: #ffffff;
  border: 1px solid #e0e0e0;
  border-radius: 0.5rem;
  overflow: hidden;
  transition: all 0.3s ease;
  display: flex;
  flex-direction: column;
  height: 100%;
}

.news-card:hover {
  border-color: #0066cc;
  box-shadow: 0 0.25rem 0.75rem rgba(0, 102, 204, 0.1);
}

.news-card-link {
  display: block;
  text-decoration: none;
  overflow: hidden;
}

.news-card-image {
  width: 100%;
  height: 18.75rem;
  overflow: hidden;
  background: #f5f7fa;
}

.news-card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.news-card:hover .news-card-image img {
  transform: scale(1.05);
}

.news-card-image-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f5f7fa;
  color: #999999;
  font-size: 0.875rem;
}

.news-card-content {
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  flex: 1;
}

.news-card-category {
  display: inline-block;
  background: #0066cc;
  color: #ffffff;
  padding: 0.25rem 0.625rem;
  border-radius: 0.25rem;
  font-size: 0.75rem;
  font-weight: 600;
  width: fit-content;
}

.news-card-date {
  font-size: 0.8125rem;
  color: #999999;
}

.news-card-title {
  margin: 0;
  font-size: 1.375rem;
  font-weight: 600;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.news-card-title-link {
  color: #1a1a2e;
  text-decoration: none;
  transition: color 0.2s ease;
}

.news-card-title-link:hover {
  color: #0066cc;
}

.news-card-excerpt {
  margin: 0;
  font-size: 1rem;
  line-height: 1.5;
}

.news-card-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: auto;
  padding-top: 1.125rem;
  margin-top: 0.9375rem;
  border-top: 1px solid #e0e0e0;
}

.news-card-reading-time {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.8125rem;
  color: #999999;
}

.news-card-reading-icon {
  flex-shrink: 0;
}

.news-card-read-more {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  color: #0066cc;
  text-decoration: none;
  font-size: 0.8125rem;
  font-weight: 600;
  transition: all 0.2s ease;
}

.news-card-read-more:hover {
  gap: 0.5rem;
}

.news-card-arrow {
  flex-shrink: 0;
  transition: transform 0.2s ease;
}

.news-empty {
  grid-column: 1/-1;
  padding: 3.75rem 1.25rem;
  text-align: center;
  color: #999999;
  font-size: 1rem;
}

.news-pagination {
  margin-top: 2.5rem;
}

.news-pagination-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.news-pagination-item {
  margin: 0;
  padding: 0;
}

.news-pagination-item a,
.news-pagination-item span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.5rem;
  height: 2.5rem;
  padding: 0 0.5rem;
  border: 1px solid #e0e0e0;
  border-radius: 0.25rem;
  color: #666666;
  text-decoration: none;
  font-size: 0.875rem;
  transition: all 0.2s ease;
}

.news-pagination-item a:hover,
.news-pagination-item span:hover {
  border-color: #0066cc;
  color: #0066cc;
  background: #f0f5ff;
}

.news-pagination-item .current {
  background: #0066cc;
  color: #ffffff;
  border-color: #0066cc;
}

.p-single-news {
  padding: 3rem 0 4rem;
}

.p-single-news__inner {
  max-width: 1200px;
}

.p-single-news__layout {
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
  align-items: flex-start;
}

@media screen and (min-width: 901px) {
  .p-single-news__layout {
    flex-direction: row;
    gap: 3rem;
  }
}
.p-single-news__main {
  flex: 1;
  min-width: 0;
}

.p-single-news__header {
  margin-bottom: 2rem;
}

.p-single-news__meta {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-bottom: 1rem;
}

.p-single-news__category {
  display: inline-block;
  padding: 0.25rem 0.75rem;
  background: #0053b3;
  color: #fff;
  font-size: 0.75rem;
  font-weight: 600;
  border-radius: 1.25rem;
}

.p-single-news__date {
  font-size: 0.875rem;
  color: #4b5563;
}

.p-single-news__reading-time {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.875rem;
  color: #4b5563;
}

.p-single-news__reading-time svg {
  flex-shrink: 0;
}

.p-single-news__title {
  font-size: 1.75rem;
  font-weight: 700;
  color: #1f2937;
  line-height: 1.4;
  margin: 0 0 1rem;
}

@media screen and (min-width: 769px) {
  .p-single-news__title {
    font-size: 2rem;
  }
}
.p-single-news__lead {
  font-size: 1rem;
  color: #4b5563;
  line-height: 1.7;
  margin: 0 0 1rem;
}

.p-single-news__author {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.875rem;
  color: #4b5563;
}

.p-single-news__author svg {
  flex-shrink: 0;
}

.p-single-news__eyecatch {
  margin-bottom: 2.5rem;
  border-radius: 0.75rem;
  overflow: hidden;
  background: #f5f5f5;
}

.p-single-news__eyecatch-img {
  width: 100%;
  height: auto;
  display: block;
}

.p-single-news__body {
  font-size: 1rem;
  line-height: 1.8;
  color: #1f2937;
  margin-bottom: 2.5rem;
}

.p-single-news__body h2 {
  font-size: 1.5rem;
  font-weight: 700;
  color: #1f2937;
  margin: 2.5rem 0 1rem;
  padding-bottom: 0.5rem;
  border-bottom: 2px solid #0053b3;
}

@media screen and (min-width: 769px) {
  .p-single-news__body h2 {
    font-size: 1.75rem;
  }
}
.p-single-news__body h3 {
  font-size: 1.25rem;
  font-weight: 700;
  color: #1f2937;
  margin: 2rem 0 0.75rem;
  padding-left: 0.75rem;
  border-left: 3px solid #0053b3;
}

.p-single-news__body h4 {
  font-size: 1rem;
  font-weight: 700;
  color: #1f2937;
  margin: 1.5rem 0 0.5rem;
}

.p-single-news__body p {
  margin: 0 0 1.25rem;
}

.p-single-news__body ul,
.p-single-news__body ol {
  margin: 0.5rem 0 1.25rem 1.5rem;
}

.p-single-news__body ul li,
.p-single-news__body ol li {
  margin-bottom: 0.5rem;
  line-height: 1.7;
}

.p-single-news__body ul li {
  list-style: disc;
}

.p-single-news__body ol li {
  list-style: decimal;
}

.p-single-news__body strong {
  font-weight: 700;
  color: #1f2937;
}

.p-single-news__body a {
  color: #0053b3;
  text-decoration: underline;
}

.p-single-news__body a:hover {
  opacity: 0.8;
}

.p-single-news__body img {
  max-width: 100%;
  height: auto;
  border-radius: 0.5rem;
  margin: 0.5rem 0;
}

.p-single-news__body blockquote {
  margin: 1.5rem 0;
  padding: 1rem 1.25rem;
  background: #f8f9fa;
  border-left: 4px solid #0053b3;
  border-radius: 0 0.5rem 0.5rem 0;
  font-style: italic;
  color: #4b5563;
}

.p-single-news__body table {
  width: 100%;
  border-collapse: collapse;
  margin: 1.5rem 0;
}

.p-single-news__body table th,
.p-single-news__body table td {
  padding: 0.625rem 0.875rem;
  border: 1px solid #f3f4f6;
  font-size: 0.875rem;
}

.p-single-news__body table th {
  background: #f8f9fa;
  font-weight: 600;
}

.p-single-news__related-products-box {
  background: #f0f4ff;
  border: 1px solid rgba(0, 83, 179, 0.2);
  border-radius: 0.75rem;
  padding: 1.5rem;
  margin-bottom: 2rem;
}

.p-single-news__related-products-box .p-single-news__product-btn--primary {
  color: #fff;
  text-decoration: none;
}

.p-single-news__related-products-box .p-single-news__product-btn--primary:hover {
  color: #fff;
  text-decoration: none;
}

.p-single-news__related-products-box .p-single-news__product-card-name,
.p-single-news__related-products-box .p-single-news__product-card-price {
  margin: 0;
}

.p-single-news__related-products-box .p-single-news__product-card-name a {
  color: #1f2937;
  text-decoration: none;
}

.p-single-news__related-products-box .p-single-news__product-card-name a:hover {
  text-decoration: none;
}

.p-single-news__related-products-icon {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 1rem;
  font-weight: 700;
  color: #0053b3;
  margin-bottom: 0.5rem;
}

.p-single-news__related-products-icon svg {
  flex-shrink: 0;
}

.p-single-news__related-products-desc {
  font-size: 0.875rem;
  color: #4b5563;
  margin: 0 0 1rem;
}

.p-single-news__related-products-btns {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.p-single-news__product-btn {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  padding: 0.375rem 1.125rem;
  border-radius: 0.5rem;
  font-size: 0.875rem;
  font-weight: 600;
  text-decoration: none;
  margin-top: auto;
  transition: background 150ms ease-in-out, color 150ms ease-in-out;
}

.p-single-news__product-btn--primary {
  background: #0053b3;
  color: #fff;
}

.p-single-news__product-btn--primary:hover {
  background: #00408a;
  color: #fff;
}

.p-single-news__product-btn--secondary {
  background: #fff;
  color: #0053b3;
  border: 1px solid #0053b3;
}

.p-single-news__product-btn--secondary:hover {
  background: rgba(0, 83, 179, 0.06);
}

.p-single-news__cat-products {
  margin-top: 1.25rem;
  border-top: 1px solid rgba(0, 83, 179, 0.15);
  padding-top: 1rem;
}

.p-single-news__cat-products-label {
  font-size: 0.875rem;
  font-weight: 600;
  color: #4b5563;
  margin: 0 0 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.p-single-news__cat-products-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.75rem;
}

.p-single-news__cat-product-card {
  display: flex;
  flex-direction: column;
  border: 1px solid #f3f4f6;
  border-radius: 0.375rem;
  overflow: hidden;
  text-decoration: none;
  background: #fff;
  transition: box-shadow 150ms ease-in-out;
}

.p-single-news__cat-product-card:hover {
  box-shadow: 0 0.25rem 0.625rem rgba(0, 0, 0, 0.08);
}

.p-single-news__cat-product-card-img {
  width: 100%;
  aspect-ratio: 1/1;
  overflow: hidden;
  background: #f5f5f5;
}

.p-single-news__cat-product-card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.p-single-news__cat-product-card-body {
  padding: 0.5rem 0.625rem;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.p-single-news__cat-product-card-name {
  font-size: 0.75rem;
  font-weight: 600;
  color: #1f2937;
  margin: 0;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.p-single-news__cat-product-card-price {
  font-size: 0.875rem;
  font-weight: 700;
  color: #0053b3;
  margin: 0;
}

.p-single-news__cat-product-card-price .woocommerce-Price-amount {
  color: inherit;
}

.p-single-news__block-product-item {
  margin-bottom: 1.25rem;
}

.p-single-news__block-product-item:last-child {
  margin-bottom: 0;
}

.p-single-news__product-card {
  display: flex;
  gap: 0;
  border: 1px solid #f3f4f6;
  border-radius: 0.5rem;
  overflow: hidden;
  text-decoration: none;
  transition: box-shadow 150ms ease-in-out;
}

.p-single-news__product-card:hover {
  box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.08);
  text-decoration: none;
}

.p-single-news__product-card-img {
  flex-shrink: 0;
  width: 9.375rem;
  aspect-ratio: 1/1;
  overflow: hidden;
  background: #f5f5f5;
  display: block;
  text-decoration: none;
}

.p-single-news__product-card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  margin: 0;
}

.p-single-news__product-card-body {
  padding: 0.875rem;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  flex: 1;
  background: #fff;
}

.p-single-news__product-card-name {
  font-size: 1rem;
  font-weight: 600;
  color: #1f2937;
  margin: 0;
  line-height: 1.4;
}

.p-single-news__product-card-name a {
  color: #1f2937;
  text-decoration: none;
}

.p-single-news__product-card-name a:hover {
  text-decoration: none;
}

.p-single-news__product-card-price {
  font-size: 1.25rem;
  font-weight: 700;
  color: #0053b3;
  margin: 0;
}

.p-single-news__product-card-price .woocommerce-Price-amount {
  color: inherit;
}

.p-single-news__footer {
  border-top: 1px solid #f3f4f6;
  padding-top: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.p-single-news__tags {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.p-single-news__tags-label {
  font-size: 0.875rem;
  color: #4b5563;
  flex-shrink: 0;
}

.p-single-news__tag {
  display: inline-block;
  padding: 0.25rem 0.75rem;
  background: #f0f0f0;
  border-radius: 1.25rem;
  font-size: 0.875rem;
  color: #1f2937;
  text-decoration: none;
  transition: background 150ms ease-in-out;
}

.p-single-news__tag:hover {
  background: #e0e0e0;
}

.p-single-news__share {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.p-single-news__share-label {
  font-size: 0.875rem;
  color: #4b5563;
  flex-shrink: 0;
}

.p-single-news__share-btn {
  display: inline-flex;
  align-items: center;
  padding: 0.375rem 0.875rem;
  border-radius: 0.25rem;
  font-size: 0.875rem;
  font-weight: 600;
  text-decoration: none;
  color: #fff;
  transition: opacity 150ms ease-in-out;
}

.p-single-news__share-btn:hover {
  opacity: 0.85;
}

.p-single-news__share-btn--twitter {
  background: #000000;
}

.p-single-news__share-btn--facebook {
  background: #1877f2;
}

.p-single-news__share-btn--line {
  background: #06c755;
}

.p-single-news__sidebar {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

@media screen and (min-width: 901px) {
  .p-single-news__sidebar {
    flex: 0 0 17.5rem;
    position: sticky;
    top: 1.5rem;
  }
}
.p-single-news__sidebar-title {
  font-size: 1rem;
  font-weight: 700;
  color: #1f2937;
  margin: 0 0 0.75rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid #f3f4f6;
}

.p-single-news__author-box {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  background: #fff;
  border: 1px solid #f3f4f6;
  border-radius: 0.75rem;
  padding: 1rem 1.25rem;
}

.p-single-news__author-avatar {
  flex-shrink: 0;
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  background: #e8edf6;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.p-single-news__author-info {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
}

.p-single-news__author-name {
  font-size: 0.875rem;
  font-weight: 700;
  color: #1f2937;
  margin: 0;
}

.p-single-news__author-desc {
  font-size: 0.75rem;
  color: #4b5563;
  margin: 0;
}

.p-single-news__quick-links {
  background: #fff;
  border: 1px solid #f3f4f6;
  border-radius: 0.75rem;
  padding: 1.25rem;
}

.p-single-news__quick-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0rem;
}

.p-single-news__quick-list li {
  border-bottom: 1px solid #f3f4f6;
}

.p-single-news__quick-list li:last-child {
  border-bottom: none;
}

.p-single-news__quick-list a {
  display: flex;
  align-items: center;
  padding: 0.625rem 0;
  font-size: 0.875rem;
  color: #1f2937;
  text-decoration: none;
  transition: color 150ms ease-in-out;
}

.p-single-news__quick-list a::before {
  content: "›";
  margin-right: 0.5rem;
  color: #0053b3;
  font-size: 1.125rem;
  line-height: 1;
}

.p-single-news__quick-list a:hover {
  color: #0053b3;
}

.p-single-news-related-products {
  padding: 3rem 0;
  background: #f8f9fa;
}

.p-single-news-related-products__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 2rem;
}

.p-single-news-related-products__title {
  font-size: 1.5rem;
  font-weight: 700;
  color: #1f2937;
  margin: 0 0 0.25rem;
}

@media screen and (min-width: 769px) {
  .p-single-news-related-products__title {
    font-size: 1.75rem;
  }
}
.p-single-news-related-products__subtitle {
  font-size: 0.875rem;
  color: #4b5563;
  margin: 0;
}

.p-single-news-related-products__all-link {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: #0053b3;
  text-decoration: none;
  white-space: nowrap;
  flex-shrink: 0;
}

.p-single-news-related-products__all-link:hover {
  text-decoration: underline;
}

.p-single-news-related-products__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
}

@media screen and (min-width: 769px) {
  .p-single-news-related-products__grid {
    grid-template-columns: repeat(4, 1fr);
  }
}
.p-single-news-related-products .product-image-wrapper {
  height: 10rem;
}

@media screen and (min-width: 769px) {
  .p-single-news-related-products .product-image-wrapper {
    height: 13.75rem;
  }
}
.p-single-news-related-products .products-grid {
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
  gap: 1.25rem;
  scrollbar-width: thin;
  scrollbar-color: #e0e0e0 transparent;
  -webkit-overflow-scrolling: touch;
}

@media screen and (max-width: 768px) {
  .p-single-news-related-products .products-grid {
    padding-bottom: 1.5625rem;
  }
}
.p-single-news-related-products .products-grid::-webkit-scrollbar {
  height: 0.25rem;
}

.p-single-news-related-products .products-grid::-webkit-scrollbar-thumb {
  background: #e0e0e0;
  border-radius: 0.125rem;
}

@media screen and (max-width: 768px) {
  .p-single-news-related-products .products-grid .product-card {
    flex: 0 0 12.5rem;
    min-width: 0;
  }
}
@media screen and (min-width: 769px) {
  .p-single-news-related-products .products-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    flex-wrap: unset;
    overflow-x: unset;
    padding-bottom: 0;
  }
  .p-single-news-related-products .products-grid .product-card {
    flex: unset;
  }
}
@media screen and (min-width: 1025px) {
  .p-single-news-related-products .products-grid {
    grid-template-columns: repeat(5, 1fr);
    gap: 1.5rem;
  }
}
.p-single-news-related-products__card {
  background: #fff;
  border-radius: 0.75rem;
  overflow: hidden;
  text-decoration: none;
  border: 1px solid #f3f4f6;
  transition: box-shadow 200ms ease-in-out;
}

.p-single-news-related-products__card:hover {
  box-shadow: 0 0.25rem 1rem rgba(0, 0, 0, 0.1);
}

.p-single-news-related-products__card-image {
  position: relative;
  aspect-ratio: 1/1;
  overflow: hidden;
  background: #f5f5f5;
}

.p-single-news-related-products__card-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 200ms ease-in-out;
}

.p-single-news-related-products__card:hover .p-single-news-related-products__card-img {
  transform: scale(1.03);
}

.p-single-news-related-products__card-temp {
  position: absolute;
  top: 0.5rem;
  left: 0.5rem;
  background: rgba(0, 0, 0, 0.6);
  color: #fff;
  font-size: 0.6875rem;
  padding: 0.1875rem 0.5rem;
  border-radius: 0.25rem;
}

.p-single-news-related-products__card-body {
  padding: 0.75rem;
}

.p-single-news-related-products__card-stars {
  font-size: 0.75rem;
  color: #f59e0b;
  margin-bottom: 0.25rem;
}

.p-single-news-related-products__card-name {
  font-size: 0.875rem;
  font-weight: 600;
  color: #1f2937;
  margin: 0 0 0.375rem;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.p-single-news-related-products__card-price {
  font-size: 1rem;
  font-weight: 700;
  color: #0053b3;
  margin: 0;
}

.p-single-news-related-products__card-price .woocommerce-Price-amount {
  color: inherit;
}

.p-single-news-related-posts {
  padding: 3rem 0 4rem;
}

.p-single-news-related-posts__title {
  font-size: 1.5rem;
  font-weight: 700;
  color: #1f2937;
  margin: 0 0 1.5rem;
}

@media screen and (min-width: 769px) {
  .p-single-news-related-posts__title {
    font-size: 1.75rem;
  }
}
.p-single-news-related-posts__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  margin-bottom: 2rem;
}

@media screen and (min-width: 769px) {
  .p-single-news-related-posts__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
.p-single-news-related-posts__card {
  text-decoration: none;
  border-radius: 0.75rem;
  overflow: hidden;
  background: #fff;
  border: 1px solid #f3f4f6;
  transition: box-shadow 200ms ease-in-out;
}

.p-single-news-related-posts__card:hover {
  box-shadow: 0 0.25rem 1rem rgba(0, 0, 0, 0.08);
}

.p-single-news-related-posts__card-image {
  position: relative;
  aspect-ratio: 16/9;
  overflow: hidden;
  background: #f5f5f5;
}

.p-single-news-related-posts__card-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 200ms ease-in-out;
}

.p-single-news-related-posts__card:hover .p-single-news-related-posts__card-img {
  transform: scale(1.03);
}

.p-single-news-related-posts__card-img-placeholder {
  width: 100%;
  height: 100%;
  background: #e8e8e8;
}

.p-single-news-related-posts__card-category {
  position: absolute;
  top: 0.625rem;
  left: 0.625rem;
  background: #0053b3;
  color: #fff;
  font-size: 0.6875rem;
  font-weight: 600;
  padding: 0.1875rem 0.625rem;
  border-radius: 1.25rem;
}

.p-single-news-related-posts__card-body {
  padding: 1rem 1.25rem;
}

.p-single-news-related-posts__card-title {
  font-size: 1rem;
  font-weight: 600;
  color: #1f2937;
  margin: 0;
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.p-single-news-related-posts__back {
  text-align: center;
}

.p-single-news-related-posts__back-link {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 1rem;
  color: #0053b3;
  text-decoration: none;
  font-weight: 600;
}

.p-single-news-related-posts__back-link:hover {
  text-decoration: underline;
}

.p-single-news__body.entry-content .wp-block-image {
  margin: 2rem 0;
}

.p-single-news__body.entry-content .wp-block-image img {
  max-width: 100%;
  height: auto;
  border-radius: 0.5rem;
  display: block;
}

.p-single-news__body.entry-content .wp-block-image figcaption {
  font-size: 0.75rem;
  color: #4b5563;
  text-align: center;
  margin-top: 0.5rem;
}

.p-single-news__body.entry-content .wp-block-image.aligncenter {
  text-align: center;
}

.p-single-news__body.entry-content .wp-block-image.alignleft {
  float: left;
  margin: 0.5rem 1.5rem 1rem 0;
}

.p-single-news__body.entry-content .wp-block-image.alignright {
  float: right;
  margin: 0.5rem 0 1rem 1.5rem;
}

.p-single-news__body.entry-content .wp-block-image.alignfull, .p-single-news__body.entry-content .wp-block-image.alignwide {
  border-radius: 0;
}

.p-single-news__body.entry-content .wp-block-gallery {
  margin: 2rem 0;
  gap: 0.5rem;
}

.p-single-news__body.entry-content .wp-block-gallery .wp-block-image img {
  border-radius: 0.375rem;
  margin: 0;
}

.p-single-news__body.entry-content .wp-block-separator {
  margin: 2.5rem auto;
  border: none;
  border-top: 2px solid #f3f4f6;
  max-width: 5rem;
}

.p-single-news__body.entry-content .wp-block-separator.is-style-wide {
  max-width: 100%;
}

.p-single-news__body.entry-content .wp-block-separator.is-style-dots {
  border: none;
  text-align: center;
}

.p-single-news__body.entry-content .wp-block-separator.is-style-dots::before {
  content: "· · ·";
  font-size: 1.5rem;
  color: #4b5563;
  letter-spacing: 0.5rem;
}

.p-single-news__body.entry-content .wp-block-quote {
  margin: 2rem 0;
  padding: 1.25rem 1.5rem;
  background: #f8f9fa;
  border-left: 4px solid #0053b3;
  border-radius: 0 0.5rem 0.5rem 0;
}

.p-single-news__body.entry-content .wp-block-quote p {
  font-style: italic;
  color: #4b5563;
  margin: 0 0 0.5rem;
}

.p-single-news__body.entry-content .wp-block-quote p:last-child {
  margin-bottom: 0;
}

.p-single-news__body.entry-content .wp-block-quote cite {
  display: block;
  font-size: 0.875rem;
  color: #4b5563;
  font-style: normal;
  margin-top: 0.5rem;
}

.p-single-news__body.entry-content .wp-block-quote cite::before {
  content: "— ";
}

.p-single-news__body.entry-content .wp-block-quote.is-large, .p-single-news__body.entry-content .wp-block-quote.is-style-large {
  padding: 1.75rem 2rem;
}

.p-single-news__body.entry-content .wp-block-quote.is-large p, .p-single-news__body.entry-content .wp-block-quote.is-style-large p {
  font-size: 1.25rem;
}

.p-single-news__body.entry-content .wp-block-pullquote {
  margin: 2.5rem 0;
  padding: 2rem 1.5rem;
  text-align: center;
  border-top: 3px solid #0053b3;
  border-bottom: 3px solid #0053b3;
}

.p-single-news__body.entry-content .wp-block-pullquote blockquote {
  margin: 0;
  border: none;
  padding: 0;
  background: none;
}

.p-single-news__body.entry-content .wp-block-pullquote p {
  font-size: 1.5rem;
  font-weight: 700;
  color: #1f2937;
  font-style: italic;
  line-height: 1.6;
}

.p-single-news__body.entry-content .wp-block-pullquote cite {
  font-size: 0.875rem;
  color: #4b5563;
}

.p-single-news__body.entry-content .wp-block-code {
  margin: 1.5rem 0;
  background: #1e1e2e;
  border-radius: 0.5rem;
  overflow-x: auto;
}

.p-single-news__body.entry-content .wp-block-code code {
  display: block;
  padding: 1.25rem 1.5rem;
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
  font-size: 0.875rem;
  color: #cdd6f4;
  line-height: 1.8;
  white-space: pre;
}

.p-single-news__body.entry-content .wp-block-preformatted {
  margin: 1.5rem 0;
  padding: 1rem 1.25rem;
  background: #f5f7fa;
  border-radius: 0.5rem;
  font-family: "SFMono-Regular", Consolas, monospace;
  font-size: 0.875rem;
  line-height: 1.8;
  overflow-x: auto;
  white-space: pre-wrap;
  color: #1f2937;
}

.p-single-news__body.entry-content .wp-block-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin: 1.5rem 0;
}

.p-single-news__body.entry-content .wp-block-button__link {
  display: inline-flex;
  align-items: center;
  padding: 0.75rem 1.75rem;
  border-radius: 0.5rem;
  font-size: 1rem;
  font-weight: 600;
  text-decoration: none;
  transition: opacity 150ms ease-in-out;
  background: #0053b3;
  color: #fff;
}

.p-single-news__body.entry-content .wp-block-button__link:hover {
  opacity: 0.85;
}

.p-single-news__body.entry-content .wp-block-button.is-style-outline .wp-block-button__link {
  background: transparent;
  color: #0053b3;
  border: 2px solid #0053b3;
}

.p-single-news__body.entry-content .wp-block-button.is-style-outline .wp-block-button__link:hover {
  background: rgba(0, 83, 179, 0.06);
  opacity: 1;
}

.p-single-news__body.entry-content .wp-block-columns {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  margin: 2rem 0;
}

.p-single-news__body.entry-content .wp-block-column {
  flex: 1 1 12.5rem;
  min-width: 0;
}

.p-single-news__body.entry-content .wp-block-cover {
  margin: 2rem 0;
  border-radius: 0.75rem;
  overflow: hidden;
  min-height: 18.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.p-single-news__body.entry-content .wp-block-cover__inner-container {
  position: relative;
  z-index: 1;
  text-align: center;
  color: #fff;
  padding: 1.5rem;
}

.p-single-news__body.entry-content .wp-block-table {
  margin: 2rem 0;
  overflow-x: auto;
}

.p-single-news__body.entry-content .wp-block-table table {
  margin: 0;
}

.p-single-news__body.entry-content .wp-block-table.is-style-stripes tbody tr:nth-child(odd) td {
  background: #f8f9fa;
}

.p-single-news__body.entry-content .wp-block-table figcaption {
  font-size: 0.75rem;
  color: #4b5563;
  text-align: center;
  margin-top: 0.5rem;
}

.p-single-news__body.entry-content .wp-block-list {
  margin: 0.5rem 0 1.25rem 1.5rem;
}

.p-single-news__body.entry-content .wp-block-list li {
  margin-bottom: 0.5rem;
  line-height: 1.7;
}

.p-single-news__body.entry-content .wp-block-heading {
  scroll-margin-top: 5rem;
}

.p-single-news__body.entry-content .wp-block-media-text {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
  align-items: center;
  margin: 2rem 0;
}

@media screen and (max-width: 768px) {
  .p-single-news__body.entry-content .wp-block-media-text {
    grid-template-columns: 1fr;
  }
}
.p-single-news__body.entry-content .wp-block-media-text__media img {
  width: 100%;
  height: auto;
  border-radius: 0.5rem;
  display: block;
}

.p-single-news__body.entry-content .wp-block-media-text__content {
  padding: 0.5rem;
}

.p-single-news__body.entry-content .wp-block-media-text.has-media-on-the-right .wp-block-media-text__media {
  order: 2;
}

.p-single-news__body.entry-content .wp-block-media-text.has-media-on-the-right .wp-block-media-text__content {
  order: 1;
}

.p-single-news__body.entry-content .wp-block-group {
  margin: 1.5rem 0;
}

.p-single-news__body.entry-content .wp-block-group.has-background {
  padding: 1.5rem;
  border-radius: 0.75rem;
}

.p-single-news__body.entry-content .wp-block-spacer {
  display: block;
}

.p-single-news__body.entry-content .wp-block-embed {
  margin: 2rem 0;
}

.p-single-news__body.entry-content .wp-block-embed__wrapper {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
  border-radius: 0.75rem;
  background: #000;
}

.p-single-news__body.entry-content .wp-block-embed__wrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.p-single-news__body.entry-content .wp-block-embed figcaption {
  font-size: 0.75rem;
  color: #4b5563;
  text-align: center;
  margin-top: 0.5rem;
}

.p-single-news__body.entry-content .has-cyan-bluish-gray-background-color {
  background-color: #abb8c3;
}

.p-single-news__body.entry-content .has-pale-cyan-blue-background-color {
  background-color: #8ed1fc;
}

.p-single-news__body.entry-content .has-vivid-cyan-blue-background-color {
  background-color: #0693e3;
}

.p-single-news__body.entry-content .has-luminous-vivid-amber-background-color {
  background-color: #fcb900;
}

.p-single-news__body.entry-content .has-light-green-cyan-background-color {
  background-color: #7bdcb5;
}

.p-single-news__body.entry-content .aligncenter {
  margin-left: auto;
  margin-right: auto;
  display: block;
}

.p-single-news__body.entry-content .alignleft {
  float: left;
  margin-right: 1.5rem;
}

.p-single-news__body.entry-content .alignright {
  float: right;
  margin-left: 1.5rem;
}

.p-single-news__body.entry-content::after {
  content: "";
  display: table;
  clear: both;
}

.gift-hero {
  position: relative;
  padding: 3.75rem 0;
  color: #ffffff;
  overflow: hidden;
}

@media screen and (min-width: 901px) {
  .gift-hero {
    padding: 6.25rem 0;
  }
}
.gift-hero-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

.gift-hero-content {
  position: relative;
  z-index: 1;
}

.gift-hero-badge {
  display: inline-block;
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  margin-bottom: 1rem;
  opacity: 0.9;
}

.gift-hero-title {
  margin: 0 0 1.5rem 0;
  font-size: 2.5rem;
  font-weight: 700;
  line-height: 1.2;
  color: #fff;
}

@media screen and (min-width: 901px) {
  .gift-hero-title {
    font-size: 3.5rem;
  }
}
.gift-hero-description {
  margin: 0 0 2rem 0;
  font-size: 1rem;
  line-height: 1.6;
  opacity: 0.95;
}

@media screen and (min-width: 901px) {
  .gift-hero-description {
    font-size: 1.125rem;
  }
}
.gift-hero-message {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(10px);
  padding: 1rem 1.5rem;
  border-radius: 0.5rem;
  font-size: 1rem;
  font-weight: 500;
  width: fit-content;
}

.gift-hero-icon {
  font-size: 1.5rem;
}

.gift-hero-text {
  display: inline;
}

.gift-section-header {
  text-align: center;
  margin-bottom: 2.5rem;
}

.gift-section-title {
  margin: 0 0 0.75rem 0;
  font-size: 2rem;
  font-weight: 700;
  color: #1a1a2e;
}

@media screen and (min-width: 901px) {
  .gift-section-title {
    font-size: 2.5rem;
  }
}
.gift-section-subtitle {
  margin: 0;
  font-size: 1rem;
  color: #666666;
}

@media screen and (min-width: 901px) {
  .gift-section-subtitle {
    font-size: 1.125rem;
  }
}
.gift-price-section {
  padding: 3.75rem 0;
  background: #ffffff;
}

.gift-price-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
}

@media screen and (min-width: 901px) {
  .gift-price-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
  }
}
.gift-price-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  background: #ffffff;
  border: 2px solid #e0e0e0;
  border-radius: 0.5rem;
  text-decoration: none;
  color: #1a1a2e;
  transition: all 0.3s ease;
  text-align: center;
}

.gift-price-card:hover {
  border-color: #0066cc;
  box-shadow: 0 0.5rem 1rem rgba(0, 102, 204, 0.1);
  transform: translateY(-0.25rem);
}

.gift-price-card--active {
  border-color: #0066cc;
  background: #f0f7ff;
  box-shadow: 0 0.5rem 1rem rgba(0, 102, 204, 0.15);
}

.gift-price-icon {
  font-size: 2rem;
  margin-bottom: 0.75rem;
  color: #0066cc;
  width: 2.8125rem;
  aspect-ratio: 1/1;
}

.gift-price-icon svg {
  width: 100%;
  height: 100%;
}

.gift-price-label {
  margin: 0 0 0.5rem 0;
  font-size: 1.5rem;
  font-weight: 700;
  color: #0066cc;
}

.gift-price-description {
  margin: 0 0 0.75rem 0;
  font-size: 0.875rem;
  color: #666666;
}

.gift-price-count {
  font-size: 1rem;
  font-weight: 600;
  color: #0066cc;
}

.gift-occasion-section {
  padding: 3.75rem 0;
  background: #f5f7fa;
}

.gift-occasion-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.75rem;
}

@media screen and (min-width: 769px) {
  .gift-occasion-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
  }
}
@media screen and (min-width: 901px) {
  .gift-occasion-grid {
    grid-template-columns: repeat(6, 1fr);
    gap: 1.25rem;
  }
}
.gift-occasion-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 1.25rem;
  background: #ffffff;
  border: 2px solid #e0e0e0;
  border-radius: 0.5rem;
  text-decoration: none;
  color: #1a1a2e;
  transition: all 0.3s ease;
  text-align: center;
}

.gift-occasion-card:hover {
  border-color: #0066cc;
  box-shadow: 0 0.25rem 0.75rem rgba(0, 102, 204, 0.1);
  transform: scale(1.02);
}

.gift-occasion-card--active {
  border-color: #0066cc;
  background: #f0f7ff;
  box-shadow: 0 0.25rem 0.75rem rgba(0, 102, 204, 0.15);
}

.gift-occasion-icon {
  font-size: 2rem;
  margin-bottom: 0.5rem;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: transform 0.3s ease;
}

.gift-occasion-icon svg {
  width: 2.5rem;
  height: 2.5rem;
  display: block;
  color: #0053b3;
}

.gift-occasion-card:hover .gift-occasion-icon {
  transform: scale(1.1);
}

.gift-occasion-name {
  margin: 0 0 0.25rem 0;
  font-size: 1.0625rem;
  font-weight: 700;
  color: #0053b3;
}

.gift-occasion-description {
  margin: 0;
  font-size: 0.75rem;
  color: #999999;
}

.gift-products-section {
  padding: 3.75rem 0;
  background: #ffffff;
}

.gift-filter-reset {
  text-align: center;
  margin-bottom: 2rem;
}

.gift-filter-reset-link {
  display: inline-block;
  color: #0066cc;
  text-decoration: none;
  font-size: 0.875rem;
  font-weight: 600;
  transition: all 0.2s ease;
}

.gift-filter-reset-link:hover {
  text-decoration: underline;
  color: #004499;
}

.gift-products-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
  margin-bottom: 2.5rem;
}

@media screen and (min-width: 769px) {
  .gift-products-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.25rem;
  }
}
@media screen and (min-width: 901px) {
  .gift-products-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
  }
}
.gift-product-card {
  display: flex;
  flex-direction: column;
  background: #ffffff;
  border: 1px solid #e0e0e0;
  border-radius: 0.5rem;
  overflow: hidden;
  text-decoration: none;
  color: #1a1a2e;
  transition: all 0.3s ease;
}

.gift-product-card:hover {
  border-color: #0066cc;
  box-shadow: 0 0.5rem 1rem rgba(0, 102, 204, 0.1);
  transform: translateY(-0.25rem);
}

.gift-product-card:hover .gift-product-image img {
  transform: scale(1.05);
}

.gift-product-card:hover .gift-product-title {
  color: #0066cc;
}

.gift-product-image {
  position: relative;
  width: 100%;
  padding-bottom: 100%;
  overflow: hidden;
  background: #f5f7fa;
}

.gift-product-image img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.gift-product-image-placeholder {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f5f7fa;
  color: #999999;
  font-size: 0.875rem;
}

.gift-product-temp {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  color: #ffffff;
  padding: 0.375rem 0.75rem;
  border-radius: 1.25rem;
  font-size: 0.75rem;
  font-weight: 600;
}

.gift-product-temp--normal {
  background: #e07a2f;
}

.gift-product-temp--chilled {
  background: #2196f3;
}

.gift-product-temp--frozen {
  background: #5c6bc0;
}

.gift-product-temp-icon {
  display: inline-flex;
  align-items: center;
}

.gift-product-temp-icon svg {
  width: 0.75rem;
  height: 0.75rem;
}

.gift-product-content {
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  flex: 1;
}

.gift-product-title {
  margin: 0;
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.4;
  transition: color 0.2s ease;
}

.gift-product-description {
  margin: 0;
  font-size: 0.75rem;
  color: #666666;
  line-height: 1.5;
  flex: 1;
}

.gift-product-price {
  display: flex;
  align-items: baseline;
  gap: 0.375rem;
  margin-top: auto;
}

.gift-product-price-value {
  font-size: 1.125rem;
  font-weight: 700;
  color: #0066cc;
}

.gift-product-price-note {
  font-size: 0.75rem;
  color: #999999;
}

.gift-products-empty {
  text-align: center;
  padding: 3.75rem 1.25rem;
  background: #f5f7fa;
  border-radius: 0.5rem;
}

.gift-products-empty p {
  margin: 0 0 1.25rem 0;
  font-size: 1rem;
  color: #666666;
}

.gift-products-footer {
  text-align: center;
}

.gift-trust-section {
  padding: 3.75rem 0;
  background: linear-gradient(135deg, #0066cc 0%, #004499 100%);
  color: #ffffff;
  text-align: center;
}

.gift-trust-title {
  margin: 0 0 1.5rem 0;
  font-size: 2rem;
  font-weight: 700;
  color: #fff;
}

@media screen and (min-width: 901px) {
  .gift-trust-title {
    font-size: 2.5rem;
  }
}
.gift-trust-description {
  margin: 0 0 2rem 0;
  font-size: 1rem;
  line-height: 1.6;
  opacity: 0.95;
  max-width: 37.5rem;
  margin-left: auto;
  margin-right: auto;
}

@media screen and (min-width: 901px) {
  .gift-trust-description {
    font-size: 1.125rem;
  }
}
.gift-trust-buttons {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem;
}

/* .btn {
      display: inline-block;
      padding: rem(12) rem(24);
      border-radius: rem(6);
      text-decoration: none;
      font-size: rem(16);
      font-weight: 600;
      transition: all 0.2s ease;
      border: 2px solid transparent;
      cursor: pointer;

      &:hover {
            transform: translateY(rem(-2));
      }
}

.btn-primary {
      background: #0066cc;
      color: #ffffff;

      &:hover {
            background: #004499;
      }
}

.btn-white {
      background: #ffffff;
      color: #0066cc;

      &:hover {
            background: #f5f7fa;
      }
}

.btn-outline-white {
      background: transparent;
      color: #ffffff;
      border-color: #ffffff;

      &:hover {
            background: rgba(255, 255, 255, 0.1);
      }
} */
@media screen and (max-width: 768px) {
  .gift-hero-title {
    font-size: 2rem;
  }
  .gift-section-title {
    font-size: 1.5rem;
  }
  .gift-price-card,
  .gift-occasion-card {
    padding: 1rem;
  }
  .gift-product-title {
    font-size: 0.8125rem;
  }
}
.product-detail {
  padding: 2.5rem 0;
  background: #ffffff;
}

.product-detail-wrapper {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2.5rem;
  align-items: start;
}

@media screen and (max-width: 900px) {
  .product-detail-wrapper {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
}
.product-gallery {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.product-gallery-main {
  position: relative;
  width: 100%;
  padding-bottom: 80%;
  overflow: hidden;
  background: #f5f7fa;
  border-radius: 0.5rem;
}

.product-gallery-main img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.product-gallery-placeholder {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f5f7fa;
  color: #999999;
  font-size: 1rem;
}

.product-gallery-thumbnails {
  display: flex;
  gap: 0.75rem;
  overflow-x: auto;
  padding-bottom: 0.5rem;
}

.product-gallery-thumbnails::-webkit-scrollbar {
  height: 0.25rem;
}

.product-gallery-thumbnails::-webkit-scrollbar-track {
  background: #f5f7fa;
  border-radius: 0.25rem;
}

.product-gallery-thumbnails::-webkit-scrollbar-thumb {
  background: #0066cc;
  border-radius: 0.25rem;
}

.product-gallery-thumbnail {
  flex-shrink: 0;
  width: 5rem;
  height: 5rem;
  padding: 0.25rem;
  background: #ffffff;
  border: 2px solid #e0e0e0;
  border-radius: 0.375rem;
  cursor: pointer;
  transition: all 0.2s ease;
}

.product-gallery-thumbnail img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 0.125rem;
}

.product-gallery-thumbnail:hover {
  border-color: #0066cc;
}

.product-gallery-thumbnail.active {
  border-color: #0066cc;
  box-shadow: 0 0.125rem 0.5rem rgba(0, 102, 204, 0.2);
}

.product-info {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.product-deadline {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.875rem 1.125rem;
  border: 2px solid #f59e0b;
  border-radius: 0.75rem;
  background: #fffbeb;
}

.product-deadline-icon {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  background: #f59e0b;
  color: #ffffff;
}

.product-deadline-icon svg {
  display: block;
}

.product-deadline-body {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  line-height: 1.2;
}

.product-deadline-label {
  font-size: 0.875rem;
  font-weight: 600;
  color: #92400e;
}

.product-deadline-date {
  font-size: 1.375rem;
  font-weight: 700;
  color: #dc2626;
  letter-spacing: 0.02em;
}

@media screen and (max-width: 900px) {
  .product-deadline-date {
    font-size: 1.25rem;
  }
}
.product-labels {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.product-label {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.375rem 0.75rem;
  background: #f0f7ff;
  border: 1px solid #0053b3;
  border-radius: 1.25rem;
  font-size: 1rem;
  font-weight: 600;
  color: #0066cc;
}

.product-label.product-label-temp {
  background: #0053b3;
  color: #ffffff;
  border-color: #0053b3;
}

.product-label.product-label-temp--frozen {
  background: #cffafe;
  border-color: #cffafe;
  color: #0e7490;
}

.product-label.product-label-temp--chilled {
  background: #dbeafe;
  border-color: #dbeafe;
  color: #1d4ed8;
}

.product-label.product-label-temp--normal {
  background: #fef3c7;
  border-color: #fef3c7;
  color: #b45309;
}

.product-label-icon {
  display: inline-flex;
  align-items: center;
  font-size: 0.875rem;
}

.product-label-icon svg {
  display: block;
}

.product-item-title {
  margin: 0;
  font-size: 2rem;
  font-weight: 700;
  color: #1a1a2e;
  line-height: 1.3;
}

@media screen and (max-width: 900px) {
  .product-item-title {
    font-size: 1.5rem;
  }
}
.product-rating {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.product-stars {
  font-size: 1.125rem;
  letter-spacing: 0.125rem;
}

.product-rating-value {
  font-size: 1rem;
  font-weight: 600;
  color: #0066cc;
}

.product-review-count {
  font-size: 0.875rem;
  color: #666666;
}

.product-price {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
}

.product-price-value {
  font-size: 2.5rem;
  font-weight: 700;
  color: #0053b3;
}

.product-price-value .woocommerce-Price-amount,
.product-price-value .woocommerce-Price-currencySymbol,
.product-price-value bdi {
  font-size: inherit;
  font-weight: inherit;
  color: inherit;
}

.product-price-value del {
  font-size: 1.5rem;
  font-weight: 400;
  color: #6b7280;
  margin-right: 0.5rem;
  text-decoration: line-through;
}

.product-price-value ins {
  text-decoration: none;
}

.product-price-note {
  font-size: 0.875rem;
  color: #666;
}

.product-short-description {
  font-size: 1.125rem;
  line-height: 1.6;
}

.product-form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding-top: 1.5rem;
}

.product-form > p.stock {
  font-weight: bold;
  font-size: 150%;
  margin: 0;
}

.product-form > p.stock.in-stock {
  color: #2e7d32;
}

.product-form > p.stock.out-of-stock {
  color: #c62828;
}

.product-detail .product-form .variations_form {
  width: 100%;
}

.product-detail .product-form table.variations {
  width: 100%;
  border: none;
  border-collapse: collapse;
  display: block;
  padding-top: 1rem;
}

.product-detail .product-form table.variations tbody, .product-detail .product-form table.variations tr {
  display: block;
}

.product-detail .product-form table.variations tbody {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
  padding-top: 1rem;
}

.product-detail .product-form table.variations tr {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}

.product-detail .product-form table.variations tr:only-child {
  grid-column: 1/-1;
}

.product-detail .product-form table.variations th.label, .product-detail .product-form table.variations td.value {
  display: block;
  width: 100%;
  padding: 0;
  border: none;
  background: transparent;
}

.product-detail .product-form table.variations th.label label {
  font-size: 1rem;
  font-weight: 600;
  color: #1f2937;
  background: transparent;
}

.product-detail .product-form table.variations td.value select {
  width: 100%;
  height: 3.25rem;
  padding: 0 2.5rem 0 1rem;
  font-size: 1rem;
  font-family: "Noto Sans JP", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: #1f2937;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%230053b3' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") no-repeat right 0.875rem center;
  border: 2px solid #e0e0e0;
  border-radius: 0.5rem;
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  transition: border-color 200ms ease-in-out;
  box-shadow: none;
}

.product-detail .product-form table.variations td.value select:focus {
  outline: none;
  border-color: #0053b3;
  box-shadow: 0 0 0 3px rgba(0, 83, 179, 0.12);
}

.product-detail .product-form .reset_variations {
  display: inline-block;
  margin-top: 0.125rem;
  font-size: 0.8125rem;
  color: #6b7280;
  text-decoration: underline;
  cursor: pointer;
}

.product-detail .product-form .reset_variations.hidden {
  visibility: hidden;
}

.product-detail .product-form .single_variation_wrap {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.product-detail .product-form .woocommerce-variation-price {
  display: none;
}

.product-detail .product-form .woocommerce-variation-availability .stock {
  font-size: 0.875rem;
  font-weight: 600;
}

.product-detail .product-form .woocommerce-variation-availability .stock.in-stock {
  color: #10b981;
}

.product-detail .product-form .woocommerce-variation-availability .stock.out-of-stock {
  color: #ef4444;
}

.product-detail .product-form .woocommerce-variation-add-to-cart,
.product-detail .product-form form.cart:not(.variations_form) {
  display: flex;
  gap: 0.75rem;
  align-items: center;
}

.product-detail .product-form .woocommerce-variation-add-to-cart.woocommerce-variation-add-to-cart-disabled {
  opacity: 0.5;
  pointer-events: none;
}

.product-detail .product-form div.quantity {
  display: flex;
  align-items: center;
  border: 2px solid #e0e0e0;
  border-radius: 0.5rem;
  overflow: hidden;
  height: 3.25rem;
  flex-shrink: 0;
  background: #fff;
}

@media screen and (max-width: 768px) {
  .product-detail .product-form div.quantity {
    height: 2.875rem;
  }
}
.product-detail .product-form div.quantity input.qty {
  width: 3.25rem;
  height: 100%;
  padding: 0;
  border: none;
  border-left: 1px solid #e0e0e0;
  border-right: 1px solid #e0e0e0;
  border-radius: 0;
  text-align: center;
  font-size: 1.0625rem;
  font-weight: 600;
  font-family: "Noto Sans JP", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: #1f2937;
  background: #fff;
  box-shadow: none;
}

@media screen and (max-width: 768px) {
  .product-detail .product-form div.quantity input.qty {
    width: 2.25rem;
    font-size: 0.9375rem;
  }
}
.product-detail .product-form div.quantity input.qty:focus {
  outline: none;
  box-shadow: none;
}

.product-detail .product-form div.quantity input.qty::-webkit-outer-spin-button, .product-detail .product-form div.quantity input.qty::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.product-detail .product-form div.quantity input.qty[type=number] {
  -moz-appearance: textfield;
}

.product-detail .product-form div.quantity .quantity__btn,
.product-detail .product-form div.quantity .c-quantity__btn,
.product-detail .product-form div.quantity button[data-quantity-minus],
.product-detail .product-form div.quantity button[data-quantity-plus] {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 100%;
  flex-shrink: 0;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 1.125rem;
  color: #1f2937;
  transition: background 150ms ease-in-out;
}

@media screen and (max-width: 768px) {
  .product-detail .product-form div.quantity .quantity__btn,
  .product-detail .product-form div.quantity .c-quantity__btn,
  .product-detail .product-form div.quantity button[data-quantity-minus],
  .product-detail .product-form div.quantity button[data-quantity-plus] {
    width: 1.875rem;
    font-size: 0.875rem;
  }
}
.product-detail .product-form div.quantity .quantity__btn:hover,
.product-detail .product-form div.quantity .c-quantity__btn:hover,
.product-detail .product-form div.quantity button[data-quantity-minus]:hover,
.product-detail .product-form div.quantity button[data-quantity-plus]:hover {
  background: #f3f4f6;
}

.product-detail .product-form button.single_add_to_cart_button,
.product-detail .product-form .single_add_to_cart_button {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  height: 3.25rem;
  padding: 0 1.5rem;
  background: #0053b3;
  color: #fff;
  font-size: 1rem;
  font-weight: 700;
  font-family: "Noto Sans JP", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  border: none;
  border-radius: 0.5rem;
  cursor: pointer;
  transition: background 200ms ease-in-out, transform 150ms ease-in-out;
  text-decoration: none;
  white-space: nowrap;
  box-shadow: none;
}

@media screen and (max-width: 768px) {
  .product-detail .product-form button.single_add_to_cart_button,
  .product-detail .product-form .single_add_to_cart_button {
    height: 2.875rem;
    font-size: 0.9375rem;
    padding: 0 0.75rem;
  }
}
.product-detail .product-form button.single_add_to_cart_button:hover,
.product-detail .product-form .single_add_to_cart_button:hover {
  background: #1e40af;
  transform: translateY(-1px);
  color: #fff;
}

.product-detail .product-form button.single_add_to_cart_button:active,
.product-detail .product-form .single_add_to_cart_button:active {
  transform: translateY(0);
}

.product-detail .product-form button.single_add_to_cart_button.loading,
.product-detail .product-form .single_add_to_cart_button.loading {
  opacity: 0.7;
  pointer-events: none;
}

.product-detail .product-form button.single_add_to_cart_button.disabled, .product-detail .product-form button.single_add_to_cart_button:disabled,
.product-detail .product-form .single_add_to_cart_button.disabled,
.product-detail .product-form .single_add_to_cart_button:disabled {
  background: #e0e0e0;
  color: #6b7280;
  cursor: not-allowed;
  transform: none;
}

.product-detail .product-form button.single_add_to_cart_button::before,
.product-detail .product-form .single_add_to_cart_button::before {
  content: "";
  display: inline-block;
  width: 1.25rem;
  height: 1.25rem;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M7 18c-1.1 0-1.99.9-1.99 2S5.9 22 7 22s2-.9 2-2-.9-2-2-2zM1 2v2h2l3.6 7.59-1.35 2.45c-.16.28-.25.61-.25.96C5 16.1 6.1 17 7 17h11v-2H7.42c-.14 0-.25-.11-.25-.25l.03-.12.9-1.63H19c.75 0 1.41-.41 1.75-1.03l3.58-6.49A1 1 0 0023.46 4H5.21l-.94-2H1zm16 16c-1.1 0-1.99.9-1.99 2s.89 2 1.99 2 2-.9 2-2-.9-2-2-2z'/%3E%3C/svg%3E") no-repeat center/contain;
  flex-shrink: 0;
}

.product-detail .product-form .btn-favorite-detail {
  position: static;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3.25rem;
  height: 3.25rem;
  flex-shrink: 0;
  background: #fff;
  border: 2px solid #e0e0e0;
  border-radius: 0.5rem;
  cursor: pointer;
  color: #6b7280;
  transition: border-color 200ms ease-in-out, color 200ms ease-in-out, background 200ms ease-in-out;
}

@media screen and (max-width: 768px) {
  .product-detail .product-form .btn-favorite-detail {
    width: 2.875rem;
    height: 2.875rem;
  }
}
.product-detail .product-form .btn-favorite-detail svg {
  pointer-events: none;
}

.product-detail .product-form .btn-favorite-detail:hover {
  border-color: #e74c6b;
  color: #e74c6b;
  background: #fff0f3;
}

.product-detail .product-form .btn-favorite-detail.is-active {
  border-color: #e74c6b;
  color: #fff;
  background: #e74c6b;
}

.product-detail .product-form .btn-favorite-detail.is-active svg {
  fill: #fff;
  stroke: #e74c6b;
}

.product-quantity {
  display: flex;
  align-items: center;
  border: 1px solid #e0e0e0;
  border-radius: 0.375rem;
  overflow: hidden;
}

.product-quantity-btn {
  padding: 0.5rem 0.75rem;
  background: #f5f7fa;
  border: none;
  color: #1a1a2e;
  font-size: 1.125rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

.product-quantity-btn:hover {
  background: #e0e0e0;
}

.product-quantity-input {
  width: 3.75rem;
  padding: 0.5rem 0.75rem;
  border: none;
  text-align: center;
  font-size: 1rem;
  font-weight: 600;
}

.product-quantity-input:focus {
  outline: none;
}

.product-quantity-input::-webkit-outer-spin-button, .product-quantity-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.product-quantity-input[type=number] {
  -moz-appearance: textfield;
}

.btn-lg {
  flex: 1;
  padding: 0.875rem 1.5rem;
  font-size: 1rem;
}

@media screen and (max-width: 768px) {
  .btn-lg {
    width: 100%;
  }
}
.product-actions {
  display: flex;
  gap: 0.75rem;
}

.product-action-btn {
  padding: 0.75rem;
  background: #f5f7fa;
  border: 1px solid #e0e0e0;
  border-radius: 0.375rem;
  font-size: 1.25rem;
  cursor: pointer;
  transition: all 0.2s ease;
}

.product-action-btn:hover {
  background: #e0e0e0;
  border-color: #0066cc;
}

.product-benefits {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 1rem;
  background: #f5f7fa;
  border-radius: 0.5rem;
}

@media screen and (min-width: 769px) {
  .product-benefits {
    flex-direction: row;
    justify-content: space-between;
  }
}
.product-benefit {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

@media screen and (min-width: 769px) {
  .product-benefit {
    flex: 0 0 48%;
  }
}
.product-benefit-icon {
  font-size: 1.5rem;
  flex-shrink: 0;
  color: #0053b3;
}

.product-benefit-text {
  flex: 1;
}

.product-benefit-title {
  font-size: 1.25rem;
  font-weight: 600;
}

.product-benefit-desc {
  font-size: 1rem;
  color: #666666;
}

.product-tabs-section {
  padding: 2.5rem 0;
  background: #ffffff;
  border-top: 1px solid #e0e0e0;
}

.product-tabs {
  display: flex;
  gap: 0rem;
  border-bottom: 2px solid #e0e0e0;
  margin-bottom: 2rem;
}

.product-tab-btn {
  padding: 1rem 1.5rem;
  background: transparent;
  border: none;
  border-bottom: 3px solid transparent;
  color: #666666;
  font-size: 1.25rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  border-radius: 0;
  flex: 0 0 33.333333%;
}

.product-tab-btn:hover {
  color: #0066cc;
}

.product-tab-btn:focus {
  outline: none;
}

.product-tab-btn--active {
  color: #0066cc;
  border-bottom-color: #0066cc;
}

.product-tab-content {
  display: none;
}

.product-tab-content--active {
  display: block;
}

.product-specs {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2.5rem;
  margin-bottom: 2rem;
}

@media screen and (max-width: 900px) {
  .product-specs {
    grid-template-columns: 1fr;
    gap: 0;
  }
}
.product-spec-row {
  display: flex;
  justify-content: space-between;
  gap: 0.875rem;
  border-bottom: 1px solid #e0e0e0;
  padding: 0.625rem 0;
  font-size: 1.25rem;
}

@media screen and (max-width: 768px) {
  .product-spec-row {
    font-size: 1.125rem;
    padding: 0.9375rem 0;
  }
}
.product-spec-label {
  font-weight: 600;
  color: #1a1a2e;
}

.product-spec-value {
  color: #666666;
}

.product-shipping-info-del-type {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 0.9375rem;
  background-color: #edf2f8;
  border-radius: 0.5rem;
  margin-bottom: 0.9375rem;
}

.product-shipping-info-del-type--frozen {
  background-color: #cffafe;
  border-left: 4px solid #0e7490;
}

.product-shipping-info-del-type--chilled {
  background-color: #dbeafe;
  border-left: 4px solid #1d4ed8;
}

.product-shipping-info-del-type--normal {
  background-color: #fef3c7;
  border-left: 4px solid #b45309;
}

.product-shipping-info-del-type .product-shipping-info-del-type-title {
  margin: 0;
  font-size: 1.25rem;
  display: flex;
  align-items: center;
  gap: 0.375rem;
}

.product-shipping-info-del-type .product-shipping-info-del-type-title svg {
  display: block;
  flex-shrink: 0;
  width: 1.25rem;
  height: 1.25rem;
}

.product-shipping-info-del-type .product-shipping-info-del-type-desc {
  margin: 0;
  font-size: 1.25rem;
}

.product-shipping-info-box {
  border: 1px solid #e0e0e0;
  border-radius: 0.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 0.9375rem;
}

.product-shipping-info-box:not(:last-of-type) {
  margin-bottom: 0.9375rem;
}

.product-shipping-info-box .product-shipping-info-box-ttl {
  margin: 0;
}

.product-shipping-info-box .product-shipping-info-box-desc {
  margin-bottom: 0;
}

.product-shipping-info-box .product-shipping-info-box-desc a {
  color: #0053b3;
  text-decoration: underline;
}

.product-full-description {
  font-size: 1.25rem;
  line-height: 1.8;
  margin-top: 2.5rem;
  margin-bottom: 2.1875rem;
}

.product-full-description p {
  margin: 0 0 1rem 0;
}

.product-full-description p:last-child {
  margin-bottom: 0;
}

.product-full-description h2,
.product-full-description h3 {
  margin: 1.5rem 0 0.75rem 0;
  color: #1a1a2e;
  font-weight: 600;
}

.product-full-description ul,
.product-full-description ol {
  margin: 0 0 1rem 1.5rem;
  padding: 0;
}

.product-full-description li {
  margin-bottom: 0.5rem;
}

.product-shipping-info h3 {
  margin: 1.5rem 0 0.75rem 0;
  font-size: 1.125rem;
  font-weight: 600;
  color: #1a1a2e;
}

.product-shipping-info h3:first-child {
  margin-top: 0;
}

.product-shipping-info p {
  margin: 0 0 1rem 0;
  font-size: 1rem;
  line-height: 1.6;
  color: #666666;
}

.p-product-reviews__list {
  border-top: 1px solid #e5e7eb;
}

.p-product-reviews__item {
  padding: 1.25rem 0;
  border-bottom: 1px solid #e5e7eb;
}

.p-product-reviews__item--hidden {
  display: none;
}

.p-product-reviews__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.625rem;
}

.p-product-reviews__meta-left {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  flex-wrap: wrap;
}

.p-product-reviews__name {
  font-size: 0.9375rem;
  font-weight: 600;
  color: #1f2937;
}

.p-product-reviews__stars {
  display: flex;
  gap: 0.0625rem;
  font-size: 1rem;
}

.p-product-reviews__star {
  color: #d1d5db;
}

.p-product-reviews__star--filled {
  color: #f59e0b;
}

.p-product-reviews__date {
  font-size: 0.8125rem;
  color: #6b7280;
  white-space: nowrap;
  flex-shrink: 0;
}

.p-product-reviews__text {
  font-size: 0.875rem;
  line-height: 1.75;
  color: #1f2937;
  margin: 0;
}

.p-product-reviews__more-btn {
  display: block;
  width: 100%;
  margin-top: 1rem;
  padding: 0.875rem 1.5rem;
  background: #fff;
  border: 1px solid #d1d5db;
  border-radius: 0.5rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: #1f2937;
  text-align: center;
  cursor: pointer;
  transition: border-color 150ms ease-in-out, background 150ms ease-in-out;
}

.p-product-reviews__more-btn:hover {
  border-color: #0053b3;
  color: #0053b3;
  background: #f8faff;
}

.p-product-reviews__empty {
  padding: 1.5rem 0;
  color: #6b7280;
  font-size: 0.875rem;
}

.p-product-reviews__form-wrap {
  margin-top: 2.5rem;
  padding-top: 2rem;
  border-top: 2px solid #e5e7eb;
}

.p-product-reviews__form-title {
  font-size: 1.125rem;
  font-weight: 700;
  color: #1f2937;
  margin: 0 0 1.5rem;
}

.p-product-reviews__form-wrap #commentform {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.p-product-reviews__form-wrap #commentform label {
  display: block;
  font-size: 0.875rem;
  font-weight: 600;
  margin-bottom: 0.375rem;
  color: #1f2937;
}

.p-product-reviews__form-wrap #commentform label .required {
  color: #ef4444;
}

.p-product-reviews__form-wrap #commentform input[type=text],
.p-product-reviews__form-wrap #commentform input[type=email] {
  width: 100%;
  padding: 0.625rem 0.875rem;
  border: 1px solid #d1d5db;
  border-radius: 0.5rem;
  font-size: 0.875rem;
  color: #1f2937;
  background: #fff;
  transition: border-color 150ms ease-in-out;
  box-sizing: border-box;
}

.p-product-reviews__form-wrap #commentform input[type=text]:focus,
.p-product-reviews__form-wrap #commentform input[type=email]:focus {
  outline: none;
  border-color: #0053b3;
  box-shadow: 0 0 0 3px rgba(0, 83, 179, 0.08);
}

.p-product-reviews__form-wrap #commentform textarea#comment {
  width: 100%;
  padding: 0.75rem 0.875rem;
  border: 1px solid #d1d5db;
  border-radius: 0.5rem;
  font-size: 0.875rem;
  color: #1f2937;
  background: #fff;
  line-height: 1.7;
  resize: vertical;
  min-height: 8.125rem;
  box-sizing: border-box;
  font-family: inherit;
  transition: border-color 150ms ease-in-out;
}

.p-product-reviews__form-wrap #commentform textarea#comment:focus {
  outline: none;
  border-color: #0053b3;
  box-shadow: 0 0 0 3px rgba(0, 83, 179, 0.08);
}

.p-product-reviews__form-wrap #commentform p {
  margin: 0;
}

.p-product-reviews__form-wrap .comment-form-rating label {
  display: block;
  font-size: 0.875rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
  color: #1f2937;
}

.p-product-reviews__form-wrap .comment-form-rating .stars {
  display: flex;
  gap: 0.125rem;
  font-size: 1.75rem;
  line-height: 1;
  margin-bottom: 0.25rem;
}

.p-product-reviews__form-wrap .comment-form-rating .stars span {
  display: flex;
  gap: 0.125rem;
}

.p-product-reviews__form-wrap .comment-form-rating .stars a {
  color: #d1d5db;
  text-decoration: none;
  transition: color 150ms ease-in-out;
  font-size: 1.75rem;
}

.p-product-reviews__form-wrap .comment-form-rating .stars a::before {
  content: "★";
}

.p-product-reviews__form-wrap .comment-form-rating .stars a:hover, .p-product-reviews__form-wrap .comment-form-rating .stars a.active {
  color: #f59e0b;
}

.p-product-reviews__form-wrap .comment-form-rating .stars.selected a.active ~ a {
  color: #d1d5db;
}

.p-product-reviews__form-wrap .comment-form-rating .stars.selected a {
  color: #f59e0b;
}

.p-product-reviews__form-wrap .comment-form-rating select#rating {
  display: none;
}

.p-product-reviews__field {
  margin-bottom: 0;
}

.p-product-reviews__field label {
  display: block;
  font-size: 0.875rem;
  font-weight: 600;
  margin-bottom: 0.375rem;
  color: #1f2937;
}

.p-product-reviews__field label .required {
  color: #ef4444;
}

.p-product-reviews__field-note {
  display: block;
  margin-top: 0.25rem;
  font-size: 0.75rem;
  color: #6b7280;
}

.p-product-reviews__must-login, .p-product-reviews__verification-note {
  margin-top: 1rem;
  font-size: 0.8125rem;
  color: #4b5563;
}

.p-product-reviews__must-login a, .p-product-reviews__verification-note a {
  color: #0053b3;
  text-decoration: underline;
}

#respond #commentform input#submit {
  display: inline-block;
  padding: 0.75rem 2rem;
  background: #0053b3;
  color: #fff;
  border: none;
  border-radius: 0.5rem;
  font-size: 0.9375rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 150ms ease-in-out, color 150ms ease-in-out;
  font-family: inherit;
  appearance: none;
  width: auto;
}

#respond #commentform input#submit:hover {
  background: #00408a;
  color: #fff;
}

.product-related-section {
  padding: 3.75rem 0;
  background: #f5f7fa;
}

.product-related-title {
  margin: 0 0 2rem 0;
  font-size: 2rem;
  font-weight: 700;
  color: #1a1a2e;
  text-align: center;
}

.product-related-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}

@media screen and (max-width: 900px) {
  .product-related-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
  }
}
@media screen and (max-width: 768px) {
  .product-related-grid {
    grid-template-columns: 1fr;
  }
}
.product-related-card {
  display: flex;
  flex-direction: column;
  background: #ffffff;
  border: 1px solid #e0e0e0;
  border-radius: 0.5rem;
  overflow: hidden;
  text-decoration: none;
  color: #1a1a2e;
  transition: all 0.3s ease;
}

.product-related-card:hover {
  border-color: #0066cc;
  box-shadow: 0 0.5rem 1rem rgba(0, 102, 204, 0.1);
  transform: translateY(-0.25rem);
}

.product-related-card:hover .product-related-image img {
  transform: scale(1.05);
}

.product-related-image {
  position: relative;
  width: 100%;
  padding-bottom: 100%;
  overflow: hidden;
  background: #f5f7fa;
}

.product-related-image img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.product-related-image-placeholder {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f5f7fa;
  color: #999999;
  font-size: 0.875rem;
}

.product-related-temp {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  background: #0066cc;
  color: #ffffff;
  padding: 0.375rem 0.75rem;
  border-radius: 1.25rem;
  font-size: 0.75rem;
  font-weight: 600;
}

.product-related-content {
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  flex: 1;
}

.product-related-price {
  display: flex;
  align-items: baseline;
  gap: 0.375rem;
  margin-top: auto;
}

.product-related-price-value {
  font-size: 1.125rem;
  font-weight: 700;
  color: #0066cc;
}

@media screen and (max-width: 768px) {
  .product-title {
    font-size: 1.25rem;
  }
  .product-price-value {
    font-size: 2rem;
  }
  .product-tabs {
    gap: 0rem;
    overflow-x: auto;
    margin-bottom: 1.5rem;
  }
  .product-tabs::-webkit-scrollbar {
    height: 0.25rem;
  }
  .product-tabs::-webkit-scrollbar-track {
    background: #f5f7fa;
  }
  .product-tabs::-webkit-scrollbar-thumb {
    background: #0066cc;
  }
  .product-tab-btn {
    padding: 0.75rem 1rem;
    font-size: 120%;
    white-space: nowrap;
  }
  .product-related-grid {
    grid-template-columns: 1fr;
  }
}
.add-to-cart-notice {
  display: none;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.75rem;
  padding: 0.625rem 1rem;
  background: #f0fdf4;
  border: 1px solid #bbf7d0;
  border-radius: 0.5rem;
  font-size: 0.875rem;
  color: #166534;
}

.add-to-cart-notice.is-visible {
  display: flex;
}

.add-to-cart-notice__check {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  color: #10b981;
}

.add-to-cart-notice__text {
  font-weight: 600;
}

.add-to-cart-notice__link {
  margin-left: auto;
  font-weight: 600;
  color: #0053b3;
  text-decoration: underline;
  white-space: nowrap;
}

.add-to-cart-notice__link:hover {
  color: #1e40af;
}

.woocommerce-message,
.woocommerce-error,
.woocommerce-info {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.875rem 1rem 0.875rem 2.75rem;
  border-radius: 0.375rem;
  font-size: 0.875rem;
  margin-bottom: 1rem;
  list-style: none;
  border: none;
}

.woocommerce-message a.button,
.woocommerce-error a.button,
.woocommerce-info a.button {
  margin-left: auto;
  padding: 0.375rem 0.875rem;
  border-radius: 0.25rem;
  font-size: 0.75rem;
  font-weight: 500;
  white-space: nowrap;
}

.woocommerce-message::before,
.woocommerce-error::before,
.woocommerce-info::before {
  font-family: inherit !important;
  content: "✓" !important;
  position: absolute;
  left: 0.875rem;
  top: 50%;
  transform: translateY(-50%);
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.6875rem;
  font-weight: 700;
  background: #10b981;
  color: #fff;
}

.woocommerce-message {
  background: rgba(16, 185, 129, 0.08);
  color: #0a7350;
}

.woocommerce-message a.button {
  background: #10b981;
  color: #fff;
  border: none;
}

.woocommerce-error {
  background: rgba(239, 68, 68, 0.08);
  color: #eb1515;
}

.woocommerce-error a.button {
  background: #ef4444;
  color: #fff;
  border: none;
}

.woocommerce-error::before {
  content: "✕" !important;
  background: #ef4444;
}

.woocommerce-error > li {
  list-style: none;
}

.woocommerce-info {
  background: rgba(0, 83, 179, 0.08);
  color: #003b80;
}

.woocommerce-info a.button {
  background: #0053b3;
  color: #fff;
  border: none;
}

.woocommerce-info::before {
  content: "i" !important;
  background: #0053b3;
}

.woocommerce-notices-wrapper {
  margin-bottom: 1.5rem;
}

.woocommerce-notices-wrapper:empty {
  display: none;
}

.p-cart-notices {
  padding-top: 1.25rem;
}

.p-cart-notices .woocommerce-message,
.p-cart-notices .woocommerce-info,
.p-cart-notices .woocommerce-error {
  margin-bottom: 0;
}

.p-cart-notices:empty {
  display: none;
}

.p-woocomace-wrapper {
  padding: 3rem 2rem;
}

@media screen and (min-width: 769px) {
  .p-woocomace-wrapper {
    padding: 4rem 5rem 4rem;
  }
}
@media screen and (max-width: 768px) {
  .p-woocomace-container {
    padding-inline: 0;
  }
}
.woocommerce-cart-col {
  display: flex;
  justify-content: space-between;
  gap: 3.4375rem;
  flex-flow: column;
}

@media screen and (min-width: 769px) {
  .woocommerce-cart-col {
    flex-flow: row;
  }
}
.woocommerce-cart-col .woocommerce-cart-form {
  flex: 1 1 auto;
}

.woocommerce-cart-col .cart-collaterals {
  flex: 0 0 28.125rem;
}

.woocommerce table.shop_table {
  border-radius: 0;
}

.woocommerce table.shop_table th,
.woocommerce table.shop_table td {
  border: none;
  border-radius: 0;
}

.woocommerce table.shop_table .product-price {
  border-top: none;
}

.woocommerce table.shop_table .product-quantity {
  border-top: none;
  border-left: none;
  border-right: none;
}

.woocommerce .cart-collaterals .cart_totals {
  float: none;
  width: 100%;
}

.woocommerce .cart-collaterals .cart_totals h2 {
  font-size: 1.75rem;
  color: #0053b3;
}

@media screen and (max-width: 768px) {
  .woocommerce table.my_account_orders {
    width: 38.75rem;
  }
}
.woocommerce a.remove {
  color: #666;
}

.woocommerce a.remove:hover {
  color: red !important;
}

/*  */
#add_payment_method table.cart .product-thumbnail,
.woocommerce-cart table.cart .product-thumbnail,
.woocommerce-checkout table.cart .product-thumbnail {
  width: 10.9375rem;
}

#add_payment_method table.cart img,
.woocommerce-cart table.cart img,
.woocommerce-checkout table.cart img {
  width: 100%;
}

/* クーポンコードボタン */
#add_payment_method table.cart td.actions .coupon .input-text,
.woocommerce-cart table.cart td.actions .coupon .input-text,
.woocommerce-checkout table.cart td.actions .coupon .input-text {
  width: 15rem;
}

.cart-block-item {
  display: flex;
  align-items: center;
  flex-flow: column;
  flex-wrap: wrap;
  gap: 1.5rem;
  padding: 1.5rem;
  background: #fff;
  border-radius: 0.75rem;
  border: 1px solid #f0f0f0;
  margin-bottom: 1rem;
  transition: box-shadow 0.2s ease;
}

@media screen and (min-width: 769px) {
  .cart-block-item {
    flex-wrap: nowrap;
    flex-flow: row;
    gap: 1.5rem;
  }
}
.cart-block-item:hover {
  box-shadow: 0 0.25rem 1rem rgba(0, 0, 0, 0.06);
}

.cart-block-item__thumb {
  flex-shrink: 0;
  width: 9.0625rem;
  aspect-ratio: 1/1;
  border-radius: 0.5rem;
  overflow: hidden;
  background: #f5f5f5;
}

@media screen and (min-width: 769px) {
  .cart-block-item__thumb {
    width: 10.9375rem;
  }
}
.cart-block-item__thumb a {
  display: block;
  width: 100%;
  height: 100%;
}

.cart-block-item__thumb a:hover {
  opacity: 0.8;
}

.cart-block-item__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.cart-block-item__info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}

.cart-block-item__name {
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 1.4;
}

.cart-block-item__name a {
  color: inherit;
  text-decoration: none;
}

.cart-block-item__name a:hover {
  text-decoration: underline;
}

.cart-block-item__temp .product-label-temp {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.1875rem 0.625rem;
  border-radius: 1.25rem;
  background: #e8f4fd;
  color: #2196f3;
  font-size: 0.75rem;
  font-weight: 500;
}

.cart-block-item__actions {
  margin-top: 1.5625rem;
  display: flex;
  flex-flow: column;
  gap: 0.9375rem;
}

@media screen and (min-width: 769px) {
  .cart-block-item__actions {
    gap: 0.625rem;
  }
}
.cart-block-item__qty-col {
  display: flex;
  align-items: center;
  gap: 0.9375rem;
}

.cart-block-item__qty .quantity {
  display: flex;
  align-items: center;
  gap: 0;
  width: fit-content;
  border: 1px solid #e0e0e0;
  border-radius: 0.5rem;
  overflow: hidden;
  background: #fafafa;
}

.cart-block-item__qty .quantity input[type=number] {
  width: 2.75rem;
  height: 2.25rem;
  border: none;
  background: transparent;
  text-align: center;
  font-size: 0.875rem;
  font-weight: 600;
  color: #1a1a1a;
  -moz-appearance: textfield;
  appearance: textfield;
}

.cart-block-item__qty .quantity input[type=number]::-webkit-inner-spin-button, .cart-block-item__qty .quantity input[type=number]::-webkit-outer-spin-button {
  display: none;
}

.cart-block-item__qty .quantity input[type=number]:focus {
  outline: none;
}

.cart-block-item__qty .quantity .qty-btn,
.cart-block-item__qty .quantity button {
  width: 2.25rem;
  height: 2.25rem;
  border: none;
  background: transparent;
  font-size: 1.125rem;
  color: #555;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s ease;
}

.cart-block-item__qty .quantity .qty-btn:hover,
.cart-block-item__qty .quantity button:hover {
  background: #f0f0f0;
  color: #1a1a1a;
}

.cart-block-item__coupon {
  display: flex;
  gap: 0.9375rem;
}

.cart-block-item__coupon .input-text {
  width: 11.75rem;
}

@media screen and (min-width: 769px) {
  .cart-block-item__coupon .input-text {
    width: 15.625rem;
  }
}
.cart-block-item__right {
  flex-shrink: 0;
  display: flex;
  flex-direction: row;
  align-items: center;
  width: 100%;
  justify-content: space-between;
  gap: 0.75rem;
}

@media screen and (min-width: 769px) {
  .cart-block-item__right {
    flex-direction: column;
    align-items: flex-end;
    width: auto;
    justify-content: flex-start;
  }
}
.cart-block-item__remove a.remove {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 0.5rem;
  background: #f5f5f5;
  color: #999;
  font-size: 1rem;
  text-decoration: none;
  transition: background 0.15s ease, color 0.15s ease;
}

.cart-block-item__remove a.remove:hover {
  background: #fee;
  color: #e53935;
}

.cart-block-item__subtotal {
  font-size: 2rem;
  font-weight: 700;
  color: #0053b3;
}

.cart-block-item__subtotal .woocommerce-Price-amount {
  color: inherit;
}

.cart-totals {
  background: #fff;
  border-radius: 0.75rem;
  border: 1px solid #f0f0f0;
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.cart-totals__title {
  font-size: 1.125rem;
  font-weight: 700;
  color: #1a1a1a;
  margin: 0;
  padding-bottom: 1rem;
  border-bottom: 1px solid #f0f0f0;
}

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

.cart-totals__row--total {
  font-weight: 700;
}

.cart-totals__label {
  font-size: 0.875rem;
  color: #555;
}

.cart-totals__row--total .cart-totals__label {
  font-size: 1rem;
  color: #1a1a1a;
}

.cart-totals__value {
  font-size: 0.875rem;
  color: #1a1a1a;
}

.cart-totals__value--shipping {
  color: #4caf50;
  font-weight: 600;
}

.cart-totals__value--total {
  font-size: 1.5rem;
  font-weight: 700;
  color: #2196f3;
}

.cart-totals__value--total .woocommerce-Price-amount {
  color: #0053b3;
}

.cart-totals__note {
  font-size: 0.9375rem;
  color: #666;
  margin: 0;
}

.cart-totals__checkout-btn {
  display: block;
  width: 100%;
  padding: 1rem 1.5rem;
  background: #0053b3;
  color: #fff;
  text-align: center;
  font-size: 1rem;
  font-weight: 600;
  border-radius: 0.5rem;
  text-decoration: none;
  transition: background 0.2s ease;
}

.cart-totals__checkout-btn:hover {
  background: #1648c0;
  color: #fff;
}

.cart-totals__continue-link {
  display: block;
  text-align: center;
  font-size: 1.125rem;
  color: #0053b3;
  text-decoration: none;
}

.cart-totals__continue-link:hover {
  text-decoration: underline;
}

.cart-totals__security {
  padding-top: 1rem;
  border-top: 1px solid #f0f0f0;
  text-align: center;
}

.cart-totals__security p {
  font-size: 1.125rem;
  color: #999;
  margin: 0 0 0.5rem;
}

.cart-totals__security-badges {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
}

.cart-totals__security-badges span {
  font-size: 0.875rem;
  color: #555;
  font-weight: 500;
}

.p-checkout-trust {
  padding: 2.5rem 0;
  background: linear-gradient(135deg, #0066cc 0%, #004499 100%);
  text-align: center;
}

.p-checkout-trust__title {
  margin: 0;
  font-size: 1.5rem;
  font-weight: 700;
  color: #fff;
}

@media screen and (min-width: 901px) {
  .p-checkout-trust__title {
    font-size: 2rem;
  }
}
.p-checkout-section {
  padding: 2.5rem 0 3.75rem;
}

@media screen and (min-width: 901px) {
  .p-checkout-section {
    padding: 3.75rem 0 5rem;
  }
}
.woocommerce-NoticeGroup-checkout {
  margin-bottom: 1.5rem;
}

.woocommerce-NoticeGroup-checkout .woocommerce-error {
  display: block;
  list-style: none;
  margin: 0;
  padding: 1rem 1.25rem 1rem 3rem;
  background: #fff5f5;
  border: 1px solid #fca5a5;
  border-left: 0.25rem solid #ef4444;
  border-radius: 0.5rem;
}

.woocommerce-NoticeGroup-checkout .woocommerce-error::before {
  content: "✕" !important;
  background: #ef4444;
  position: absolute;
  left: 0.875rem;
  top: 1.125rem;
  transform: none;
}

.woocommerce-NoticeGroup-checkout .woocommerce-error li {
  display: block;
  font-size: 0.875rem;
  color: #b91c1c;
  padding: 0.1875rem 0;
}

.woocommerce-NoticeGroup-checkout .woocommerce-error li a {
  color: #b91c1c;
  text-decoration: underline;
  font-weight: 600;
}

.woocommerce-NoticeGroup-checkout .woocommerce-error li::before {
  content: "・";
  margin-right: 0.25rem;
}

.woocommerce-invalid .p-checkout__label {
  color: #ef4444;
}

.p-checkout-layout {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  align-items: flex-start;
}

@media screen and (min-width: 901px) {
  .p-checkout-layout {
    flex-direction: row;
    align-items: flex-start;
  }
}
.p-checkout-layout__main {
  flex: 1 1 0;
  min-width: 0;
}

.p-checkout-layout__side {
  width: 100%;
}

@media screen and (min-width: 901px) {
  .p-checkout-layout__side {
    flex: 0 0 23.75rem;
    position: sticky;
    top: 1.5rem;
    max-height: calc(100vh - 3rem);
    display: flex;
    flex-direction: column;
  }
}
.p-checkout {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.p-checkout__section {
  background: #fff;
  border-radius: 0.75rem;
  border: 1px solid #f3f4f6;
  overflow: hidden;
}

.p-checkout__section-title {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  font-size: 1.5rem;
  font-weight: 700;
  color: #1f2937;
  padding: 2rem 2rem 0;
  margin: 0 0 1.5rem;
}

.p-checkout__section-icon {
  color: #0053b3;
  flex-shrink: 0;
}

.p-checkout__form-body {
  padding: 0 2rem 2rem;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.p-checkout__row {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

@media screen and (min-width: 769px) {
  .p-checkout__row--col2 {
    flex-direction: row;
    gap: 1rem;
  }
  .p-checkout__row--col2 .p-checkout__field {
    flex: 1;
  }
}
.p-checkout__field {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}

.p-checkout__label {
  font-size: 1rem;
  font-weight: 600;
  color: #1f2937;
  min-height: unset;
  display: block;
  align-items: unset;
}

.p-checkout__required {
  color: #ef4444;
  margin-left: 0.125rem;
}

.p-checkout__input {
  width: 100%;
  height: 3.25rem;
  padding: 0 1rem;
  border: 1px solid #e0e0e0;
  border-radius: 0.5rem;
  font-size: 1rem;
  font-family: "Noto Sans JP", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: #1f2937;
  background: #fff;
  transition: border-color 150ms ease-in-out, box-shadow 150ms ease-in-out;
  appearance: none;
}

.p-checkout__input::placeholder {
  color: #9ca3af;
}

.p-checkout__input:focus {
  outline: none;
  border-color: #0053b3;
  box-shadow: 0 0 0 3px rgba(0, 83, 179, 0.12);
}

.woocommerce-invalid .p-checkout__input {
  border-color: #ef4444;
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1);
}

.woocommerce-validated .p-checkout__input {
  border-color: #10b981;
}

.p-checkout__select-wrapper {
  position: relative;
}

.p-checkout__select {
  cursor: pointer;
  padding-right: 2.5rem;
}

.p-checkout__select-arrow {
  position: absolute;
  right: 0.875rem;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  color: #6b7280;
}

.p-checkout__postcode-row {
  display: flex;
  gap: 0.75rem;
  align-items: center;
}

.p-checkout__input--postcode {
  flex: 1;
}

.p-checkout__postcode-btn {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  height: 3.25rem;
  padding: 0 1.25rem;
  background: #fff;
  border: 1px solid #e0e0e0;
  border-radius: 0.5rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: #1f2937;
  cursor: pointer;
  white-space: nowrap;
  transition: border-color 150ms ease-in-out, background 150ms ease-in-out;
}

.p-checkout__postcode-btn:hover {
  border-color: #0053b3;
  color: #0053b3;
  background: rgba(0, 83, 179, 0.04);
}

.p-checkout__postcode-hint {
  font-size: 0.875rem;
  color: #6b7280;
  margin: 0;
  line-height: 1.5;
}

.p-checkout__ship-to-different {
  padding: 1.25rem 1.5rem 1.5rem;
  border-top: 1px solid #f3f4f6;
}

.p-checkout__checkbox-label {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  cursor: pointer;
}

.p-checkout__checkbox {
  width: 1.125rem;
  height: 1.125rem;
  accent-color: #0053b3;
  cursor: pointer;
  flex-shrink: 0;
}

.p-checkout__checkbox-text {
  font-size: 1rem;
  color: #1f2937;
}

.p-checkout__section--shipping {
  border: none;
  border-radius: 0;
  background: transparent;
}

.p-checkout__back-link {
  margin-top: 0.25rem;
}

.p-checkout__back-anchor {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 1rem;
  color: #0053b3;
  text-decoration: none;
  transition: opacity 150ms ease-in-out;
}

.p-checkout__back-anchor:hover {
  opacity: 0.75;
  text-decoration: underline;
}

.woocommerce-checkout #order_review {
  background: #fff;
  border: 1px solid #f3f4f6;
  border-radius: 0.75rem;
  overflow: hidden;
}

.woocommerce-checkout #order_review::before {
  content: "お支払い方法";
  display: block;
  font-size: 1.5rem;
  font-weight: 700;
  color: #1f2937;
  padding: 1.5rem 1.5rem 0;
  margin-bottom: 1.25rem;
}

.woocommerce-checkout #payment {
  background: none;
  border: none;
  border-radius: 0;
  padding: 0 1.5rem 1.5rem;
}

.woocommerce-checkout #payment .wc_payment_methods {
  list-style: none;
  margin: 0;
  padding: 0;
}

.woocommerce-checkout #payment .wc_payment_methods .wc_payment_method label {
  display: inline;
}

.woocommerce-checkout #payment .wc_payment_methods .payment-method-icons {
  display: flex;
  margin-top: 0.375rem;
  padding-left: 1.5rem;
}

.woocommerce-checkout #payment .form-row.place-order {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}

.p-checkout__order-summary {
  background: #fff;
  border-radius: 0.75rem;
  border: 1px solid #f3f4f6;
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

.p-checkout__order-summary-title {
  font-size: 1.5rem;
  font-weight: 700;
  color: #1f2937;
  margin: 0 0 1rem;
  padding: 0;
  flex-shrink: 0;
}

.p-checkout__order-items {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding-right: 0.25rem;
  scrollbar-width: thin;
  scrollbar-width: thin;
  scrollbar-color: #e0e0e0 #f9fafb;
}

.p-checkout__order-items::-webkit-scrollbar {
  width: 4px;
}

.p-checkout__order-items::-webkit-scrollbar-track {
  background: #f9fafb;
  border-radius: 2px;
}

.p-checkout__order-items::-webkit-scrollbar-thumb {
  background: #e0e0e0;
  border-radius: 2px;
}

.p-checkout__order-footer {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding-top: 0.75rem;
}

.p-checkout__order-item {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid #f3f4f6;
}

.p-checkout__order-item:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.p-checkout__order-item-main {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 0.25rem 0.625rem;
  align-items: baseline;
}

.p-checkout__order-item-name {
  font-size: 0.875rem;
  font-weight: 600;
  color: #1f2937;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-width: 0;
}

.p-checkout__order-item-qty {
  font-size: 0.875rem;
  color: #6b7280;
  white-space: nowrap;
}

.p-checkout__order-item-price {
  font-size: 0.875rem;
  font-weight: 600;
  color: #1f2937;
  white-space: nowrap;
}

.p-checkout__item-ship {
  margin-bottom: 0;
  padding: 0;
  border: none;
  border-radius: 0;
  background: none;
}

.p-checkout__item-ship[open] .p-checkout__item-ship-icon {
  transform: rotate(180deg);
}

.p-checkout__item-ship-toggle {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  cursor: pointer;
  list-style: none;
  user-select: none;
  padding: 0;
}

.p-checkout__item-ship-toggle::-webkit-details-marker {
  display: none;
}

.p-checkout__item-ship-toggle::marker {
  display: none;
}

.p-checkout__item-ship-label {
  font-size: 0.75rem;
  color: #0053b3;
  font-weight: 500;
  flex-shrink: 0;
}

.p-checkout__item-ship-name {
  font-size: 0.75rem;
  color: #1f2937;
  font-weight: 500;
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.p-checkout__item-ship-icon {
  color: #0053b3;
  flex-shrink: 0;
  transition: transform 0.2s ease;
}

.p-checkout__item-ship-body {
  padding: 0.375rem 0 0.125rem;
}

.wc-item-meta-label {
  display: none;
}

.p-checkout__item-ship-addr {
  display: block;
  font-size: 0.75rem;
  color: #6b7280;
  line-height: 1.6;
  white-space: pre-line;
}

.p-checkout__item-ship-addr--default {
  font-style: italic;
}

.p-checkout__order-divider {
  border: none;
  border-top: 1px solid #f3f4f6;
  margin: 0.25rem 0;
}

.p-checkout__order-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

.p-checkout__order-row-label {
  font-size: 1rem;
  color: #4b5563;
}

.p-checkout__order-row-value {
  font-size: 1rem;
  color: #1f2937;
}

.p-checkout__order-row-value--discount {
  color: #10b981;
  font-weight: 600;
}

.p-checkout__order-shipping-free {
  color: #10b981;
  font-weight: 600;
  font-size: 1rem;
}

.p-checkout__order-row--total {
  margin-top: 0.25rem;
  padding-top: 1rem;
  border-top: 1px solid #f3f4f6;
}

.p-checkout__order-total-label {
  font-size: 1.125rem;
  font-weight: 700;
  color: #1f2937;
}

.p-checkout__order-total-value {
  font-size: 1.75rem;
  font-weight: 700;
  color: #0053b3;
}

.p-checkout__order-total-value .woocommerce-Price-amount {
  color: inherit;
}

.p-checkout__order-shipping-note {
  font-size: 0.875rem;
  color: #6b7280;
  margin: -0.5rem 0 0;
}

.p-checkout__submit-btn {
  display: block;
  width: 100%;
  padding: 1.125rem 1.5rem;
  background: #f97316;
  color: #fff;
  border: none;
  border-radius: 0.5rem;
  font-size: 1.25rem;
  font-weight: 700;
  font-family: "Noto Sans JP", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  cursor: pointer;
  text-align: center;
  transition: background 200ms ease-in-out, opacity 150ms ease-in-out;
  margin-top: 1rem;
}

.p-checkout__submit-btn:hover {
  background: #ea580c;
}

.p-checkout__submit-btn:disabled, .p-checkout__submit-btn.loading {
  opacity: 0.7;
  cursor: not-allowed;
}

.p-checkout__terms-text {
  font-size: 0.875rem;
  color: #6b7280;
  text-align: center;
  line-height: 1.6;
  margin: 1rem 0 0;
}

.p-checkout__terms-text a {
  color: #0053b3;
  text-decoration: underline;
}

.p-checkout__terms-text a:hover {
  opacity: 0.8;
}

@media screen and (max-width: 768px) {
  .p-checkout__section-title {
    padding: 1.25rem 1rem 0;
    font-size: 1.25rem;
    margin-bottom: 1rem;
  }
  .p-checkout__form-body {
    padding: 0 1rem 1.25rem;
    gap: 1rem;
  }
  .p-checkout-layout {
    gap: 1.25rem;
  }
  .p-checkout {
    gap: 1rem;
  }
  .woocommerce-additional-fields {
    padding: 1rem;
  }
  .p-checkout__order-summary {
    padding: 1rem;
  }
  .fme-btn-wrapper {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
  }
  .fme-btn-wrapper .fme-my-btn {
    width: 100%;
    text-align: center;
    padding: 0.75rem 1rem;
    font-size: 0.875rem;
  }
  .p-checkout-trust {
    padding: 1rem 0;
  }
  .p-checkout-trust__title {
    font-size: 1.25rem;
  }
  .p-checkout__submit-btn {
    font-size: 1rem;
    padding: 1rem 1.25rem;
  }
}
.woocommerce-additional-fields {
  background: #fff;
  border: 1px solid #f3f4f6;
  border-radius: 0.75rem;
  padding: 1.5rem;
  margin-top: 1rem;
}

.woocommerce-additional-fields label {
  font-size: 0.875rem;
  font-weight: 600;
  color: #1f2937;
  display: block;
  margin-bottom: 0.375rem;
}

.woocommerce-additional-fields textarea {
  width: 100%;
  padding: 0.75rem 1rem;
  border: 1px solid #e0e0e0;
  border-radius: 0.5rem;
  font-size: 1rem;
  color: #1f2937;
  resize: vertical;
}

.woocommerce-additional-fields textarea:focus {
  outline: none;
  border-color: #0053b3;
  box-shadow: 0 0 0 3px rgba(0, 83, 179, 0.1);
}

.woocommerce-additional-fields .optional {
  font-weight: 400;
  color: #6b7280;
}

.woocommerce-additional-fields p.form-row {
  margin: 0;
}

.woocommerce-checkout .woocommerce-terms-and-conditions-wrapper {
  font-size: 0.875rem;
  color: #6b7280;
  text-align: center;
  line-height: 1.6;
  margin-top: 0.25rem;
}

.woocommerce-checkout .woocommerce-terms-and-conditions-wrapper a {
  color: #0053b3;
  text-decoration: underline;
}

.p-thankyou {
  max-width: 61.25rem;
  margin: 4rem auto;
  padding: 0;
  text-align: center;
}

@media screen and (min-width: 769px) {
  .p-thankyou {
    padding: 0 1.5rem;
  }
}
.p-thankyou__icon {
  display: flex;
  justify-content: center;
  margin-bottom: 1.5rem;
}

.p-thankyou__icon svg {
  display: block;
}

.p-thankyou__title {
  font-size: 2rem;
  font-weight: 700;
  color: #1f2937;
  margin: 0 0 0.75rem;
  line-height: 1.3;
}

.p-thankyou__order-number {
  font-size: 1rem;
  color: #4b5563;
  margin: 0 0 2.5rem;
}

.p-thankyou__order-number strong {
  color: #1f2937;
  font-weight: 600;
}

.p-thankyou__steps {
  background: #fff;
  border: 1px solid #f3f4f6;
  border-radius: 0.75rem;
  padding: 1.75rem 1.75rem;
  margin-bottom: 2rem;
  text-align: left;
}

.p-thankyou__steps-title {
  font-size: 1.25rem;
  font-weight: 700;
  color: #1f2937;
  margin: 0 0 1.25rem;
}

.p-thankyou__steps-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.p-thankyou__step {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
}

.p-thankyou__step-num {
  flex-shrink: 0;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 50%;
  background: #0053b3;
  color: #fff;
  font-size: 0.875rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 0.125rem;
}

.p-thankyou__step-body {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
}

.p-thankyou__step-label {
  font-size: 1rem;
  font-weight: 600;
  color: #1f2937;
}

.p-thankyou__step-desc {
  font-size: 0.875rem;
  color: #4b5563;
  margin: 0;
  line-height: 1.6;
}

.p-thankyou__actions {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

@media screen and (min-width: 769px) {
  .p-thankyou__actions {
    flex-direction: row;
    justify-content: center;
  }
}
.p-thankyou__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.875rem 1.75rem;
  border-radius: 0.5rem;
  font-size: 1rem;
  font-weight: 600;
  text-decoration: none;
  transition: background 200ms ease-in-out, color 200ms ease-in-out, border-color 200ms ease-in-out;
}

.p-thankyou__btn--primary {
  background: #0053b3;
  color: #fff;
  border: 2px solid #0053b3;
}

.p-thankyou__btn--primary:hover {
  background: #00408a;
  border-color: #00408a;
  color: #fff;
}

.p-thankyou__btn--secondary {
  background: #fff;
  color: #0053b3;
  border: 2px solid #0053b3;
}

.p-thankyou__btn--secondary:hover {
  background: rgba(0, 83, 179, 0.06);
}

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

.p-thankyou__failed-actions {
  display: flex;
  gap: 0.75rem;
  margin-top: 1.25rem;
  justify-content: center;
}

.woocommerce-order .woocommerce-order-details {
  margin: 0 0 2rem;
  text-align: left;
}

.woocommerce-order .woocommerce-order-details__title {
  font-size: 1.25rem;
  font-weight: 700;
  color: #1f2937;
  margin: 0 0 1rem;
}

.woocommerce-order table.woocommerce-table--order-details {
  width: 100%;
  border-collapse: collapse;
  background: #fff;
  border: 1px solid #f3f4f6;
  border-radius: 0.75rem;
  overflow: hidden;
}

.woocommerce-order table.woocommerce-table--order-details thead tr {
  background: #fff;
}

.woocommerce-order table.woocommerce-table--order-details thead tr th {
  font-size: 0.875rem;
  font-weight: 600;
  color: #4b5563;
  padding: 0.75rem 1.25rem;
  text-align: left;
  background-color: #fff;
  border-bottom: 1px solid #f3f4f6;
}

.woocommerce-order table.woocommerce-table--order-details thead tr th:last-child {
  text-align: right;
}

.woocommerce-order table.woocommerce-table--order-details tbody tr {
  border-bottom: 1px solid #f3f4f6;
}

.woocommerce-order table.woocommerce-table--order-details tbody tr:last-child {
  border-bottom: none;
}

.woocommerce-order table.woocommerce-table--order-details tbody tr th,
.woocommerce-order table.woocommerce-table--order-details tbody tr td {
  background-color: #fff;
}

.woocommerce-order table.woocommerce-table--order-details tbody tr td {
  padding: 1rem 1.25rem;
  font-size: 1rem;
  color: #1f2937;
  vertical-align: middle;
}

.woocommerce-order table.woocommerce-table--order-details tbody tr td.product-name {
  font-weight: 600;
}

.woocommerce-order table.woocommerce-table--order-details tbody tr td.product-name .wc-item-meta {
  font-size: 0.875rem;
  color: #4b5563;
  margin-top: 0.25rem;
  list-style: none;
  padding: 0;
}

.woocommerce-order table.woocommerce-table--order-details tbody tr td.product-total {
  text-align: right;
  font-weight: 600;
  color: #1f2937;
}

.woocommerce-order table.woocommerce-table--order-details tfoot tr {
  border-top: 1px solid #f3f4f6;
}

.woocommerce-order table.woocommerce-table--order-details tfoot tr th,
.woocommerce-order table.woocommerce-table--order-details tfoot tr td {
  background-color: #fff;
}

.woocommerce-order table.woocommerce-table--order-details tfoot tr th {
  padding: 0.75rem 1.25rem;
  font-size: 0.875rem;
  color: #4b5563;
  font-weight: 400;
  text-align: left;
}

.woocommerce-order table.woocommerce-table--order-details tfoot tr td {
  padding: 0.75rem 1.25rem;
  text-align: right;
  font-size: 1rem;
  color: #1f2937;
}

.woocommerce-order table.woocommerce-table--order-details tfoot tr.order-total th {
  font-size: 1rem;
  font-weight: 700;
  color: #1f2937;
}

.woocommerce-order table.woocommerce-table--order-details tfoot tr.order-total td {
  font-size: 1.375rem;
  font-weight: 700;
  color: #0053b3;
}

.woocommerce-order table.woocommerce-table--order-details tfoot tr.order-total td .woocommerce-Price-amount {
  color: inherit;
}

.woocommerce-order .woocommerce-customer-details {
  margin: 0 0 2rem;
  text-align: left;
}

.woocommerce-order .woocommerce-customer-details address {
  font-style: normal;
  font-size: 1rem;
  color: #1f2937;
  line-height: 1.8;
}

.woocommerce-order .woocommerce-customer-details .col-1,
.woocommerce-order .woocommerce-customer-details .col-2 {
  background: #fff;
  border: 1px solid #f3f4f6;
  border-radius: 0.75rem;
  padding: 1.5rem;
}

.woocommerce-order .woocommerce-customer-details .woocommerce-column--billing-address,
.woocommerce-order .woocommerce-customer-details .woocommerce-column--shipping-address {
  background: #fff;
  border: 1px solid #f3f4f6;
  border-radius: 0.75rem;
  padding: 1.5rem;
}

.woocommerce-order .woocommerce-customer-details .woocommerce-column--billing-address h2,
.woocommerce-order .woocommerce-customer-details .woocommerce-column--shipping-address h2 {
  font-size: 1rem;
  font-weight: 700;
  color: #1f2937;
  margin: 0 0 0.75rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid #f3f4f6;
}

.woocommerce-order section.woocommerce-customer-details--phone,
.woocommerce-order section.woocommerce-customer-details--email {
  margin-top: 0.5rem;
  font-size: 0.875rem;
  color: #4b5563;
}

.woocommerce-order .addresses {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  margin: 0 0 2rem;
  text-align: left;
}

@media screen and (min-width: 769px) {
  .woocommerce-order .addresses {
    grid-template-columns: 1fr 1fr;
  }
}
.woocommerce-order .addresses::before, .woocommerce-order .addresses::after {
  display: none;
}

.woocommerce-order .addresses .col-1,
.woocommerce-order .addresses .col-2,
.woocommerce-order .addresses .woocommerce-column--billing-address,
.woocommerce-order .addresses .woocommerce-column--shipping-address {
  background: #fff;
  border: 1px solid #f3f4f6;
  border-radius: 0.75rem;
  padding: 1.5rem;
  width: 100%;
  float: none;
}

.woocommerce-order .addresses .col-1 h2,
.woocommerce-order .addresses .col-2 h2,
.woocommerce-order .addresses .woocommerce-column--billing-address h2,
.woocommerce-order .addresses .woocommerce-column--shipping-address h2 {
  font-size: 1rem;
  font-weight: 700;
  color: #1f2937;
  margin: 0 0 0.75rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid #f3f4f6;
}

.woocommerce-order .addresses .col-1 address,
.woocommerce-order .addresses .col-2 address,
.woocommerce-order .addresses .woocommerce-column--billing-address address,
.woocommerce-order .addresses .woocommerce-column--shipping-address address {
  font-style: normal;
  font-size: 1rem;
  color: #1f2937;
  line-height: 1.8;
}

.p-checkout__form-body--msa {
  padding-left: 0;
  padding-right: 0;
}

.p-checkout__form-body--msa > .p-checkout__row,
.p-checkout__form-body--msa > .p-checkout__field,
.p-checkout__form-body--msa > p.form-row {
  display: none;
}

#user-address-manager {
  max-width: none;
  padding-top: 1.5rem;
}

#user-address-manager .manager-main-heading {
  font-size: 1.5rem !important;
  font-weight: 700;
  color: #1f2937 !important;
  margin: 0 0 1.25rem;
  line-height: 1.3;
}

#user-address-manager .address-registry-grid,
#user-address-manager .address-registry-grid-frontend {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(13.75rem, 1fr));
  gap: 0.75rem;
  margin-bottom: 0.25rem;
}

@media screen and (max-width: 768px) {
  #user-address-manager .address-registry-grid,
  #user-address-manager .address-registry-grid-frontend {
    grid-template-columns: 1fr;
    gap: 0.5rem;
  }
}
#user-address-manager .address-entry-card {
  background: #fff !important;
  color: #1f2937 !important;
  border: 1px solid #e0e0e0;
  border-radius: 0.5rem;
  padding: 0.875rem 1rem;
  font-size: 0.875rem;
  line-height: 1.6;
}

#user-address-manager .address-entry-card .entry-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}

@media screen and (max-width: 768px) {
  #user-address-manager .address-entry-card .entry-card__header {
    margin-bottom: 0;
    cursor: pointer;
    user-select: none;
  }
  #user-address-manager .address-entry-card .entry-card__header::after {
    content: "";
    display: block;
    width: 7px;
    height: 7px;
    border-right: 2px solid #4b5563;
    border-bottom: 2px solid #4b5563;
    transform: rotate(45deg);
    transition: transform 150ms ease-in-out;
    flex-shrink: 0;
    margin-right: 0.125rem;
  }
}
#user-address-manager .address-entry-card .entry-card__title {
  font-size: 0.875rem !important;
  font-weight: 700;
  color: #1f2937 !important;
  margin: 0;
  line-height: 1.4;
}

#user-address-manager .address-entry-card .entry-card__favorite-icon,
#user-address-manager .address-entry-card .entry-card__non-favorite-icon {
  display: none !important;
}

#user-address-manager .address-entry-card .entry-card__accordion-icon {
  display: none !important;
}

#user-address-manager .address-entry-card .entry-card__details p {
  margin: 0;
  color: #4b5563 !important;
}

@media screen and (max-width: 768px) {
  #user-address-manager .address-entry-card .entry-card__details {
    display: none;
    margin-top: 0.5rem;
  }
}
#user-address-manager .address-entry-card .entry-card__actions {
  margin-top: 0.625rem;
  font-size: 0.75rem;
  color: #4b5563 !important;
}

#user-address-manager .address-entry-card .entry-card__actions a {
  color: #0053b3 !important;
  text-decoration: none;
}

#user-address-manager .address-entry-card .entry-card__actions a:hover {
  text-decoration: underline;
}

@media screen and (max-width: 768px) {
  #user-address-manager .address-entry-card .entry-card__actions {
    display: none;
    margin-top: 0.5rem;
  }
}
@media screen and (max-width: 768px) {
  #user-address-manager .address-entry-card.is-open .entry-card__details,
  #user-address-manager .address-entry-card.is-open .entry-card__actions {
    display: block;
  }
}
@media screen and (max-width: 768px) {
  #user-address-manager .address-entry-card.is-open .entry-card__header {
    margin-bottom: 0.5rem;
  }
  #user-address-manager .address-entry-card.is-open .entry-card__header::after {
    transform: rotate(-135deg);
    margin-top: 0.1875rem;
  }
}
#user-address-manager #manager-section-divider {
  border: none;
  border-top: 1px solid #f3f4f6 !important;
  margin: 0.75rem 0;
}

#user-address-manager .fme-btn-wrapper {
  display: flex !important;
  flex-direction: row !important;
  height: auto !important;
  gap: 0.375rem !important;
  justify-content: flex-start !important;
  align-items: center !important;
  flex-wrap: wrap;
}

#user-address-manager .fme-my-btn {
  flex: 0 1 auto;
  padding: 0.625rem 1.25rem;
  background: #0053b3 !important;
  color: #fff !important;
  border: none;
  border-radius: 0.375rem;
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  transition: background 150ms ease-in-out;
}

#user-address-manager .fme-my-btn:hover {
  background: #00408a !important;
}

.fme-msa-modal .msa-form-input::placeholder,
.fme-msa-modal-edit .msa-form-input::placeholder {
  color: #b8bfc8;
  opacity: 1;
}

.fme-msa-modal label:has(input[name=default_address]),
.fme-msa-modal-edit label:has(input[name=default_address]) {
  display: none !important;
}

.cart-item-qty {
  -moz-appearance: number-input !important;
  appearance: auto !important;
}

.cart-item-qty::-webkit-inner-spin-button, .cart-item-qty::-webkit-outer-spin-button {
  display: block !important;
  -webkit-appearance: inner-spin-button !important;
  opacity: 1 !important;
}

@media screen and (max-width: 768px) {
  .fme-msa-modal-split-content {
    padding: 1rem !important;
  }
  .fme-msa-product-row {
    position: relative;
    grid-template-columns: 2.75rem 1fr !important;
    grid-template-rows: auto auto !important;
    gap: 0.5rem 0.625rem !important;
    padding: 0.75rem 0 !important;
    align-items: center;
  }
  .fme-msa-product-row .fme-msa-product-img {
    grid-column: 1;
    grid-row: 1;
  }
  .fme-msa-product-row .fme-msa-product-img img {
    width: 2.75rem !important;
    height: 2.75rem !important;
    object-fit: cover;
    border-radius: 0.25rem;
  }
  .fme-msa-product-row .fme-msa-product-name {
    grid-column: 2;
    grid-row: 1;
    align-self: center;
    font-size: 0.875rem !important;
    font-weight: 500;
    line-height: 1.4;
  }
  .fme-msa-product-row .fme-msa-qty {
    grid-column: 1;
    grid-row: 2;
  }
  .fme-msa-product-row .fme-msa-qty input {
    width: 3.25rem !important;
    height: 2.25rem !important;
    font-size: 1rem !important;
    text-align: center;
    border: 1px solid #e0e0e0;
    border-radius: 0.25rem;
    padding: 0 !important;
  }
  .fme-msa-product-row .fme-msa-address-select {
    grid-column: 2;
    grid-row: 2;
    display: flex;
    align-items: center;
    gap: 0.5rem;
  }
  .fme-msa-product-row .fme-msa-address-select select {
    flex: 1;
    min-width: 0;
    height: 2.25rem !important;
    font-size: 0.875rem !important;
    padding: 0 2rem 0 0.625rem !important;
    border: 1px solid #e0e0e0;
    border-radius: 0.25rem;
    background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2 4L6 8L10 4' stroke='%23666' stroke-width='1.5' stroke-linecap='round' fill='none'/%3E%3C/svg%3E") no-repeat right 0.625rem center;
    background-size: 0.75rem;
    appearance: none !important;
    -webkit-appearance: none !important;
  }
  .fme-msa-product-row .fme-msa-remove-item {
    position: static !important;
    flex-shrink: 0;
    width: 1.75rem;
    height: 1.75rem;
    display: flex !important;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #6b7280;
    color: #fff;
    font-size: 0.75rem;
    line-height: 1;
    cursor: pointer;
    margin: 0 !important;
  }
  .fme-msa-add-more {
    margin-top: 0.5rem;
    float: none !important;
    text-align: right;
  }
  .fme-msa-add-more a {
    font-size: 0.875rem;
  }
  .divider-row {
    margin: 0.25rem 0 !important;
  }
}
.msa-stock-limit-notice {
  margin: 0.375rem 0 0;
  padding: 0.375rem 0.625rem;
  font-size: 0.75rem;
  font-weight: 500;
  color: #ef4444;
  background: white;
  border-radius: 0.25rem;
  line-height: 1.5;
}

#checkout-loading-overlay {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.55);
  backdrop-filter: blur(1px);
  transition: opacity 0.2s ease;
}

#checkout-loading-overlay.is-active {
  display: flex;
}

.checkout-loading-spinner {
  width: 2.25rem;
  height: 2.25rem;
  border: 3px solid rgba(0, 83, 179, 0.2);
  border-top-color: #0053b3;
  border-radius: 50%;
  animation: checkout-spin 0.7s linear infinite;
}

@keyframes checkout-spin {
  to {
    transform: rotate(360deg);
  }
}
@media screen and (max-width: 768px) {
  .fme-msa-loading-overlay {
    background: rgba(255, 255, 255, 0.8) !important;
  }
  .fme-msa-loading-text {
    font-size: 0.875rem;
    font-weight: 700;
  }
}
.fme-no-address-msg {
  text-align: center;
  padding: 1.5rem 0;
  color: #4b5563;
  font-size: 0.875rem;
  margin: 0;
}

.fme-woocommerce-add-address-btn {
  margin-top: 1rem;
  text-align: left !important;
}

.fme-woocommerce-add-address-btn .fme-my-btn,
.fme-woocommerce-add-address-btn #add_new_shipping_address_account_btn {
  padding: 0.625rem 1.25rem;
  background: #0053b3 !important;
  color: #fff !important;
  border: none;
  border-radius: 0.375rem;
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  transition: background 150ms ease-in-out;
}

.fme-woocommerce-add-address-btn .fme-my-btn:hover,
.fme-woocommerce-add-address-btn #add_new_shipping_address_account_btn:hover {
  background: #00408a !important;
}

.woocommerce-shipping-fields h3#ship-to-different-address {
  background: transparent;
  border: none;
  border-radius: 0;
  overflow: visible;
  margin: 2rem 0;
  font-size: 1.25rem;
  font-weight: bold;
}

.woocommerce-shipping-fields h3#ship-to-different-address .woocommerce-form__label-for-checkbox {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  cursor: pointer;
  margin: 0;
  font-weight: bold;
  color: #1f2937;
}

.woocommerce-shipping-fields h3#ship-to-different-address .woocommerce-form__input-checkbox {
  width: 1.625rem;
  height: 1.625rem;
  accent-color: #0053b3;
  cursor: pointer;
  flex-shrink: 0;
  margin: 0;
}

.woocommerce-shipping-fields h3#ship-to-different-address span {
  font-size: 1.5rem;
  color: #1f2937;
}

.woocommerce-shipping-fields .shipping_address {
  margin-top: 1rem;
}

.woocommerce-account .woocommerce-MyAccount-navigation {
  float: none;
  width: auto;
}

.woocommerce-account .woocommerce-MyAccount-content {
  float: none;
  width: auto;
}

.p-myaccount {
  max-width: 61.25rem;
  margin: 0 auto;
}

.p-myaccount__hero {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 2rem 1.5rem;
  background: #0053b3;
  border-radius: 0.75rem;
  margin-bottom: 2rem;
}

.p-myaccount__avatar {
  flex-shrink: 0;
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.p-myaccount__avatar svg {
  width: 2.5rem;
  height: 2.5rem;
}

.p-myaccount__hero-info {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.p-myaccount__hero-name {
  font-size: 1.5rem;
  font-weight: 700;
  color: #fff;
  margin: 0;
}

.p-myaccount__hero-email {
  font-size: 0.875rem;
  color: rgba(255, 255, 255, 0.75);
  margin: 0;
}

.p-myaccount__nav {
  margin-bottom: 2rem;
}

.p-myaccount__nav-list {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
  gap: 0.25rem;
  border-bottom: 2px solid #f3f4f6;
}

@media screen and (max-width: 768px) {
  .p-myaccount__nav-list {
    flex-wrap: wrap;
    justify-content: space-between;
    row-gap: 0.875rem;
  }
}
.p-myaccount__nav-item {
  flex: 1;
  min-width: 0;
}

@media screen and (min-width: 769px) {
  .p-myaccount__nav-item {
    flex: none;
  }
}
@media screen and (max-width: 768px) {
  .p-myaccount__nav-item {
    flex: 0 0 30%;
  }
}
.p-myaccount__nav-link {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.1875rem;
  padding: 0.625rem 0.25rem;
  font-size: 0.75rem;
  font-weight: 600;
  color: #4b5563;
  text-decoration: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  transition: color 150ms ease-in-out, border-color 150ms ease-in-out;
  white-space: nowrap;
  min-height: 3.25rem;
}

@media screen and (min-width: 769px) {
  .p-myaccount__nav-link {
    flex-direction: row;
    gap: 0.5rem;
    font-size: 1rem;
    padding: 0.875rem 1.5rem;
    min-height: auto;
  }
}
.p-myaccount__nav-link:hover {
  color: #0053b3;
}

.is-active .p-myaccount__nav-link {
  color: #0053b3;
  border-bottom-color: #0053b3;
}

.p-myaccount__nav-icon {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.p-myaccount__nav-icon svg {
  width: 1.375rem;
  height: 1.375rem;
}

@media screen and (min-width: 769px) {
  .p-myaccount__nav-icon svg {
    width: 1rem;
    height: 1rem;
  }
}
.p-myaccount__content .woocommerce-message,
.p-myaccount__content .woocommerce-error,
.p-myaccount__content .woocommerce-info {
  position: relative;
  margin-bottom: 1.5rem;
  padding: 0.875rem 1rem 0.875rem 2.75rem;
  border-radius: 0.5rem;
  font-size: 0.875rem;
  font-weight: 600;
}

.p-myaccount__content .woocommerce-message::before,
.p-myaccount__content .woocommerce-error::before,
.p-myaccount__content .woocommerce-info::before {
  font-family: inherit !important;
  position: absolute;
  left: 0.875rem;
  top: 50%;
  transform: translateY(-50%);
  width: 1.25rem;
  height: 1.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1;
}

.p-myaccount__content .woocommerce-message.woocommerce-message::before,
.p-myaccount__content .woocommerce-error.woocommerce-message::before,
.p-myaccount__content .woocommerce-info.woocommerce-message::before {
  content: "✓" !important;
  background: #10b981;
  color: #fff;
}

.p-myaccount__content .woocommerce-message.woocommerce-error::before,
.p-myaccount__content .woocommerce-error.woocommerce-error::before,
.p-myaccount__content .woocommerce-info.woocommerce-error::before {
  content: "✕" !important;
  background: #ef4444;
  color: #fff;
}

.p-myaccount__content .woocommerce-message.woocommerce-info::before,
.p-myaccount__content .woocommerce-error.woocommerce-info::before,
.p-myaccount__content .woocommerce-info.woocommerce-info::before {
  content: "i" !important;
  background: #0053b3;
  color: #fff;
}

.p-myaccount__content .woocommerce-message {
  background: rgba(16, 185, 129, 0.08);
  border: 1px solid rgba(16, 185, 129, 0.3);
  color: #0c8a60;
}

.p-myaccount__content .woocommerce-error {
  background: rgba(239, 68, 68, 0.08);
  border: 1px solid rgba(239, 68, 68, 0.3);
  color: #ef4444;
}

.p-myaccount__content .woocommerce-info {
  background: rgba(0, 83, 179, 0.06);
  border: 1px solid rgba(0, 83, 179, 0.2);
  color: #0053b3;
}

.p-myaccount__section-title {
  font-size: 1.5rem;
  font-weight: 700;
  color: #1f2937;
  margin: 0 0 1.5rem;
}

.p-myaccount__btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1.5rem;
  border-radius: 0.5rem;
  font-size: 1rem;
  font-weight: 600;
  font-family: "Noto Sans JP", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  text-decoration: none;
  cursor: pointer;
  border: none;
  transition: background 200ms ease-in-out, color 200ms ease-in-out;
}

.p-myaccount__btn--primary {
  background: #0053b3;
  color: #fff;
}

.p-myaccount__btn--primary:hover {
  background: #00408a;
  color: #fff;
}

.p-myaccount__btn--logout {
  background: #fff;
  color: #ef4444;
  border: 1px solid #ef4444;
}

.p-myaccount__btn--logout:hover {
  background: rgba(239, 68, 68, 0.06);
}

.p-myaccount__btn--outline {
  background: #fff;
  color: #0053b3;
  border: 1px solid #0053b3;
  padding: 0.5rem 1.25rem;
}

.p-myaccount__btn--outline:hover {
  background: rgba(0, 83, 179, 0.06);
}

.p-order-detail {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.p-order-detail__footer {
  display: flex;
  justify-content: flex-start;
  padding-top: 0.5rem;
}

.p-order-detail__back-btn-solid {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.75rem 1.5rem;
  background: #0053b3;
  color: #fff;
  font-size: 0.875rem;
  font-weight: 600;
  text-decoration: none;
  border-radius: 0.5rem;
  transition: background 150ms ease-in-out, transform 150ms ease-in-out;
}

.p-order-detail__back-btn-solid svg {
  flex-shrink: 0;
  transition: transform 150ms ease-in-out;
}

.p-order-detail__back-btn-solid:hover {
  background: #00408a;
  color: #fff;
}

.p-order-detail__back-btn-solid:hover svg {
  transform: translateX(-0.1875rem);
}

.p-order-detail__back-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: #4b5563;
  text-decoration: none;
  transition: color 150ms ease-in-out;
}

.p-order-detail__back-btn svg {
  flex-shrink: 0;
  transition: transform 150ms ease-in-out;
}

.p-order-detail__back-btn:hover {
  color: #0053b3;
}

.p-order-detail__back-btn:hover svg {
  transform: translateX(-0.1875rem);
}

.p-order-detail__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  background: #fff;
  border: 1px solid #f3f4f6;
  border-radius: 0.75rem;
  padding: 1.25rem 1.5rem;
  flex-wrap: wrap;
}

.p-order-detail__header-meta {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}

.p-order-detail__order-num {
  font-size: 1rem;
  color: #1f2937;
}

.p-order-detail__order-num strong {
  font-weight: 700;
}

.p-order-detail__date {
  font-size: 0.875rem;
  color: #6b7280;
}

.p-order-detail__status {
  display: inline-flex;
  align-items: center;
  padding: 0.25rem 0.875rem;
  border-radius: 9999px;
  font-size: 0.875rem;
  font-weight: 600;
  white-space: nowrap;
  background: #f3f4f6;
  color: #4b5563;
}

.p-order-detail__status--processing {
  background: rgba(0, 83, 179, 0.1);
  color: #0053b3;
}

.p-order-detail__status--completed {
  background: rgba(16, 185, 129, 0.1);
  color: #10b981;
}

.p-order-detail__status--on-hold {
  background: rgba(245, 158, 11, 0.12);
  color: #ac6f07;
}

.p-order-detail__status--cancelled, .p-order-detail__status--failed {
  background: rgba(239, 68, 68, 0.1);
  color: #ef4444;
}

.p-order-detail__status--pending {
  background: rgba(107, 114, 128, 0.12);
  color: #4b5563;
}

.p-order-detail__status--refunded {
  background: rgba(59, 130, 246, 0.1);
  color: #3b82f6;
}

.p-order-detail__section {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.p-order-detail__section-title {
  font-size: 1.25rem;
  font-weight: 700;
  color: #1f2937;
  margin: 0 0 0.25rem;
}

.p-order-detail__items {
  background: #fff;
  border: 1px solid #f3f4f6;
  border-radius: 0.75rem;
  overflow: hidden;
}

.p-order-detail__item {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid #f3f4f6;
}

.p-order-detail__item:last-child {
  border-bottom: none;
}

.p-order-detail__item-thumb {
  flex-shrink: 0;
  width: 4.5rem;
  height: 4.5rem;
  border-radius: 0.375rem;
  overflow: hidden;
  background: #f3f4f6;
}

.p-order-detail__item-thumb a {
  display: block;
  width: 100%;
  height: 100%;
}

.p-order-detail__thumb-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.p-order-detail__thumb-placeholder {
  width: 100%;
  height: 100%;
  background: #f3f4f6;
}

.p-order-detail__item-info {
  flex: 1;
  min-width: 0;
}

.p-order-detail__item-info a {
  color: #1f2937;
  text-decoration: none;
  font-size: 1rem;
  font-weight: 600;
}

.p-order-detail__item-info a:hover {
  color: #0053b3;
}

.p-order-detail__item-name {
  font-size: 1rem;
  font-weight: 600;
  margin-bottom: 0.25rem;
}

.p-order-detail__item-qty {
  font-size: 0.875rem;
  color: #6b7280;
}

.p-order-detail__ship-label {
  display: block;
  font-size: 0.75rem;
  color: #4b5563;
  margin-top: 0.25rem;
}

.p-order-detail__ship-label strong {
  color: #0053b3;
  font-weight: 600;
}

.p-order-detail__item-price {
  flex-shrink: 0;
  font-size: 1rem;
  font-weight: 700;
  color: #1f2937;
  text-align: right;
}

.p-order-detail__summary {
  background: #fff;
  border: 1px solid #f3f4f6;
  border-radius: 0.75rem;
  overflow: hidden;
}

.p-order-detail__summary-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.75rem 1.25rem;
  border-bottom: 1px solid #f3f4f6;
  gap: 1rem;
}

.p-order-detail__summary-row:last-child {
  border-bottom: none;
}

.p-order-detail__summary-row--total {
  background: #f9fafb;
}

.p-order-detail__summary-row--total .p-order-detail__summary-label,
.p-order-detail__summary-row--total .p-order-detail__summary-value {
  font-size: 1rem;
  font-weight: 700;
  color: #1f2937;
}

.p-order-detail__summary-label {
  font-size: 0.875rem;
  color: #4b5563;
}

.p-order-detail__summary-value {
  font-size: 0.875rem;
  color: #1f2937;
  font-weight: 600;
  text-align: right;
}

.p-order-detail__actions {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.p-order-detail__section-title {
  font-size: 1.25rem;
  font-weight: 700;
  color: #1f2937;
  margin: 0 0 1rem;
}

.p-order-detail__customer {
  margin-top: 0.5rem;
}

.p-order-detail__address-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}

@media screen and (min-width: 769px) {
  .p-order-detail__address-grid--two {
    grid-template-columns: 1fr 1fr;
  }
}
.p-order-detail__address-card {
  background: #fff;
  border: 1px solid #f3f4f6;
  border-radius: 0.75rem;
  padding: 1.25rem 1.5rem;
}

.p-order-detail__address-title {
  font-size: 0.875rem;
  font-weight: 700;
  color: #6b7280;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin: 0 0 0.75rem;
}

.p-order-detail__address-body {
  font-style: normal;
  font-size: 0.875rem;
  color: #4b5563;
  line-height: 1.8;
}

.p-order-detail__address-body p {
  margin: 0;
}

.p-order-detail__address-body--split + .p-order-detail__address-body--split {
  margin-top: 0.75rem;
  padding-top: 0.75rem;
  border-top: 1px solid #f3f4f6;
}

.p-order-detail__address-label {
  display: block;
  font-size: 0.75rem;
  font-weight: 700;
  color: #0053b3;
  margin-bottom: 0.25rem;
}

.p-order-detail__notes {
  background: #fff;
  border: 1px solid #f3f4f6;
  border-radius: 0.75rem;
  padding: 1.25rem 1.5rem;
}

.p-order-detail__sub-title {
  font-size: 1rem;
  font-weight: 700;
  color: #1f2937;
  margin: 0 0 1rem;
}

.p-order-detail__note-date {
  font-size: 0.75rem;
  color: #6b7280;
  margin: 0 0 0.25rem;
}

.p-order-detail__note-body {
  font-size: 0.875rem;
  color: #4b5563;
}

.p-order-detail .woocommerce-order-details__title,
.p-order-detail .woocommerce-column__title {
  display: none;
}

.p-myaccount-orders__table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.p-myaccount-orders__table {
  width: 100%;
  border-collapse: collapse;
  background: #fff;
  border: 1px solid #f3f4f6;
  border-radius: 0.75rem;
  overflow: hidden;
}

.p-myaccount-orders__th {
  font-size: 0.875rem;
  font-weight: 600;
  color: #4b5563;
  text-align: left;
  background: #f8f9fa;
  border-bottom: 1px solid #f3f4f6;
  white-space: nowrap;
}

.p-myaccount-orders__table .p-myaccount-orders__th {
  padding: 1rem 1.25rem;
}

.p-myaccount-orders__row {
  border-bottom: 1px solid #f3f4f6;
}

.p-myaccount-orders__row:last-child {
  border-bottom: none;
}

.p-myaccount-orders__row:hover {
  background: #fafafa;
}

.p-myaccount-orders__td {
  font-size: 1rem;
  color: #1f2937;
  vertical-align: middle;
}

.p-myaccount-orders__td--actions {
  text-align: right;
  white-space: nowrap;
}

.p-myaccount-orders__table .p-myaccount-orders__td {
  padding: 1.25rem 1.25rem;
}

.p-myaccount-orders__order-link {
  font-weight: 600;
  color: #0053b3;
  text-decoration: none;
}

.p-myaccount-orders__order-link:hover {
  text-decoration: underline;
}

.p-myaccount-orders__status {
  display: inline-block;
  padding: 0.25rem 0.625rem;
  border-radius: 1.25rem;
  font-size: 0.875rem;
  font-weight: 600;
}

.p-myaccount-orders__status--processing {
  background: #e3f2fd;
  color: #1565c0;
}

.p-myaccount-orders__status--completed {
  background: #e8f5e9;
  color: #2e7d32;
}

.p-myaccount-orders__status--on-hold {
  background: #fff8e1;
  color: #f57f17;
}

.p-myaccount-orders__status--cancelled {
  background: #fce4ec;
  color: #c62828;
}

.p-myaccount-orders__status--pending {
  background: #f3e5f5;
  color: #6a1b9a;
}

.p-myaccount-orders__status--refunded {
  background: #f5f5f5;
  color: #555;
}

.p-myaccount-orders__action-btn {
  display: inline-flex;
  align-items: center;
  padding: 0.375rem 0.875rem;
  border-radius: 0.375rem;
  font-size: 0.875rem;
  font-weight: 600;
  text-decoration: none;
  background: #0053b3;
  color: #fff;
  transition: background 150ms ease-in-out;
}

.p-myaccount-orders__action-btn:hover {
  background: #00408a;
  color: #fff;
}

.p-myaccount-orders__action-btn + .p-myaccount-orders__action-btn {
  margin-left: 0.5rem;
}

.p-myaccount-orders__pagination {
  display: flex;
  justify-content: center;
  gap: 0.75rem;
  margin-top: 1.5rem;
}

.p-myaccount-orders__page-btn {
  padding: 0.5rem 1.25rem;
  border: 1px solid #0053b3;
  background-color: #0053b3;
  border-radius: 0.5rem;
  font-size: 0.875rem;
  color: #fff;
  text-decoration: none;
  transition: border-color 150ms ease-in-out, color 150ms ease-in-out;
}

.p-myaccount-orders__page-btn:hover {
  opacity: 0.8;
  color: #fff;
}

.p-myaccount-orders__empty {
  text-align: center;
  padding: 4rem 1.5rem;
  background: #fff;
  border: 1px solid #f3f4f6;
  border-radius: 0.75rem;
}

.p-myaccount-orders__empty-text {
  font-size: 1rem;
  color: #4b5563;
  margin: 0 0 1.5rem;
}

.p-myaccount-orders__shop-btn {
  display: inline-flex;
  align-items: center;
  padding: 0.75rem 1.75rem;
  background: #0053b3;
  color: #fff;
  border-radius: 0.5rem;
  font-size: 1rem;
  font-weight: 600;
  text-decoration: none;
  transition: background 150ms ease-in-out;
}

.p-myaccount-orders__shop-btn:hover {
  background: #00408a;
  color: #fff;
}

.p-myaccount-settings {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.p-myaccount-settings__card {
  background: #fff;
  border: 1px solid #f3f4f6;
  border-radius: 0.75rem;
  padding: 1.75rem 1.75rem 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.p-myaccount-settings__card--logout {
  gap: 1rem;
}

.p-myaccount-settings__card-title {
  font-size: 1.25rem;
  font-weight: 700;
  color: #1f2937;
  margin: 0;
  padding-bottom: 1rem;
  border-bottom: 1px solid #f3f4f6;
}

.p-myaccount-settings__card-title--logout {
  color: #ef4444;
}

.p-myaccount-settings__row {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

@media screen and (min-width: 769px) {
  .p-myaccount-settings__row--col2 {
    flex-direction: row;
    gap: 1rem;
  }
  .p-myaccount-settings__row--col2 .p-myaccount-settings__field {
    flex: 1;
  }
}
.p-myaccount-settings__field {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}

.p-myaccount-settings__label {
  font-size: 0.875rem;
  font-weight: 600;
  color: #1f2937;
}

.p-myaccount-settings__required {
  color: #ef4444;
  margin-left: 0.125rem;
}

.p-myaccount-settings__input {
  width: 100%;
  height: 3.25rem;
  padding: 0 1rem;
  border: 1px solid #e0e0e0;
  border-radius: 0.5rem;
  font-size: 1rem;
  font-family: "Noto Sans JP", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: #1f2937;
  background: #fff;
  transition: border-color 150ms ease-in-out, box-shadow 150ms ease-in-out;
  appearance: none;
}

.p-myaccount-settings__input::placeholder {
  color: #9ca3af;
}

.p-myaccount-settings__input:focus {
  outline: none;
  border-color: #0053b3;
  box-shadow: 0 0 0 3px rgba(0, 83, 179, 0.12);
}

.p-myaccount-settings__footer {
  padding-top: 0.5rem;
}

.p-myaccount-address__form {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.p-myaccount-address__fields {
  background: #fff;
  border: 1px solid #f3f4f6;
  border-radius: 0.75rem;
  padding: 1rem;
}

@media screen and (min-width: 769px) {
  .p-myaccount-address__fields {
    padding: 1.75rem;
  }
}
@media screen and (min-width: 769px) {
  .p-myaccount-address__field-wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 1rem;
  }
  .p-myaccount-address__field-wrapper .form-row-wide {
    grid-column: 1/-1;
  }
}
.p-myaccount-address__field-wrapper .form-row {
  margin: 0 0 1rem;
}

.p-myaccount-address__field-wrapper .form-row label {
  display: block;
  font-size: 0.875rem;
  font-weight: 600;
  color: #1f2937;
  margin-bottom: 0.375rem;
}

.p-myaccount-address__field-wrapper .form-row .input-text,
.p-myaccount-address__field-wrapper .form-row input[type=text],
.p-myaccount-address__field-wrapper .form-row input[type=email],
.p-myaccount-address__field-wrapper .form-row input[type=tel],
.p-myaccount-address__field-wrapper .form-row select {
  width: 100%;
  height: 3.25rem;
  padding: 0 1rem;
  border: 1px solid #e0e0e0;
  border-radius: 0.5rem;
  font-size: 1rem;
  font-family: "Noto Sans JP", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: #1f2937;
  background: #fff;
  appearance: none;
  transition: border-color 150ms ease-in-out, box-shadow 150ms ease-in-out;
}

.p-myaccount-address__field-wrapper .form-row .input-text:focus,
.p-myaccount-address__field-wrapper .form-row input[type=text]:focus,
.p-myaccount-address__field-wrapper .form-row input[type=email]:focus,
.p-myaccount-address__field-wrapper .form-row input[type=tel]:focus,
.p-myaccount-address__field-wrapper .form-row select:focus {
  outline: none;
  border-color: #0053b3;
  box-shadow: 0 0 0 3px rgba(0, 83, 179, 0.12);
}

.p-myaccount-address__field-wrapper .form-row select {
  padding-right: 2.5rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.875rem center;
}

.p-myaccount-address__footer {
  display: flex;
  gap: 0.5rem;
}

.p-myaccount-addresses__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}

@media screen and (min-width: 769px) {
  .p-myaccount-addresses__grid {
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
  }
}
.p-myaccount-address-card {
  background: #fff;
  border: 1px solid #e0e0e0;
  border-radius: 0.75rem;
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  transition: box-shadow 200ms ease-in-out;
}

.p-myaccount-address-card:hover {
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.1);
}

.p-myaccount-address-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

.p-myaccount-address-card__title {
  font-size: 1rem;
  font-weight: 700;
  color: #1f2937;
  margin: 0;
}

.p-myaccount-address-card__badge {
  font-size: 0.6875rem;
  font-weight: 600;
  color: #0053b3;
  background: rgba(0, 83, 179, 0.1);
  border-radius: 9999px;
  padding: 0.125rem 0.625rem;
  white-space: nowrap;
}

.p-myaccount-address-card__body {
  flex: 1;
}

.p-myaccount-address-card__address {
  font-style: normal;
  font-size: 0.875rem;
  color: #4b5563;
  line-height: 1.8;
}

.p-myaccount-address-card__address p,
.p-myaccount-address-card__address br {
  margin: 0;
}

.p-myaccount-address-card__empty {
  font-size: 0.875rem;
  color: #6b7280;
  margin: 0;
}

.p-myaccount-address-card__footer {
  display: flex;
  gap: 0.5rem;
  padding-top: 0.5rem;
  border-top: 1px solid #f3f4f6;
}

.p-myaccount-hero-fullwidth {
  background: #0053b3;
}

.p-myaccount-hero-fullwidth .p-myaccount__hero {
  background: transparent;
  border-radius: 0;
  margin-bottom: 0;
}

.p-myaccount-dashboard {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.p-myaccount-dashboard__actions {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.75rem;
}

@media screen and (min-width: 769px) {
  .p-myaccount-dashboard__actions {
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
  }
}
.p-myaccount-dashboard__action-card {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1rem 0.875rem;
  background: #fff;
  border: 1px solid #f3f4f6;
  border-radius: 0.75rem;
  text-decoration: none;
  color: #1f2937;
  transition: box-shadow 200ms ease-in-out, border-color 200ms ease-in-out;
}

.p-myaccount-dashboard__action-card:hover {
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  border-color: #0053b3;
  color: #0053b3;
}

.p-myaccount-dashboard__action-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  background: rgba(0, 83, 179, 0.08);
  color: #0053b3;
  flex-shrink: 0;
}

.p-myaccount-dashboard__action-label {
  flex: 1;
  font-size: 0.875rem;
  font-weight: 600;
}

.p-myaccount-dashboard__action-arrow {
  color: #6b7280;
  display: flex;
  align-items: center;
}

.p-myaccount-dashboard__section-title {
  font-size: 1.125rem;
  font-weight: 700;
  color: #1f2937;
  margin: 0 0 1rem;
}

.p-myaccount-dashboard__orders-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.p-myaccount-dashboard__order-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.875rem 1rem;
  background: #fff;
  border: 1px solid #f3f4f6;
  border-radius: 0.5rem;
}

.p-myaccount-dashboard__order-meta {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-width: 11.25rem;
}

.p-myaccount-dashboard__order-number {
  font-size: 0.875rem;
  font-weight: 600;
  color: #1f2937;
}

.p-myaccount-dashboard__order-status {
  font-size: 0.6875rem;
  font-weight: 600;
  padding: 0.125rem 0.5rem;
  border-radius: 9999px;
}

.p-myaccount-dashboard__order-status--processing {
  background: rgba(0, 83, 179, 0.1);
  color: #0053b3;
}

.p-myaccount-dashboard__order-status--completed {
  background: rgba(16, 185, 129, 0.1);
  color: #10b981;
}

.p-myaccount-dashboard__order-status--on-hold {
  background: rgba(245, 158, 11, 0.1);
  color: #f59e0b;
}

.p-myaccount-dashboard__order-status--cancelled, .p-myaccount-dashboard__order-status--refunded {
  background: rgba(239, 68, 68, 0.1);
  color: #ef4444;
}

.p-myaccount-dashboard__order-info {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex: 1;
}

@media (max-width: 640px) {
  .p-myaccount-dashboard__order-info {
    display: none;
  }
}
.p-myaccount-dashboard__order-date {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.875rem;
  color: #6b7280;
}

.p-myaccount-dashboard__order-total {
  font-size: 0.875rem;
  font-weight: 600;
  color: #1f2937;
}

.p-myaccount-dashboard__order-link {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: #0053b3;
  text-decoration: none;
  white-space: nowrap;
}

.p-myaccount-dashboard__order-link:hover {
  text-decoration: underline;
}

.p-myaccount-dashboard__view-all {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  margin-top: 0.5rem;
  font-size: 0.875rem;
  color: #0053b3;
  text-decoration: none;
  font-weight: 600;
}

.p-myaccount-dashboard__view-all:hover {
  text-decoration: underline;
}

.btn-favorite {
  position: absolute;
  bottom: 0.5rem;
  right: 0.5rem;
  width: 2.125rem;
  height: 2.125rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.9);
  border: none;
  border-radius: 50%;
  cursor: pointer;
  color: #6b7280;
  transition: color 150ms ease-in-out, background 150ms ease-in-out, transform 150ms ease-in-out;
  padding: 0;
  z-index: 2;
}

.btn-favorite:hover {
  color: #e53e3e;
  background: #fff;
  transform: scale(1.1);
}

.btn-favorite.is-active {
  color: #e53e3e;
  background: #fff;
}

.btn-favorite.is-active svg {
  fill: #e53e3e;
}

.p-favorites__empty {
  text-align: center;
  padding: 3rem 1rem;
  color: #6b7280;
}

.p-favorites__grid {
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  gap: 1rem;
}

@media screen and (min-width: 769px) {
  .p-favorites__grid {
    grid-template-columns: repeat(3, 1fr);
  }
}
.p-favorites__grid .product-image-wrapper {
  height: 13.75rem;
}

@media screen and (min-width: 769px) {
  .p-favorites__grid .product-image-wrapper {
    height: 15.3125rem;
  }
}
.p-favorites__card {
  position: relative;
  background: #fff;
  border: 1px solid #f3f4f6;
  border-radius: 0.75rem;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-direction: column;
}

.p-favorites__img {
  aspect-ratio: 1/1;
  overflow: hidden;
  background: #f9fafb;
}

.p-favorites__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 300ms ease-in-out;
}

.p-favorites__info {
  padding: 0.75rem 0.875rem;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}

.p-favorites__name {
  font-size: 0.875rem;
  font-weight: 600;
  color: #1f2937;
  margin: 0;
  line-height: 1.4;
}

.p-favorites__price {
  font-size: 0.875rem;
  font-weight: 700;
  color: #0053b3;
  margin: 0;
}

.p-favorites__remove {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  width: 1.75rem;
  height: 1.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.9);
  border: none;
  border-radius: 50%;
  cursor: pointer;
  color: #6b7280;
  padding: 0;
  transition: color 150ms ease-in-out, background 150ms ease-in-out;
}

.p-favorites__remove:hover {
  color: #ef4444;
  background: #fff;
}

.cart-empty-state {
  text-align: center;
  padding: 3rem 1rem 4rem;
}

.cart-empty-state__icon {
  display: flex;
  justify-content: center;
  margin-bottom: 1.25rem;
  color: #b0bec5;
}

.cart-empty-state__title {
  font-size: 1.5rem;
  font-weight: 700;
  color: #1f2937;
  margin: 0 0 0.5rem;
}

.cart-empty-state__text {
  font-size: 1rem;
  color: #6b7280;
  margin: 0 0 1.75rem;
}

.cart-empty-state__btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: #0053b3;
  color: #fff;
  padding: 0.75rem 1.75rem;
  border-radius: 0.375rem;
  font-size: 1rem;
  font-weight: 600;
  text-decoration: none;
  transition: background 200ms ease-in-out;
}

.cart-empty-state__btn:hover {
  background: #1e40af;
  color: #fff;
}

.cart-empty-state__recommend {
  margin-top: 3rem;
  text-align: left;
}

.cart-empty-state__recommend-title {
  font-size: 1.125rem;
  font-weight: 700;
  color: #1f2937;
  margin: 0 0 1.25rem;
  text-align: center;
}

.cart-empty-state__recommend-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
}

@media screen and (min-width: 769px) {
  .cart-empty-state__recommend-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}
.cart-empty-state__recommend-card {
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-direction: column;
  border-radius: 0.5rem;
  overflow: hidden;
  border: 1px solid #e0e0e0;
  transition: box-shadow 200ms ease-in-out;
}

.cart-empty-state__recommend-card:hover {
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

.cart-empty-state__recommend-img {
  position: relative;
  aspect-ratio: 1/1;
  overflow: hidden;
  background: #f9fafb;
}

.cart-empty-state__recommend-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.cart-empty-state__recommend-info {
  padding: 0.75rem;
}

.cart-empty-state__recommend-name {
  font-size: 0.875rem;
  font-weight: 600;
  color: #1f2937;
  margin: 0 0 0.375rem;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.cart-empty-state__recommend-price {
  font-size: 0.875rem;
  color: #0053b3;
  font-weight: 700;
  margin: 0;
}

.woocommerce-account .u-columns.col2-set:not(.addresses) {
  display: flex;
  gap: 2rem;
  align-items: flex-start;
}

.woocommerce-account .u-columns.col2-set:not(.addresses) .u-column1,
.woocommerce-account .u-columns.col2-set:not(.addresses) .u-column2 {
  float: none;
  width: 50%;
}

@media screen and (max-width: 768px) {
  .woocommerce-account .u-columns.col2-set:not(.addresses) {
    flex-direction: column;
  }
  .woocommerce-account .u-columns.col2-set:not(.addresses) .u-column1,
  .woocommerce-account .u-columns.col2-set:not(.addresses) .u-column2 {
    width: 100%;
  }
}
.woocommerce-account .u-columns.col2-set.addresses {
  display: block;
  width: 100%;
}

.woocommerce-account .u-columns.col2-set.addresses h2 {
  float: none;
  width: 100%;
  margin: 0 0 1.25rem;
}

.woocommerce-account .u-columns.col2-set.addresses .u-column2,
.woocommerce-account .u-columns.col2-set.addresses .col-2 {
  float: none;
  width: 100%;
}

.woocommerce-account .u-columns.col2-set.addresses .address-registry-grid-frontend {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 1rem !important;
  width: 100% !important;
}

@media screen and (max-width: 768px) {
  .woocommerce-account .u-columns.col2-set.addresses .address-registry-grid-frontend {
    grid-template-columns: 1fr !important;
  }
}
.woocommerce-account .u-columns.col2-set.addresses .fme-msa-class-shipping-loader {
  width: 100%;
}

.woocommerce-form-login-toggle {
  margin-bottom: 1.5rem;
}

.woocommerce-form-login-toggle .woocommerce-info {
  background: #f0f7ff;
  border-left: 0.25rem solid #0053b3;
  border-radius: 0.375rem;
  padding: 0.875rem 1.25rem;
  font-size: 1rem;
  color: #1f2937;
  margin: 0;
}

.woocommerce-form-login-toggle .woocommerce-info::before {
  display: none;
}

.woocommerce-form-login-toggle .woocommerce-info .showlogin {
  color: #0053b3;
  font-weight: 600;
  text-decoration: underline;
}

.woocommerce-form-login-toggle .woocommerce-info .showlogin:hover {
  opacity: 0.8;
}

.woocommerce-form-login {
  background: #fff;
  border: 1px solid #f3f4f6;
  border-radius: 0.5rem;
  padding: 1.75rem 2rem;
  margin-bottom: 2rem;
}

.woocommerce-form-login .woocommerce-form__label {
  font-size: 0.875rem;
  font-weight: 600;
  color: #1f2937;
  margin-bottom: 0.375rem;
  display: block;
}

.woocommerce-form-login .woocommerce-form__input {
  width: 100%;
  padding: 0.625rem 0.875rem;
  border: 1px solid #d1d5db;
  border-radius: 0.375rem;
  font-size: 1rem;
  font-family: inherit;
  transition: border-color 150ms ease-in-out;
}

.woocommerce-form-login .woocommerce-form__input:focus {
  outline: none;
  border-color: #0053b3;
}

.woocommerce-form-login .woocommerce-form-login__submit {
  display: inline-block;
  padding: 0.75rem 2rem;
  background: #0053b3;
  color: #fff;
  border: none;
  border-radius: 0.375rem;
  font-size: 1rem;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: background 150ms ease-in-out;
}

.woocommerce-form-login .woocommerce-form-login__submit:hover {
  background: #00408a;
}

.woocommerce-form-login .form-row:has(#rememberme),
.woocommerce-form-login .woocommerce-form-login__rememberme {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 1rem;
}

.woocommerce-form-login .woocommerce-form__label-for-checkbox,
.woocommerce-form-login .woocommerce-form-login__rememberme {
  display: flex !important;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
  font-size: 0.875rem;
  font-weight: 400;
  color: #1f2937;
  margin: 0;
}

.woocommerce-form-login .woocommerce-form__input-checkbox {
  width: 1rem;
  height: 1rem;
  margin: 0;
  flex-shrink: 0;
  accent-color: #0053b3;
  cursor: pointer;
}

.woocommerce-form-login .lost_password a {
  font-size: 0.875rem;
  color: #4b5563;
  text-decoration: underline;
}

.woocommerce-form-login .lost_password a:hover {
  color: #0053b3;
}

.cart-actions-bar {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 1.5rem;
  padding: 1rem 0;
  border-top: 1px solid #e0e0e0;
}

.cart-actions-bar__empty, .cart-actions-bar__update {
  appearance: none;
  -webkit-appearance: none;
  display: inline;
  background: none !important;
  border: none !important;
  border-radius: 0;
  box-shadow: none;
  padding: 0;
  margin: 0;
  font-size: 0.875rem;
  font-family: inherit;
  font-weight: 400;
  line-height: inherit;
  color: #1f2937;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 0.1875rem;
  transition: color 0.2s ease;
}

.cart-actions-bar__empty:hover, .cart-actions-bar__empty:focus, .cart-actions-bar__update:hover, .cart-actions-bar__update:focus {
  background: none !important;
  color: #0053b3;
  box-shadow: none;
  outline: none;
}

.cart-actions-bar__empty[disabled], .cart-actions-bar__empty:disabled, .cart-actions-bar__update[disabled], .cart-actions-bar__update:disabled {
  background: none !important;
  border: none !important;
  box-shadow: none !important;
  opacity: 0.5;
  cursor: default;
}

.stock {
  font-weight: bold;
  font-size: 150%;
}

.stock.in-stock {
  color: #2e7d32;
}

.stock.out-of-stock {
  color: #c62828;
}

.p-register__password-hint {
  font-size: 0.75rem;
  color: #4b5563;
  background: #f0f7ff;
  border-left: 0.1875rem solid #0053b3;
  border-radius: 0.25rem;
  padding: 0.5rem 0.75rem;
  margin-top: 0.25rem;
  margin-bottom: 0.75rem;
  line-height: 1.6;
}

.sp-only {
  display: none;
}
@media screen and (max-width: 768px) {
  .sp-only {
    display: block;
  }
}

/*# sourceMappingURL=style.css.map */