@charset "UTF-8";

/* =================================================================
 *  coen「最高のふだんぎ」Vol.1（2026 AW）
 *
 *  ・デザインカンプは横375pxのカラムで作成されているため、
 *    デザイン上の1pxを --px として定義し、全ての寸法をその倍数で指定する。
 *    SP  : カラム幅 = 100vw（--px = 100vw / 375）
 *    PC  : カラム幅 = 475px（--px = 475px / 375）※前回LP（DOD×coen）から継承
 *  ・コメント内の座標はカンプ（261002_確認用.pdf）上の数値（デザインpx）
 * ================================================================= */

:root {
  --ZenKaku: "Zen Kaku Gothic New", sans-serif;
  --Bodoni: "Bodoni Moda", "Times New Roman", serif;

  --bg-side: #e0dcd7;     /* PC左右の地色 */
  --txt: #5d5049;         /* 明るい地の上の文字色 */
  --pink: #ee8189;        /* Womens / 明るい地のBUY */
  --blue: #769aa6;        /* Mens */
  --yellow: #f3ec9c;      /* グレー地のBUY */
  --beige: #cfc3b8;       /* MVの coen ロゴ / AUTUMN&WINTER */

  /* 地のグラデーション（上→下）。ブロック境目で色が一致するよう繋いでいる */
  --gray-a: #a69e97;      /* グレー帯の上端 */
  --gray-b: #bdb7b0;      /* 詳細ブロック → 情報ブロックの境目 */
  --gray-c: #c9c4bd;      /* グレー帯の下端 */
  --light-a: #fcfbfa;
  --light-b: #e3dfdb;
  --light-c: #d7d1cc;
}


/*================================================
 *  common
 ================================================*/
html {
  font-size: 10px;
  scroll-behavior: smooth;
}

#coen_2610_fudangi {
  --px: calc(100vw / 375);
  --col: calc(375 * var(--px));

  font-family: var(--ZenKaku);
  color: var(--txt);
  font-size: calc(14 * var(--px));
  font-weight: 500;
  letter-spacing: 0.1em;
  line-height: 1.5;
  position: relative;
}

@media screen and (min-width:768px) {
  #coen_2610_fudangi {
    --px: calc(475px / 375);
  }
}

#coen_2610_fudangi::before {
  position: fixed;
  content: "";
  inset: 0;
  background: var(--bg-side);
  z-index: -1;
}

#coen_2610_fudangi a {
  text-decoration: none;
  transition: opacity .4s;
  color: inherit;
}

#coen_2610_fudangi a:hover {
  opacity: .7;
}

#coen_2610_fudangi img {
  display: block;
  width: 100%;
  height: auto;
}

#coen_2610_fudangi ul,
#coen_2610_fudangi ol {
  margin: 0;
  padding: 0;
}

#coen_2610_fudangi li {
  list-style: none;
}

*,
#coen_2610_fudangi * {
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

#coen_2610_fudangi h1,
#coen_2610_fudangi h2,
#coen_2610_fudangi h3,
#coen_2610_fudangi p {
  font-size: 1em;
  font-weight: inherit;
  margin: 0;
}

#coen_2610_fudangi .flex {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}

/* SPメニュー表示中は背面をスクロールさせない（html に付与。位置は保持される） */
html.no_scroll {
  overflow: hidden;
}


/*================================================
 *  3カラムレイアウト（前回LPから継承）
 ================================================*/
#coen_2610_fudangi main {
  position: relative;
  min-height: 100vh;
  /* sticky（フロートタブ・ドット）を効かせるため hidden ではなく clip */
  overflow-x: clip;
}

#coen_2610_fudangi .inner {
  max-width: 1440px;
  margin: 0 auto;
  position: relative;
}

#coen_2610_fudangi #contents {
  width: var(--col);
  flex-shrink: 0;
  box-shadow: 5px 10px 30px rgb(0 0 0 / 15%);
  position: relative;
  z-index: 2;
}

