@charset "UTF-8";
/* ==========================================================================
   JOMONÖW — Design Section Styles (v18.3)
   ファイル: design.css
   役割: Design セクション (ヘッダーパート + バナーリスト)
   ---
   ブレークポイント:
   - PC  (≥1025px):  基準1440px / マージン24px / 画像 21:9 / コピー48pt / 矢印160px
   - TAB (482-1024): 基準1024px / マージン12px / 画像 5:4  / コピー36pt / 矢印120px
   - SP  (≤481px):   基準390px  / マージン12px / 画像 4:5  / コピー28pt / 矢印100px
   ---
   共通仕様:
   - 下帯 H186px (固定)、幅は画像/バナーと同じ
   - 画像レイヤー下にグレー台紙 (#e7e6e6)
   - 画像はreveal時、バナー表示から 0.3秒遅延でフェードイン
   - ホバー: 下帯エリアクリッカブル → 下帯背景白く、画像明るく、矢印うねる、画像が画面幅まで横方向のみ拡大 (天地不変)
   ---
   構造:
   <section class="design site-section">
     <header class="design__header">
       <img class="design__header-bg">
       <h2 class="design__title">DESIGN</h2>
     </header>
     <div class="design__list">
       <div class="design__banner">
         <div class="design__banner-imgwrap">
           <div class="design__banner-window">   ← aspect-ratio + グレー台紙背景
             <picture>
               <img class="design__banner-img">  ← 通常時 100%、ホバーで 100% + margin*2 はみ出し
             </picture>
           </div>
         </div>
         <a class="design__banner-foot">          ← H186 固定
           <p class="design__banner-copy">...</p>
           <span class="design__banner-arrow">...</span>
         </a>
       </div>
     </div>
   </section>
   ========================================================================== */

/* ==========================================================================
   セクション全体 + CSS変数 (PC基準、TAB/SPで上書き)
   ========================================================================== */
.design {
  position: relative;
  width: 100%;

  /* PC基準値 */
  --d-margin: 24px;        /* 左右マージン */
  --d-aspect: 21 / 9;      /* 画像比率 */
  --d-foot-h: 186px;       /* 下帯高さ (全BP共通) */
  --d-copy-size: 48px;     /* コピーサイズ */
  --d-arrow-w: 160px;      /* 矢印幅 */
  --d-soon-size: 28px;     /* Almost Hereサイズ */
  --d-title-size: 56px;    /* DESIGNタイトル */
}

/* TAB (482-1024px) */
@media (max-width: 1024px) {
  .design {
    --d-margin: 12px;
    --d-aspect: 5 / 4;
    --d-copy-size: 36px;
    --d-arrow-w: 120px;
    --d-soon-size: 22px;
    --d-title-size: 48px;
  }
}

/* SP (≤481px) */
@media (max-width: 481px) {
  .design {
    --d-aspect: 4 / 5;
    --d-copy-size: 28px;
    --d-arrow-w: 100px;
    --d-soon-size: 18px;
    --d-title-size: 38px;
  }
}

/* ==========================================================================
   ヘッダーパート (Manifest と共通仕様)
   背景: pttn-big-2.svg を天地400pxにトリミング
   見出し: Goudy Bookletter 1911 / レスポンシブ / #720b2e
   ========================================================================== */
