@charset "UTF-8";

/* =================================================================
 *  coen Meets DOD “Play in the Park” (2026 AW / 第二弾)
 *
 *  ・デザインカンプは横375pxのカラムで作成されているため、
 *    デザイン上の1pxを --px として定義し、全ての寸法をその倍数で指定する。
 *    SP  : カラム幅 = 100vw（--px = 100vw / 375）
 *    PC  : カラム幅 = 475px（--px = 475px / 375）
 * ================================================================= */

:root {
  --ZenKaku: "Zen Kaku Gothic New", sans-serif;

  --orange: #ec722e;
  --green-dark: #008e5d;
  --green-light: #7eb676;
  --green-text: #055643;
  --cream: #efeace;

  scroll-padding-top: 5em;
}


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

#coen_2604_dod {
  /* デザイン基準：カラム幅375px / 基本文字サイズ15px */
  --px: calc(100vw / 375);
  --col: calc(375 * var(--px));

  font-family: var(--ZenKaku);
  color: #fff;
  font-size: calc(15 * var(--px));
  font-weight: 500;
  letter-spacing: 0.1em;
  line-height: 1.5;
  position: relative;
  scroll-behavior: smooth;
}

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

#coen_2604_dod::before {
  position: fixed;
  content: "";
  inset: 0;
  width: 100%;
  height: 100%;
  background: var(--orange);
  z-index: -1;
}

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

#coen_2604_dod a:hover {
  opacity: .75;
}

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

#coen_2604_dod ul,
#coen_2604_dod ol,
#coen_2604_dod dl {
  margin: 0;
}

#coen_2604_dod ul li {
  list-style: none;
  margin-left: 0;
}

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

#coen_2604_dod h1,
#coen_2604_dod h2,
#coen_2604_dod h3,
#coen_2604_dod h4 {
  font-size: 1em;
  margin: 0;
}

#coen_2604_dod p {
  margin: 0;
}

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

#coen_2604_dod.no_scroll {
  overflow: hidden;
  height: 100vh;
}


/*================================================
 *  3カラムレイアウト
 ================================================*/
#coen_2604_dod main {
  position: relative;
  min-height: 100vh;
  overflow-x: clip;
}

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

/* ---- 中央（コンテンツ） ---- */
#coen_2604_dod #contents {
  width: var(--col);
  flex-shrink: 0;
  box-shadow: 5px 10px 30px rgb(0 0 0 / 20%);
  position: relative;
  z-index: 2;
}

/* ---- 左右カラム ---- */
#coen_2604_dod .view_left,
#coen_2604_dod .view_right {
  width: calc((100% - var(--col)) / 2);
  position: relative;
}

#coen_2604_dod .view_left-inner,
#coen_2604_dod .view_right-inner {
  position: fixed;
  top: 0;
  height: 100vh;
  /* #contents の実際の画面上の端（(100vw - col)/2）に一致する幅。
     1440pxで頭打ちにしていた旧実装だと、1440px超のワイド画面で
     この余白領域の外側にさらに空白ができ、中身がエリア中央からずれていた。
     min(100vw,1440px) をやめ、実ビューポート幅から直接算出することで、
     どのウィンドウ幅でも #contents の外側＝このエリアぴったりになる。 */
  width: calc((100vw - var(--col)) / 2);
  /* 各エリアに対して上下左右中央 */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

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

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

/* 左カラム：タイトルロゴ＋木 */
#coen_2604_dod .view_left .nav_ttl {
  width: calc(300 * var(--px));
  max-width: 82%;
  flex-shrink: 0;
}

#coen_2604_dod .nav_ill-left {
  width: calc(296 * var(--px));
  max-width: 80%;
  margin-top: calc(57 * var(--px));
  flex-shrink: 0;
}

/* PCの左カラムはロゴ・木ともカンプの90%で配置する。
   --px を上書きしているので、幅も間隔もまとめて90%になる。
   （タブレット以下は .tab_menu 側で別途調整済みのため対象外） */
@media screen and (min-width:1024px) {

  #coen_2604_dod .view_left .nav_ttl,
  #coen_2604_dod .view_left .nav_ill-left {
    --px: calc(0.9 * 475px / 375);
  }
}

/* 右カラム：木＋ナビ */
#coen_2604_dod .view_right .nav_right {
  width: calc(320 * var(--px));
  max-width: 88%;
  flex-shrink: 0;
}

#coen_2604_dod .nav_ill-right {
  width: calc(243 * var(--px));
  /* 左の木（.nav_ill-left）と同様に頭打ちを入れる。
     これが無いと細いPC幅でサイドバーからはみ出して右が切れる。 */
  max-width: 100%;
  margin: 0 auto calc(53 * var(--px));
}

#coen_2604_dod .nav_menuList li {
  text-align: center;
}

#coen_2604_dod .nav_menuList li a {
  display: block;
  margin: 0 auto;
}

#coen_2604_dod .nav_menuList .btn {
  width: calc(316 * var(--px));
  /* サイドバーが細いPC幅（〜1384px）ではカンプ幅のままだと画面外へはみ出して
     ボタンの右端が切れるため、親（.nav_right）の幅で頭打ちにする。
     中の img は width:100% / height:auto なので縦横比は保たれる。 */
  max-width: 100%;
  margin: 0 auto calc(43 * var(--px));
}

#coen_2604_dod .nav_menuList li:not(.btn) {
  margin-top: calc(58 * var(--px));
}

#coen_2604_dod .nav_menuList li:not(.btn):first-of-type,
#coen_2604_dod .nav_menuList .btn + li {
  margin-top: 0;
}

#coen_2604_dod .nav_menuList li:not(.btn) a img {
  width: auto;
  height: calc(48 * var(--px));
  /* 横長の項目（Camping Cordinate等）が細いサイドバーからはみ出さないように。
     object-fit:contain なので幅で頭打ちになっても縦横比は崩れない。 */
  max-width: 100%;
  object-fit: contain;
  margin: 0 auto;
}

#coen_2604_dod .nav_menuList .btn a img {
  width: 100%;
  height: auto;
}

#coen_2604_dod .nav_menuList li:nth-of-type(3) a img {
  height: calc(85 * var(--px));
}

#coen_2604_dod .tab_menu {
  display: none;
}


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

  #coen_2604_dod .view_right {
    display: none;
  }

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

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

  #coen_2604_dod .view_left .nav_ttl {
    width: calc(240 * var(--px));
  }

  #coen_2604_dod .nav_ill-left {
    display: none;
  }

  #coen_2604_dod .tab_menu {
    display: block;
    width: calc(260 * var(--px));
    max-width: 80%;
    margin-top: calc(46 * var(--px));
    flex-shrink: 0;
  }

  #coen_2604_dod .tab_menu .nav_menuList .btn {
    width: 100%;
    margin-bottom: calc(34 * var(--px));
  }

  #coen_2604_dod .tab_menu .nav_menuList li:not(.btn) {
    margin-top: calc(40 * var(--px));
  }

  #coen_2604_dod .tab_menu .nav_menuList li:not(.btn) a img {
    height: calc(40 * var(--px));
  }

  #coen_2604_dod .tab_menu .nav_menuList li:nth-of-type(3) a img {
    height: calc(72 * var(--px));
  }
}

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

  #coen_2604_dod .view_left {
    display: none;
  }

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


