@charset "UTF-8";

/* =========================================================================
   JUNKO SHIMADA 49AV 2026 AW LOOK BOOK vol.1 (lookbook LP)
   - SP (767px以下): calc(● * (100vw / 375))  ／ PC (768px以上): rem (1rem=10px)
   - カスタムプロパティは .p-feature に適用（:root 不可）
   - 画像モザイクは PC=4カラム固定セル / SP=2カラム。画像は @2x 書き出しで
     タイルとアスペクト比が一致（別画像不要のため <picture> ではなく <img>）
   ========================================================================= */

/* ▽ パンくず下の余白（規約） ▽ */
@media only screen and (min-width: 768px) {
  .breadcrumb__list {
    padding-bottom: 1.6rem;
  }
}

/* ▽ カスタムプロパティ（.p-feature に適用） ▽ */
.p-feature {
  --js-black: #000;
  --js-white: #fff;
  --js-gray03: #575757;
  --js-gray02: #e3e3e3;
  --js-gray: #aaaaaa;
  --js-veil: rgba(0, 0, 0, .45);
  /* フォント（サイト共通 variables.css 登録済み。ローカルプレビュー用にフォールバック） */
  --js-eng: var(--helvetica-neue, "Helvetica Neue", Arial, sans-serif);
  --js-jp: var(--hirakaku, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", sans-serif);
}

/* ▽ 必須CSS（規約） ▽ */
.p-feature :where(img, svg) {
  width: 100%;
  height: auto;
}

/* =========================================================================
   レイアウト土台
   ========================================================================= */
.p-feature {
  background: var(--js-white);
  color: var(--js-black);
  overflow-x: hidden;
}

.lookbook {
  width: 100%;
}

/* =========================================================================
   モザイクギャラリー
   ========================================================================= */
.lookbook__gallery {
  display: grid;
  list-style: none;
  /* SP: 2カラム */
  grid-template-columns: repeat(2, 1fr);
  gap: calc(5 * (100vw / 375));
  padding: 0 calc(5 * (100vw / 375));
}

@media only screen and (min-width: 768px) {
  .lookbook__gallery {
    --gap: 1rem;
    --gw: min(90rem, calc(100vw - 4rem));
    /* コンテンツ幅900px相当・上限90rem */
    --colw: calc((var(--gw) - (var(--gap) * 3)) / 4);
    /* 4カラム時の1カラム幅 */
    width: var(--gw);
    margin-inline: auto;
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: calc(var(--colw) * 290 / 217.5);
    /* 基準行高（小タイル比） */
    gap: var(--gap);
    padding: 0;
  }
}

/* ▽ ルックタイル ▽ */
.look {
  position: relative;
  margin: 0;
  overflow: hidden;
  grid-column: var(--sp-col, auto);
  /* SP: フル幅タイルのみ 1 / -1 を指定 */
}

.look__link,
.look>img {
  display: block;
}

.look img {
  width: 100%;
  height: auto;
  /* SP: 画像高さは自然（アスペクト一致） */
  display: block;
}

@media only screen and (min-width: 768px) {
  .look {
    grid-column: var(--pc-col);
    /* PC: 明示配置 */
    grid-row: var(--pc-row);
  }

  .look img {
    height: 100%;
    /* PC: 固定セルを埋める */
    object-fit: cover;
  }
}

/* =========================================================================
   「+」トグル & クレジット（灰ベール + 商品情報）
   ========================================================================= */
.look__toggle {
  position: absolute;
  right: calc(8 * (100vw / 375));
  bottom: calc(8 * (100vw / 375));
  width: calc(15 * (100vw / 375));
  height: calc(15 * (100vw / 375));
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  z-index: 3;
}

/* 「+」を2本の線で描画。開くと縦線を回転させて「-」にする */
.look__toggle::before,
.look__toggle::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 1px;
  background: #989898;

  transform: translate(-50%, -50%);
  transition: all .3s ease;
}

.look__toggle::after {
  transform: translate(-50%, -50%) rotate(90deg);
}

.look.is-open .look__toggle::after {
  transform: translate(-50%, -50%) rotate(0deg);
  /* 縦線→横線＝「-」 */
}

.look.is-open .look__toggle::before,
.look.is-open .look__toggle::after {
  background: var(--js-white);
}

@media only screen and (min-width: 768px) {
  .look__toggle {
    right: 1rem;
    bottom: 1rem;
    width: 1.5rem;
    height: 1.5rem;
  }
}

/* ▽ クレジット本体（灰ベール + 左下テキスト） ▽ */
.look__credit {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  /* クレジットが多くタイル高さを超えた場合は内部スクロール（先頭行が見切れないように） */
  padding: calc(8 * (100vw / 375));
  /* +ボタンとの重なり回避 */
  background: var(--js-veil);
  color: var(--js-white);
  font-family: var(--js-eng);
  opacity: 0;
  visibility: hidden;
  transition: opacity .5s ease, visibility .5s ease;
  z-index: 2;
}

