/* ============================================================
   26aw_秋の新作コレクション（メンズ）
   AOY_design-system の foundations / spec / button 定義をベースに、
   本ページ専用のアクセントカラー（ダークレッド）を direct指定で使用。
   ============================================================ */

:root {
  /* foundations.md 準拠トークン（このページで使用する分のみ） */
  --color-neutral-white: #FFFFFF;
  --color-neutral-off-black: #333333;
  --color-neutral-solid-gray-100: #E6E6E6;
  --color-neutral-solid-gray-200: #CCCCCC;

  --font-size-h2: 24px;
  --font-size-h3: 20px;
  --font-size-body: 16px;
  --font-size-small: 13px;
  --font-size-product: 14px;
  --font-size-price: 16px;

  --font-weight-400: 400;
  --font-weight-500: 500;
  --font-weight-700: 700;

  --space-8: 8px;
  --space-12: 12px;
  --space-16: 16px;
  --space-24: 24px;
  --space-32: 32px;
  --space-40: 40px;
  --space-48: 48px;

  --section-space-md: 128px;

  --layout-container: 1200px;
  --layout-container-narrow: 980px;

  /* ページ専用アクセントカラー（direct指定：秋冬キャンペーンのダークレッド） */
  --c26aw-primary: #5D0E0E;
  --c26aw-bg-page: #F4EEDF;
  --c26aw-bg-cream: #EEE7D7;
  --c26aw-diagonal-pc: 150px;
  --c26aw-diagonal-sp: 80px;
}

@media (max-width: 767px) {
  :root {
    --font-size-h2: 5.72vw;
    --font-size-h3: 4.68vw;
    --font-size-body: 3.64vw;
    --font-size-small: 2.86vw;
    --font-size-product: 3.38vw;

    --section-space-md: 16.66vw;

    --layout-container: 89.6vw;
    --layout-container-narrow: 89.6vw;

    --space-8: 2.08vw;
    --space-12: 3.12vw;
    --space-16: 4.16vw;
    --space-24: 6.25vw;
    --space-32: 8.33vw;
    --space-40: 10.41vw;
    --space-48: 12.5vw;
  }
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: "Noto Sans JP", sans-serif;
  color: var(--color-neutral-off-black);
  background: var(--c26aw-bg-page);
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { text-decoration: none; color: inherit; }
ul { list-style: none; margin: 0; padding: 0; }
p { margin: 0; }

.pc { display: block; }
.sp { display: none; }
@media (max-width: 767px) {
  .pc { display: none; }
  .sp { display: block; }
}

.content-wrapper {
  max-width: 100%;
  margin: 0 auto;
}
.content-wrapper-narrow {
  width: var(--layout-container-narrow);
  max-width: 100%;
  margin: 0 auto;
}
.page{
  background: var(--c26aw-bg-page);
}

/* ---------- Header / Footer（画像として実装） ---------- */
.site-header img,
.site-footer img { width: 100%; height: auto; }

/* ---------- KV ---------- */
.kv { margin: 0; font-size: 0; line-height: 0; }
.kv img { width: 100%; height: auto; }

/* ---------- アンカーナビ（anchor_simple-A/list：本ページはダークレッド指定） ---------- */
.anchor-nav { padding: 60px 0; }
.anchor-a-list-ladies{
  width: 785px !important;
}
.anchor-a-list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 980px;
  max-width: 100%;
  margin: 0 auto;
}
.anchor-a {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 190px;
  height: 54px;
  padding-bottom: 14px;
  background: var(--color-neutral-white);
  border: 1px solid var(--c26aw-primary);
  color: var(--c26aw-primary);
  font-family: "Noto Sans JP", sans-serif;
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-700);
  line-height: 1.6;
  text-align: center;
  cursor: pointer;
}
.anchor-a::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 10px;
  width: 8px;
  height: 8px;
  border-right: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
  transform: translateX(-50%) rotate(45deg);
}
.anchor-a:hover { opacity: 0.8; }
@media (max-width: 767px) {
  .anchor-nav { padding: 10.4vw 0; }
  .anchor-a-list-ladies{
    width: 89.6vw !important;
  }
  .anchor-a-list { justify-content: flex-start; gap: 2.1vw; width: 89.6vw; }
  .anchor-a { width: 43.75vw; font-size: 3.64vw; height: 14vw;}
}