/*================================================
 *  縦が短い画面（ノートPC）でのサイドメニューの収まり
 *
 *  カンプ通りに組むと右メニューの高さは
 *    3項目（現在）       709px
 *    5項目（9/18公開後）  978px
 *  必要になる。MacBookのブラウザ表示領域は概ね700〜840pxなので、
 *  Ranking・Campingが増えると上下が見切れる。
 *
 *  対策は2段階：
 *   (1) 縦が足りない画面では、木と項目間の余白を詰める（772→617 デザインpx）
 *   (2) それでも入らない高さでは --px 自体を縮めて全体を等比縮小する
 *
 *  縦に余裕がある画面（1020px以上）ではどちらも効かず、カンプ通りになる。
 *  縮小の分母は「5項目のときの高さ」で固定しているので、9/18に項目が
 *  増えてもメニューの大きさは変わらない（切り替わりで見た目が動かない）。
 *
 *  ※ --px は .nav_right に対して上書きする。.view_right-inner に当てると
 *    そのwidth計算に使う --col と紛らわしいので、中身側だけを縮める。
 ================================================*/
@media screen and (min-width:1024px) and (max-height:1019px) {

  /* (1) 装飾と余白の圧縮 */
  #coen_2604_dod .view_right .nav_ill-right {
    width: calc(170 * var(--px));
    margin-bottom: calc(28 * var(--px));
  }

  #coen_2604_dod .view_right .nav_menuList .btn {
    margin-bottom: calc(28 * var(--px));
  }

  #coen_2604_dod .view_right .nav_menuList li:not(.btn) {
    margin-top: calc(34 * var(--px));
  }

  /* (2) 等比縮小。617 = 圧縮後の5項目の高さ（デザインpx）。
     カッコ内が 475/375 を上回る高さでは min() により縮小されない。 */
  #coen_2604_dod .view_right .nav_right {
    --px: min(calc(475px / 375), calc((100vh - 40px) / 617));
  }
}

/* タブレット（左カラムのメニュー）も同様。5項目で560デザインpx＝709px。 */
@media screen and (min-width:768px) and (max-width:1023px) and (max-height:749px) {

  #coen_2604_dod .view_left .nav_ttl,
  #coen_2604_dod .view_left .tab_menu {
    --px: min(calc(475px / 375), calc((100vh - 40px) / 560));
  }
}


/*================================================
 *  SPナビ（ハンバーガー）
 ================================================*/
#coen_2604_dod #sp__nav {
  display: none;
}

@media screen and (max-width:767px) {
  #coen_2604_dod #sp__nav {
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 100;
  }

  #coen_2604_dod nav.global__nav {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100vh;
    background: var(--orange);
    transition: opacity .4s ease-out;
    opacity: 0;
    z-index: -100;
    pointer-events: none;
    overflow: auto;
  }

  #coen_2604_dod .sp__gnav-inner {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    margin-inline: auto;
    transform: translateY(-50%);
    width: calc(316 * var(--px));
  }

  #coen_2604_dod .nav_menu-ttl {
    width: calc(281 * var(--px));
    margin: 0 auto calc(42 * var(--px));
  }

  #coen_2604_dod .sp__gnav .nav_menuList .btn {
    width: 100%;
    margin-bottom: calc(42 * var(--px));
  }

  #coen_2604_dod .sp__gnav .nav_menuList li:not(.btn) {
    margin-top: calc(28 * var(--px));
  }

  #coen_2604_dod .sp__gnav .nav_menuList li:not(.btn) a img {
    height: calc(52 * var(--px));
  }

  #coen_2604_dod .sp__gnav .nav_menuList li:nth-of-type(3) a img {
    height: calc(58 * var(--px));
  }

  #coen_2604_dod .sp__gnav .nav_menuList li:nth-of-type(4) a img,
  #coen_2604_dod .sp__gnav .nav_menuList li:nth-of-type(5) a img {
    height: calc(51 * var(--px));
  }

  /* hamburger */
  #coen_2604_dod .hamburger {
    position: absolute;
    top: calc(28 * var(--px));
    right: calc(13 * var(--px));
    width: calc(40 * var(--px));
    height: calc(14 * var(--px));
    cursor: pointer;
    z-index: 300;
  }

  #coen_2604_dod .hamburger__line {
    position: absolute;
    left: 0;
    width: 100%;
    height: calc(3 * var(--px));
    background-color: #fff;
    transition: all .4s ease-out;
  }

  #coen_2604_dod .hamburger__line--1 {
    top: 0;
  }

  #coen_2604_dod .hamburger__line--2 {
    bottom: 0;
  }

  /* nav_open */
  #coen_2604_dod .nav_open .global__nav {
    opacity: 1;
    z-index: 100;
    pointer-events: auto;
  }

  #coen_2604_dod .nav_open .hamburger {
    height: calc(30 * var(--px));
    top: calc(22 * var(--px));
  }

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

  #coen_2604_dod .nav_open .hamburger__line--2 {
    transform: rotate(-38deg);
    bottom: auto;
    top: 50%;
  }
}


/*================================================
 *  main visual
 ================================================*/
/* 260821カンプ実測: オレンジ背景は y0..600。
   丘イラスト(top416)と切り抜き家族写真(top519)は #intro の緑背景に
   またがって重なるため、overflow:hidden にせず #mainVisual からはみ出させる。 */
#coen_2604_dod #mainVisual {
  position: relative;
  /* 2026-08-31修正：ロゴと家族写真の間隔を48px詰める指示。
     ロゴは「上の余白が広い」という以前の指摘で 196→88 に上げてあるため
     ロゴは動かさず、丘・シート・写真をまとめて48px上げ、
     MVの高さも同じ48px縮めている（＝#intro への重なり量は変わらない）。 */
  height: calc(522 * var(--px));
  z-index: 2;
}

#coen_2604_dod .mv_logo {
  position: absolute;
  /* カンプは196だが、ロゴ上の余白が広いという指摘を受けて詰めている。
     SPのハンバーガー（top22〜52付近）と干渉しない範囲が下限。 */
  top: calc(88 * var(--px));
  left: calc(33 * var(--px));
  width: calc(320 * var(--px));
  z-index: 2;
}

#coen_2604_dod .mv_ill {
  position: absolute;
  top: calc(338 * var(--px));   /* カンプ416 −78 */
  left: 0;
  width: calc(375 * var(--px));
}