#coen_2610_fudangi .view_left,
#coen_2610_fudangi .view_right {
  width: calc((100% - var(--col)) / 2);
  position: relative;
}

#coen_2610_fudangi .view_left-inner,
#coen_2610_fudangi .view_right-inner {
  position: fixed;
  top: 0;
  height: 100vh;
  width: calc((100vw - var(--col)) / 2);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

#coen_2610_fudangi .view_left-inner {
  left: 0;
}

#coen_2610_fudangi .view_right-inner {
  right: 0;
}

/* 左カラム：白ロゴ */
#coen_2610_fudangi .side_logo {
  width: calc(275 * var(--px));
  max-width: 80%;
  flex-shrink: 0;
}

#coen_2610_fudangi .tab_menu {
  display: none;
}


/* ---- tablet ---- */
@media screen and (max-width:1023px) {
  #coen_2610_fudangi .inner {
    max-width: 100%;
    justify-content: flex-end;
    padding-right: max(20px, calc((100% - var(--col)) * 0.06));
  }

  #coen_2610_fudangi .view_right {
    display: none;
  }

  #coen_2610_fudangi .view_left {
    width: calc(100% - var(--col));
  }

  #coen_2610_fudangi .view_left-inner {
    width: calc(100vw - var(--col));
  }

  #coen_2610_fudangi .side_logo {
    width: calc(200 * var(--px));
  }

  #coen_2610_fudangi .tab_menu {
    display: block;
    margin-top: calc(40 * var(--px));
  }

  #coen_2610_fudangi .tab_menu .gnav_logo {
    display: none;
  }

  #coen_2610_fudangi .tab_menu .gnav {
    width: calc(225 * var(--px));
  }
}

/* ---- sp ---- */
@media screen and (max-width:767px) {
  #coen_2610_fudangi .inner {
    padding-right: 0;
  }

  #coen_2610_fudangi .view_left {
    display: none;
  }

  #coen_2610_fudangi #contents {
    box-shadow: none;
  }
}


/*================================================
 *  メニュー（PC右カラム / タブレット左カラム / SPメニュー 共通）
 ================================================*/
#coen_2610_fudangi .gnav {
  width: calc(190 * var(--px));
  max-width: 90%;
}

#coen_2610_fudangi .gnav_logo {
  width: calc(118 * var(--px));
  margin: 0 auto calc(42 * var(--px));
}

#coen_2610_fudangi .gnav_ttl {
  margin: 0 auto calc(16 * var(--px));
}

#coen_2610_fudangi .gnav_grp--w .gnav_ttl { width: calc(72 * var(--px)); }
#coen_2610_fudangi .gnav_grp--m .gnav_ttl { width: calc(48 * var(--px)); }

#coen_2610_fudangi .gnav_grp--m {
  margin-top: calc(36 * var(--px));
}

#coen_2610_fudangi .gnav_grp--w { color: var(--pink); }
#coen_2610_fudangi .gnav_grp--m { color: var(--blue); }

#coen_2610_fudangi .gnav li + li {
  margin-top: calc(10 * var(--px));
}

#coen_2610_fudangi .gnav li a {
  display: flex;
  align-items: center;
  min-height: calc(20 * var(--px));
}

#coen_2610_fudangi .gnav_num {
  flex-shrink: 0;
  width: calc(26 * var(--px));
  font-family: var(--Bodoni);
  font-size: calc(15 * var(--px));
  letter-spacing: 0;
  line-height: 1;
}

#coen_2610_fudangi .gnav_name {
  font-size: calc(10.5 * var(--px));
  font-weight: 700;
  letter-spacing: 0.12em;
  line-height: 1.35;
}

/* キャンペーン（Mensの下） */
#coen_2610_fudangi .gnav_ext {
  margin-top: calc(40 * var(--px));
  color: var(--txt);
}

#coen_2610_fudangi .gnav_ext li + li {
  margin-top: calc(22 * var(--px));
}

#coen_2610_fudangi .gnav_ext li a {
  display: block;
  min-height: 0;
}

