/* ========================================================================== 特集ページ雛形 CSS ・全ての要素は .ff-page 配下にスコープしてあります（既存サイトへ組み込む際のクラス衝突を避けるため）。実装時はこの1ファイルの中身をそのままモール側のページに貼り付けてください。・色・フォント・余白は :root の CSS変数と各 .ff-block--xx の変数で一括管理しています。ブロックごとの配色はここを書き換えるだけでOKです。 ========================================================================== */ :root{ --ff-ink: #1c1a17; /* 基本文字色（暖かみのある黒） */ --ff-paper: #ffffff; /* ヘッダー／イントロ／フッターの地色 */ --ff-accent: #7a2e2e; /* アクセントカラー（バナー・現在地表示などに最小限使用） */ --ff-line: rgba(28,26,23,0.14); --ff-serif: "游明朝","Yu Mincho","Hiragino Mincho ProN","HGS明朝E",serif; --ff-sans: "游ゴシック体","Yu Gothic","Hiragino Kaku Gothic ProN",sans-serif; --ff-sidebar-w: 380px; --ff-article-w: 800px; } .ff-page{ margin:0; color:var(--ff-ink); font-family:var(--ff-serif); line-height:1.9; background:var(--active-bg, var(--ff-paper)); transition:background-color .6s ease; /* コンテンツの移動（現在のブロック）に合わせて全体の背景色が変化 */ -webkit-font-smoothing:antialiased; overflow-x:hidden; /* 意図せぬ横はみ出し（レイアウト崩れ・横揺れ）を防ぐ安全策 */ } .ff-page *{box-sizing:border-box;} .ff-page img{max-width:100%;display:block;} .ff-page a{color:inherit;text-decoration:none;} /* --- 共通：placeholder画像枠（実装時は img / background-image に置き換え） --- */ .ff-ph{ display:flex;align-items:center;justify-content:center; width:100%;height:100%; border:1px dashed var(--ff-line); color:rgba(28,26,23,0.45); font-family:var(--ff-sans); font-size:12px;letter-spacing:.05em; background:rgba(28,26,23,0.03); } /* ========================================================================== 1. 固定ショップロゴ（画面右上に固定表示。旧ヘッダーの代わり） ========================================================================== */ .ff-logo-fixed{ position:fixed;top:20px;right:24px;z-index:60; display:block; } .ff-logo-fixed img{ width:120px;height:auto;display:block; } /* ========================================================================== 2. メインビジュアル（フル画面）参考サイト同様：中央のタイトルバッジは不動のまま、背景は1枚の合成画像を 2枚並べてゆっくり右から左へシームレスにスライドさせる構成 ========================================================================== */ .ff-mv{ position:relative; height:100vh;height:100dvh;min-height:640px; overflow:hidden; background:#ffffff; } /* A/B 2層のレイヤー。同じ .ff-mv__track（同一アニメーション）を使うことで位置・動きを完全に同期させる */ .ff-mv__layer{ position:absolute;inset:0; overflow:hidden; pointer-events:none; } .ff-mv__layer--a{z-index:3;} /* タイトル1行目の手前・2行目の奥を通過 */ .ff-mv__layer--b{z-index:5;} /* タイトル2行目の手前・3行目の奥を通過 */ /* スマホ専用の静止画背景（PCでは非表示。PC用のA/Bスライドとは別の1枚画像） */ .ff-mv__sp-bg{display:none;} .ff-mv__sp-bg img{width:100%;height:100%;object-fit:cover;display:block;} /* A/Bは同じ速度で同期させ、隙間・密集が出ないようにする */ /* 背景：合成画像を2枚並べたトラックをスライド（画像は縦=画面高さいっぱい、横は比率維持） */ .ff-mv__track{ display:flex; height:100%;width:max-content; animation:ff-marquee 60s linear infinite; } .ff-mv__track img{ flex:none; height:100%;width:auto; display:block; } @keyframes ff-marquee{ from{transform:translateX(0);} to{transform:translateX(-50%);} /* 画像を2枚複製しているため50%で1周分＝シームレスに繋がる */ } @media (prefers-reduced-motion: reduce){ .ff-mv__track{animation:none;} } /* z:1 可読性確保のための、うっすらした白いハロー（これもA/Bの通過で見え隠れする） */ /* タイトル：3行を縦に積み、奥から手前へ z:2 → 4 → 6 の3階層に配置 */ .ff-mv__line{ position:absolute;left:50%;z-index:2; transform:translate(-50%,-50%); font-family:var(--ff-serif); font-size:clamp(40px,6.4vw,76px); letter-spacing:.08em; white-space:nowrap; margin:0; } .ff-mv__line--1{top:calc(50% - 84px);} .ff-mv__line--2{top:50%;z-index:4;} .ff-mv__line--3{ top:calc(50% + 84px);z-index:6; text-align:center; } /* 初回表示時：背景 → 2026AW → TREND → CRUISE の順にふわっと表示（.ff-mv__line は position:absolute + translate(-50%,-50%) で中央揃えしているため、アニメーション側でもそのセンタリングを保ったまま上下オフセットだけ加える） */ @keyframes ff-mv-fade{ from{opacity:0;transform:translateY(14px);} to{opacity:1;transform:translateY(0);} } @keyframes ff-mv-line-fade{ from{opacity:0;transform:translate(-50%, calc(-50% + 14px));} to{opacity:1;transform:translate(-50%, -50%);} } .ff-mv__layer--a,.ff-mv__layer--b,.ff-mv__sp-bg{ animation:ff-mv-fade 1s ease both; } .ff-mv__line--1{animation:ff-mv-line-fade .9s ease .45s both;} .ff-mv__line--2{animation:ff-mv-line-fade .9s ease .9s both;} .ff-mv__line--3{animation:ff-mv-line-fade .9s ease 1.35s both;} @media (prefers-reduced-motion: reduce){ .ff-mv__layer--a,.ff-mv__layer--b,.ff-mv__sp-bg, .ff-mv__line--1,.ff-mv__line--2,.ff-mv__line--3{ animation:none;opacity:1; } } .ff-mv__line3-title{ font-family:var(--ff-serif); font-size:clamp(40px,6.4vw,76px); letter-spacing:.08em; margin:0; } .ff-mv__badge-sub{ font-family:var(--ff-serif);font-style:italic; font-size:13px;letter-spacing:.04em; color:rgba(28,26,23,.6); margin:6px 0 0; } /* ========================================================================== 3. イントロダクション ========================================================================== */ .ff-intro{ max-width:640px;margin:0 auto; padding:96px 24px; text-align:center; } .ff-intro__title{ font-family:var(--ff-serif); font-size:clamp(30px,4vw,42px); line-height:1.7;letter-spacing:.03em; margin:0 0 20px; } .ff-intro__en{ font-family:var(--ff-serif);font-style:italic; font-size:13px;color:rgba(28,26,23,.55); margin:0 0 28px; } .ff-intro__text{ font-size:14px;line-height:2.1; color:rgba(28,26,23,.82); } /* ========================================================================== 4. インデックス ========================================================================== */ .ff-index{ background:var(--ff-paper); border-top:1px solid var(--ff-line); border-bottom:1px solid var(--ff-line); } .ff-index__list{ list-style:none;margin:0;padding:0; display:flex;justify-content:center;overflow-x:auto; max-width:calc(var(--ff-sidebar-w) + var(--ff-article-w) + 160px); margin:0 auto; scrollbar-width:none; } .ff-index__list::-webkit-scrollbar{display:none;} .ff-index__item{flex:0 0 auto;} .ff-index__link{ display:flex;flex-direction:column;align-items:center;gap:8px; padding:72px 16px; font-size:11px;letter-spacing:.06em;white-space:nowrap; color:rgba(28,26,23,.55); border-bottom:2px solid transparent; transition:color .2s, border-color .2s; } .ff-index__thumb{ width:clamp(100px,8vw,120px); aspect-ratio:2/3; /* 縦長を維持したまま幅に応じて高さが追従 */ object-fit:cover; display:block; } .ff-index__link span{font-family:var(--ff-serif);font-size:12px;} .ff-index__link.is-active, .ff-index__link:hover{ color:var(--ff-ink); border-bottom-color:var(--ff-accent); } /* ========================================================================== 5. コンテンツ（サイドバー＋記事 × 6〜7ブロック） ========================================================================== */ .ff-contents{} .ff-block{ position:relative; display:flex;align-items:stretch; background:var(--block-bg); border-bottom:1px solid var(--ff-line); } /* ---- 左：サイドバー（PC幅165px／高さ100%でスクロール中フィックス）構成：タイトル(特大) → イラスト → テキスト(3〜4行) 中身は上下左右センター揃え／背景色はテーマ（ブロック）ごとに --side-bg・--side-fg で切り替え ---- */ .ff-block__sidebar{ flex:0 0 var(--ff-sidebar-w); width:var(--ff-sidebar-w); position:sticky; top:0; align-self:flex-start; height:100vh; height:100dvh; /* 動的ビューポート高さに追従（Safari等でアドレスバーが引っ込んだ際の空白を防ぐ） */ display:flex;flex-direction:column; align-items:center;justify-content:space-evenly; writing-mode:horizontal-tb; gap:28px; padding:36px 12px; background:var(--side-bg, var(--ff-ink)); color:var(--side-fg, var(--ff-paper)); } .ff-block__num{ font-family:var(--ff-serif); font-size:12px;letter-spacing:.1em; opacity:.75; } /* タイトル：特大・縦組み */ .ff-block__title-lg{ writing-mode:horizontal-tb; text-align:center; font-family:var(--ff-serif); width:200px; font-size:32px; letter-spacing:.14em;line-height:1.35; margin:0; } /* イラスト：テーマを表すワンポイント図版（実装時は画像/SVGに差し替え） */ .ff-block__illust{ flex:none; width:240px; /* PC表示 */ aspect-ratio:1/1; border-radius:50%; display:flex;align-items:center;justify-content:center; font-size:12px;letter-spacing:.05em; color:color-mix(in srgb, var(--side-fg) 65%, transparent); text-align:center; } /* テキスト：3〜4行の補足コピー（スマホでは非表示） */ .ff-block__sidetext{ writing-mode:horizontal-tb; width:100%;max-width:260px; text-align:center; font-size:14px;line-height:1.9;letter-spacing:.06em; opacity:.88; } /* ---- 右：記事ブロック（インナー800px中央揃え） ---- */ .ff-block__article{ flex:1 1 auto; min-width:0; padding:96px 24px; } .ff-block__inner{ max-width:var(--ff-article-w); margin:0 auto; } .ff-block__title{ font-family:var(--ff-serif); font-size:clamp(20px,2.4vw,26px); letter-spacing:.03em;line-height:1.7; margin:0 0 6px; } .ff-block__title-en{ font-family:var(--ff-serif);font-style:italic; font-size:12px;color:rgba(28,26,23,.55); margin:0 0 32px; } .ff-block__item{margin-bottom:120px;} /* 画像+テキストを1組として、同一セクション内に複数配置できる単位 */ .ff-block__item:last-child{margin-bottom:0;} /* パターンA：縦画像用（1列・幅60%・中央揃え） */ .ff-block__item--vertical{ width:60%; margin-left:auto;margin-right:auto; } .ff-block__item--w50c{width:50%;margin-left:auto;margin-right:auto;} /* 50%中央揃え */ .ff-block__item--w60r{width:60%;margin-left:auto;margin-right:0;} /* 60%右揃え */ /* パターンB：横画像2枚用（「画像＋テキスト」の組を2列配置） */ .ff-block__row{ display:flex;gap:40px; margin-bottom:64px; } .ff-block__row:last-child{margin-bottom:0;} .ff-block__row .ff-block__item{ flex:1 1 0;min-width:0; margin-bottom:0; /* 個々のitem余白はrow側で管理するため無効化 */ } .ff-block__row--stagger{align-items:flex-start;} /* 上下を揃えず、少しずらして配置 */ .ff-block__row--stagger .ff-block__item:nth-child(2){margin-top:56px;} .ff-block__figure{ width:100%; margin:0 0 32px; } .ff-block__figure img{width:100%;height:auto;display:block;} .ff-block__figure-link{display:block;} /* 画像リンク用。実装時はhref="#"を各商品ページ等のURLに差し替え */ /* パターンC：縦に2枚配置（1枚目=右揃え・幅70%／2枚目=左揃え・幅50%／テキストは2枚目の下のみ）幅は%指定のためスマホでも同じ見え方を維持します */ .ff-block__figure--r70{width:70%;margin:0 0 24px auto;} .ff-block__figure--l50{width:50%;margin:0 auto 32px 0;} .ff-block__figure--r40{width:40%;margin:0 0 24px auto;} .ff-block__figure--l30{width:30%;margin:0 auto 32px 0;} .ff-block__figure--l55{width:55%;margin:0 auto 24px 0;} .ff-block__figure--r45{width:45%;margin:0 0 32px auto;} .ff-block__figure--l65{width:65%;margin:0 auto 24px 0;} /* テキストの幅・揃えを、直前の画像の幅・揃えに合わせる */ .ff-block__figure--r70 + .ff-block__text{width:70%;margin-left:auto;margin-right:0;} .ff-block__figure--l50 + .ff-block__text{width:50%;margin-right:auto;margin-left:0;} .ff-block__figure--r40 + .ff-block__text{width:40%;margin-left:auto;margin-right:0;} .ff-block__figure--l30 + .ff-block__text{width:30%;margin-right:auto;margin-left:0;} .ff-block__figure--l55 + .ff-block__text{width:55%;margin-right:auto;margin-left:0;} .ff-block__figure--r45 + .ff-block__text{width:45%;margin-left:auto;margin-right:0;} .ff-block__figure--l65 + .ff-block__text{width:65%;margin-right:auto;margin-left:0;} /* ========================================================================== スライドショー（フリックでページ送り／自動でフェード切り替え） .ff-block__figure の代わりに使う独立コンポーネント ========================================================================== */ .ff-slideshow{ position:relative; display:grid; margin:0 0 32px; touch-action:pan-y; } .ff-slideshow.ff-reveal{opacity:0;transition:opacity 1s ease, transform 1s ease;} .ff-slideshow.ff-reveal.ff-reveal--up{transform:translateY(48px);} .ff-slideshow.ff-reveal.is-visible{opacity:1;transform:translate(0,0);} .ff-slideshow__slide{ grid-area:1/1; /* 全スライドを同じグリッドセルに重ね、コンテナの高さは最も縦長の画像に自動で合わせる */ min-width:0; /* 画像の実サイズが大きい場合にグリッドが幅からはみ出すのを防ぐ */ opacity:0; transition:opacity .7s ease; } .ff-slideshow__slide.is-active{opacity:1;position:relative;z-index:1;} .ff-slideshow__slide img{width:100%;height:auto;display:block;} /* トリミングせず本来の比率のまま表示 */ .ff-slideshow__dots{ position:absolute;left:50%;bottom:14px;z-index:2; transform:translateX(-50%); display:flex;gap:6px; } .ff-slideshow__dot{ width:6px;height:6px;border-radius:50%; background:rgba(255,255,255,.55); border:1px solid rgba(28,26,23,.3); padding:0;cursor:pointer; } .ff-slideshow__dot.is-active{background:#fff;} @media (prefers-reduced-motion: reduce){ .ff-slideshow__slide{transition:none;} } /* スライドショーの幅・揃え（.ff-block__figure の各パターンと対応） */ .ff-slideshow--w60l{width:60%;margin:0 auto 32px 0;} .ff-slideshow--r70{width:70%;margin:0 0 24px auto;} .ff-slideshow--l65{width:65%;margin:0 auto 24px 0;} .ff-slideshow--r45{width:45%;margin:0 0 32px auto;} .ff-slideshow--w60l + .ff-block__text{width:60%;margin-right:auto;margin-left:0;} .ff-slideshow--r70 + .ff-block__text{width:70%;margin-left:auto;margin-right:0;} .ff-slideshow--l65 + .ff-block__text{width:65%;margin-right:auto;margin-left:0;} .ff-slideshow--r45 + .ff-block__text{width:45%;margin-left:auto;margin-right:0;} .ff-block__text{ font-size:13.5px;line-height:2.1; color:rgba(28,26,23,.85); } .ff-block__text + .ff-block__text{margin-top:1.4em;} .ff-block__text-link{ display:inline-block;margin-top:10px; font-size:12px;letter-spacing:.04em; color:var(--ff-accent); border-bottom:1px solid currentColor; } /* スライドショー商品の遷移リンク（画像自体がスワイプ操作のため、リンクはテキスト側に設置） */ /* スタイリングで使用したアイテムのリンクリスト（画像＋関連アイテム紹介の組み合わせで使用） */ .ff-block__styling-list{ list-style:none;margin:0;padding:0; display:flex;flex-wrap:wrap; gap:0 1em; /* 項目間は1文字分の間隔 */ } .ff-block__styling-list a{ display:inline-block; padding:12px 0; font-size:13px;letter-spacing:.02em; color:var(--ff-ink); transition:opacity .2s; } .ff-block__styling-list a:hover{opacity:.6;} /* ========================================================================== 6. 企画バナー ========================================================================== */ .ff-banner{ background:var(--ff-ink); color:var(--ff-paper); text-align:center; padding:88px 24px; } .ff-banner__title{ font-family:var(--ff-serif); font-size:clamp(18px,2.4vw,24px); letter-spacing:.06em;line-height:1.8; margin:0 0 28px; } .ff-banner__link{ display:inline-block; padding:14px 44px; font-size:12px;letter-spacing:.14em; border:1px solid rgba(243,241,236,.5); transition:background .2s, color .2s; } .ff-banner__link:hover{ background:var(--ff-paper); color:var(--ff-ink); } /* ========================================================================== 7. フッター ========================================================================== */ .ff-footer{ padding:48px 24px; text-align:center; background:var(--ff-paper); } .ff-footer__logo{ font-family:var(--ff-serif); font-size:13px;letter-spacing:.14em; margin-bottom:10px; } .ff-footer__copy{ font-size:10px;letter-spacing:.04em; color:rgba(28,26,23,.5); } /* ========================================================================== レスポンシブ（〜840px：サイドバーを上部の横帯に変更） ========================================================================== */ @media (max-width:840px){ .ff-index__list{max-width:100%;justify-content:flex-start;} /* センター寄せのままだと横スクロールで先頭側がはみ出て届かなくなるため */ .ff-index__thumb{width:clamp(64px,20vw,84px);} /* スマホでは少し小さめに */ .ff-index__link{padding:40px 12px;} /* スマホでは上下パディングも控えめに */ /* 横画像2枚パターンはスマホでは1列に積む */ .ff-block__row{flex-direction:column;gap:0;} .ff-block__row .ff-block__item{margin-bottom:64px;} .ff-block__row .ff-block__item:last-child{margin-bottom:0;} /* 縦画像パターンはスマホでは幅100%に */ .ff-block__item--vertical{width:100%;} /* サイドバーはスマホでも左カラムのまま表示。幅のみ画面幅に合わせて70〜180pxで可変 */ .ff-block__sidebar{ flex:0 0 clamp(70px,20vw,180px); width:clamp(70px,20vw,180px); padding:22px 8px; gap:18px; } .ff-block__title-lg{writing-mode:vertical-rl;width:auto;} .ff-block__illust{width:clamp(28px,7vw,40px);font-size:8px;} .ff-block__sidetext{display:none;} /* テキスト(3〜4行)はスマホ時は非表示 */ .ff-block__article{padding:56px 16px;} /* メインビジュアル：スマホでは独立した静止画1枚に切り替え（PC用A/Bレイヤーは非表示） */ .ff-mv{min-height:560px;} .ff-mv__layer--a,.ff-mv__layer--b{display:none;} .ff-mv__sp-bg{display:block;position:absolute;inset:0;z-index:0;} .ff-mv__line,.ff-mv__line3-title{font-size:clamp(26px,9vw,36px);color:#fff;} .ff-mv__line--1{top:calc(50% - 46px);} .ff-mv__line--3{top:calc(50% + 46px);} .ff-mv__badge-sub{display:none;} /* 特定画像のスマホ限定レイアウト調整 */ /* 04_1・06_1：横長画像のため、幅は100%のまま横方向に30%だけクロップして見せる */ .ff-block__figure:has(img[src="img/26aw_trend_04_1.jpg"]){ width:100%;overflow:hidden; } .ff-block__figure:has(img[src="img/26aw_trend_04_1.jpg"]) img{ width:142.86%;max-width:142.86%;height:auto;margin-left:-21.43%; } .ff-block__figure:has(img[src="img/26aw_trend_04_4.jpg"]), .ff-block__figure:has(img[src="img/26aw_trend_02_2.jpg"]){ width:80%;margin-left:auto;margin-right:auto; } .ff-block__item--w50c{width:100%;margin:0;} /* 01_4/04_4のfigure側で幅指定するため、item側の50%制約は解除 */ .ff-block__figure:has(img[src="img/26aw_trend_01_4.jpg"]), .ff-block__figure:has(img[src="img/26aw_trend_03_2.jpg"]){ width:70%;margin-left:auto;margin-right:auto; } .ff-block__figure:has(img[src="img/26aw_trend_01_4.jpg"]) + .ff-block__text{ width:70%;margin-left:auto;margin-right:auto; } .ff-block__figure--l50:has(img[src="img/26aw_trend_03_2.jpg"]) + .ff-block__text{ width:70%;margin-left:auto;margin-right:auto; /* PCの50%左揃え指定を上書きし、画像幅に合わせる */ } .ff-block__figure:has(img[src="img/26aw_trend_04_4.jpg"]) + .ff-block__text, .ff-block__figure:has(img[src="img/26aw_trend_02_2.jpg"]) + .ff-block__text{ width:80%;margin-left:auto;margin-right:auto; } /* 06_1：幅70%中央揃え */ .ff-block__figure:has(img[src="img/26aw_trend_06_1.jpg"]){ width:70%;margin-left:auto;margin-right:auto; } .ff-block__figure:has(img[src="img/26aw_trend_06_1.jpg"]) + .ff-block__text{ width:70%;margin-left:auto;margin-right:auto; } /* 06_3：幅80%右揃え */ .ff-block__figure:has(img[src="img/26aw_trend_06_3.jpg"]){ width:80%;margin-left:auto;margin-right:0; } .ff-block__figure:has(img[src="img/26aw_trend_06_3.jpg"]) + .ff-block__text{ width:80%;margin-left:auto;margin-right:0; } /* 05_1（PC65%）・05_2（PC45%）：スマホでは幅80%中央揃えに */ .ff-slideshow--l65,.ff-slideshow--r45{ width:80%;margin-left:auto;margin-right:auto; } .ff-slideshow--l65 + .ff-block__text, .ff-slideshow--r45 + .ff-block__text{ width:80%;margin-left:auto;margin-right:auto; } /* 26aw_trend_02_1.jpg：横長画像のため幅は100%のまま、横方向に30%だけクロップして見せる */ .ff-block__figure:has(img[src="img/26aw_trend_02_1.jpg"]){ width:100%;overflow:hidden; } .ff-block__figure:has(img[src="img/26aw_trend_02_1.jpg"]) img{ width:142.86%;max-width:142.86%;height:auto;margin-left:-21.43%; } .ff-block__styling-list a{padding:0;} } /* ブロック内画像のスクロール演出：下／左／右のいずれかからふわっと表示（JSでランダムに方向を付与） */ .ff-reveal{ opacity:0; transition:opacity 1s ease, transform 1s ease; will-change:opacity, transform; } .ff-reveal--up{transform:translateY(48px);} .ff-reveal--left{transform:translateX(-48px);} .ff-reveal--right{transform:translateX(48px);} .ff-reveal.is-visible{opacity:1;transform:translate(0,0);} @media (prefers-reduced-motion: reduce){ .ff-page *{scroll-behavior:auto !important;transition:none !important;} .ff-reveal{opacity:1 !important;transform:none !important;} }@charset "utf-8"; /* CSS Document */