/* 家族が座っているベージュのレジャーシート。
   カンプの四隅（左辺・右辺が斜め）をトレースした台形PNG。
   人物写真より下・丘イラストより上に敷く。 */
#coen_2604_dod .mv_mat {
  position: absolute;
  top: calc(609 * var(--px));   /* カンプ687 −78 */
  left: 0;
  width: calc(375 * var(--px));
}

#coen_2604_dod .mv_photo {
  position: absolute;
  top: calc(441 * var(--px));   /* カンプ519 −78 */
  left: calc(9 * var(--px));
  width: calc(354 * var(--px));
}


/*================================================
 *  intro
 ================================================*/
#coen_2604_dod #intro {
  position: relative;
  height: calc(1020 * var(--px));
  background: var(--green-dark);
}

#coen_2604_dod .intro_ttl {
  position: absolute;
  top: calc(202 * var(--px));
  left: calc(48 * var(--px));
  width: calc(284 * var(--px));
}

#coen_2604_dod .intro_panel {
  position: absolute;
  top: calc(256 * var(--px));
  left: calc(18 * var(--px));
  width: calc(344 * var(--px));
  height: calc(716 * var(--px));
  background: url(src/img/intro_panel.png) no-repeat center/100% 100%;
  color: var(--green-text);
  text-align: center;
}

/* .intro_dod は廃止（背景 intro_panel.png にロゴが焼き込まれており2重になるため）。
   素材 intro_dod.png は差し戻し用に src/img へ残してある。 */

#coen_2604_dod .intro_panel-inner {
  padding: calc(58 * var(--px)) calc(24 * var(--px)) 0;
}

#coen_2604_dod .intro_panel h3 {
  color: var(--orange);
  font-size: calc(18.5 * var(--px));
  font-weight: 700;
  line-height: 1.68;
  letter-spacing: 0.08em;
}

#coen_2604_dod .intro_panel p {
  font-size: calc(14 * var(--px));
  font-weight: 500;
  line-height: 2.04;
  letter-spacing: 0.1em;
  margin-top: calc(28.5 * var(--px));
}

#coen_2604_dod .intro_panel p:first-of-type {
  margin-top: calc(32 * var(--px));
}


/*================================================
 *  itemSection 共通
 ================================================*/
#coen_2604_dod .itemSection {
  position: relative;
}

/* 地の色（丘・小道・川） */
#coen_2604_dod .itemSection::before,
#coen_2604_dod .itemSection::after,
#coen_2604_dod #event::before,
#coen_2604_dod #event::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  z-index: 0;
  pointer-events: none;
}

#coen_2604_dod .itemSection > *,
#coen_2604_dod #event > * {
  position: relative;
  z-index: 1;
}

#coen_2604_dod .sec_ttl,
#coen_2604_dod .sec_scene,
#coen_2604_dod .item,
#coen_2604_dod .itemBtn,
#coen_2604_dod .deco {
  position: absolute;
}

#coen_2604_dod .deco {
  display: block;
  z-index: 3;
  pointer-events: none;
}

#coen_2604_dod .sec_photo {
  position: absolute;
}

/* 商品：画像＋アイテム名 */
#coen_2604_dod .item a {
  display: block;
}

#coen_2604_dod .item span {
  display: block;
  text-align: center;
  font-size: calc(10 * var(--px));
  font-weight: 700;
  letter-spacing: 0.16em;
  line-height: 1.4;
  margin-top: calc(20 * var(--px));
  white-space: nowrap;
}

/* 濃緑の地の上は白文字 / 薄緑の地の上は濃緑文字 */
#coen_2604_dod #sec01 .item span,
#coen_2604_dod #sec03 .item span {
  color: var(--green-text);
}

/* キルポッケだけは、カンプで商品名が画像の下ではなく
   右下の空きスペースに置かれているので個別に配置する */
#coen_2604_dod #sec03 .item03-5 span {
  position: absolute;
  top: calc(230 * var(--px));
  left: calc(191 * var(--px));
  transform: translateX(-50%);
  margin: 0;
}

#coen_2604_dod #sec02 .item span,
#coen_2604_dod #sec04 .item span {
  color: #fff;
}

#coen_2604_dod .itemBtn {
  z-index: 3;
}


/*================================================
 *  sec01 : Go Outside
 ================================================*/
#coen_2604_dod #sec01 {
  height: calc(2360 * var(--px));
  background: var(--green-dark);
}

#coen_2604_dod #sec01::before {
  top: calc(412 * var(--px));
  bottom: 0;
  background: var(--green-light);
}

#coen_2604_dod #sec01::after {
  top: calc(280 * var(--px));
  height: calc(220 * var(--px));
  background: url(src/img/hill01b.png) no-repeat center/100% 100%;
}

#coen_2604_dod #sec01 .sec_ttl   { top: calc(40 * var(--px));   left: calc(52 * var(--px));  width: calc(273 * var(--px)); }
#coen_2604_dod #sec01 .tree_l01  { top: calc(858 * var(--px));  left: calc(-38 * var(--px)); width: calc(78 * var(--px)); }
#coen_2604_dod #sec01 .sec_photo { top: calc(204 * var(--px));  left: calc(15 * var(--px));  width: calc(356 * var(--px)); }
#coen_2604_dod #sec01 .tree_r01  { top: calc(264 * var(--px));  left: calc(312 * var(--px)); width: calc(84 * var(--px)); }
/* item01-1 は「左に移動（中央配置）」指示。画像に余白が無いので
   left = (375 - 216) / 2 ≒ 80 でカラム中央になる（旧 left120）。 */
#coen_2604_dod #sec01 .item01-1  { top: calc(703 * var(--px));  left: calc(80 * var(--px));  width: calc(216 * var(--px)); }
#coen_2604_dod #sec01 .item01-2  { top: calc(1058 * var(--px)); left: calc(38 * var(--px));  width: calc(282 * var(--px)); }
#coen_2604_dod #sec01 .badge01   { top: calc(1179 * var(--px)); left: calc(312 * var(--px)); width: calc(126 * var(--px)); }
#coen_2604_dod #sec01 .item01-3  { top: calc(1368 * var(--px)); left: calc(126 * var(--px)); width: calc(212 * var(--px)); }
#coen_2604_dod #sec01 .arch01    { top: calc(1424 * var(--px)); left: calc(-52 * var(--px)); width: calc(162 * var(--px)); }
/* item01-4 は「若干右に移動」指示。新カンプ実測で left 33（旧22）。 */
#coen_2604_dod #sec01 .item01-4  { top: calc(1724 * var(--px)); left: calc(33 * var(--px));  width: calc(208 * var(--px)); }
#coen_2604_dod #sec01 .ellipse01 { top: calc(1715 * var(--px)); left: calc(272 * var(--px)); width: calc(168 * var(--px)); }
#coen_2604_dod #sec01 .item01-5  { top: calc(1957 * var(--px)); left: calc(50 * var(--px));  width: calc(275 * var(--px)); }
#coen_2604_dod #sec01 .itemBtn   { top: calc(2205 * var(--px)); left: calc(3 * var(--px));   width: calc(368 * var(--px)); }