#coen_2610_fudangi .gnav_ext_main,
#coen_2610_fudangi .gnav_ext_sub {
  display: block;
  font-weight: 700;
  letter-spacing: 0.12em;
  line-height: 1.35;
}

#coen_2610_fudangi .gnav_ext_main {
  font-size: calc(10.5 * var(--px));
}

#coen_2610_fudangi .gnav_ext_sub {
  font-size: calc(7.5 * var(--px));
}

#coen_2610_fudangi .gnav_ext_main + .gnav_ext_sub {
  margin-top: calc(4 * var(--px));
}

#coen_2610_fudangi .gnav_ext_sub + .gnav_ext_main {
  margin-top: calc(2 * var(--px));
}

/* 縦が短い画面ではメニュー全体を縮める */
@media screen and (min-width:768px) and (max-height:830px) {
  #coen_2610_fudangi .gnav {
    --px: min(calc(475px / 375), calc((100vh - 40px) / 620));
  }
}

/* タブレット：左カラムは白ロゴ（約175px）＋メニュー（ロゴなし 520px）で計算 */
@media screen and (min-width:768px) and (max-width:1023px) and (max-height:880px) {
  #coen_2610_fudangi .tab_menu .gnav {
    --px: min(calc(475px / 375), calc((100vh - 215px) / 520));
  }
}


/*================================================
 *  SPメニュー（ハンバーガー）
 ================================================*/
#coen_2610_fudangi #sp__nav {
  display: none;
}

@media screen and (max-width:767px) {
  #coen_2610_fudangi #sp__nav {
    display: block;
  }

  #coen_2610_fudangi .hamburger {
    position: fixed;
    top: calc(24 * var(--px));
    right: calc(16 * var(--px));
    width: calc(34 * var(--px));
    height: calc(14 * var(--px));
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
    z-index: 300;
  }

  #coen_2610_fudangi .hamburger__line {
    position: absolute;
    left: 0;
    width: 100%;
    height: 2px;
    background-color: var(--txt);
    transition: transform .4s ease-out, top .4s ease-out;
  }

  #coen_2610_fudangi .hamburger__line--1 { top: 0; }
  #coen_2610_fudangi .hamburger__line--2 { top: calc(100% - 2px); }

  #coen_2610_fudangi .nav_open .hamburger__line--1 {
    top: 50%;
    transform: rotate(30deg);
  }

  #coen_2610_fudangi .nav_open .hamburger__line--2 {
    top: 50%;
    transform: rotate(-30deg);
  }

  /* 背景：ホワイト85%透過（カンプ指示） */
  #coen_2610_fudangi .sp__menu {
    position: fixed;
    inset: 0;
    background: rgb(255 255 255 / 85%);
    z-index: 200;
    overflow-y: auto;
    opacity: 0;
    visibility: hidden;
    transition: opacity .4s ease-out, visibility .4s ease-out;
  }

  #coen_2610_fudangi .nav_open .sp__menu {
    opacity: 1;
    visibility: visible;
  }

  #coen_2610_fudangi .gnav--sp {
    position: relative;
    width: 100%;
    max-width: none;
    padding: calc(70 * var(--px)) calc(55 * var(--px)) calc(80 * var(--px));
  }

  #coen_2610_fudangi .gnav--sp .gnav_logo {
    width: calc(150 * var(--px));
    margin-bottom: calc(46 * var(--px));
  }

  #coen_2610_fudangi .gnav--sp .gnav_ttl {
    margin: 0 0 calc(22 * var(--px));
  }

  #coen_2610_fudangi .gnav--sp .gnav_grp--w .gnav_ttl { width: calc(98 * var(--px)); }
  #coen_2610_fudangi .gnav--sp .gnav_grp--m .gnav_ttl { width: calc(64 * var(--px)); }

  #coen_2610_fudangi .gnav--sp .gnav_grp--m {
    margin-top: calc(44 * var(--px));
  }

  #coen_2610_fudangi .gnav--sp li + li {
    margin-top: calc(16 * var(--px));
  }

  #coen_2610_fudangi .gnav--sp li a {
    min-height: calc(24 * var(--px));
  }

  #coen_2610_fudangi .gnav--sp .gnav_num {
    width: calc(37 * var(--px));
    font-size: calc(20 * var(--px));
    padding-left: calc(7 * var(--px));
  }

  #coen_2610_fudangi .gnav--sp .gnav_name {
    font-size: calc(13 * var(--px));
  }

  /* SPは番号に padding-left:7 があるので、キャンペーンも同じだけ下げて番号の左端に揃える */
  #coen_2610_fudangi .gnav--sp .gnav_ext {
    margin-top: calc(44 * var(--px));
    padding-left: calc(7 * var(--px));
  }

  #coen_2610_fudangi .gnav--sp .gnav_ext li + li {
    margin-top: calc(28 * var(--px));
  }

  #coen_2610_fudangi .gnav--sp .gnav_ext_main {
    font-size: calc(13 * var(--px));
  }

  #coen_2610_fudangi .gnav--sp .gnav_ext_sub {
    font-size: calc(9.5 * var(--px));
  }
}