.look.is-open .look__credit {
  opacity: 1;
  visibility: visible;
}

@media only screen and (min-width: 768px) {
  .look__credit {
    padding: 0.7rem;
  }
}

.look__credit-list {
  list-style: none;
  width: 100%;
  text-align: right;
  margin-top: auto;
  /* 通常は下寄せ（デザイン踏襲）。溢れた時は auto が 0 になり上から表示＝先頭行が見切れない */
}

@media screen and (max-width: 767px) {
  .look__credit-list {
    width: fit-content;
    margin-top: 0;
  }

  .look-big .look__credit-list {
    width: fit-content;
    margin-top: 0;
  }
}

@media screen and (min-width: 768px) {
  .look__credit-list {
    width: fit-content;
  }

  .look-big .look__credit-list {
    width: fit-content;
  }
}

.look__credit-item {
  font-size: calc(12 * (100vw / 375));
  line-height: 1.5;
  letter-spacing: .02em;
}

.look__credit-item+.look__credit-item {
  margin-top: calc(8 * (100vw / 375));
}

@media only screen and (min-width: 768px) {
  .look__credit-item {
    font-size: 1.2rem;
  }

  .look__credit-item+.look__credit-item {
    margin-top: .7rem;
  }
}

/* ▽ 1行: ラベル(テキスト・非クリック) + タグ(BUY/INFO のみクリック可) ▽ */
.look__credit-label {
  color: var(--js-white);
  margin-right: calc(10 * (100vw / 375));
}

.look__buy,
.look__info {
  display: inline-flex;
  align-items: center;
  vertical-align: middle;
  color: var(--js-white);
  text-decoration: none;
  background: transparent;
  border: 0;
  padding: 0;
  font-family: inherit;
  font-size: inherit;
  letter-spacing: inherit;
  cursor: pointer;
}

@media only screen and (min-width: 768px) {
  .look__credit-label {
    margin-right: .7rem;
  }
}

/* ▽ BUY / INFO タグ ▽ */
.look__tag {
  display: inline-block;
  border: 1px solid var(--js-white);
  padding: calc(0 * (100vw / 375)) calc(5 * (100vw / 375));
  font-size: calc(12 * (100vw / 375));
  line-height: 1.4;
  letter-spacing: .05em;
  white-space: nowrap;
}

.look__buy .look__tag {
  padding: calc(0 * (100vw / 375)) calc(7 * (100vw / 375));
}

@media only screen and (min-width: 768px) {
  .look__tag {
    padding: 0rem 0.5rem;
    font-size: 1.2rem;
  }

  .look__buy .look__tag {
    padding: 0rem 0.7rem;
  }
}

/* ▽ INFO 展開（Item Code / On Sale）：アコーディオン ▽ */
.look__info-detail {
  position: relative;
  max-height: 0;
  overflow: hidden;
  transition: max-height .35s ease;
}

@media screen and (max-width: 767px) {
  .look__info-detail::before {
    position: absolute;
    content: "";
    width: 1px;
    height: 0px;
    background: #fff;
    right: calc(0* (100vw /375));
    top: calc(8* (100vw /375));
    transition: height .35s ease;
  }

  .look__credit-item.is-open .look__info-detail::before {
    height: 90%;
  }
}

@media screen and (min-width: 768px) {

  .look__info-detail::before {
    position: absolute;
    content: "";
    width: 1px;
    height: 0px;
    background: #fff;
    right: calc(0* (100vw /375));
    bottom: calc(0* (100vw /375));
    transition: height .35s ease;
    transform-origin: bottom;
  }

  .look__credit-item.is-open .look__info-detail::before {
    height: 80%;
  }
}

.look__info-detail p {
  padding-top: calc(3 * (100vw / 375));
  padding-left: calc(4 * (100vw / 375));
  padding-right: calc(9* (100vw /375));
  font-size: calc(12 * (100vw / 375));
  line-height: 1.5;
}

@media only screen and (min-width: 768px) {
  .look__info-detail p {
    padding-top: .3rem;
    padding-right: 0.9rem;
    padding-left: .4rem;
    font-size: 1.2rem;
  }
}

/* =========================================================================
   タイトルカード（黒地・白文字。グリッド内の1タイル）
   ========================================================================= */
.look--title {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: calc(200 * (100vw / 375));
  /* SP: バナー高さ確保（PCはグリッドセルが規定） */
  background: var(--js-black);
  color: var(--js-white);
  text-align: center;
  font-family: var(--js-eng);
  overflow: hidden;
}

@media only screen and (min-width: 768px) {
  .look--title {
    min-height: 0;
  }
}

.look--title .look__title-brand {
  font-size: calc(22 * (100vw / 375));
  font-weight: 700;
  letter-spacing: .06em;
  line-height: 1.2;
}

.look--title .look__title-sub {
  margin-top: calc(6 * (100vw / 375));
  font-size: calc(9 * (100vw / 375));
  font-weight: 700;
  letter-spacing: .3em;
}