/*================================================
 *  sec02 : Play Freely
 ================================================*/
#coen_2604_dod #sec02 {
  height: calc(3240 * var(--px));
  background: var(--green-light);
}

#coen_2604_dod #sec02::before {
  top: calc(608 * var(--px));
  bottom: 0;
  background: var(--green-dark);
}

#coen_2604_dod #sec02::after {
  top: calc(220 * var(--px));
  height: calc(480 * var(--px));
  background: url(src/img/road02.png) no-repeat center/100% 100%;
}

#coen_2604_dod #sec02 .sec_ttl   { top: calc(83 * var(--px));   left: calc(79 * var(--px));  width: calc(223 * var(--px)); }
#coen_2604_dod #sec02 .tree_r02  { top: calc(245 * var(--px));  left: calc(308 * var(--px)); width: calc(83 * var(--px)); }
#coen_2604_dod #sec02 .sec_photo { top: calc(370 * var(--px));  left: calc(-13 * var(--px)); width: calc(424 * var(--px)); }
#coen_2604_dod #sec02 .ill_table { top: calc(784 * var(--px));  left: calc(206 * var(--px)); width: calc(149 * var(--px)); }
#coen_2604_dod #sec02 .badge02   { top: calc(820 * var(--px));  left: calc(-40 * var(--px)); width: calc(126 * var(--px)); }
#coen_2604_dod #sec02 .item02-1  { top: calc(1028 * var(--px)); left: calc(36 * var(--px));  width: calc(285 * var(--px)); }
#coen_2604_dod #sec02 .item02-2  { top: calc(1352 * var(--px)); left: calc(129 * var(--px)); width: calc(224 * var(--px)); }
#coen_2604_dod #sec02 .tree_l02  { top: calc(1431 * var(--px)); left: calc(-30 * var(--px)); width: calc(107 * var(--px)); }
#coen_2604_dod #sec02 .arch02    { top: calc(1715 * var(--px)); left: calc(295 * var(--px)); width: calc(162 * var(--px)); }
#coen_2604_dod #sec02 .item02-3  { top: calc(1736 * var(--px)); left: calc(52 * var(--px));  width: calc(196 * var(--px)); }
#coen_2604_dod #sec02 .item02-4  { top: calc(2080 * var(--px)); left: calc(24 * var(--px));  width: calc(327 * var(--px)); }
#coen_2604_dod #sec02 .badge02b  { top: calc(2373 * var(--px)); left: calc(304 * var(--px)); width: calc(126 * var(--px)); }
#coen_2604_dod #sec02 .item02-5  { top: calc(2439 * var(--px)); left: calc(49 * var(--px));  width: calc(227 * var(--px)); }
#coen_2604_dod #sec02 .item02-6  { top: calc(2687 * var(--px)); left: calc(127 * var(--px)); width: calc(213 * var(--px)); }
#coen_2604_dod #sec02 .ellipse02 { top: calc(2887 * var(--px)); left: calc(-46 * var(--px)); width: calc(168 * var(--px)); }
#coen_2604_dod #sec02 .itemBtn   { top: calc(3069 * var(--px)); left: calc(5 * var(--px));   width: calc(364 * var(--px)); }


/*================================================
 *  sec03 : Let’s Enjoy
 ================================================*/
#coen_2604_dod #sec03 {
  height: calc(2770 * var(--px));
  background: var(--green-dark);
}

#coen_2604_dod #sec03::before {
  top: calc(455 * var(--px));
  bottom: 0;
  background: var(--green-light);
}

#coen_2604_dod #sec03::after {
  top: calc(297 * var(--px));
  height: calc(158 * var(--px));
  /* ビルと丘が一体になった支給素材 */
  background: url(src/img/bg_buil.png) no-repeat center/100% 100%;
}

#coen_2604_dod #sec03 .sec_ttl      { top: calc(49 * var(--px));   left: calc(87 * var(--px));  width: calc(208 * var(--px)); }
#coen_2604_dod #sec03 .sec_photo    { top: calc(263 * var(--px));  left: calc(12 * var(--px));  width: calc(360 * var(--px)); }
#coen_2604_dod #sec03 .badge03      { top: calc(705 * var(--px));  left: calc(-45 * var(--px)); width: calc(126 * var(--px)); }
#coen_2604_dod #sec03 .item03-1     { top: calc(839 * var(--px));  left: calc(16 * var(--px));   width: calc(350 * var(--px)); }
#coen_2604_dod #sec03 .item03-2     { top: calc(1154 * var(--px)); left: calc(67 * var(--px));  width: calc(258 * var(--px)); }
#coen_2604_dod #sec03 .tree_beige03 { top: calc(1380 * var(--px)); left: calc(-35 * var(--px)); width: calc(96 * var(--px)); }
#coen_2604_dod #sec03 .ill_mushroom { top: calc(1495 * var(--px)); left: calc(28 * var(--px));  width: calc(112 * var(--px)); }
#coen_2604_dod #sec03 .arch03       { top: calc(1478 * var(--px)); left: calc(273 * var(--px)); width: calc(162 * var(--px)); }
#coen_2604_dod #sec03 .item03-3     { top: calc(1660 * var(--px)); left: calc(57 * var(--px));  width: calc(107 * var(--px)); }
#coen_2604_dod #sec03 .item03-4     { top: calc(1669 * var(--px)); left: calc(208 * var(--px)); width: calc(117 * var(--px)); }
#coen_2604_dod #sec03 .tree_r03     { top: calc(1888 * var(--px)); left: calc(337 * var(--px)); width: calc(77 * var(--px)); }
#coen_2604_dod #sec03 .item03-5     { top: calc(1935 * var(--px)); left: calc(29 * var(--px));  width: calc(245 * var(--px)); }
#coen_2604_dod #sec03 .ellipse03    { top: calc(2100 * var(--px)); left: calc(291 * var(--px)); width: calc(168 * var(--px)); }
#coen_2604_dod #sec03 .item03-6     { top: calc(2270 * var(--px)); left: calc(70 * var(--px));  width: calc(247 * var(--px)); }
#coen_2604_dod #sec03 .itemBtn      { top: calc(2594 * var(--px)); left: calc(2 * var(--px));   width: calc(369 * var(--px)); }


/*================================================
 *  sec04 : Stay Crazy!
 ================================================*/