/* ---------- 下取りクーポン プロモ ---------- */
.promo {
  padding-bottom: 40px;
  text-align: center;
}
.promo-heading {
  max-width: 630px;
  margin: 0 auto 16px;
}

.promo-banner { display: block; width: 880px; max-width: 100%; margin: 0 auto; }
.promo-banner img { width: 100%; height: auto; }
.promo-banner:hover { opacity: 0.8; }
@media (max-width: 767px) {
  .promo { padding-bottom: 15.6vw; }
  .promo-heading { 
    max-width: 63vw;
   }
  .promo-banner { width: 89.6vw; }
}

/* ---------- レディースはこちら ---------- */
.ladies-link {
  padding: 88px 0 128px;
  text-align: center;
}
.ladies-link-heading {
  font-weight: var(--font-weight-700);
  font-size: var(--font-size-h3);
  color: var(--c26aw-primary);
  margin-bottom: var(--space-16);
}
.ladies-link-banner { display: block; width: 400px; max-width: 100%; margin: 0 auto; }
.ladies-link-banner img { width: 100%; height: 210px; object-fit: cover; }
.ladies-link-banner:hover { opacity: 0.8; }
@media (max-width: 767px) {
  .ladies-link { padding: 1.04vw 0 16.66vw; }
  .ladies-link-banner { width: 77.08vw; }
  .ladies-link-banner img { height: 40.62vw; }
  .ladies-link-heading{ font-size: 5.2vw; }
}

/* ============================================================
   商品セクション（New Arrival 01〜07）共通
   ============================================================ */
.product-section { margin-top: 0; }

.product-panel { position: relative; }
.product-section.-stripe .product-panel {
  padding: var(--c26aw-diagonal-pc) 0;
}
/* 斜め形状は product-panel 自身のボックス内（top:0 / bottom:0）に収め、
   前後セクションへはみ出さないようにする（はみ出すと重なって隠れる） */
.product-section.-stripe .product-panel::before,
.product-section.-stripe .product-panel::after {
  content: "";
  position: absolute;
  left: 0;
  width: 100%;
  height: var(--c26aw-diagonal-pc);
  background: var(--c26aw-bg-cream);
}
.product-section.-stripe .product-panel::before {
  top: 0;
  clip-path: polygon(0 100%, 100% 0, 100% 100%);
}
.product-section.-stripe .product-panel::after {
  bottom: 0;
  clip-path: polygon(0 0, 0 100%, 100% 0);
}
.product-panel__inner { padding: 100px 0; }
.product-section.-stripe .product-panel__inner { background: var(--c26aw-bg-cream); }
@media (max-width: 767px) {
  .product-section.-stripe .product-panel { padding: var(--c26aw-diagonal-sp) 0; }
  .product-section.-stripe .product-panel::before,
  .product-section.-stripe .product-panel::after { height: var(--c26aw-diagonal-sp); }
  .product-panel__inner { padding: 48px 0; }
}

/* 1つの New Arrival 番号の下に2商品がぶら下がる複合セクション用
   （レディース「みんなのスーツ／ブラウス」「美ジ楽スーツ／ブラウス」） */
.product-subitem + .product-subitem { margin-top: var(--space-48); }

.product-inner {
  display: flex;
  align-items: center;
  gap: 32px;
  width: 980px;
  max-width: 100%;
  margin: 0 auto;
}
.product-intro {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-24);
  width: 528px;
  max-width: 100%;
  color: var(--c26aw-primary);
  text-align: center;
}
.product-visual { flex: none; width: 420px; max-width: 100%; }
.product-visual img { width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; }

@media (max-width: 767px) {
  .product-inner { flex-direction: column; gap: 6.25vw; width: 89.5vw; }
  .product-intro { width: 100%; }
  .product-visual { width: 89.6vw; }
}