.look--title .look__title-season {
  margin-top: calc(20 * (100vw / 375));
  font-size: calc(12 * (100vw / 375));
  font-weight: 700;
  letter-spacing: .18em;
}

@media only screen and (min-width: 768px) {
  .look--title .look__title-brand {
    font-size: 2.8rem;
  }

  .look--title .look__title-sub {
    margin-top: .8rem;
    font-size: 1.1rem;
  }

  .look--title .look__title-season {
    margin-top: 2.4rem;
    font-size: 1.5rem;
  }
}

/* =========================================================================
   ボタン群（NEW ARRIVALS / TOP）
   ========================================================================= */
.lookbook__buttons {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(16 * (100vw / 375));
  margin: calc(48 * (100vw / 375)) auto;
  padding: 0 calc(5 * (100vw / 375));
}

.c-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(266 * (100vw / 375));
  max-width: 100%;
  height: calc(50 * (100vw / 375));
  font-family: var(--js-eng);
  font-size: calc(13 * (100vw / 375));
  letter-spacing: .15em;
  text-decoration: none;
  transition: opacity .3s ease;
}

.c-btn:hover {
  opacity: .75;
}

.c-btn--fill {
  background: var(--js-black);
  color: var(--js-white);
}

.c-btn--outline {
  background: var(--js-white);
  color: var(--js-black);
  border: 1px solid var(--js-black);
}

@media only screen and (min-width: 768px) {
  .lookbook__buttons {
    gap: 2rem;
    margin: 8rem auto;
    padding: 0;
  }

  .c-btn {
    width: 34.5rem;
    height: 6rem;
    font-size: 1.4rem;
  }
}

/* =========================================================================
   アーカイブ
   ========================================================================= */
.archive {
  max-width: 108rem;
  /* 1040px + 左右 padding 2rem×2 = 1080px。実効コンテンツ幅1040pxを維持 */
  margin: 0 auto;
  padding: 0 calc(15 * (100vw / 375)) calc(60 * (100vw / 375));
}

.archive__heading {
  text-align: center;
  font-family: var(--js-eng);
  font-size: calc(15 * (100vw / 375));
  letter-spacing: .12em;
  padding: calc(20 * (100vw / 375)) 0;
  border-bottom: 1px solid var(--js-black);
}

.archive__list {
  list-style: none;
  display: grid;
  grid-template-columns: 1fr;
  /* SP: 1列 */
}

.archive__item {
  border-bottom: 1px solid var(--js-gray02);
}

.archive__link {
  position: relative;
  display: flex;
  align-items: center;
  gap: calc(10 * (100vw / 375));
  padding: calc(14 * (100vw / 375)) calc(6 * (100vw / 375));
  font-family: var(--js-eng);
  font-size: calc(12.5 * (100vw / 375));
  letter-spacing: .06em;
  color: var(--js-black);
  text-decoration: none;
  transition: opacity .3s ease;
}

.archive__link:hover {
  opacity: .6;
}

/* 円形の→アイコン */
.archive__link::before {
  content: "";
  flex: 0 0 auto;
  width: calc(16 * (100vw / 375));
  height: calc(16 * (100vw / 375));
  border-radius: 50%;
  background: var(--js-black) no-repeat center / calc(7 * (100vw / 375));
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath d='M2 1l3 3-3 3' fill='none' stroke='%23fff' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

@media only screen and (min-width: 768px) {
  .archive {
    padding: 0 2rem 8rem;
  }

  .archive__heading {
    font-size: 2rem;
    padding: 3rem 0;
  }

  .archive__list {
    grid-template-columns: 1fr 1fr;
    /* PC: 2列 */
    column-gap: 4rem;
  }

  .archive__link {
    gap: 1.2rem;
    padding: 1.6rem .4rem;
    font-size: 1.5rem;
  }

  .archive__link::before {
    width: 2rem;
    height: 2rem;
    background-size: .9rem;
  }
}

/* =========================================================================
   ページトップへ戻る
   ========================================================================= */
.c-pagetop {
  position: fixed;
  right: calc(12 * (100vw / 375));
  bottom: calc(12 * (100vw / 375));
  width: calc(44 * (100vw / 375));
  height: calc(44 * (100vw / 375));
  border: 1px solid var(--js-black);
  background: var(--js-white);
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transition: opacity .3s ease, visibility .3s ease;
  z-index: 20;
}

.c-pagetop.is-visible {
  opacity: 1;
  visibility: visible;
}

.c-pagetop::before {
  content: "";
  position: absolute;
  top: 55%;
  left: 50%;
  width: calc(10 * (100vw / 375));
  height: calc(10 * (100vw / 375));
  border-top: 1px solid var(--js-black);
  border-right: 1px solid var(--js-black);
  transform: translate(-50%, -50%) rotate(-45deg);
}

@media only screen and (min-width: 768px) {
  .c-pagetop {
    right: 3rem;
    bottom: 3rem;
    width: 5rem;
    height: 5rem;
  }

  .c-pagetop::before {
    width: 1.1rem;
    height: 1.1rem;
  }
}