/*================================================
 *  地のグラデーション
 *    縦：--from → --to（ブロック境目で色を一致させて継ぎ目を出さない）
 *    横：左側をわずかに明るく（カンプの斜めグラデーションの再現）
 ================================================*/
#coen_2610_fudangi .lead,
#coen_2610_fudangi .g_head,
#coen_2610_fudangi .info,
#coen_2610_fudangi .detail {
  background:
    linear-gradient(to right, rgb(255 255 255 / 8%), rgb(255 255 255 / 0%) 70%),
    linear-gradient(to bottom, var(--from), var(--to));
}

/* グレー帯：詳細(上半分) → 情報(下半分) */
#coen_2610_fudangi .detail--gray { --from: var(--gray-a); --to: var(--gray-b); }
#coen_2610_fudangi .info--gray   { --from: var(--gray-b); --to: var(--gray-c); }

/* 明るい帯：詳細(上半分) → 情報(下半分) */
#coen_2610_fudangi .detail--light { --from: var(--light-a); --to: var(--light-b); }
#coen_2610_fudangi .info--light   { --from: var(--light-b); --to: var(--light-c); }

/* リード＋Womens見出しはグレー帯の上半分、Mens見出しは明るい帯の途中 */
#coen_2610_fudangi .lead          { --from: var(--gray-a); --to: #bab3ac; }
#coen_2610_fudangi .g_head--w     { --from: #bab3ac; --to: var(--gray-b); }
#coen_2610_fudangi .g_head--m     { --from: var(--light-b); --to: var(--light-b); }


/*================================================
 *  MV / リード
 ================================================*/
#coen_2610_fudangi .lead {
  position: relative;
  /* カンプは1327。リード文下〜Womens見出しの間が空きすぎるため詰めている（2026-10-04 指示） */
  height: calc(1215 * var(--px));
}

#coen_2610_fudangi .mv {
  position: relative;
  height: calc(650 * var(--px));
}

#coen_2610_fudangi .mv_photo img {
  height: calc(650 * var(--px));
  object-fit: cover;
}

/* coen ロゴ：白ロゴ素材をマスクにしてベージュで塗る（MV用の色違い素材が無いため） */
#coen_2610_fudangi .mv_coen {
  position: absolute;
  top: calc(24 * var(--px));
  left: calc(16 * var(--px));
  width: calc(66 * var(--px));
  aspect-ratio: 320 / 61;
  background: var(--beige);
  -webkit-mask: url(src/img/coen_logo.png) no-repeat center / contain;
  mask: url(src/img/coen_logo.png) no-repeat center / contain;
}

/* 縦組みの AUTUMN & WINTER …（素材が無いためテキストで組んでいる） */
#coen_2610_fudangi .mv_season {
  position: absolute;
  top: calc(58 * var(--px));
  left: calc(15 * var(--px));
  writing-mode: vertical-rl;
  font-family: "Helvetica Neue", Arial, sans-serif;
  font-size: calc(9.6 * var(--px));
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1;
  color: var(--beige);
  white-space: nowrap;
}