/* New Arrival 見出し番号 */
.product-index {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.product-index__label {
  font-family: "Playfair Display", serif;
  font-weight: var(--font-weight-500);
  font-size: 14px;
  line-height: 1;
  letter-spacing: 0.02em;
}
.product-index__num {
  font-family: "Playfair Display", serif;
  font-weight: var(--font-weight-700);
  font-size: 80px;
  line-height: 1;
  margin-top: -12px;
}

.product-lead {
  font-weight: var(--font-weight-500);
  font-size: var(--font-size-body);
  line-height: 1.6;
}
.product-lead__note { font-size: var(--font-size-small); font-weight: var(--font-weight-500); }

.product-logo { max-width: 100%; height: auto; }
.minna-suit-logo{
  width: 330px;
}
.control-logo{
  width: 315px;
}
.flexarm-logo{
  width: 250px;
}
.relive-logo{
  width: 305px;
}
.actibiz-logo{
  width: 235px;
}
.recovery-logo{
  width: 280px;
}
.minna-blouse-logo{
  width: 384px;
}
.biziraku-logo{
  width: 285px;
}
.biziraku-blouse-logo{
  width: 339px;
}
@media (max-width: 767px) {
  .minna-suit-logo{
    width: 68.75vw;
  }
  .control-logo{
    width: 65.6vw;
  }
  .flexarm-logo{
    width: 52.1vw;
  }
  .relive-logo{
    width: 63.5vw;
  }
  .actibiz-logo{
    width: 49vw;
  }
  .recovery-logo{
    width: 58.3vw;
  }
  .minna-blouse-logo{
    width: 79.9vw;
  }
  .biziraku-logo{
    width: 59.37vw;
  }
  .biziraku-blouse-logo{
    width: 70.57vw;
  }
}

.product-title {
  font-weight: var(--font-weight-700);
  font-size: var(--font-size-h3);
  color: var(--c26aw-primary);
  line-height: 1.6;
  margin: 0;
}
.product-note {
  font-weight: var(--font-weight-400);
  font-size: var(--font-size-small);
  line-height: 1.6;
  margin-top: var(--space-4, 4px);
}
.product-desc {
  font-weight: var(--font-weight-500);
  font-size: var(--font-size-body);
  line-height: 1.6;
}

/* NON-IRON MAX（直接指定：h1スケール外の見出し） */
.product-title-en {
  font-weight: var(--font-weight-700);
  font-size: 40px;
  line-height: 1.6;
  white-space: nowrap;
}
@media (max-width: 767px) {
  .product-title-en { font-size: 8.33vw; white-space: normal; }
}

/* 一般医療機器バッジ（リカバリーウェア） */
.product-badge-row {
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
}
.product-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px 8px;
  border: 1px solid var(--c26aw-primary);
  font-weight: var(--font-weight-500);
  font-size: var(--font-size-body);
  white-space: nowrap;
}
.product-badge-note {
  font-weight: var(--font-weight-400);
  font-size: var(--font-size-small);
  line-height: 1.6;
  text-align: left;
}
@media (max-width: 767px) {
  .product-badge-row {
    gap: 2.6vw;
  }
  .product-badge {
    padding: 1.04vw 2.08vw;
  }
}

/* ---------- 素材・機能訴求（品質写真列） ---------- */
/* 画面幅に応じて自然に折り返す（固定で1列縦積みにはしない） */
.quality-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: center;
  gap: var(--space-40);
  margin-top: var(--space-48);
}
.quality-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-8);
  width: 165px;
  flex: none;
}
.quality-item img {
  width: 165px;
  height: 113px;
  object-fit: cover;
}
.quality-item p {
  font-size: var(--font-size-body);
  line-height: 1.6;
  text-align: center;
  color: var(--color-neutral-off-black);
}
@media (max-width: 767px) {
  .quality-row {
    gap: 6.25vw; 
    margin: 12.5vw auto 0;
    flex-direction: column;
    align-items: center;
  }
  .quality-item {
    width: 100%;
  }
  .quality-item img {
    width: 43vw;
    height: 29.4vw;
  }
}

/* ---------- 素材アップ ノートボックス（リライブ） ---------- */
.note-box {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-16);
  margin-top: var(--space-48);
}
.note-box img { width: 165px; height: 113px; object-fit: cover; }
.note-box p {
  font-size: var(--font-size-body);
  line-height: 1.6;
  color: var(--color-neutral-off-black);
}
@media (max-width: 767px) {
  .note-box { flex-direction: column; gap: var(--space-8); margin-top: var(--space-24); text-align: center; }
  .note-box img{
    width: 43vw;
    height: 29.4vw;
  }
}

