@charset "utf-8";

/* =========================================================
   Woollen online store - PC Responsive Styles
   common.css の後に読み込んで上書きします。
   ブレイクポイント:
     - PC (Tablet/Desktop): min-width: 768px
     - PC Wide:              min-width: 1024px
   ========================================================= */

@media (min-width: 768px) {
  body { font-size: 14px; }

  /* PC ではコンテナを広く */
  .l-wrap { max-width: 100%; background: #fff; }

  /* ====== PCヘッダー ====== */
  .l-header { box-shadow: none; background: #fff; }
  .l-header__notice { display: none; }
  .l-header__bar {
    /* 全画面幅: 左端ロゴ・右端アイコン群 */
    max-width: none; margin: 0;
    display: grid; grid-template-columns: auto 1fr;
    align-items: center; padding: 3px 32px 6px;
    column-gap: 24px;
  }
  /* ヘッダーバーとカテゴリナビの間隔 */
  .l-header { padding-bottom: 0; }
  /* 右側コンテナ: memberlinks と topicons の間隔 (1.5倍) */
  .l-header__right { gap: 6px !important; }
  .l-header__logo img { height: 30px; }

  /* SP用 3アイコン+ハンバーガーはPCでは非表示 */
  .l-header__icons,
  .l-header__hamb { display: none !important; }

  /* PC catnav: 背景は白、内側コンテンツは 1280px 中央寄せ */
  .l-catnav {
    background: #fff;
    border-top: 0;
    border-bottom: 0;
    padding: 0;
  }
  .l-catnav__inner {
    display: flex; justify-content: center; align-items: center;
    grid-template-columns: none;
    gap: 80px;
    max-width: 1280px; margin: 0 auto;
    padding: 2px 24px;
  }
  .l-catnav__item {
    flex: 0 0 auto; flex-direction: row; gap: 10px; padding: 4px 4px;
    font-size: 14px; font-weight: 600;
  }
  .l-catnav__item .icon { width: 26px; height: 26px; }
  .l-catnav__item .icon svg { width: 22px; height: 22px; }
  .l-catnav__item .icon img { width: 22px; height: 22px; object-fit: contain; display: block; }
  .l-catnav__item--outlet .badge { width: 24px; height: 24px; font-size: 11px; }

  /* ヘッダー右側コンテナ: メンバーリンク(上) + アイコンナビ(下) */
  .l-header__right {
    display: flex; flex-direction: column; align-items: flex-end;
    gap: 4px;
  }
  /* 上段: ようこそ / マイページ / ログアウト */
  .l-header__memberlinks {
    display: flex; gap: 14px; font-size: 11px; color: #444;
    align-items: center;
  }
  .l-header__memberlinks a { color: #444; }
  .l-header__memberlinks a:hover { text-decoration: underline; }
  .l-header__greet { color: #222; font-weight: 600; }

  /* 下段: アイコン+ラベル横並びナビ */
  .l-header__topicons {
    display: flex; gap: 28px; font-size: 11px; color: #555;
    align-items: flex-end;
  }
  .l-header__topicons a {
    display: flex; flex-direction: column; align-items: center; gap: 4px;
    color: #555; line-height: 1.2;
  }
  .l-header__topicons .ic {
    display: inline-flex; width: 22px; height: 22px;
  }
  .l-header__topicons .ic svg { width: 22px; height: 22px; }
  /* お気に入りハート(iconHeartLg=viewBox36)はハート形が小さめなので、他アイコンと視覚的に揃うよう拡大 */
  .l-header__topicons .ic--heart { width: 26px; height: 26px; }
  .l-header__topicons .ic--heart svg { width: 26px; height: 26px; }
  .l-header__topicons .ico-wrap { position: relative; }
  .l-header__topicons .num {
    background:#c83939; color:#fff; border-radius:50%; width:16px; height:16px;
    font-size:10px; display:inline-flex; align-items:center; justify-content:center;
    position:absolute; right:-8px; top:-4px;
    font-weight:700;
  }

  /* PC: ヘッダー / カテゴリナビをスクロール時固定（sticky を積み上げる）。
     WOMEN/MEN タブは固定しない＝スマホ同様に縦スクロールで流れる。 */
  .l-header { z-index: 50; }
  .l-catnav {
    position: sticky;
    /* include.js が実測値を --sticky-header-h にセット (フォールバック 53px) */
    top: var(--sticky-header-h, 53px);
    z-index: 49;
  }
  .tabs-gender { position: static; }

  /* WOMEN/MEN タブ (PCはグレー背景全幅、中央配置) */
  .tabs-gender {
    background: #f3f3f3;
    max-width: none; margin: 0;
    display: flex; gap: 60px; justify-content: center;
  }
  .tabs-gender__item {
    flex: 0 0 auto; padding: 8px 30px; background: transparent;
    color: #444; border-bottom: 2px solid transparent;
  }
  .tabs-gender__item.is-active { background: transparent; color: #c83939; border-bottom-color: #c83939; }

  /* サブカテゴリ tabs-sub: PC は中央 */
  .tabs-sub {
    max-width: 1280px; margin: 0 auto;
    justify-content: center; gap: 30px; border-bottom: 1px solid #eee;
  }
  .tabs-sub__item { flex: 0 0 auto; padding: 16px 14px; }

  /* breadcrumb */
  .breadcrumb { max-width: 1280px; margin: 0 auto; padding: 14px 24px; }

  /* ====== Hero ====== */
  .hero { width: 100%; }
  .hero .scroller, .hero .scroller__track { width: 100%; max-width: 100% !important; padding: 0 !important; }
  .hero .scroller__item { flex: 0 0 100% !important; min-width: 100% !important; }
  .hero .scroller__item img,
  .hero > img { width: 100%; max-height: 640px; object-fit: cover; }

  /* Hero slider (PC) */
  .hero-slider__track { aspect-ratio: 21 / 9; max-height: 640px; }

  /* ブランド詳細ページのメインビジュアル */
  section > img { width: 100%; max-height: 560px; object-fit: cover; }

  /* page12,13,15,17,18,19 のような position:relative の直下にimgがある場合 */
  .l-wrap > div[style*="position:relative"] { max-width: 1280px; margin: 0 auto; }
  .l-wrap > div[style*="position:relative"] > img:first-child {
    width: 100%; max-height: 560px; object-fit: cover;
  }
  /* 商品詳細メイン画像 (PC) */
  .l-wrap > div[style*="position:relative"]:has(.pd-thumbs),
  body .l-wrap > div[style*="position:relative"] + .pd-thumbs {}
  /* ブランドロゴ右上 (絶対配置) はそのまま */

  /* ====== セクション共通 ====== */
  .section { padding: 60px 0; }

  /* ====== セクションタイトル ====== */
  .sec-title { padding: 0 24px 24px; }
  .sec-title__en { font-size: 28px; }
  .sec-title__ja { font-size: 13px; margin-top: 2px; }
  .sec-title--row {
    max-width: 1280px; margin: 0 auto; padding: 32px 24px 18px; gap: 16px;
  }
  .sec-title--row .ttl .en { font-size: 28px; }
  .sec-title--row .ttl .ja { font-size: 13px; }

  /* ====== Carousel scroller (PC: 4列カード, 全幅) ====== */
  .scroller__track { padding: 4px 32px 14px; gap: 18px; max-width: none; margin: 0; }
  .scroller__item { flex: 0 0 calc((100% - 18px*3) / 4); }
  .scroller__item--3 { flex-basis: calc((100% - 18px*3) / 4); }
  .scroller__nav { width: 36px; height: 80px; }

  /* hero / main visual を全幅表示 */
  .hero .scroller__track { padding: 0; max-width: none; }
  .hero .scroller__item { flex: 0 0 100% !important; }

  /* OUTLET banner (PC) */
  .outlet-bar {
    max-width: 1280px; margin: 16px auto;
    padding: 28px 24px;
  }
  .outlet-bar__main { font-size: 48px; }
  .outlet-bar__icon { width: 56px; height: 56px; font-size: 22px; }

  /* feature campaign */
  .feature-banners { max-width: 1280px; margin: 0 auto; }

  /* Mail magazine block (PC は左右中央 max width) */
  .mailmag {
    max-width: 1280px; margin: 30px auto; padding: 0;
    border: 1px solid #d8d8d8; display: grid;
    grid-template-columns: 320px 1fr;
  }
  .mailmag__head { font-size: 14px; padding: 18px 18px; }
  .mailmag__body { padding: 18px; }
  .mailmag__btn { margin: 0; padding: 16px 0; max-width: 360px; }

  /* expand-list */
  .expand-list {
    max-width: 1280px; margin: 24px auto; padding: 0 24px;
    display: grid; grid-template-columns: 1fr 1fr; gap: 0 24px;
  }

  /* ====== Brand grid (PC: 4列, 大きい) ====== */
  .brand-grid {
    grid-template-columns: repeat(4, 1fr); gap: 18px;
    max-width: 1280px; margin: 0 auto; padding: 0 24px;
  }
  .brand-grid__item { font-size: 22px; padding: 18px; min-height: 200px; }

  /* ====== Product grid (PC: 4列) ====== */
  .p-grid {
    grid-template-columns: repeat(4, 1fr); gap: 36px 20px;
    max-width: 1280px; margin: 0 auto; padding: 0 24px;
  }
  .p-grid--3 { grid-template-columns: repeat(4, 1fr); }
  .card__name { font-size: 13px; }
  .card__brand { font-size: 13px; }
  .card__price { font-size: 14px; }

  /* ====== PC: 商品一覧 サイドバーレイアウト ====== */
  .l-listing {
    display: grid !important;
    grid-template-columns: 220px 1fr;
    gap: 32px;
    max-width: none;        /* 横幅いっぱい（サイドバーは 220px 固定・一覧側が伸びる） */
    margin: 0 auto;
    padding: 24px 40px 60px;
  }
  .l-listing__side { display: block; }
  .l-listing__main { display: block; }
  /* SP専用の「絞り込み」アコーディオン見出しは PC では不要 */
  .l-filter__toggle { display: none; }
  .l-listing__side--sp-accordion.is-open { padding: 0; }

  /* .l-filter__* の見た目は common.css（基底）へ移設。
     サイドバーを SP でも開くページ（page06 の絞り込みアコーディオン）で必要なため。 */

  /* sort-bar (上部のソートドロップダウン) */
  .sort-bar {
    display: flex !important; gap: 12px; margin-bottom: 18px;
    flex-wrap: wrap;
  }
  .sort-bar__select {
    border: 1px solid #ccc; padding: 8px 10px;
    font-size: 12px; background: #fff; min-width: 140px; border-radius: 2px;
  }

  /* メインタイトル */
  .l-listing__title {
    display: block !important;
    font-size: 16px; font-weight: 700; margin-bottom: 14px;
    padding-bottom: 10px; border-bottom: 1px solid #e5e5e5;
  }

  /* PC: .l-listing__main 内の .p-grid は幅に応じて列数が変化（auto-fill）。
     minmax 300px。画面幅 1920px で 4 列（≈373px/枚）。
     ＜約1628px→3列 / 約1628〜1960px→4列 / 約1960px〜→5列。左右(列)の間隔は広めの 32px。 */
  .l-listing__main .p-grid {
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)) !important;
    max-width: none !important; padding: 0 !important; margin: 0 !important;
    gap: 36px 32px;
  }

  /* ページネーション */
  .pagination {
    display: flex !important; align-items: center; justify-content: center;
    gap: 6px; margin: 30px 0 0;
  }
  .pagination a {
    min-width: 32px; height: 32px; display: inline-flex;
    align-items: center; justify-content: center;
    border: 1px solid #ddd; font-size: 13px; color: #444;
  }
  .pagination a.is-active {
    background: #222; color: #fff; border-color: #222;
  }

  /* PC: 絞り込みFAB は非表示（サイドバーで代用） */
  .l-listing__filter-fab { display: none !important; }

  /* more link */
  .more-link { max-width: 480px; margin: 16px auto 0; padding: 0; }

  /* ====== 商品詳細 (PC: 2カラム) ====== */
  .pd-layout {
    max-width: 1280px; margin: 0 auto; padding: 24px;
    display: grid !important; grid-template-columns: 1.2fr 1fr; gap: 40px;
  }
  .pd-layout__media { display: block !important; }
  .pd-layout__info { display: block !important; }
  /* メイン画像はカラム幅いっぱいに表示してサムネと揃える */
  .pd-layout__media > div:first-child { width: 100%; }
  .pd-layout__media > div:first-child > img { width: 100%; height: auto; display: block; }
  .pd-layout__media .pd-thumbs {
    flex-wrap: wrap; gap: 8px; padding: 12px 0 0;
    overflow: visible;
  }
  .pd-layout__media .pd-thumbs__item {
    flex: 0 0 calc((100% - 24px) / 4);
    aspect-ratio: 3 / 4;
  }
  .pd-layout__info .pd-actions { padding: 16px 0; flex-direction: column; gap: 10px; }
  .pd-layout__info .pd-actions .btn { width: 100%; white-space: nowrap; }
  .pd-layout__info .pd-share { padding: 8px 0; }
  .pd-layout__info .pd-tabs { margin-top: 14px; }
  .pd-layout__info .pd-detail { padding: 16px 0; }

  /* PC では SP用の breadcrumb 直後の縦レイアウトを並列に切替えるため、
     商品詳細ページは個別に .pd-layout を導入。 */

  /* ====== カート / ステップ ====== */
  .l-step-head { font-size: 22px; padding: 18px; }
  .steps {
    max-width: 720px; margin: 0 auto; padding: 24px;
  }
  .steps__item .num { width: 44px; height: 44px; font-size: 16px; }
  .steps__item .label { font-size: 13px; }

  .form-section { max-width: 1024px; margin: 0 auto; padding: 18px 24px; }
  .form-section__head { max-width: none; padding: 14px 24px; }

  /* ====== Form layout (PC: ラベル左 / 入力右の2カラム) ====== */
  .form-row {
    display: grid; grid-template-columns: 200px 1fr; gap: 14px 24px;
    align-items: start; padding: 14px 0;
  }
  .form-row__label { margin-bottom: 0; }
  /* 2カラム時、ラベル以外の入力/注釈は右カラムへ（確認用input・help-text の左列回り込みを防止） */
  .form-row > .input,
  .form-row > .field-row,
  .form-row > .help-text,
  .form-row > select,
  .form-row > textarea { grid-column: 2; }

  /* dl-info (PC は wide) */
  .dl-info { grid-template-columns: 200px 1fr; gap: 8px 24px; }

  /* OUTLET hero (page16) */
  .outlet-hero { padding: 60px 24px 80px; }

  /* footer */
  .l-footer { margin-top: 60px; padding: 60px 0 0; }
  .l-footer__logo { font-size: 32px; padding: 40px 24px; }
  .l-footer__placeholder { padding: 80px 0; font-size: 22px; }

  /* mypage tabs: PC は 6 列の横並び */
  .mypage-tabs {
    max-width: 1280px; margin: 0 auto;
    grid-template-columns: repeat(6, 1fr);
  }
  .mypage-tabs__item { padding: 22px 6px; font-size: 14px; }

  /* mypage layout: PC は左サイドバー + 右コンテンツ */
  .mypage-layout {
    display: grid !important;
    grid-template-columns: 240px 1fr;
    gap: 32px;
    max-width: 1280px; margin: 0 auto; padding: 24px;
  }
  .mypage-side {
    background: transparent; border: 0; padding: 0;
  }
  .mypage-side__head { font-size: 14px; padding: 0 0 12px; }
  .mypage-nav__item { padding: 14px 16px; }
  .mypage-main { padding: 0; }

  /* News list: PC は 3カラム表示 */
  .news-list__row {
    grid-template-columns: 110px 100px 1fr;
    padding: 16px 0;
  }

  /* Feature grid: PC は 3カラム */
  .feature-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
  }

  /* Article body: PC は文字大きめ */
  .article-hero { padding: 40px 24px 20px; }
  .article-hero__title { font-size: 26px; }
  .article-body { padding: 0 24px 40px; font-size: 15px; }

  /* sticky 絞り込みボタン floating: PC では右下に固定 */

  /* index ページ調整 */
  .idx-wrap { padding: 50px 40px 100px; }
  .idx-list { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }

  /* PC ではドロワーは無効化（SPのみで使用） */
  .l-drawer { display: none !important; }

  /* PC では card 内の色サムネを少し大きめに */
  .card__colors-item { width: 22px; }
  .card__colors-more { min-width: 22px; height: 30px; font-size: 11px; }
}

/* PC Wide */
@media (min-width: 1024px) {
  .l-header__bar { padding: 3px 40px 6px; }
  .l-gnav__inner { gap: 100px; padding: 18px 32px; }
  .sec-title__en { font-size: 32px; }
  .sec-title--row { padding-left: 40px; padding-right: 40px; }
  .scroller__track { padding-left: 40px; padding-right: 40px; }
  .p-grid { padding-left: 40px; padding-right: 40px; }
  .brand-grid { padding-left: 40px; padding-right: 40px; }
  .outlet-bar { padding: 36px 40px; }
  .outlet-bar__main { font-size: 60px; }
  .mailmag { margin: 40px auto; }
}

/* =========================================================
   Hero slider - PCカルーセル (page03/04/05共通)
   中央スライドを90%幅で表示し、前後スライドを覗かせる
   ========================================================= */
@media (min-width: 768px) {
  .hero-slider {
    overflow: hidden;
    background: transparent;
  }
  .hero-slider .hero-slider__track {
    aspect-ratio: 1787 / 840;
    max-height: none;
    display: flex;
    align-items: stretch;
    transition: transform .5s ease;
    transform: translateX(calc(10% - var(--slider-idx, 0) * 80%));
  }
  .hero-slider__item {
    position: relative !important;
    inset: auto !important;
    flex: 0 0 80%;
    opacity: 1 !important;
    pointer-events: auto !important;
    padding: 0 6px;
    transition: opacity .3s ease;
  }
  .hero-slider__item:not(.is-active) {
    opacity: 0.55;
  }
  .hero-slider__nav--prev { left: 7%; }
  .hero-slider__nav--next { right: 7%; }
}

/* =========================================================
   Checkout 2カラム PC (注文情報入力 page30 / 注文確認 page31 共通)
   ========================================================= */
@media (min-width: 768px) {
  .cart-step2__inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 24px;
    padding: 24px 24px 60px;
  }
  .cart-section { margin-top: 0; margin-bottom: 16px; }
  .order-summary {
    position: sticky;
    top: 14px;
    border: 1px solid #e5e5e5;
    padding: 14px 16px;
  }
  .order-summary__total-val { font-size: 26px; }
  .order-summary__pay-val { font-size: 26px; }
}

/* =========================================================
   注文履歴カード PC (page44/page45): 本文を左メタ/右商品の2カラムに
   ========================================================= */
@media (min-width: 768px) {
  /* 注文履歴一覧(page45): 注文カードは2列固定。ページネーションは全幅・SPは縦積みのまま。
     カード内は1カラム（日時→商品スワイパー→注文詳細）
     ※ minmax(0,1fr)/min-width:0 は Swiper の最小コンテンツ幅によるグリッドはみ出しの打ち消し */
  .ec-historyRole { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; align-items: start; }
  .ec-historyRole .order-card { margin: 0; min-width: 0; }
  .ec-historyRole .pagination { grid-column: 1 / -1; }
  /* 商品画像は768pxで150px（SPは common.css の70px） */
  .order-card__row { grid-template-columns: 150px 1fr; }
  .order-card__thumb { width: 150px; }
}
@media (min-width: 1024px) {
  /* 商品画像は1024px以上で200px */
  .order-card__row { grid-template-columns: 200px 1fr; }
  .order-card__thumb { width: 200px; }
}