@charset "UTF-8";
/* クラシコ × ヘラルボニー コラボLP
参考: /lp/for_nurse/css/style.css の共通トークン・パターンを踏襲 */
:root {
--base: #242B33;
--black: #3E3E3E;
--white: #FFFFFF;
--purple: #3B0163;
--gray1: #F5F5F5;
--gray: #969696;
}
*, *:after, *:before {
box-sizing: border-box;
border-style: solid;
border-width: 0;
}
html {
line-height: 1.15;
-webkit-text-size-adjust: 100%;
}
body {
margin: 0;
color: var(--base);
font-family: 'Noto Sans JP', sans-serif;
-webkit-font-smoothing: antialiased;
}
img {
max-width: 100%;
height: auto;
display: block;
}
/* for_nurse同様、AOSのfade-upは移動距離を50pxにカスタマイズ（AOSデフォルトは100px） */
[data-aos=fade-up] {
transform: translate3d(0, 50px, 0);
}
/* テキストリンク・画像リンク・ボタン共通のホバー演出（透明度のみ、500msでopacity:0.8）。
productShowcase・closingPhoto（product_cover_*.jpg / lineup_cover_*.jpg など画面いっぱいの
大きな写真）は暗く見えすぎるため対象外にする。
※ AOS(data-aos)がtransition-duration/opacityを要素に直接指定しており、通常の
詳細度勝負では負けてしまう（特にaos-animate付与後）ため!importantで確実に上書きする。
※ data-aos要素（スクロールでfade-upする画像・リンク）は要注意。
一度「aos-animate付与後に限定して適用」という条件で試したが、それでも直らなかった。
原因: aos-animateクラスが付与される「その同じフレーム」で
`a[data-aos].aos-animate`というセレクタ自体も同時にマッチしてしまうため、
transitionの定義（transform+opacity, 2000ms）がAOSのフェードイン開始と
同時に上書きされてしまう（transformのtransitionが消え、下から登場する動きが
一瞬でジャンプしてしまう／opacityのdurationも0.5sに短縮される）。
CSSセレクタの条件分岐だけでは「クラス付与と同時に発生する上書き」を防げないため、
js/main.js側でAOSのtransition完了(transitionendイベント)を検知した後にだけ
js-aosDoneクラスを付与し、それを条件にする方式に変更した。 */
main.siteContent a:not([data-aos]),
main.siteContent button:not([data-aos]),
main.siteContent a[data-aos].js-aosDone,
main.siteContent button[data-aos].js-aosDone {
transition: opacity 0.5s !important;
}
main.siteContent a:hover,
main.siteContent button:hover {
opacity: 0.8 !important;
}
main.siteContent .productShowcase a:hover,
main.siteContent .closingPhoto a:hover {
/* main.siteContent a:hoverより詳細度を上げて確実にこちらを優先させる
（前回、詳細度で除外ルールの方が負けて0.8が適用されてしまっていた）。 */
opacity: 1 !important;
}
/* header */
.header {
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: 1000;
padding: 20px 30px;
mix-blend-mode: difference;
}
.header__logo {
width: 140px;
height: auto;
}
.footer__inner {
padding: 40px 0;
text-align: center;
}
.footer__logo {
display: inline-block;
width: 160px;
height: auto;
}
/* for_nurse同様、sticky+100vhで「次のセクションが被さってくる」フルスクリーン演出 */
.parallax {
width: 100%;
height: 100vh;
position: sticky;
top: 0;
left: 0;
z-index: -1;
}
/* KV: .kvArea(sticky+100vh)いっぱいに画像をcoverで敷き詰める、正真正銘のフルスクリーン。
ただしcoverは画面の縦横比によってクロップ量が変わるため、コピーのtop/left/font-sizeは
CSSの固定値ではなく、js/main.jsの positionKvCopy() でリサイズのたびに再計算している。
（coverの実際の拡大率・オフセットを算出し、Figmaの座標をそこに写像する方式） */
.kvArea__inner {
position: relative;
width: 100%;
height: 100%;
overflow: hidden;
}
.kvArea__inner img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
/* 初回表示のフェードイン。位置・拡縮のズレを避けるため、動かすのはopacityだけにする
（スライド等の動きは付けない。トリガーはjs/main.jsがに付与するkv-loadedクラス） */
.js-kvFadeImg {
opacity: 0;
transition: opacity 2s ease;
}
.js-kvFadeCopy {
opacity: 0;
/* transitionは.kvArea__copy側でまとめて指定（top/left/font-sizeと合わせて1箇所に） */
}
.kv-loaded .js-kvFadeImg,
.kv-loaded .js-kvFadeCopy {
opacity: 1;
}
.kvArea__copy {
position: absolute;
margin: 0;
/* 初期値はJSが実行されるまでのフォールバック。実際の位置はpositionKvCopy()が上書きする */
top: 15.38%;
left: 40.16%;
transform: translateX(-50%);
font-family: 'Noto Serif JP', serif;
font-weight: 200;
font-size: 30px;
color: var(--black);
white-space: nowrap;
/* rAFでの再計算がコマ落ちしても、多少滑らかに見えるようにする保険（opacityのtransitionとは別指定） */
transition: top .1s linear, left .1s linear, font-size .1s linear, opacity 2s ease 0.8s;
}
/* logo_lead: ロゴ2点(HERALBONY/Classico)を縦に並べ、下にリード文。静的なセクションなので
KVのような画面比率対応は不要。Figma実測値(PC: 1280x832フレーム基準)をそのままpxで指定 */
.logoLead {
background: var(--white);
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
padding: 105px 20px 111px;
}
.logoLead__logos {
display: flex;
flex-direction: column;
align-items: center;
gap: 37px; /* Figma実測: Classico開始位置149px - HERALBONYロゴ高さ112px */
margin-bottom: 100px;
}
.logoLead__heralbonyLogo {
width: 243px;
height: auto;
}
.logoLead__classicoLogo {
width: 155px;
height: auto;
}
.logoLead__text {
margin: 0;
max-width: 559px;
font-family: "Yu Gothic Medium", YuGothic, "Hiragino Kaku Gothic ProN", "游ゴシック", sans-serif;
font-weight: 500;
font-size: 16px;
line-height: 28px;
color: var(--black);
/* 改行は
だけで制御しているため、意図しない自動折り返しをwhite-space:nowrapで止める */
white-space: nowrap;
}
/* about_heralbony: 左テキスト・右2x2写真グリッドの2カラム構成（SPは縦積み）
このセクションはKVと同じ sticky+cover のギミックを担う側。
about_heralbony自体をsticky(top:0)で画面に固定し、次のproduct_project
（不透明な白背景）がその上に覆いかぶさるようにスクロールしてくる。
※このsticky演出はPCのみ。SPはテキスト量が多く1画面に収まらないため、
メディアクエリ側でposition:staticに戻し通常フローに戻している。 */
.aboutHeralbony {
background: #F2F4F5;
display: flex;
justify-content: center;
align-items: center;
padding: 60px 149px;
position: sticky;
top: 0;
/* min-heightにしているのはSPでテキスト量が多いとき100vhでコンテンツが
見切れるのを防ぐため。100vhに収まる場合はそのまま画面いっぱいで固定される */
min-height: 100vh;
z-index: -1;
box-sizing: border-box;
}
.aboutHeralbony__inner {
display: flex;
align-items: center;
gap: 64px;
max-width: 981px;
width: 100%;
}
.aboutHeralbony__text {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 30px;
width: 541px;
color: var(--black);
}
.aboutHeralbony__heading {
margin: 0;
font-family: "Playfair Display", serif;
font-weight: 400;
font-size: 36px;
}
.aboutHeralbony__subheading {
margin: 0;
font-family: "Noto Serif JP", serif;
font-weight: 300;
font-size: 21px;
line-height: 35px;
}
.aboutHeralbony__body {
margin: 0;
font-family: "Yu Gothic Medium", YuGothic, "Hiragino Kaku Gothic ProN", sans-serif;
font-weight: 500;
font-size: 16px;
line-height: 28px;
text-align: left;
}
.aboutHeralbony__photos {
/* 4カットまとめて1枚の画像として配置されているため、単純に箱のサイズに合わせて敷き詰める */
width: 376px;
height: 502px;
flex-shrink: 0;
overflow: hidden;
}
.aboutHeralbony__photos img {
width: 100%;
height: 100%;
object-fit: cover;
}
/* product_project: PRODUCT/PROJECTタブ + 商品写真のコラージュ。
about_heralbonyの上に、この不透明な白背景セクションがスクロールで覆いかぶさってくる。
コラージュは980x4044(PC)/345x3488(SP)というFigma上のキャンバスサイズを基準に、
各カードの位置・幅を%指定にして、aspect-ratioで画像比率を保ったままレスポンシブに拡縮する。
PC/SPでカードの並び自体が異なる（レイアウトが違う）ため、u-pcDb/u-spDbで丸ごと出し分けている。 */
/* .productProjectはu-pcDb/u-spDbを併用しているため、ここでdisplay:flexを指定しても
同じ詳細度のユーティリティクラス(display:block/none)に後勝ちで上書きされてしまう
（KVの時と同じ「単一クラス同士は記述順で決まる」問題）。display競合を避けるため
flexで中央寄せするのではなく、内側の要素をmargin:0 autoで中央寄せする方式にしている。 */
.productProject {
background: var(--white);
padding: 100px 20px;
position: relative;
}
.productProject__inner {
max-width: 980px;
width: 100%;
margin: 0 auto;
display: flex;
flex-direction: column;
align-items: center;
gap: 100px;
}
.productProject__tab {
display: flex;
align-items: center;
width: 100%;
}
.productProject__tabItem {
flex: 1;
display: block;
text-align: center;
font-family: 'DM Sans', sans-serif;
font-size: 20px;
line-height: 30px;
padding-bottom: 16px;
}
.productProject__tabItem.is-active {
color: var(--black);
font-weight: 400;
border-bottom: 2px solid var(--black);
}
.productProject__tabItem.is-disabled {
/* PROJECTタブ: Figma上にまだ対応コンテンツが無いため、現状は非活性表示のみ */
color: #969696;
font-weight: 200;
border-bottom: 1px solid #969696;
}
.productProject__tabItem {
cursor: pointer;
background: none;
border: none;
border-bottom: 1px solid #969696;
appearance: none;
font: inherit;
}
.productProject__tabItem.is-active {
border-bottom: 2px solid var(--black);
}
/* PROJECTタブのcoming soon表示（Figma上の別フレーム"PC_project"準拠）。
通常は非表示、JSでタブ切り替え時にis-activeを付与/削除して見せる。 */
.productProject__gallery.is-hidden {
display: none;
}
.productProject__comingSoon {
display: none;
align-items: center;
justify-content: center;
width: 980px;
max-width: 100%;
aspect-ratio: 980 / 593;
background: #EAEAEA;
margin: 0 auto;
}
.productProject__comingSoon.is-active {
display: flex;
}
.productProject__comingSoonText {
font-family: 'DM Sans', sans-serif;
font-size: 30px;
font-weight: 400;
color: var(--black);
text-align: center;
}
/* PROJECTタブ選択中は、PRODUCT LINEUP以降（productShowcase〜closingPhoto）を
まとめて非表示にし、Coming soon＋フッターだけの状態にする。 */
body.is-projectTab .productShowcase,
body.is-projectTab .productLineup,
body.is-projectTab .allLineup,
body.is-projectTab .closingPhoto {
display: none;
}
.productProject__gallery {
position: relative;
width: 100%;
padding-top: calc(4044 / 980 * 100%);
}
.productProject__card {
position: absolute;
}
.productProject__cardImg {
display: block;
width: 100%;
}
.productProject__cardImg img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
/* hero(冒頭のグループ写真)。実写真に差し替え後は object-fit:cover による
通常のカバークロップで対応（画像の縦横比が入れ替わっても伸び歪みしない）。 */
.productProject__cardImg--hero {
position: relative;
overflow: hidden;
}
.productProject__cardImg--hero img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
max-width: none;
object-fit: cover;
object-position: center;
}
.productProject__pair {
display: flex;
}
.productProject__caption,
.productProject__captionCols {
margin-top: 10px;
}
.productProject__caption {
display: flex;
flex-direction: column;
gap: 2px;
}
.productProject__captionCols {
display: flex;
gap: 20px;
}
.productProject__captionCol {
display: flex;
flex-direction: column;
gap: 2px;
}
.productProject__caption a,
.productProject__captionCol a,
.productProject__captionLabel {
font-family: 'DM Sans', sans-serif;
font-weight: 300;
font-size: 12px;
line-height: 18px;
color: var(--black);
}
.productProject__caption a,
.productProject__captionCol a {
text-decoration: underline;
}
/* Frame9(PC)/Frame7(SP)のような「画像+キャプションが横並び」パターン用 */
.productProject__card--row {
display: flex;
align-items: flex-end;
gap: 10px;
}
.productProject__card--row .productProject__cardImg {
width: 56%;
flex-shrink: 0;
}
.productProject__card--row .productProject__caption {
margin-top: 0;
}
/* productShowcase(sticky)とproductLineupの共通ラッパー。
position:stickyの固定可能範囲は直近の祖先ブロックの高さに制限されるため、
これで囲わずに直下へ置くと（ページ全体の高さ）が基準になってしまい、
ALL LINE UPボタン付近までproductShowcaseが張り付いたままになる不具合が発生した。 */
.productShowcaseWrap {
position: relative;
}
/* product_projectとproduct_lineup_allの間の単体画像（Figmaレイヤー名: Classico03553）。
コラージュではなく1枚の全幅写真をaspect-ratioで比率維持しつつcoverで敷き詰めるだけ。
PCのみ：この画像をsticky固定し、後続のproduct_lineup_all（不透明白背景）が
スクロールで上から覆いかぶさる（about_heralbony→product_projectと同じ演出）。 */
.productShowcase {
display: block;
width: 100%;
aspect-ratio: 1280 / 832;
overflow: hidden;
}
.productShowcase.u-pcDb {
/* z-index:-1にすると、bodyやmain等の祖先要素の背後まで沈んでしまい、
リンクやクリックが一切効かなくなるため使わない（実際に発生した不具合）。
後続の.productLineup側にposition+z-indexを与えて上から覆う方式にする。 */
position: sticky;
top: 0;
}
.productShowcase a {
display: block;
width: 100%;
height: 100%;
}
.productShowcase img {
width: 100%;
height: 100%;
object-fit: cover;
}
/* product_lineup_all: PRODUCT LINEUP見出し＋作家カラー別スウォッチナビ＋
作家ごとの商品コラージュ＋作家/作品紹介を5セット並べたセクション。 */
.productLineup {
background: #fff;
padding: 120px 150px 60px;
box-sizing: border-box;
/* 直前のproductShowcase(position:sticky)は暗黙にこちらより上に描画されるため、
position+z-indexを明示して確実に上から覆うようにする。 */
position: relative;
z-index: 1;
}
.productLineup__inner {
display: flex;
flex-direction: column;
align-items: center;
gap: 60px;
max-width: 980px;
width: 100%;
margin: 0 auto;
}
.productLineup__heading {
margin: 0;
font-family: "DM Sans", sans-serif;
font-weight: 300;
font-size: 30px;
color: var(--black);
text-align: center;
}
/* スウォッチナビ（クリックで各作家のセクションへアンカー移動） */
.productLineup__menu {
display: flex;
align-items: center;
gap: 20px;
}
.productLineup__menuItem {
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
width: 90px;
text-decoration: none;
}
.productLineup__menuThumb {
display: block;
width: 90px;
height: 90px;
overflow: hidden;
}
.productLineup__menuThumb img {
width: 100%;
height: 100%;
object-fit: cover;
}
.productLineup__menuArrow {
display: flex;
align-items: center;
justify-content: center;
width: 20px;
height: 15px;
}
.productLineup__menuArrow img {
display: block;
width: 100%;
height: 100%;
}
.productLineup__list {
display: flex;
flex-direction: column;
gap: 140px;
width: 100%;
}
.productLineup__row {
display: flex;
align-items: flex-start;
justify-content: space-between;
width: 100%;
scroll-margin-top: 40px;
/* gapを明示し、justify-content:space-betweenの隙間が0になっても
最低限このgapは必ず確保する（隙間ゼロで密着する不具合の対策）。
実際に隙間ゼロになりそうな幅では.productLineup__artistArtwork側を
縮められるようにしてあるので、狭い幅でも先に縦積みにせず耐えられる。 */
gap: 40px;
}
/* 商品コラム */
.productLineup__products {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 20px;
width: 440px;
flex-shrink: 0;
}
.productLineup__product {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 5px;
width: 100%;
}
.productLineup__column {
display: flex;
align-items: flex-start;
justify-content: space-between;
width: 100%;
}
.productLineup__column .productLineup__product {
width: 210px;
}
.productLineup__column--single {
justify-content: flex-start;
gap: 20px;
}
.productLineup__product--narrow {
width: 190px;
}
.productLineup__productImg {
display: block;
position: relative;
overflow: hidden;
width: 100%;
aspect-ratio: 1747 / 2330;
}
.productLineup__productImg img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
max-width: none;
object-fit: cover;
}
.productLineup__caption {
display: flex;
flex-direction: column;
gap: 2px;
width: 100%;
}
.productLineup__caption a {
font-family: "DM Sans", sans-serif;
font-weight: 300;
font-size: 12px;
line-height: 18px;
color: var(--black);
text-decoration: underline;
text-underline-position: from-font;
}
/* 作家・作品紹介 */
.productLineup__artistArtwork {
display: flex;
flex-direction: column;
gap: 57px;
width: 428px;
/* .productLineup__products(440px固定)側は縮めず、こちら側だけ縮めて
隙間を確保する。縮みすぎて窮屈にならないようmin-widthで下限を設ける。 */
flex-shrink: 1;
min-width: 260px;
}
.productLineup__artist {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 20px;
width: 100%;
}
.productLineup__artistNamePhoto {
display: flex;
align-items: flex-start;
gap: 20px;
width: 100%;
}
.productLineup__artistPhoto {
display: block;
position: relative;
overflow: hidden;
width: 131px;
height: 131px;
flex-shrink: 0;
}
.productLineup__artistPhoto img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
max-width: none;
object-fit: cover;
}
.productLineup__artistName {
display: flex;
flex-direction: column;
gap: 5px;
}
.productLineup__artistLabel {
margin: 0;
font-family: "DM Sans", sans-serif;
font-weight: 200;
font-size: 20px;
color: var(--gray);
}
.productLineup__artistNameText {
margin: 0;
font-family: "Yu Gothic Medium", YuGothic, "Hiragino Kaku Gothic ProN", sans-serif;
font-weight: 500;
font-size: 28px;
color: var(--black);
white-space: nowrap;
}
.productLineup__artistNameRomaji {
margin: 0;
font-family: "DM Sans", sans-serif;
font-weight: 200;
font-size: 16px;
color: var(--gray);
}
.productLineup__artistAffiliation {
margin: 0;
font-family: "Yu Gothic Medium", YuGothic, "Hiragino Kaku Gothic ProN", sans-serif;
font-weight: 500;
font-size: 16px;
line-height: 30px;
color: var(--black);
}
.productLineup__artistBio {
margin: 0;
font-family: "Yu Gothic Medium", YuGothic, "Hiragino Kaku Gothic ProN", sans-serif;
font-weight: 500;
font-size: 15px;
line-height: 24px;
color: #000;
text-align: justify;
width: 100%;
}
.productLineup__artwork {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 20px;
width: 100%;
}
.productLineup__artworkImg {
display: block;
position: relative;
overflow: hidden;
width: 428px;
/* 親(.productLineup__artistArtwork)が縮んだ時、heightを固定pxのままにすると
歪んでしまうため、aspect-ratio+height:autoで比率を保ったまま縮小させる。 */
aspect-ratio: 428 / 400;
height: auto;
max-width: 100%;
}
.productLineup__artworkImg img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
max-width: none;
object-fit: cover;
}
.productLineup__artworkName {
display: flex;
flex-direction: column;
gap: 5px;
width: 100%;
}
.productLineup__artworkLabel {
margin: 0;
font-family: "DM Sans", sans-serif;
font-weight: 200;
font-size: 20px;
color: var(--gray);
}
.productLineup__artworkTitle {
margin: 0;
font-family: "Yu Gothic Medium", YuGothic, "Hiragino Kaku Gothic ProN", sans-serif;
font-weight: 500;
font-size: 16px;
color: var(--black);
}
/* ALL LINE UPボタン */
.allLineup {
display: flex;
justify-content: center;
background: #fff;
padding: 0 20px 80px;
box-sizing: border-box;
}
.allLineup__btn {
display: inline-flex;
align-items: center;
justify-content: center;
width: 200px;
height: 48px;
box-sizing: border-box;
padding: 10px 40px;
background: var(--purple);
color: #fff;
font-family: "DM Sans", sans-serif;
font-weight: 400;
font-size: 16px;
text-decoration: none;
white-space: nowrap;
}
/* product_lineup_allの締め写真（Figmaレイヤー名: Classico01846）。
実写真に差し替え済み。object-fit:coverで比率維持しつつ敷き詰める
（Figma仮素材専用だったクロップ%指定は削除済み）。 */
.closingPhoto {
display: block;
position: relative;
width: 100%;
aspect-ratio: 1280 / 730;
overflow: hidden;
}
.closingPhoto a {
position: absolute;
inset: 0;
}
.closingPhoto img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
/* PRODUCT LINEUPの各行は.productLineup__products(440px)と.productLineup__artistArtwork(428px)が
どちらもflex-shrink:0の固定幅のため、ウィンドウ幅が狭くなり2カラム分＋左右余白が入り切らなく
なると、justify-content:space-betweenの隙間が0になり2つがぴったり接してしまう
（実際に1100px幅で発生した不具合）。SP用の縦積みレイアウト(768px以下)と同じ考え方を
もう少し広い幅から適用し、隙間が0になる手前で先に縦積みへ切り替える。 */
/* .productLineup__artistArtwork側を縮められるようにしたことで、1100px程度の
「そこまで狭くはない」幅では2カラムのまま隙間を保って収まるようになった。
それでも収まらなくなる、より狭い幅でのみ縦積みに切り替える最終フォールバック。 */
@media screen and (max-width:1024px) {
.productLineup__row {
flex-direction: column;
gap: 40px;
}
.productLineup__products {
width: 100%;
}
.productLineup__column .productLineup__product {
width: calc(50% - 10px);
}
.productLineup__product--narrow {
width: 100%;
}
.productLineup__artistArtwork {
width: 100%;
min-width: 0;
gap: 24px;
}
.productLineup__artworkImg {
width: 100%;
max-width: 428px;
}
}
/* PC/SP出し分け（既存サイトの命名規則を踏襲） */
.u-pcDb { display: block; }
.u-spDb { display: none; }
@media screen and (max-width:768px) {
.u-pcDb { display: none; }
.u-spDb { display: block; }
.kvArea__copy {
top: 13.64%;
left: 15.2%;
transform: none;
font-size: 25px;
white-space: normal;
line-height: 1.4;
}
.logoLead {
padding: 80px 20px;
}
.logoLead__logos {
gap: 29px; /* Figma実測: Classico開始位置95px - HERALBONYロゴ高さ66px */
margin-bottom: 60px;
}
.logoLead__heralbonyLogo {
width: 145px;
}
.logoLead__classicoLogo {
width: 110px;
}
.aboutHeralbony {
/* SPはsticky+cover演出を解除し通常フローに戻す（テキスト量が多く1画面に
収まらないため、固定してしまうと下が見切れる・スクロールが不自然になる） */
position: static;
min-height: 0;
z-index: auto;
padding: 80px 20px;
}
.aboutHeralbony__inner {
flex-direction: column;
gap: 32px;
}
.aboutHeralbony__text {
width: 100%;
}
.aboutHeralbony__body {
text-align: left;
}
.aboutHeralbony__photos {
width: 335px;
height: 469.62px;
}
.productProject {
padding: 60px 20px;
}
/* SPのコラージュはposition:absoluteでの厳密な%配置をやめ、通常フローの縦積みに変更。
キャプションの文字サイズは画面幅に応じて拡縮しない（固定px）ため、絶対配置のまま
だとキャプション分の高さのズレが積み重なり、実機でカード同士が重なる事故が起きた。
横方向のズレ感はmargin-leftで再現しつつ、縦方向は通常フローに任せて重なりをなくす。 */
.productProject__gallery--sp {
padding-top: 0;
}
/* カード間の余白はFigma実測でバラつきがある（12px〜70px程度）ため、
一律値ではなく各カードのインラインstyle(margin-bottom)で個別に指定している。
ここではposition:staticにするだけにとどめる */
.productProject__gallery--sp .productProject__card {
position: static;
}
/* タブ〜1枚目の画像の間隔もFigma実測は100pxではなく約60pxだったため、
SPだけinnerのgapを0にし、1枚目のカード自体にmargin-topを個別指定する */
.productProject__inner {
gap: 0;
}
.productProject__tab {
margin-bottom: 60px;
}
.productProject__card--pairStack .productProject__pair {
flex-direction: column;
}
/* Frame9のLeft/Rightキャプションは、PCは横並び・SPは縦積みとFigma側でレイアウトが違う */
.productProject__captionCols {
flex-direction: column;
}
.productShowcase {
aspect-ratio: 375 / 667;
}
/* product_lineup_allはSP用の厳密なFigma実測が未取得のため、まずは
シンプルな縦積みレイアウトで対応（PC同様の内容をレスポンシブに再配置）。 */
.productLineup {
padding: 80px 20px;
}
.productLineup__menu {
gap: 10px;
flex-wrap: wrap;
justify-content: center;
}
.productLineup__menuItem {
width: 56px;
}
.productLineup__menuThumb {
width: 56px;
height: 56px;
}
.productLineup__row {
flex-direction: column;
gap: 40px;
}
.productLineup__products {
width: 100%;
}
.productLineup__column .productLineup__product {
width: calc(50% - 10px);
}
.productLineup__product--narrow {
width: 100%;
}
.productLineup__artistArtwork {
width: 100%;
gap: 24px;
}
.productLineup__artworkImg {
width: 100%;
max-width: 428px;
height: auto;
aspect-ratio: 428 / 400;
}
.allLineup {
padding: 40px 20px 80px;
}
.closingPhoto {
aspect-ratio: 375 / 375;
}
}