#coen_2604_dod #sec04 {
  /* 2026-09-02: ザバンダナ（旧item04-7）削除に伴い高さを詰めた。
     最後の商品(item04-6)＋商品名の下端(約2495.8)から、削除前に
     item04-7の下端から確保されていた余白(約114.3)と揃えた値。 */
  height: calc(2610 * var(--px));
  background: var(--green-light);
}

/* ▼ 2026-08-31修正
   ・丸バッジ（.badge04）と「PLAYING FREELY」楕円（.ellipse04）を削除
   ・セクション内の要素をすべて 70px 上へ移動
     （新カンプ実測。見出しが top70→0 でちょうどセクション先頭に来る）
   ・2026-09-01追加指示「アイテム一覧ボタンとStay Crazy!を少し離す」で
     全要素を30px下へ戻した（実質 −40px）。相対配置はカンプのまま維持。
   ・セクションの高さ 2875 は据え置き。カンプでも #event の位置は変わっていない。 */
#coen_2604_dod #sec04::before {
  top: calc(726 * var(--px));   /* 766 −40 */
  bottom: 0;
  background: var(--green-dark);
}

#coen_2604_dod #sec04::after {
  top: calc(300 * var(--px));   /* 340 −40 */
  height: calc(490 * var(--px));
  background: url(src/img/river04.png) no-repeat center/100% 100%;
}

#coen_2604_dod #sec04 .sec_ttl   { top: calc(30 * var(--px));    left: calc(60 * var(--px));  width: calc(241 * var(--px)); }
#coen_2604_dod #sec04 .sec_photo { top: calc(280 * var(--px));  left: calc(-3 * var(--px));  width: calc(390 * var(--px)); }
#coen_2604_dod #sec04 .item04-1  { top: calc(768 * var(--px));  left: calc(42 * var(--px));  width: calc(288 * var(--px)); }
#coen_2604_dod #sec04 .tree_r04b { top: calc(950 * var(--px));  left: calc(317 * var(--px)); width: calc(77 * var(--px)); }
#coen_2604_dod #sec04 .item04-2  { top: calc(1100 * var(--px)); left: calc(15 * var(--px));  width: calc(327 * var(--px)); }
#coen_2604_dod #sec04 .arch04    { top: calc(1350 * var(--px)); left: calc(297 * var(--px)); width: calc(162 * var(--px)); }
#coen_2604_dod #sec04 .item04-3  { top: calc(1417 * var(--px)); left: calc(48 * var(--px));  width: calc(293 * var(--px)); }
#coen_2604_dod #sec04 .tree_l04b { top: calc(1737 * var(--px)); left: calc(-27 * var(--px)); width: calc(88 * var(--px)); }
#coen_2604_dod #sec04 .item04-4  { top: calc(1751 * var(--px)); left: calc(102 * var(--px)); width: calc(232 * var(--px)); }
#coen_2604_dod #sec04 .item04-5  { top: calc(1990 * var(--px)); left: calc(55 * var(--px));  width: calc(126 * var(--px)); }
#coen_2604_dod #sec04 .badge04b  { top: calc(2040 * var(--px)); left: calc(278 * var(--px)); width: calc(130 * var(--px)); }

/* 2026-09-02 商品名訂正で「【DOD】fave stuffed Keychain（ぬいぐるみキーホルダー）」に
   変更したところ、通常の.item span（white-space:nowrap・幅126pxの箱に収まる前提）では
   横416pxまで溢れて隣のセクション領域まではみ出した。この商品だけ折り返し＋縮小して
   絶対配置で中央に敷き直す（.item04-5 は position:absolute のためこれが起点になる）。 */
#coen_2604_dod #sec04 .item04-5 span {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  width: calc(240 * var(--px));
  margin-top: calc(20 * var(--px));
  font-size: calc(9 * var(--px));
  line-height: 1.5;
  white-space: normal;
}
#coen_2604_dod #sec04 .item04-6  { top: calc(2243 * var(--px)); left: calc(48 * var(--px));  width: calc(291 * var(--px)); }
/* .item04-7（ザバンダナ）は2026-09-02指示で削除済み */


/*================================================
 *  event（発売情報 / What is DOD？ / 各コンテンツ）
 ================================================*/
#coen_2604_dod #event {
  position: relative;
  background: var(--green-light);
  /* カンプは253だが、お取り扱いストアが増えて縦に長くなった分
     フッターまでの余白が目立つため詰めている */
  padding-bottom: calc(160 * var(--px));
}

#coen_2604_dod #event::before {
  top: 0;
  height: calc(54 * var(--px));
  background: var(--green-dark);
}

#coen_2604_dod #event::after {
  top: 0;
  height: calc(54 * var(--px));
  background: url(src/img/bg_hill05.svg) no-repeat center/100% 100%;
}

/* ---- 発売情報 / What is DOD？ ---- */
#coen_2604_dod .about {
  position: relative;
  padding-top: calc(341 * var(--px));
}

#coen_2604_dod #event .event_ttl {
  text-align: center;
  font-size: calc(44 * var(--px));
  font-weight: 900;
  letter-spacing: 0.05em;
  line-height: 1.1;
  text-indent: 0.05em;
}

#coen_2604_dod #event .lead {
  text-align: center;
  font-size: calc(14 * var(--px));
  font-weight: 500;
  line-height: 2.04;
  margin-top: calc(68 * var(--px));
}

#coen_2604_dod .about_line {
  width: calc(94 * var(--px));
  height: 1px;
  background: #fff;
  border: 0;
  margin: calc(65 * var(--px)) auto 0;
}

#coen_2604_dod .about_logo {
  width: calc(244 * var(--px));
  margin: calc(71 * var(--px)) auto 0;
}

#coen_2604_dod .about_txt {
  text-align: center;
  font-size: calc(14 * var(--px));
  font-weight: 500;
  line-height: 2.04;
  margin-top: calc(50 * var(--px));
}

#coen_2604_dod .about_brandBtn {
  width: calc(280 * var(--px));
  margin: calc(48 * var(--px)) auto 0;
}

#coen_2604_dod .about_brandBtn a {
  display: block;
  background: var(--orange);
  border-radius: 999px;
  padding: calc(10 * var(--px)) 0 calc(11 * var(--px));
  text-align: center;
  box-shadow: 0 calc(6 * var(--px)) calc(6 * var(--px)) rgb(0 0 0 / 18%);
}

#coen_2604_dod .about_brandBtn img {
  width: calc(63 * var(--px));
  margin: 0 auto;
}

#coen_2604_dod .about_brandBtn span {
  display: block;
  font-size: calc(13 * var(--px));
  font-weight: 700;
  letter-spacing: 0.12em;
  margin-top: calc(8 * var(--px));
  text-indent: 0.12em;
}