#coen_2610_fudangi .mv_logo {
  position: absolute;
  top: calc(37 * var(--px));
  left: calc(116 * var(--px));
  width: calc(160 * var(--px));
}

/* メインコピー「毎日着たくなる、理由があります。」：写真とグレー地にまたがる */
#coen_2610_fudangi .mv_copy {
  position: absolute;
  top: calc(391 * var(--px));
  left: calc(21 * var(--px));
  width: calc(79 * var(--px));
  z-index: 2;
}

#coen_2610_fudangi .lead_txt {
  position: absolute;
  top: calc(733 * var(--px));
  left: calc(128 * var(--px));
  width: calc(205 * var(--px));
}


/*================================================
 *  フロートタブ（Womens / Mens）
 *    .floatRange の中でだけ画面下に追従する。
 *    本来の位置（リード直下）に来るまでは通常配置、
 *    以降は Mens の最後まで画面下に固定、範囲を抜けると一緒に流れる。
 ================================================*/
#coen_2610_fudangi .floatRange {
  --tab-h: calc(27.75 * var(--px));
  position: relative;
  /* タブが画面下に固定されている間、本来のタブ位置に見える地色（リード下端と同色） */
  background:
    linear-gradient(to right, rgb(255 255 255 / 8%), rgb(255 255 255 / 0%) 70%),
    #bab3ac;
}

#coen_2610_fudangi .tabbar {
  position: sticky;
  top: calc(100vh - var(--tab-h));
  top: calc(100dvh - var(--tab-h));
  z-index: 50;
  display: flex;
  height: var(--tab-h);
}

#coen_2610_fudangi .tabbar a {
  width: 50%;
}

#coen_2610_fudangi .tabbar a:hover {
  opacity: 1;
  filter: brightness(1.06);
}


/*================================================
 *  Womens / Mens 見出し
 ================================================*/
#coen_2610_fudangi .gender {
  position: relative;
}

#coen_2610_fudangi .g_head--w {
  padding: calc(70 * var(--px)) 0 calc(118 * var(--px)) calc(66 * var(--px)); /* カンプは121（同上） */
}

#coen_2610_fudangi .g_head--w .g_ttl { width: calc(226 * var(--px)); }

#coen_2610_fudangi .g_head--m {
  padding: calc(91 * var(--px)) 0 calc(175 * var(--px)) calc(117 * var(--px));
}

#coen_2610_fudangi .g_head--m .g_ttl { width: calc(146 * var(--px)); }


/*================================================
 *  現在位置ドット
 *    Womens / Mens それぞれのセクション内でだけ画面中央に追従。
 *    アクティブは common.js がスクロール位置から判定して付け替える。
 ================================================*/
#coen_2610_fudangi .dots {
  --dots-h: calc(141 * var(--px)); /* ドット5つ分の高さ（13×5 + 19×4） */
  position: sticky;
  top: calc(50vh - var(--dots-h) / 2);
  height: var(--dots-h);
  z-index: 40;
  pointer-events: none;
}

/* 見出しの横（カンプ位置）が初期位置。sticky の基準位置を見出し中央に合わせる */
/* 高さを持たせた上で負の margin-bottom で後続要素を引き上げ、レイアウトには影響させない
   （高さを持たせないとセクション末尾でドットがはみ出して次の枠に残る） */
#coen_2610_fudangi .gender--w .dots { margin-top: calc(24 * var(--px)); margin-bottom: calc(-24 * var(--px) - var(--dots-h)); }
#coen_2610_fudangi .gender--m .dots { margin-top: calc(45 * var(--px)); margin-bottom: calc(-45 * var(--px) - var(--dots-h)); }

#coen_2610_fudangi .dots_list {
  position: absolute;
  top: 0;
  right: calc(16 * var(--px));
  display: flex;
  flex-direction: column;
  gap: calc(19 * var(--px));
}

