* {
  -webkit-text-size-adjust: 100%;
}

.main-content {
  width: calc(750 * var(--dpx));
  font-family: "yu-gothic-pr6n", sans-serif;
  font-feature-settings: 'palt';
  margin: 0 auto;
  display: flow-root; /* BFC化：子の margin-top を外に漏らさない（先頭要素の上余白がコンテナ内に収まる） */
}
.main-content * {
  box-sizing: border-box;
}
.main-content img {
  width: 100%;
  height: auto;
  vertical-align: top;
}
.main-content a {
  color: inherit;
}


/* テキスト（className 毎・値は layout.json 由来） */
.look-name {
  font-size: calc(50 * var(--dpx));
  font-family: "ivyora-display", serif;
  text-align: left;
  color: #CC5A40;
}
.credit {
  font-size: calc(24 * var(--dpx));
  font-family: "ivyora-display", serif;
  font-weight: 300;
  text-align: center;
  color: #000000;
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: calc(10 * var(--dpx)); /* アイテム間隔（仮値・カンプ実測に合わせて調整） */
}
.credit li { margin: 0; }
.credit li a { text-decoration: none; }

.comment {
  font-size: calc(24 * var(--dpx));
  font-family: "yu-gothic-pr6n", "游ゴシック体", sans-serif;
  text-align: center;
  color: #000000;
  line-height: 1.8;
  margin-bottom: 0;
}
.section-heading {
  font-size: calc(56 * var(--dpx));
  font-family: "ivyora-display", serif;
  text-align: left;
  text-align: center;
  padding-bottom: calc(3 * var(--dpx));
}
.items-link {
  width: calc(675 * var(--dpx));
  height: calc(118 * var(--dpx));
  font-size: calc(45 * var(--dpx));
  font-family: "ivyora-display", serif;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #000000;
  border: calc(2 * var(--dpx)) solid #000000;
  margin-left: auto;
  margin-right: auto;
  letter-spacing: 0.02em;
  padding-bottom: calc(11 * var(--dpx));
  text-decoration: none !important;
}

.staff-heading {
  font-size: calc(26 * var(--dpx));
  font-family: "ivyora-display", serif;
  text-align: center;
  color: #000000;
  letter-spacing: 0.15em;
}
.staff-credit {
  font-size: calc(24 * var(--dpx));
  font-family: "ivyora-display", serif;
  text-align: center;
  color: #000000;
  line-height: 1.8;
  margin-bottom: calc(160 * var(--dpx));
}
.lead {
  font-size: calc(24 * var(--dpx));
  font-family: "yu-gothic-pr6n", "游ゴシック体", sans-serif;
  text-align: center;
  color: #000000;
  line-height: 2.4;
  letter-spacing: 0.02em;
}