#coen_2604_dod .about .ellipse05 { top: calc(158 * var(--px)); left: calc(-45 * var(--px)); width: calc(168 * var(--px)); }
#coen_2604_dod .about .badge05   { top: calc(228 * var(--px)); left: calc(318 * var(--px)); width: calc(126 * var(--px)); }
#coen_2604_dod .about .tree_r05  { top: calc(41 * var(--px));  left: calc(234 * var(--px)); width: calc(85 * var(--px)); }
#coen_2604_dod .about .tree_r05 img { transform: scaleX(-1); }


/* ---- 白カード共通 ---- */
#coen_2604_dod .event_item {
  position: relative;
  width: calc(296 * var(--px));
  margin: calc(147 * var(--px)) auto 0;
  background: #fff;
  border-radius: calc(20 * var(--px));
  color: var(--green-text);
  padding-bottom: calc(70 * var(--px));
}

#coen_2604_dod #special {
  margin-top: calc(208 * var(--px));
}

#coen_2604_dod .event_item-ttl {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: calc(272 * var(--px));
  z-index: 2;
}

#coen_2604_dod #special .event_item-ttl {
  top: calc(-39 * var(--px));
  width: calc(256 * var(--px));
}

#coen_2604_dod #present .event_item-ttl {
  top: calc(-66 * var(--px));
  width: calc(275 * var(--px));
}

#coen_2604_dod #ranking .event_item-ttl {
  top: calc(-52 * var(--px));
  width: calc(275 * var(--px));
}

#coen_2604_dod #camping .event_item-ttl {
  top: calc(-72 * var(--px));
  width: calc(275 * var(--px));
}

#coen_2604_dod .event_item-sub {
  text-align: center;
  font-size: calc(19 * var(--px));
  font-weight: 700;
  letter-spacing: 0.12em;
  text-indent: 0.12em;
  padding-top: calc(78 * var(--px));
}

#coen_2604_dod #present,
#coen_2604_dod #ranking,
#coen_2604_dod #camping {
  padding-bottom: calc(61 * var(--px));
}

#coen_2604_dod #present .event_item-sub {
  padding-top: calc(40 * var(--px));
}

#coen_2604_dod #ranking .event_item-sub {
  padding-top: calc(42 * var(--px));
}

#coen_2604_dod #camping .event_item-sub {
  padding-top: calc(90 * var(--px));
}


/* ---- special gift ---- */
#coen_2604_dod .special_box {
  position: relative;
  /* .special_label が position:absolute で flow から抜けているため、
     直後の .special_img（最初の通常フロー要素）の margin-top が
     このボックス自身の margin-top とマージン相殺し、画像側の
     余白が効かずバッジと同じ位置に張り付いてしまう。
     flow-root で新しいブロック整形コンテキストを作り相殺を止める。
     （overflow:hidden ではバッジの左はみ出しが切れてしまうため使えない） */
  display: flow-root;
}

#coen_2604_dod .special_box01 {
  margin-top: calc(24 * var(--px));
}

#coen_2604_dod .special_box02 {
  margin-top: calc(45 * var(--px));
}

/* 260821カンプ: バッジはカード左端をまたぐ位置、直径105 */
#coen_2604_dod .special_label {
  position: absolute;
  top: 0;
  left: calc(-25 * var(--px));
  width: calc(105 * var(--px));
  z-index: 2;
}

/* コラボステッカー: カンプ実測185px → 210 → 240 →
   2026-09-02指示で「本文と同じ幅」に合わせて 285px（絵柄の実寸が246px）。

   ※ special_img01.png は 1755x1200 で、絵柄は x93〜1608
     （左93/右146と透明余白が非対称）。指定する width は透明余白込みの
     箱の幅なので、絵柄を狙った幅にするには余白分を割り戻す必要がある。

       本文の幅   = カード296 − .special_txt の左右padding25×2 = 246
       指定幅     = 246 × 1755 / (1608−93+1) = 284.8 → 285
       left       = 296/2 − (93+1609)/2 × 285/1755 = 9.8 → 10

     結果、絵柄は x25.1〜271.3 となり本文（x25〜271）とほぼ完全に一致する。
     幅を変えるときは上の2式で width と left をセットで計算し直すこと。 */
#coen_2604_dod .special_box01 .special_img {
  width: calc(285 * var(--px));
  margin: calc(69 * var(--px)) 0 0 calc(10 * var(--px));
}

/* GIFT2「？」（クマ付き）: カード左端から109px・幅90（カンプ実測） */
#coen_2604_dod .special_box02 .special_img.special_img-mystery {
  width: calc(90 * var(--px));
  margin: calc(44 * var(--px)) 0 0 calc(109 * var(--px));
}

#coen_2604_dod .special_txt {
  padding: 0 calc(25 * var(--px));
}

#coen_2604_dod .special_box01 .special_txt {
  margin-top: calc(51 * var(--px));
}

#coen_2604_dod .special_box02 .special_txt {
  margin-top: calc(32 * var(--px));
}

#coen_2604_dod .special_txt h4 {
  text-align: center;
  font-size: calc(19 * var(--px));
  font-weight: 700;
  line-height: calc(28 * var(--px));
  letter-spacing: 0.1em;
  margin-bottom: calc(30 * var(--px));
}

#coen_2604_dod .special_txt p {
  font-size: calc(14 * var(--px));
  font-weight: 500;
  line-height: 2.04;
  letter-spacing: 0.06em;
  margin-top: calc(9 * var(--px));
}

/* 配布期間の2行は1行が長く、14pxだと途中で折り返して読みにくいので少し詰める */
#coen_2604_dod .special_txt p.period {
  font-size: calc(12.5 * var(--px));
  letter-spacing: 0.02em;
}

#coen_2604_dod .special_txt p:first-child {
  margin-top: 0;
}

#coen_2604_dod .special_txt .ac {
  text-align: center;
  margin-top: calc(40 * var(--px));
}

#coen_2604_dod .special_txt h4 + .ac {
  margin-top: 0;
}

#coen_2604_dod .special_box01 .special_txt p + p {
  margin-top: calc(29 * var(--px));
}

#coen_2604_dod .special_line {
  width: calc(95 * var(--px));
  height: 1px;
  background: var(--green-text);
  border: 0;
  margin: calc(88 * var(--px)) auto 0;
}


/* ---- present campaign ---- */
#coen_2604_dod .present_img {
  width: calc(95 * var(--px));
  margin: calc(12 * var(--px)) auto 0;
}

#coen_2604_dod .present_label {
  width: calc(235 * var(--px));
  margin: calc(22 * var(--px)) auto 0;
}

#coen_2604_dod #present p,
#coen_2604_dod #ranking p,
#coen_2604_dod #camping p {
  text-align: center;
  font-size: calc(16 * var(--px));
  font-weight: 700;
  line-height: 1.78;
  letter-spacing: 0.08em;
  margin-top: calc(26 * var(--px));
}