#coen_2610_fudangi .dots_list a {
  pointer-events: auto;
  display: block;
  width: calc(13 * var(--px));
  height: calc(13 * var(--px));
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 calc(3 * var(--px)) rgb(0 0 0 / 12%);
  transition: background-color .3s;
}

#coen_2610_fudangi .dots--w .is-active a { background: var(--pink); }
#coen_2610_fudangi .dots--m .is-active a { background: var(--blue); }


/*================================================
 *  商品情報ブロック
 ================================================*/
#coen_2610_fudangi .info {
  position: relative;
  padding-bottom: calc(41 * var(--px));
}

#coen_2610_fudangi .info--gray  { color: #fff; }
#coen_2610_fudangi .info--light { color: var(--txt); }

#coen_2610_fudangi .info_head {
  position: relative;
  height: calc(102 * var(--px));
}

/* 大きな番号は画像（アセット125〜134。Webフォントでは字形が再現できなかったため）。
   幅・左位置は数字ごとにカンプ実測。キャップハイトは全て約70.5 */
#coen_2610_fudangi .info_num {
  position: absolute;
  top: 0;
}

#coen_2610_fudangi .info_num--1 { left: calc(41.3 * var(--px)); width: calc(37 * var(--px)); }
#coen_2610_fudangi .info_num--2 { left: calc(36.5 * var(--px)); width: calc(46.3 * var(--px)); }
#coen_2610_fudangi .info_num--3 { left: calc(36.8 * var(--px)); width: calc(45.5 * var(--px)); top: calc(-1 * var(--px)); }
#coen_2610_fudangi .info_num--4 { left: calc(35.3 * var(--px)); width: calc(50.3 * var(--px)); }
#coen_2610_fudangi .info_num--5 { left: calc(37 * var(--px)); width: calc(46.3 * var(--px)); }

#coen_2610_fudangi .info_logo {
  position: absolute;
  top: calc(4 * var(--px));
  right: calc(43 * var(--px));
  width: calc(110 * var(--px));
}

#coen_2610_fudangi .info_name {
  text-align: center;
  font-size: calc(21 * var(--px));
  font-weight: 700;
  letter-spacing: 0.14em;
  line-height: calc(33 * var(--px));
  margin-top: calc(-6 * var(--px));
}

#coen_2610_fudangi .info_name small {
  font-size: 0.6em;
  letter-spacing: 0.05em;
  vertical-align: 0.2em;
}

#coen_2610_fudangi .info_meta {
  display: flex;
  justify-content: space-between;
  min-height: calc(118 * var(--px));
  margin: calc(13 * var(--px)) calc(45 * var(--px)) 0;
  border-top: 1px solid currentColor;
}

#coen_2610_fudangi .info--gray .info_meta {
  border-top-color: rgb(255 255 255 / 75%);
}

#coen_2610_fudangi .info_spec {
  padding: calc(26 * var(--px)) 0 0 calc(5 * var(--px));
}

/* サイズ（4つまで1行。5つ以上は3つで折り返す：カンプ準拠） */
#coen_2610_fudangi .info_size {
  display: flex;
  flex-wrap: wrap;
  gap: calc(12 * var(--px)) calc(11 * var(--px));
  width: calc(164 * var(--px));
}

#coen_2610_fudangi .info_size--wrap {
  width: calc(123 * var(--px));
}

#coen_2610_fudangi .info_size li {
  width: calc(30 * var(--px));
}

/* カラーチップ（1行4つ） */
#coen_2610_fudangi .info_color {
  display: flex;
  flex-wrap: wrap;
  row-gap: calc(15 * var(--px));
  width: calc(168 * var(--px));
  margin-top: calc(15 * var(--px));
}

#coen_2610_fudangi .info_color--5 {
  width: calc(210 * var(--px));
}

#coen_2610_fudangi .info_color li {
  width: calc(42 * var(--px));
  padding-left: calc(4 * var(--px));
}