/* テキスト個別上書き（txtNN・同一classで代表と違う色/サイズ/揃えだけ値が入る。空の番号も手調整用に残す） */
.txt01 {}
.txt02 {color: #CC5A40;border-bottom: calc(2 * var(--dpx)) solid #CC5A40;}
.txt03 {}
.txt04 {padding: 0 calc(150 * var(--dpx));}
.txt05 {}
.txt06 {padding: 0 calc(110 * var(--dpx));}
.txt07 {}
.txt08 {padding: 0 calc(100 * var(--dpx));}
.txt09 {}
.txt10 {padding: 0 calc(80 * var(--dpx));}
.txt11 {letter-spacing: -0.02em;color: #1B4C22;border-bottom: calc(2 * var(--dpx)) solid #1B4C22;}
.txt12 {}
.txt13 {padding: 0 calc(90 * var(--dpx));}
.txt14 {}
.txt15 {padding: 0 calc(90 * var(--dpx));}
.txt16 {}
.txt17 {padding: 0 calc(90 * var(--dpx));}
.txt18 {color: #000000;border-bottom: calc(2 * var(--dpx)) solid #000000;}
.txt19 {}
.txt20 {padding: 0 calc(50 * var(--dpx));}
.txt21 {}
.txt22 {padding: 0 calc(60 * var(--dpx));}
.txt23 {}
.txt24 {padding: 0 calc(50 * var(--dpx));}
.txt25 {}
.txt26 {}
.txt27 {}

/* look / asset は block 化（余白は .posNN、幅・横位置は .lookNN/.assetNN）。.look 内の a も block（inline だと画像下に隙間が出る） */
.look, .asset { display: block; }
.look a { display: block; }

/* 余白（.posNN・カンプ座標から自動計算 = 自分の上端Y − 直前要素の下端Y） */
.pos01 { margin-top: 0; }
.pos02 {margin-top: calc(109 * var(--dpx));}
.pos03 {margin-top: calc(151 * var(--dpx));}
.pos04 {margin-top: calc(104 * var(--dpx));}
.pos05 {margin-top: calc(21 * var(--dpx));}
.pos06 {margin-top: calc(60 * var(--dpx));}
.pos07 { margin-top: calc(39 * var(--dpx)); }
.pos08 {margin-top: calc(37 * var(--dpx));}
.pos09 {margin-top: calc(207 * var(--dpx));}
.pos10 {margin-top: calc(32 * var(--dpx));}
.pos11 {margin-top: calc(60 * var(--dpx));}
.pos12 { margin-top: calc(40 * var(--dpx)); }
.pos13 {margin-top: calc(36 * var(--dpx));}
.pos14 {margin-top: calc(104 * var(--dpx));}
.pos15 {margin-top: calc(24 * var(--dpx));}
.pos16 {margin-top: calc(60 * var(--dpx));}
.pos17 { margin-top: calc(40 * var(--dpx)); }
.pos18 { margin-top: calc(41 * var(--dpx)); }
.pos19 {margin-top: calc(34 * var(--dpx));}
.pos20 {margin-top: calc(200 * var(--dpx));}
.pos21 {margin-top: calc(24 * var(--dpx));}
.pos22 {margin-top: calc(61 * var(--dpx));}
.pos23 { margin-top: calc(40 * var(--dpx)); }
.pos24 {margin-top: calc(35 * var(--dpx));}
.pos25 {margin-top: calc(186 * var(--dpx));}
.pos26 {margin-top: calc(104 * var(--dpx));}
.pos27 {margin-top: calc(22 * var(--dpx));}
.pos28 {margin-top: calc(58 * var(--dpx));}
.pos29 { margin-top: calc(37 * var(--dpx)); }
.pos30 { margin-top: calc(39 * var(--dpx)); }
.pos31 {margin-top: calc(34 * var(--dpx));}
.pos32 { margin-top: calc(206 * var(--dpx)); }
.pos33 {margin-top: calc(32 * var(--dpx));}
.pos34 {margin-top: calc(59 * var(--dpx));}
.pos35 { margin-top: calc(41 * var(--dpx)); }
.pos36 {margin-top: calc(36 * var(--dpx));}
.pos37 {margin-top: calc(206 * var(--dpx));}
.pos38 {margin-top: calc(33 * var(--dpx));}
.pos39 {margin-top: calc(62 * var(--dpx));}
.pos40 { margin-top: calc(41 * var(--dpx)); }
.pos41 {margin-top: calc(36 * var(--dpx));}
.pos42 {margin-top: calc(187 * var(--dpx));}
.pos43 {margin-top: calc(106 * var(--dpx));}
.pos44 {margin-top: calc(29 * var(--dpx));}
.pos45 {margin-top: calc(62 * var(--dpx));}
.pos46 { margin-top: calc(40 * var(--dpx)); }
.pos47 {margin-top: calc(36 * var(--dpx));}
.pos48 {margin-top: calc(205 * var(--dpx));}
.pos49 {margin-top: calc(31 * var(--dpx));}
.pos50 {margin-top: calc(62 * var(--dpx));}
.pos51 { margin-top: calc(40 * var(--dpx)); }
.pos52 {margin-top: calc(33 * var(--dpx));}
.pos53 { margin-top: calc(206 * var(--dpx)); }
.pos54 {margin-top: calc(26 * var(--dpx));}
.pos55 {margin-top: calc(58 * var(--dpx));}
.pos56 { margin-top: calc(41 * var(--dpx)); }
.pos57 {margin-top: calc(37 * var(--dpx));}
.pos58 {margin-top: calc(182 * var(--dpx));}
.pos59 {margin-top: calc(134 * var(--dpx));}
.pos60 {margin-top: calc(15 * var(--dpx));}
.pos61 {margin-top: calc(186 * var(--dpx));}

/* look画像：幅=実PNG幅、横位置（左寄せ=そのまま/右端一致=margin-left:auto/他=左からの距離） */
.look01 { width: calc(750 * var(--dpx)); }
.look02 { width: calc(660 * var(--dpx)); }
.look03 { width: calc(580 * var(--dpx)); margin-left: calc(80 * var(--dpx)); }
.look04 { width: calc(660 * var(--dpx)); margin-left: auto; }
.look05 { width: calc(600 * var(--dpx)); }
.look06 { width: calc(620 * var(--dpx)); margin-left: calc(65 * var(--dpx)); }
.look07 { width: calc(580 * var(--dpx)); margin-left: auto; }
.look08 { width: calc(580 * var(--dpx)); }
.look09 { width: calc(580 * var(--dpx)); }
.look10 { width: calc(640 * var(--dpx)); margin-left: calc(70 * var(--dpx)); }
.look11 { width: calc(720 * var(--dpx)); margin-left: calc(15 * var(--dpx)); }
.look12 { width: calc(600 * var(--dpx)); margin-left: calc(135 * var(--dpx)); }
.look13 { width: calc(600 * var(--dpx)); }
.look14 { width: calc(710 * var(--dpx)); margin-left: calc(20 * var(--dpx)); }
.look15 { width: calc(600 * var(--dpx)); margin-left: auto; }
.look16 { width: calc(620 * var(--dpx)); margin-left: calc(100 * var(--dpx)); }
.look17 { width: calc(580 * var(--dpx)); margin-left: calc(100 * var(--dpx)); }
.look18 { width: calc(660 * var(--dpx)); margin-left: calc(45 * var(--dpx)); }
.look19 { width: calc(600 * var(--dpx)); }
.look20 { width: calc(580 * var(--dpx)); margin-left: auto; }
.look21 { width: calc(670 * var(--dpx)); }
.look22 { width: calc(700 * var(--dpx)); margin-left: calc(25 * var(--dpx)); }
.look23 { width: calc(600 * var(--dpx)); margin-left: calc(75 * var(--dpx)); }

/* 資産画像（LOOK以外）：幅=bounds.width、横位置=bounds.x */
.asset { width: calc(98 * var(--dpx)); margin-left: auto; margin-right: auto; }
.asset01 { width: calc(98 * var(--dpx)); }
.asset02 { width: calc(108 * var(--dpx)); }
.asset03 { width: calc(105 * var(--dpx)); }
.asset04 { width: calc(110 * var(--dpx)); }
.asset05 { width: calc(103 * var(--dpx)); }
.asset06 { width: calc(108 * var(--dpx)); }
.asset07 { width: calc(104 * var(--dpx)); }
.asset08 { width: calc(108 * var(--dpx)); }
.asset09 { width: calc(108 * var(--dpx)); }
.asset10 { width: calc(97 * var(--dpx)); }

/* ==== スクロール出現アニメ（anim-scroll-reveal） ====
   HTML側：塊を <div class="js-reveal"> で囲むだけ（動きを知らない）。
   JS側：画面内に入ったら .is-inview を付与するだけ（動きを知らない）。
   出現の仕方（fade/slide/時間差…）は企画ごとに ここのCSSだけ を差し替える。
   .js-anim は script.js が <html> に付けるフラグ＝JS無効環境では隠さない保険。 */
html.js-anim .js-reveal {
  opacity: 0;
  transition: all 1s cubic-bezier(0.39, 0.575, 0.565, 1);
}
html.js-anim .js-reveal.is-inview {
  opacity: 1;
  transform: none;
}
/* OSで「視差効果を減らす」設定の人には動かさず即表示 */
@media (prefers-reduced-motion: reduce) {
  html.js-anim .js-reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}