#coen_2604_dod #present .present_label + p {
  margin-top: calc(20 * var(--px));
}

#coen_2604_dod .present_entryBtn {
  width: calc(225 * var(--px));
  margin: calc(20 * var(--px)) auto 0;
}

#coen_2604_dod .present_entryBtn a {
  display: block;
  background: var(--orange);
  border-radius: 999px;
  padding: calc(14 * var(--px)) 0 calc(15 * var(--px));
  text-align: center;
  box-shadow: 0 calc(6 * var(--px)) calc(6 * var(--px)) rgb(0 0 0 / 18%);
}

#coen_2604_dod .present_entryBtn span {
  display: block;
  font-size: calc(15 * var(--px));
  font-weight: 700;
  letter-spacing: 0.12em;
  text-indent: 0.12em;
}


/* ---- store info（デザインカンプに無いため新規実装。event_item の白カードを流用）---- */
#coen_2604_dod #storeInfo {
  margin-top: calc(147 * var(--px));
  padding: calc(48 * var(--px)) calc(24 * var(--px)) calc(56 * var(--px));
}

#coen_2604_dod .storeInfo_ttl {
  text-align: center;
  font-size: calc(20 * var(--px));
  font-weight: 700;
  letter-spacing: 0.1em;
  text-indent: 0.1em;
}

#coen_2604_dod .storeInfo_txt {
  margin-top: calc(24 * var(--px));
}

#coen_2604_dod .storeInfo_txt p {
  font-size: calc(13 * var(--px));
  font-weight: 500;
  line-height: 1.9;
  letter-spacing: 0.04em;
  text-align: center;
}

#coen_2604_dod .storeInfo_txt p + p {
  margin-top: calc(10 * var(--px));
}

#coen_2604_dod .storeInfo_line {
  width: calc(91 * var(--px));
  height: 1px;
  background: var(--green-text);
  opacity: .3;
  border: 0;
  margin: calc(32 * var(--px)) auto 0;
}

#coen_2604_dod .storeInfo_sub {
  text-align: center;
  font-size: calc(15 * var(--px));
  font-weight: 700;
  letter-spacing: 0.08em;
  margin-top: calc(28 * var(--px));
}

#coen_2604_dod .storeInfo_list {
  margin-top: calc(18 * var(--px));
  text-align: center;
}

#coen_2604_dod .storeInfo_list li {
  font-size: calc(12.5 * var(--px));
  font-weight: 500;
  line-height: 1.9;
  letter-spacing: 0.02em;
}


/* ---- ranking / camping cordinate（後日追加）---- */
#coen_2604_dod .event_item-img {
  margin: calc(15 * var(--px)) auto 0;
}

#coen_2604_dod #ranking .event_item-img {
  width: calc(176 * var(--px));
}

#coen_2604_dod #camping .event_item-img {
  width: calc(190 * var(--px));
}

#coen_2604_dod #present {
  margin-top: calc(146 * var(--px));
}

#coen_2604_dod #ranking {
  margin-top: calc(209 * var(--px));
}

#coen_2604_dod .event_item-btn {
  width: calc(241 * var(--px));
  margin: calc(29 * var(--px)) auto 0;
}


/*================================================
 *  footer
 ================================================*/
#coen_2604_dod #ft {
  background: var(--green-light);
  padding-bottom: calc(129 * var(--px));
}

#coen_2604_dod #ft .ft_dod {
  width: calc(256 * var(--px));
  margin: 0 auto;
}

#coen_2604_dod #ft .ft_logo {
  width: calc(177 * var(--px));
  margin: calc(130 * var(--px)) auto 0;
}


/*================================================
 *  fadeUp / data-delighter
 ================================================*/
#coen_2604_dod .fadeUp {
  opacity: 0;
  transform: translateY(20px);
  transition: all 0.8s ease !important;
}

#coen_2604_dod .fadeUp.started {
  opacity: 1;
  transform: translateY(0);
}

#coen_2604_dod .delay_02s { transition-delay: .2s !important; }
#coen_2604_dod .delay_03s { transition-delay: .3s !important; }
#coen_2604_dod .delay_04s { transition-delay: .4s !important; }
#coen_2604_dod .delay_05s { transition-delay: .5s !important; }
#coen_2604_dod .delay_06s { transition-delay: .6s !important; }


/*================================================
 *  ゆらゆら animation
 ================================================*/
#coen_2604_dod .badge01 img,
#coen_2604_dod .badge03 img,
#coen_2604_dod .badge05 img {
  animation: spin-slow 24s linear infinite;
}

/* .badge04 は削除済みのためセレクタから外している */
#coen_2604_dod .badge02 img {
  animation: spin-slow-rev 26s linear infinite;
}

@keyframes spin-slow {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

@keyframes spin-slow-rev {
  from { transform: rotate(0deg); }
  to   { transform: rotate(-360deg); }
}

#coen_2604_dod .arch01 img,
#coen_2604_dod .arch03 img,
#coen_2604_dod .ellipse02 img,
#coen_2604_dod .ellipse04 img {
  animation: floating-y 3.2s ease-in-out infinite alternate;
}

#coen_2604_dod .arch02 img,
#coen_2604_dod .arch04 img,
#coen_2604_dod .ellipse01 img,
#coen_2604_dod .ellipse03 img,
#coen_2604_dod .ellipse05 img {
  animation: floating-y 3.8s ease-in-out infinite alternate-reverse;
}

@keyframes floating-y {
  0%   { transform: translateY(-6%); }
  100% { transform: translateY(6%); }
}

@media (prefers-reduced-motion: reduce) {
  #coen_2604_dod * {
    animation: none !important;
  }
}


/*================================================
 *  アイテム一覧ポップアップ
 *    ・オーバーレイ ＝ 白の透過（rgba(255,255,255,.6)）
 *    ・パネル本体   ＝ さらに白 70% を重ね、合成で「白88%透過」（カンプ実測 #fdeee6）
 *    ・ヘッダー     ＝ 透過なし（#fff）／パネル上部に固定
 *    ・PCではLPのカラム幅(--col)に依存しない独立モーダル。
 *      画面内に収め、中身だけをスクロールさせる。
 ================================================*/
#coen_2604_dod .pop {
  /* オーバーレイ＝白の透過。
     パネルは確認用データの指示は「背景88%透過」（不透明度12%）だが、
     実際の商品写真・商品名を敷き詰めた状態でその値を試したところ、
     背後のLPコンテンツ（写真・見出し等）と重なって文字が判読不能になったため、
     可読性を優先してここでは不透明度を上げている。
     デザイン指示通りに戻す場合は --pop-panel を .12 にすること。 */
  --pop-overlay: .6;
  --pop-panel: .93;

  /* PCモーダルの外側余白と最大幅（LPのカラム幅とは無関係） */
  --pop-gap: 40px;
  --pop-w: 1200px;

  position: fixed;
  inset: 0;
  z-index: 1000;
  opacity: 0;
  visibility: hidden;
  transition: opacity .35s ease, visibility .35s ease;
}