#coen_2610_fudangi .info_color img,
#coen_2610_fudangi .info_color .sw {
  width: calc(22 * var(--px));
  height: calc(22 * var(--px));
}

/* 書き出し画像が欠けていた2色チップ（MOCA / RED）はCSSで描画 */
#coen_2610_fudangi .sw {
  display: block;
  border-radius: 50%;
  border: calc(1 * var(--px)) solid #231815;
}

#coen_2610_fudangi .sw--moca { background: linear-gradient(#6e3c2e 50%, #131d3c 50%); }
#coen_2610_fudangi .sw--red  { background: linear-gradient(#7f0000 50%, #d5cbad 50%); }

#coen_2610_fudangi .info_side {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

#coen_2610_fudangi .info_price {
  padding-top: calc(8 * var(--px));
  font-size: calc(23 * var(--px));
  font-weight: 400;
  letter-spacing: 0.08em;
  line-height: 1.2;
  margin-right: calc(-3 * var(--px));
}

#coen_2610_fudangi .info_buy {
  display: block;
  width: calc(81 * var(--px));
  margin-top: auto;
}


/*================================================
 *  メイン写真
 ================================================*/
#coen_2610_fudangi .photo img {
  aspect-ratio: 1500 / 1464;
  object-fit: cover;
}


/*================================================
 *  詳細ブロック（縦書きコピー＋写真2枚＋クレジット）
 *    --light：コピー左 / 写真右　--gray：写真左 / コピー右
 ================================================*/
#coen_2610_fudangi .detail {
  position: relative;
  padding-bottom: calc(110 * var(--px));
}

#coen_2610_fudangi .detail--gray  { color: #fff; }
#coen_2610_fudangi .detail--light { color: var(--txt); }

#coen_2610_fudangi .detail_body {
  position: relative;
  height: calc(var(--h) * var(--px));
}

/* 縦書きコピー（画像）。位置と幅は index.html の style="--x --y --w" */
#coen_2610_fudangi .detail_copy {
  position: absolute;
  top: calc(var(--y) * var(--px));
  left: calc(var(--x) * var(--px));
  width: calc(var(--w) * var(--px));
  z-index: 2;
}

#coen_2610_fudangi .detail_sub {
  position: absolute;
  width: calc(200 * var(--px));
  overflow: hidden;
}

#coen_2610_fudangi .detail_sub--1 {
  top: calc(62 * var(--px));
  aspect-ratio: 1500 / 1561;
}

#coen_2610_fudangi .detail_sub--2 {
  top: calc(460 * var(--px));
  aspect-ratio: 1500 / 2175;
}

#coen_2610_fudangi .detail--light .detail_sub { right: 0; }
#coen_2610_fudangi .detail--gray .detail_sub  { left: 0; }

#coen_2610_fudangi .detail_aw {
  position: absolute;
  top: calc(352 * var(--px));
  width: calc(121 * var(--px));
}

#coen_2610_fudangi .detail--light .detail_aw { left: calc(175 * var(--px)); }
#coen_2610_fudangi .detail--gray .detail_aw  { left: calc(81 * var(--px)); }

/* 画像切り替え（3秒ごとにクロスフェード） */
#coen_2610_fudangi .js-switch img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity 1s ease;
}

#coen_2610_fudangi .js-switch img + img { opacity: 0; }
#coen_2610_fudangi .js-switch.is-b img + img { opacity: 1; }

/* クレジット */
#coen_2610_fudangi .credit {
  margin-top: calc(62 * var(--px));
  padding: 0 calc(35 * var(--px)) 0 calc(32 * var(--px));
}

#coen_2610_fudangi .credit li {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: calc(10 * var(--px));
  font-size: calc(13.5 * var(--px));
  letter-spacing: 0.2em;
  line-height: calc(28.5 * var(--px));
}

#coen_2610_fudangi .credit_name {
  font-weight: 500;
}

