/*!
 * HIMICO LOOK BOOK 2026 — ページのレイアウト(768x960 基準・位置は px 指定)
 * @author SHIROHATO IGUCHI
 */
html, body { margin: 0; height: 100%; background: #141012; }
.lookbook { height: 100vh; height: 100dvh;
  --shb-bg: #141012 url(../img/back.jpg) center / cover no-repeat; --shb-paper: #f6f1ea; }
.lookbook.shb { background: linear-gradient(rgba(14,10,12,.55), rgba(14,10,12,.55)), url(../img/back.jpg) center / cover no-repeat; }

.shb-page { --ivory: #f6f1ea; --ink: #1b1414; --rose: #7a2030; --gold: #b0925a; --grey: #6e6462;
  font-family: 'Shippori Mincho', 'Yu Mincho', 'YuMincho', serif; color: var(--ink); background: var(--ivory); }
.shb-page * { box-sizing: border-box; }
.shb-page p, .shb-page h1, .shb-page h2, .shb-page figure { margin: 0; font-weight: 400; }
.shb-page a { color: inherit; text-decoration: none; }
.shb-page img { display: block; }
.bod { font-family: 'Bodoni Moda', 'Bodoni MT', Didot, serif; }
/* Bodoni Moda は大きい文字ほどヘアラインが細くなる(光学サイズ)。見出しが欠けて見えるので細さを固定する */
/* (各見出しの font ショートハンドがこの指定を初期値に戻すので !important) */
.shb-page, .shb-page * { font-optical-sizing: none !important; font-variation-settings: 'opsz' 14 !important; }

.bleed { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.grad-b { position: absolute; left: 0; right: 0; bottom: 0; background: linear-gradient(to top, rgba(10,6,8,.68), rgba(10,6,8,0)); pointer-events: none; }
.rule { position: absolute; height: 2px; }
.rule.rose { background: var(--rose); } .rule.gold { background: var(--gold); }
.folio { position: absolute; bottom: 20px; font: 13px/1 'Bodoni Moda', serif; letter-spacing: 2px; color: var(--grey); }
.folio-l { left: 40px; } .folio-r { right: 40px; }
.folio.on-dark { color: #e1d7cd; }

/* 表紙 */
.pg-cover .cover-kicker { position: absolute; left: 52px; top: 712px; font: 17px/1 'Bodoni Moda', serif; letter-spacing: 4px; color: #f0e8e1; }
.pg-cover .cover-logo { position: absolute; left: 44px; top: 750px; width: 560px; }
.pg-cover .cover-logo img { width: 100%; height: auto; }
.pg-cover .cover-sub { position: absolute; left: 50px; top: 904px; font: italic 21px/1.2 'Cormorant Garamond', serif; color: #ebe1d7; }

/* ブランドコンセプト */
.pg-concept .concept-h { position: absolute; left: 60px; top: 112px; font: 500 54px/62px 'Bodoni Moda', serif; letter-spacing: 6px; }
.pg-concept .concept-en { position: absolute; left: 60px; top: 280px; font: italic 26px/32px 'Cormorant Garamond', serif; color: var(--grey); }
.pg-concept .concept-ph { position: absolute; left: 410px; top: 100px; width: 320px; height: 460px; border: 1px solid var(--gold); padding: 9px; }
.pg-concept .concept-ph img { width: 100%; height: 100%; object-fit: cover; }
.pg-concept .concept-body { position: absolute; left: 60px; top: 592px; width: 648px; font-size: 16px; line-height: 27px; }
.pg-concept .concept-body p + p { margin-top: 9px; }

/* 目次 */
.pg-contents .contents-h { position: absolute; left: 0; right: 0; top: 66px; text-align: center; font: 500 46px/1 'Bodoni Moda', serif; letter-spacing: 10px; }
.pg-contents .toc-row { position: absolute; left: 70px; width: 628px; height: 76px; display: block; }
.pg-contents .toc-th { position: absolute; left: 0; top: 0; width: 76px; height: 76px; object-fit: cover; }
.pg-contents .toc-no { position: absolute; left: 100px; top: 8px; font: 30px/1 'Bodoni Moda', serif; letter-spacing: 2px; color: var(--rose); }
.pg-contents .toc-name { position: absolute; left: 170px; top: 4px; font: italic 31px/1.1 'Bodoni Moda', serif; }
.pg-contents .toc-row::after { content: ""; position: absolute; left: 170px; right: 0; top: 58px; height: 1px; background: #d6ccc0; }
.pg-contents .toc-pg { position: absolute; right: 0; top: 14px; font: 18px/1 'Bodoni Moda', serif; letter-spacing: 2px; color: var(--grey); }
.pg-contents .toc-row:hover .toc-name { color: var(--rose); }
.pg-contents .toc-extra { position: absolute; left: 70px; width: 628px; font: 500 18px/1 'Bodoni Moda', serif; letter-spacing: 3px; }
.pg-contents .toc-extra .toc-pg { top: 0; }

/* シリーズ: 全面写真 */
.pg-photo .photo-no { position: absolute; left: 40px; top: 640px; font: 150px/1 'Bodoni Moda', serif; color: #fff; }
.pg-photo .photo-name { position: absolute; left: 50px; top: 832px; font: italic 46px/1 'Bodoni Moda', serif; color: #fff; }
.pg-photo .photo-series { position: absolute; left: 52px; top: 900px; font: 14px/1 'Bodoni Moda', serif; letter-spacing: 6px; color: #e6dcd2; }
.pg-photo .shop-btn { position: absolute; right: 40px; top: 850px; padding: 12px 18px; border: 1px solid rgba(255,255,255,.7); color: #fff;
  font: 13px/1 'Bodoni Moda', serif; letter-spacing: 3px; background: rgba(10,6,8,.25); }
.pg-photo .shop-btn:hover { background: rgba(255,255,255,.15); }
.pg-photo .folio { bottom: 20px; }

/* シリーズ: 説明・商品 */
.pg-detail .det-kicker { position: absolute; left: 56px; top: 50px; font: 15px/1 'Bodoni Moda', serif; letter-spacing: 5px; color: var(--rose); }
.pg-detail .det-name { position: absolute; left: 54px; top: 72px; font: italic 52px/1.1 'Bodoni Moda', serif; }
.pg-detail .det-desc { position: absolute; left: 56px; top: 166px; width: 656px; font-size: 16px; line-height: 28px; }
.pg-detail .det-shot { position: absolute; top: 262px; width: 316px; height: 470px; overflow: hidden; }
.pg-detail .det-shot img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.pg-detail .det-shot:hover img, .pg-detail .det-bra:hover img { transform: scale(1.03); }
.pg-detail .det-sig { position: absolute; left: 56px; top: 792px; font: italic 22px/30px 'Cormorant Garamond', serif; color: var(--grey); }
.pg-detail .det-bra { position: absolute; left: 462px; top: 754px; width: 250px; height: 160px; }
.pg-detail .det-bra img { width: 100%; height: 100%; object-fit: contain; transition: transform .6s ease; }

/* BRA ATELIER */
.pg-atelier .at-h { position: absolute; left: 0; right: 0; top: 50px; text-align: center; font: 500 44px/1 'Bodoni Moda', serif; letter-spacing: 8px; }
.pg-atelier .at-sub { position: absolute; left: 0; right: 0; top: 116px; text-align: center; font: italic 22px/1 'Cormorant Garamond', serif; color: var(--grey); }
.pg-atelier .at-cell { position: absolute; width: 316px; height: 168px; display: block; }
.pg-atelier .at-cell img { width: 100%; height: 144px; object-fit: contain; transition: transform .6s ease; }
.pg-atelier .at-cell:hover img { transform: scale(1.04); }
.pg-atelier .at-cell span { position: absolute; left: 0; right: 0; bottom: 0; text-align: center; font: 12px/1 'Bodoni Moda', serif; letter-spacing: 2px; color: var(--grey); }
.pg-atelier .at-cell:hover span { color: var(--rose); }

/* HIMICO FAMILY */
.pg-family { background: var(--ink); }
.pg-family .fam-h { position: absolute; left: 0; right: 0; top: 46px; text-align: center; font: 500 40px/1 'Bodoni Moda', serif; letter-spacing: 8px; color: #f0e8e1; }
.pg-family .fam-sub { position: absolute; left: 0; right: 0; top: 106px; text-align: center; font: italic 22px/1 'Cormorant Garamond', serif; color: #c8bcb2; }
.pg-family .fam { position: absolute; width: 210px; }
.pg-family .fam > img { width: 210px; height: 280px; object-fit: cover; }
.pg-family figcaption { margin-top: 14px; padding: 0 15px; }
.pg-family figcaption img { width: 100%; height: auto; }

/* 裏表紙 */
.pg-back .veil { position: absolute; inset: 0; background: rgba(12,8,10,.45); }
.pg-back .back-logo { position: absolute; left: 194px; top: 380px; width: 380px; }
.pg-back .back-logo img { width: 100%; height: auto; }
.pg-back .back-tag { position: absolute; left: 0; right: 0; top: 476px; text-align: center; font: italic 26px/1 'Cormorant Garamond', serif; color: #e8ded4; }
.pg-back .back-brand { position: absolute; left: 0; right: 0; top: 836px; text-align: center; font: 20px/1 'Bodoni Moda', serif; letter-spacing: 8px; color: #e8ded4; }
.pg-back .back-url { position: absolute; left: 0; right: 0; top: 872px; text-align: center; font: 13px/1 'Bodoni Moda', serif; letter-spacing: 4px; color: #c8bcb2; }
.pg-back .back-url:hover { color: #fff; }