#coen_2604_dod .pop.is-open {
  opacity: 1;
  visibility: visible;
}

#coen_2604_dod .pop_overlay {
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, var(--pop-overlay));
  cursor: pointer;
}

#coen_2604_dod .pop_body {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--pop-gap) 0;
  pointer-events: none;
}

#coen_2604_dod .pop_panel {
  position: relative;
  pointer-events: auto;
  display: flex;
  flex-direction: column;
  width: min(var(--pop-w), calc(100% - var(--pop-gap) * 2));
  max-height: 100%;
  background: rgba(253, 238, 230, var(--pop-panel));
  box-shadow: 0 8px 28px rgb(0 0 0 / 14%);
}

/* ---- ヘッダー ---- */
#coen_2604_dod .pop_head {
  position: relative;
  z-index: 2;
  flex-shrink: 0;
  background: #fff;
  height: calc(92 * var(--px));
  text-align: center;
}

#coen_2604_dod .pop_head-logo {
  width: calc(163 * var(--px));
  margin: 0 auto;
  padding-top: calc(20 * var(--px));
}

#coen_2604_dod .pop_head-ttl {
  width: calc(255 * var(--px));
  margin: calc(15 * var(--px)) auto 0;
}

#coen_2604_dod .pop_close {
  position: absolute;
  top: calc(30 * var(--px));
  right: calc(16 * var(--px));
  width: calc(20 * var(--px));
  height: calc(20 * var(--px));
  border: 0;
  padding: 0;
  background: none;
  cursor: pointer;
}

#coen_2604_dod .pop_close span {
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: calc(2 * var(--px));
  background: var(--orange);
}

#coen_2604_dod .pop_close span:nth-child(1) { transform: rotate(38deg); }
#coen_2604_dod .pop_close span:nth-child(2) { transform: rotate(-38deg); }

/* ---- 中身 ---- */
#coen_2604_dod .pop_cont {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  padding: calc(38 * var(--px)) calc(12 * var(--px)) calc(73 * var(--px));
}

#coen_2604_dod .pop_sec + .pop_sec {
  margin-top: calc(52 * var(--px));
}

#coen_2604_dod .pop_sec-ttl {
  margin: 0 auto;
}

#coen_2604_dod .pop_sec-ttl img {
  margin: 0 auto;
}

#coen_2604_dod .pop_sec--womens .pop_sec-ttl img      { width: calc(75.5 * var(--px)); }
#coen_2604_dod .pop_sec--mens .pop_sec-ttl img        { width: calc(47.5 * var(--px)); }
#coen_2604_dod .pop_sec--kids .pop_sec-ttl img        { width: calc(38.8 * var(--px)); }
#coen_2604_dod .pop_sec--accessories .pop_sec-ttl img { width: calc(99 * var(--px)); }

#coen_2604_dod .pop_sec-ttl::after {
  content: "";
  display: block;
  width: 92.6%;
  height: calc(1.6 * var(--px));
  background: rgba(5, 86, 67, .55);
  margin: calc(21 * var(--px)) auto 0;
}

#coen_2604_dod .pop_grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  row-gap: calc(14 * var(--px));
  margin-top: calc(24 * var(--px));
}

#coen_2604_dod .pop_item a {
  display: block;
  text-align: center;
}

/* 商品画像の枠。高さは下の aspect-ratio だけで決まるようにしておく。
   中の img はフロー内に置かず position:absolute で敷く（下のルール参照）。 */
#coen_2604_dod .pop_item-img {
  position: relative;
  display: block;
  max-width: calc(232 * var(--px));
  margin: 0 auto;
}

/* 画像枠の高さ（カンプの各セクションの最大商品高に合わせる） */
#coen_2604_dod .pop_sec--womens .pop_item-img      { aspect-ratio: 116 / 79; }
#coen_2604_dod .pop_sec--mens .pop_item-img        { aspect-ratio: 116 / 88; }
#coen_2604_dod .pop_sec--kids .pop_item-img        { aspect-ratio: 116 / 85; }
#coen_2604_dod .pop_sec--accessories .pop_item-img { aspect-ratio: 116 / 95; }

/* 商品ごとに幅を％指定していたが、書き出し直した画像は構図が変わり
   大きさがバラバラになったため、枠に contain させて揃える方式に変更。

   ▼ position:absolute にしている理由（iOS Safariのバグ対策・重要）
   以前は width/height:auto ＋ max-width/max-height:100% でフロー内に置いていたが、
   iOS Safari では max-height:100% が aspect-ratio 由来の枠の高さに対して解決されず、
   画像が自然な高さのまま描画されて枠からはみ出していた。
   その結果、商品名の位置が商品ごとにバラバラになり、はみ出した画像が
   商品名や次の行の商品に重なっていた（Chromeでは正常に見えるので気付きにくい）。
   絶対配置ならフローから外れるので、枠の高さは aspect-ratio だけで確定し、
   object-fit:contain が縦横比を保ったまま枠内に収めてくれる。 */
#coen_2604_dod .pop_item-img img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* リトルモンスターファー（pop_a2）: 枠にほぼ隙間なく収まり他の商品より
   大きく見えるとの指摘（§18.7）。枠内で85%に縮小し中央配置。 */
#coen_2604_dod .pop_it-a2 .pop_item-img img {
  inset: auto;
  top: 50%;
  left: 50%;
  width: 85%;
  height: 85%;
  transform: translate(-50%, -50%);
}

#coen_2604_dod .pop_item-name {
  display: block;
  font-size: calc(10 * var(--px));
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.05em;
  color: var(--green-text);
  margin-top: calc(16 * var(--px));
}

@media screen and (max-width:767px) {
  #coen_2604_dod .pop_body {
    padding: 0;
  }

  #coen_2604_dod .pop_panel {
    --pop-gap: 0px;
    --pop-w: 100%;
    width: 100%;
    height: 100%;
    max-height: 100%;
    box-shadow: none;
  }

  /* SPは2グリッド */
  #coen_2604_dod .pop_grid {
    grid-template-columns: repeat(2, 1fr);
    column-gap: calc(16 * var(--px));
    row-gap: calc(22 * var(--px));
  }

  #coen_2604_dod .pop_item-name {
    font-size: calc(11 * var(--px));
    margin-top: calc(18 * var(--px));
  }
}



/*================================================
 *  公開日時までは隠しておく要素
 *  （ランキング／キャンプコーディネートの本体とメニュー項目）
 *  日時の判定と表示は src/js/common.js が行う。
 *  is-open が付くまで非表示。付いたら元の display に戻る。
 ================================================*/
#coen_2604_dod .js-timed:not(.is-open) {
  display: none;
}