#coen_2610_fudangi .credit_buy {
  flex-shrink: 0;
  font-size: calc(14 * var(--px));
  letter-spacing: 0.06em;
  line-height: 1.6;
  margin-bottom: calc(3 * var(--px));
  border-bottom: 1px solid currentColor;
}

#coen_2610_fudangi .detail--light .credit_buy { color: var(--pink); }
#coen_2610_fudangi .detail--gray .credit_buy  { color: var(--yellow); }

/* Mens最後の詳細はイベント枠との間を広めに（カンプ準拠） */
#coen_2610_fudangi #mens > .detail:last-child {
  padding-bottom: calc(150 * var(--px));
}


/*================================================
 *  スタッフスタイリング / プレゼントキャンペーン
 ================================================*/
#coen_2610_fudangi .event {
  position: relative;
  padding: calc(100 * var(--px)) 0 calc(92 * var(--px));
  text-align: center;
  background: linear-gradient(160deg, #f8f7f5 0%, #d9d4cf 100%);
}

#coen_2610_fudangi .event_deco {
  position: absolute;
  top: calc(14 * var(--px));
  left: calc(17 * var(--px));
  width: calc(45 * var(--px));
}

#coen_2610_fudangi .event_ttl {
  font-size: calc(20 * var(--px));
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1.5;
}

#coen_2610_fudangi .event_ttl--lg {
  font-size: calc(21 * var(--px));
  margin-top: calc(6 * var(--px));
}

#coen_2610_fudangi .event_sub {
  font-size: calc(15 * var(--px));
  font-weight: 700;
  letter-spacing: 0.06em;
  margin-top: calc(10 * var(--px));
}

#coen_2610_fudangi .event_sub2 {
  font-size: calc(16 * var(--px));
  font-weight: 700;
  letter-spacing: 0.06em;
}

#coen_2610_fudangi .event_link {
  margin-top: calc(14 * var(--px));
  font-size: calc(14.5 * var(--px));
  letter-spacing: 0.14em;
}

#coen_2610_fudangi .event_link a {
  color: var(--pink);
  border-bottom: 1px solid currentColor;
}

#coen_2610_fudangi .event_line {
  width: calc(27 * var(--px));
  height: 1px;
  margin: calc(46 * var(--px)) auto calc(46 * var(--px));
  border: 0;
  background: rgb(93 80 73 / 60%);
}


/*================================================
 *  footer
 ================================================*/
#coen_2610_fudangi #ft {
  height: calc(444 * var(--px));
  padding-top: calc(88 * var(--px));
  background: #c8c2bb;
}

#coen_2610_fudangi .ft_logo {
  width: calc(172 * var(--px));
  margin: 0 auto;
}

#coen_2610_fudangi .ft_aw {
  width: calc(150 * var(--px));
  margin: calc(67 * var(--px)) auto 0;
}

#coen_2610_fudangi .ft_coen {
  width: calc(89 * var(--px));
  margin: calc(69 * var(--px)) auto 0;
}


/*================================================
 *  animation
 *    fadeUp ：data-delighter で画面に入ったらフェードアップ
 *    reveal ：縦書きコピーを上から下へ書き出すように表示
 *             （参考：tabio 靴下マニア vol.25 の clip-path 演出）
 ================================================*/
#coen_2610_fudangi .fadeUp {
  opacity: 0;
  translate: 0 20px;
  transition: opacity .8s ease, translate .8s ease;
}

#coen_2610_fudangi .fadeUp.started {
  opacity: 1;
  translate: 0 0;
}

#coen_2610_fudangi .reveal {
  clip-path: inset(0 0 100% 0);
  transition: clip-path 1.6s cubic-bezier(.55, 0, .25, 1) .2s;
}

#coen_2610_fudangi .reveal.started {
  clip-path: inset(0 0 0 0);
}

@media (prefers-reduced-motion: reduce) {
  #coen_2610_fudangi .fadeUp,
  #coen_2610_fudangi .reveal {
    opacity: 1;
    translate: none;
    clip-path: none;
    transition: none;
  }

  #coen_2610_fudangi .js-switch img {
    transition: none;
  }
}