.design__header {
  position: relative;
  width: 100%;
  height: var(--header-pattern-h);  /* 400px */
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.design__header-bg {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: var(--header-pattern-svg-w);
  height: auto;
  max-width: none;
  z-index: var(--z-base);
}

.design__title {
  position: relative;
  z-index: var(--z-content);
  font-family: var(--font-goudy);
  font-weight: 400;
  font-size: var(--d-title-size);
  line-height: 1;
  color: var(--color-wine-typo);
  letter-spacing: var(--ls-display);
  margin: 0;
  -webkit-text-stroke: 0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ==========================================================================
   バナーリスト
   - PC/TAB: ヘッダー直下24px + バナー間24px + 下0 (Manifest margin-top 24pxだけで次セクションへ)
   - SP: 天地アキ12px (CDコメント v18.7)
   ========================================================================== */
.design__list {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding-top: 24px;
  padding-bottom: 0;
}

/* ==========================================================================
   バナー全体 = グレー台紙
   幅: 画面幅 - 左右マージン*2
   中央寄せ
   ========================================================================== */
.design__banner {
  position: relative;
  display: block;
  width: calc(100% - var(--d-margin) * 2);
  margin-left: auto;
  margin-right: auto;
  background-color: var(--color-pattern-bg);  /* #e7e6e6 グレー台紙 */
  text-decoration: none;
  transition: background-color 0.4s var(--ease-out);
}

/* ホバー (下帯) で台紙背景が白く */
.design__banner:has(.design__banner-foot:hover) {
  background-color: var(--color-bg-light);  /* #f7f6f6 */
}

/* ==========================================================================
   画像エリア
   imgwrap: ホバー時の左右はみ出しを許可するラッパー
   window: aspect-ratio で天地決定、画像未表示時はグレー台紙が透けて見える
   ========================================================================== */
.design__banner-imgwrap {
  position: relative;
  overflow: visible;
}

.design__banner-window {
  position: relative;
  width: 100%;
  aspect-ratio: var(--d-aspect);
  background-color: var(--color-pattern-bg);  /* 画像未表示時のグレー台紙 */
  overflow: visible;                          /* ホバー時の画像はみ出し許可 */
}

/* ==========================================================================
   画像本体
   通常時: window と同じ幅 (= 台紙幅)
   ホバー時: window より左右 margin 分はみ出して画面幅まで広がる (天地不変)
   フェードイン: reveal--fade の opacity 制御 + reveal.js の data-reveal-delay="300"
   ========================================================================== */
.design__banner-img {
  position: absolute;          /* window のbox高さに影響を与えない (aspect-ratio保護) */
  inset: 0;                    /* top:0 right:0 bottom:0 left:0 */
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;            /* reset.css の max-width:100% を解除 (ホバー時に画面幅まで広げるため) */
  object-fit: cover;
  object-position: center;
  /* v21.9: フェードイン演出を C(blur) の少し早めタイプに変更 (CD選択)。
     blur(16px)+scale1.06 → blur(0)+scale1 を 1.2s。scaleはblurのにじみで窓端が透けるのを防ぐ用。
     (旧B: brightness(2) saturate(0.3) の白飛びフェードから差し替え) */
  filter: blur(16px);
  transform: scale(1.06);
  transition:
    width 0.5s var(--ease-out),
    margin 0.5s var(--ease-out),
    opacity 2s var(--ease-out),
    filter 1.2s var(--ease-out),
    transform 1.2s var(--ease-out);
}

/* フェードイン完了状態: 実像に (blur解除) */
.design__banner-img.is-visible {
  filter: blur(0);
  transform: scale(1);
}

/* ホバー: 画像が画面幅まで広がる (左右margin分はみ出し、天地不変) + 明るく
   ※ v21.7: バナーの拡大は維持 (CD指示)。矢印アニメ (arrow.js) も維持 */
.design__banner:has(.design__banner-foot:hover) .design__banner-img {
  width: calc(100% + var(--d-margin) * 2);
  margin-left: calc(var(--d-margin) * -1);
  margin-right: calc(var(--d-margin) * -1);
  filter: brightness(1.10);
}

/* ==========================================================================
   CommingSoon バナー (.design__banner--soon)
   ホバーで一切反応しない (画像位置・台紙背景維持)
   ========================================================================== */
.design__banner--soon {
  cursor: default;
}

.design__banner--soon:has(.design__banner-foot:hover) {
  background-color: var(--color-pattern-bg);
}

.design__banner--soon:has(.design__banner-foot:hover) .design__banner-img {
  width: 100%;
  margin-left: 0;
  margin-right: 0;
  filter: none;
}

/* ==========================================================================
   下帯 = H186 固定 (全BP共通)
   幅は banner と同じ (= 画像幅)
   コンテンツ: コピー (1-2行) + 矢印 or Almost Here…
   ========================================================================== */
.design__banner-foot {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 24px;
  padding: 24px;
  height: var(--d-foot-h);
  text-decoration: none;
  cursor: pointer;
}

.design__banner--soon .design__banner-foot {
  cursor: default;
}

/* ==========================================================================
   コピー (tsuku-bold)
   フォントサイズはBPごとに切替、line-height は 1.2 (1-2行対応)
   筑紫オールド明朝の視覚センター補正は flex の align で自然配置
   ========================================================================== */
.design__banner-copy {
  position: relative;
  font-family: var(--font-tsuku-old);
  font-weight: 400;
  font-size: var(--d-copy-size);
  line-height: var(--lh-base);  /* 1.75 = サイト基本行送り (SP 28pt → 49pt) */
  color: var(--color-wine-typo);
  margin: 0;
  text-align: center;
  font-feature-settings: "palt" 1;
}

/* ==========================================================================
   矢印 (assets/js/arrow.js でうねる)
   SVGコンテナの width だけBPで切替、arrow.js は変更不要
   ========================================================================== */
.design__banner-arrow {
  position: relative;
  display: block;
  margin: 0 auto;
  width: var(--d-arrow-w);
  height: 28px;
}

.design__banner-arrow svg {
  width: 100%;
  height: 100%;
  display: block;
  overflow: visible;
}

.design__banner-arrow path {
  fill: none;
  stroke: var(--color-wine-typo);
  stroke-width: 2;
  stroke-linecap: butt;
  stroke-linejoin: round;
}

/* ==========================================================================
   Almost Here... (CommingSoon バナー右側)
   ========================================================================== */
.design__banner-soon {
  position: relative;
  display: block;
  margin: 0 auto;
  font-family: var(--font-goudy);
  font-weight: 400;
  font-size: var(--d-soon-size);
  line-height: 1;
  letter-spacing: var(--ls-display);
  color: var(--color-wine-typo);
  flex-shrink: 0;
}

/* ==========================================================================
   SP個別上書き (PC base 全宣言の後に置くことで、specificity同点でも上書きされる)
   ========================================================================== */
@media (max-width: 481px) {
  /* SP: バナー周りの天地アキを12pxに (CDコメント v18.7) */
  .design__list {
    gap: 12px;
    padding-top: 12px;
  }

  /* SP: 行送り1.75でコピーが縦に広がる分、矢印を15px上に詰めて
     下帯H186内のバランスを取る (reveal の transform と競合しないよう position+top) */
  .design__banner-arrow {
    position: relative;
    top: -15px;
  }
}

/* ==========================================================================
   Reduced Motion
   矢印のうねりは arrow.js 側で prefers-reduced-motion を見て停止
   ここでは画像・背景の transition を無効化
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .design__banner,
  .design__banner-img {
    transition: none;
  }
}