/* ============================================================
   spec/item-list（components/spec.md 準拠）
   ============================================================ */
.product-spec { margin-top: var(--space-48); text-align: center; }

.spec-slider {
    position: relative;
    width: 90%;
    max-width: 1200px;
    margin: 0 auto;
}

.spec-slider__viewport {
    width: 100%;
    overflow: hidden;
}

.spec-item-list {
    display: flex;
    gap: 20px;
    transition: transform 0.4s ease;
}

/* 5枚表示 */
.spec-item {
    flex: 0 0 calc((100% - 80px) / 5);
    min-width: 0;
    text-decoration: none;
    color: #000;
}

.spec-item__image {
    display: block;
    width: 100%;
    height: auto;
}

.spec-item__name {
    margin: 10px 0 0;
}

.spec-item__price {
    margin: 5px 0 0;
}


/* ボタン */
.spec-slider__prev,
.spec-slider__next {
    position: absolute;
    top: 42%;
    z-index: 10;

    width: 40px;
    height: 40px;

    border: none;
    border-radius: 50%;

    background: #fff;
    cursor: pointer;

    transform: translateY(-50%);
}

.spec-slider__prev {
    left: -4%;
}

.spec-slider__next {
    right: -4%;
}


/* PC画面が少し狭くなった場合 */
@media screen and (max-width: 1200px) {

    .spec-item-list {
        gap: 15px;
    }

    .spec-item {
        flex-basis: calc((100% - 60px) / 5);
    }

}
.spec-item__image.-comingsoon {
  background: var(--color-neutral-solid-gray-100);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: var(--color-neutral-solid-gray-400, #999);
  font-size: 20px;
  font-weight: var(--font-weight-500);
  line-height: 1.4;
}
.spec-item__name {
  width: 100%;
  padding-top: 6px;
  font-size: var(--font-size-product);
  font-weight: var(--font-weight-400);
  line-height: 1.6;
  text-align: center;
  word-break: break-word;
}
.spec-item__price {
  width: 100%;
  padding-top: 6px;
  font-size: var(--font-size-price);
  font-weight: var(--font-weight-700);
  line-height: 1.6;
  text-align: center;
}
@media (max-width: 767px) {
  .spec-item-list {
    justify-content: flex-start;
    gap: var(--space-16);
    width: 100%;
    overflow-x: auto;
    /* 横スクロールバーは表示しない */
    -ms-overflow-style: none;
    scrollbar-width: none;
  }
  .spec-item-list::-webkit-scrollbar { display: none; }
  .spec-item { flex: none; width: 39.58vw; }
  .spec-item__name { padding-top: var(--space-8); font-size: 13px; }
  .spec-item__price { padding-top: var(--space-8); }
  .spec-item-list.-center {
    justify-content: center;
    gap: var(--space-16);
    padding-left: 0;
    overflow-x: visible;
  }
}

/* ---------- もっと見るボタン（本ページ専用："btn" node実測値） ---------- */
.btn-more {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 476px;
  max-width: 100%;
  height: 70px;
  margin: var(--space-32) auto 0;
  background: var(--color-neutral-white);
  border: 1px solid var(--color-neutral-off-black);
  color: var(--color-neutral-off-black);
  font-family: "Noto Sans JP", sans-serif;
  font-weight: var(--font-weight-700);
  font-size: var(--font-size-body);
  text-align: center;
}
.btn-more::after {
  content: "";
  background-image: url("/ec/img/usr/pg/campaign/aw-newarrival/vector.png");
  background-repeat: no-repeat;
  background-size: cover;
  position: absolute;
  right: 33px;
  top: 39%;
  width: 8px;
  height: 16px;
}
.btn-more:hover { opacity: 0.8; }
@media (max-width: 767px) {
  .btn-more {
    width: 77.08vw;
    height: 14.58vw;
    margin-top: var(--space-24);
    /* 右側の矢印分の余白を確保し、文字と重ならないようにする */
    padding: 1.04vw 8.85vw 1.04vw 3.64vw;
    line-height: 1.4;
  }
  .btn-more::after { right: 6.64vw; }
}