AGENT VENTURESTUDIO / 01
← GPT-AI-LP
CODE · 15.5 KB

refs/pengin/wireframe-base.css

Workspace snapshot · 08/31 23:51

/*
  ワイヤーフレーム HTML 共通スタイル（PC基準・装飾なし・モノクロベース）
  デフォルト: PC 1366px幅
  .wf-frame.sp-375 で SP 375px幅に切替可

  EC・特殊機能（カート/お気に入り/FAB/スライダー）は _ec.css 側に分離。
*/

* { margin: 0; padding: 0; box-sizing: border-box; }

:root {
  /* WF 表示用カラー */
  --wf-bg-stage: #E8E8E8;       /* 背景ステージ */
  --wf-bg: #FFFFFF;             /* WFフレーム背景 */
  --wf-bg-soft: #F5F5F5;        /* セクション ソフト背景 */
  --wf-bg-mute: #EEEEEE;        /* 区切り背景 */
  --wf-img: #D9D9D9;            /* 画像プレースホルダ */
  --wf-img-dark: #999999;
  --wf-img-deep: #595959;       /* footer背景 */
  --wf-line: #D9D9D9;
  --wf-text: #000000;
  --wf-text-mute: #5E5E5E;
  --wf-text-light: #A0A0A0;
  --wf-text-faint: #B1B1B1;
  --wf-btn-dark: #373737;
  --wf-tag: #555555;

  /* フレーム幅切替 */
  --wf-frame-pc: 1366px;
  --wf-frame-sp: 375px;
  --wf-frame-w: var(--wf-frame-pc);

  /* セクション余白 */
  --wf-section-py: 80px;
  --wf-section-px: 80px;

  /* 横配置のコンテナ最大幅 */
  --wf-container-max: 1206px;
}

html, body {
  font-family: 'Noto Sans JP', -apple-system, 'Hiragino Kaku Gothic ProN', sans-serif;
  color: var(--wf-text);
  background: var(--wf-bg-stage);
  -webkit-font-smoothing: antialiased;
  letter-spacing: 0.02em;
  font-size: 16px;
  line-height: 1.7;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
button { font: inherit; cursor: pointer; border: none; background: none; color: inherit; }

/* ==========================================================================
   ステージ＆ページラベル（WF確認用UI、本実装には引き継がない）
   ========================================================================== */
.wf-stage {
  min-height: 100vh;
  padding: 24px 16px 80px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}
.wf-pagebar {
  width: 100%;
  max-width: var(--wf-frame-pc);
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
  color: #666;
  letter-spacing: 0.08em;
}
.wf-pagebar .label {
  text-transform: uppercase;
  font-weight: 600;
}
.wf-pagebar .nav a {
  margin-left: 12px;
  color: #444;
  text-decoration: underline;
}
.wf-pagebar .nav a:hover { color: #000; }

/* ==========================================================================
   フレーム（PC既定 / SP切替）
   ========================================================================== */
.wf-frame {
  width: var(--wf-frame-w);
  background: var(--wf-bg);
  position: relative;
  box-shadow: 0 4px 24px rgba(0,0,0,0.08);
  overflow: hidden;
}
.wf-frame.sp-375 { --wf-frame-w: var(--wf-frame-sp); }

/* ==========================================================================
   Header（PC基準・グローバルナビ横一列）
   ========================================================================== */
.wf-header {
  background: var(--wf-bg);
  border-bottom: 1px solid var(--wf-line);
}
.wf-header-bar {
  height: 32px;
  background: var(--wf-bg-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  color: var(--wf-text-mute);
}
.wf-header-main {
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 40px;
  background: var(--wf-bg);
}
.wf-header-logo {
  font-size: 22px;
  font-weight: 600;
  letter-spacing: 0.04em;
}
.wf-header-nav {
  display: flex;
  align-items: center;
  gap: 28px;
  font-size: 14px;
}
.wf-header-nav a { padding: 6px 0; }
.wf-header-cta {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* SP用ヘッダー（.wf-frame.sp-375 内で適用） */
.wf-frame.sp-375 .wf-header-main {
  height: 56px;
  padding: 0 16px;
}
.wf-frame.sp-375 .wf-header-nav { display: none; }
.wf-frame.sp-375 .wf-header-logo { font-size: 18px; }

/* ハンバーガー */
.wf-hamburger {
  display: none;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  font-size: 9px;
}
.wf-frame.sp-375 .wf-hamburger { display: flex; }
.wf-hamburger i { display: block; width: 24px; height: 1px; background: #000; }
.wf-hamburger i + i { margin-top: 5px; }

/* ==========================================================================
   Section base
   ========================================================================== */
.wf-section {
  padding: var(--wf-section-py) var(--wf-section-px);
  background: var(--wf-bg);
}
.wf-section.tight { padding: 40px var(--wf-section-px); }
.wf-section.flat  { padding: 0; }
.wf-section.mute  { background: var(--wf-bg-mute); }
.wf-section.soft  { background: var(--wf-bg-soft); }

.wf-frame.sp-375 .wf-section { padding: 32px 16px; }
.wf-frame.sp-375 .wf-section.tight { padding: 16px 16px; }

.wf-container {
  max-width: var(--wf-container-max);
  margin: 0 auto;
}

/* セクションタイトル：BtoB標準は日本語見出し中心。英字併記は任意。 */
.wf-section-title {
  margin-bottom: 32px;
}
.wf-section-title .label {
  font-size: 13px;
  color: var(--wf-text-mute);
  display: block;
  margin-bottom: 12px;
  letter-spacing: 0.05em;
}
.wf-section-title h2 {
  font-size: 32px;
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1.4;
}
.wf-section-title .lead {
  margin-top: 16px;
  font-size: 15px;
  color: var(--wf-text-mute);
  line-height: 1.9;
  max-width: 720px;
}

/* 旧形式（en/jp併記）も残す — ブランド寄り案件で使用 */
.wf-section-title-en-jp {
  display: flex;
  align-items: baseline;
  gap: 16px;
  margin-bottom: 24px;
}
.wf-section-title-en-jp .en {
  font-family: 'Cormorant Garamond', 'Times New Roman', serif;
  font-size: 28px;
  letter-spacing: 0.06em;
  font-weight: 500;
}
.wf-section-title-en-jp .jp {
  font-size: 16px;
  font-weight: 500;
}
.wf-section-lead {
  font-size: 15px;
  line-height: 1.9;
  margin: 12px 0 32px;
  max-width: 780px;
}
.wf-section-h {
  font-size: 22px;
  font-weight: 600;
  margin-bottom: 16px;
  line-height: 1.5;
}
.wf-section-h-en {
  font-family: 'Cormorant Garamond', 'Times New Roman', serif;
  font-size: 24px;
  letter-spacing: 0.06em;
  margin-bottom: 4px;
}
.wf-frame.sp-375 .wf-section-title .en { font-size: 20px; }
.wf-frame.sp-375 .wf-section-title .jp { font-size: 14px; }
.wf-frame.sp-375 .wf-section-lead { font-size: 13px; line-height: 1.7; margin: 8px 0 16px; }
.wf-frame.sp-375 .wf-section-h { font-size: 16px; }

/* ==========================================================================
   画像プレースホルダ
   ========================================================================== */
.wf-img {
  background: var(--wf-img);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 12px;
  letter-spacing: 0.1em;
  font-family: 'Inter', sans-serif;
}
.wf-img.dark   { background: var(--wf-img-dark); }
.wf-img.deep   { background: var(--wf-img-deep); color: #fff; }
.wf-img.thumb  { background: var(--wf-img-dark); }
.wf-img.kv     { width: 100%; aspect-ratio: 16 / 7; }
.wf-img.square { aspect-ratio: 1 / 1; }
.wf-img.r-4-3  { aspect-ratio: 4 / 3; }
.wf-img.r-3-2  { aspect-ratio: 3 / 2; }
.wf-img.r-16-9 { aspect-ratio: 16 / 9; }

.wf-frame.sp-375 .wf-img.kv { aspect-ratio: 375 / 280; }

/* 実画像配置時 */
.wf-img.has-img {
  background-color: transparent;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  color: transparent;
}

/* ==========================================================================
   オプション要素（必要に応じて使う・デフォルトはシンプル）
   ========================================================================== */

/* セリフ系見出し — ブランド寄りWFで使用、デフォルトはゴシック */
.wf-h-serif {
  font-family: 'Noto Serif JP', serif;
  font-weight: 500;
  letter-spacing: 0.04em;
  line-height: 1.6;
}

/* 英字アイブロウ — 必要時のみ。BtoB標準では使わないことが多い。
   デフォルトでは目立たないトーン。装飾必要時は .wf-eb.bold で */
.wf-eb {
  font-size: 12px;
  letter-spacing: 0.18em;
  color: var(--wf-text-mute);
  display: block;
  font-weight: 500;
  text-transform: uppercase;
}
.wf-eb.serif {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 14px;
}

/* 日本語アイブロウ — BtoB標準。「セクション名」の上に小さく置く */
.wf-jp-eb {
  font-size: 13px;
  color: var(--wf-text-mute);
  display: block;
  font-weight: 500;
  letter-spacing: 0.08em;
}

/* セクションラベル — 番号付き見出しの前置き（「01 / 事業内容」形式） */
.wf-num-label {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-size: 13px;
  color: var(--wf-text-mute);
  margin-bottom: 16px;
  letter-spacing: 0.05em;
}
.wf-num-label::before {
  content: "";
  width: 24px;
  height: 1px;
  background: currentColor;
}

/* 引用 */
.wf-quote {
  font-family: 'Noto Serif JP', serif;
  font-weight: 400;
  line-height: 2.0;
}

/* ==========================================================================
   グリッド（PC基準）
   ========================================================================== */
.wf-col-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; }
.wf-col-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.wf-col-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.wf-col-asym { display: grid; grid-template-columns: 5fr 7fr; gap: 48px; align-items: center; }

.wf-frame.sp-375 .wf-col-2,
.wf-frame.sp-375 .wf-col-3,
.wf-frame.sp-375 .wf-col-4,
.wf-frame.sp-375 .wf-col-asym {
  grid-template-columns: 1fr;
  gap: 16px;
}

/* ==========================================================================
   カード
   ========================================================================== */
.wf-card {
  background: var(--wf-bg);
  border: 1px solid var(--wf-line);
  padding: 24px;
}
.wf-card .card-img {
  background: var(--wf-img);
  aspect-ratio: 16 / 9;
  margin-bottom: 16px;
}
.wf-card .card-cat {
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--wf-text-mute);
  margin-bottom: 8px;
}
.wf-card .card-title {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 8px;
  line-height: 1.5;
}
.wf-card .card-desc {
  font-size: 13px;
  color: var(--wf-text-mute);
  line-height: 1.7;
}

/* ==========================================================================
   ボタン
   ========================================================================== */
.wf-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 56px;
  padding: 0 32px;
  background: var(--wf-img);
  color: var(--wf-text);  /* デフォルト黒文字（暗背景内継承を防ぐ） */
  font-size: 14px;
  letter-spacing: 0.04em;
  min-width: 240px;
  text-decoration: none;
  white-space: nowrap;  /* ボタン内文字折り返し防止 */
}
.wf-btn.block { display: flex; width: 100%; min-width: 0; white-space: normal; }
.wf-btn.white {
  background: #fff !important;
  border: 1px solid #000;
  color: var(--wf-text) !important;  /* 白背景：絶対に黒文字（親要素の color:#fff 継承を遮断） */
}
.wf-btn.dark {
  background: var(--wf-btn-dark);
  color: #fff;
  border: 1px solid var(--wf-btn-dark);
}
/* outline-white = 暗背景内で使う透過ボタン（白枠白文字） */
.wf-btn.outline-white {
  background: transparent;
  border: 1px solid #fff;
  color: #fff;
}
/* outline-dark = 明背景内で使う透過ボタン（黒枠黒文字） */
.wf-btn.outline-dark {
  background: transparent;
  border: 1px solid #000;
  color: var(--wf-text);
}
.wf-btn.lg { height: 64px; font-size: 15px; }
.wf-btn.sm { height: 40px; font-size: 12px; min-width: 0; padding: 0 16px; }

.wf-btn-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.wf-frame.sp-375 .wf-btn { height: 45px; font-size: 13px; padding: 0 16px; min-width: 0; width: 100%; }

/* ==========================================================================
   タグ・パンくず
   ========================================================================== */
.wf-tag {
  display: inline-flex;
  align-items: center;
  height: 24px;
  padding: 0 12px;
  background: var(--wf-img);
  font-size: 11px;
  color: var(--wf-text-mute);
  margin-right: 8px;
}
.wf-breadcrumb {
  font-size: 12px;
  color: var(--wf-text-mute);
  padding: 16px 40px;
  line-height: 1.5;
}
.wf-frame.sp-375 .wf-breadcrumb { font-size: 10px; padding: 8px 16px; }

/* ==========================================================================
   フォーム
   ========================================================================== */
.wf-form-row {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 24px;
  padding: 20px 0;
  border-bottom: 1px solid var(--wf-line);
}
.wf-form-label {
  font-size: 14px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 8px;
}
.wf-form-label .req {
  background: #B32D2D;
  color: #fff;
  font-size: 10px;
  padding: 2px 6px;
}
.wf-form-input {
  width: 100%;
  height: 48px;
  padding: 0 16px;
  border: 1px solid var(--wf-line);
  background: var(--wf-bg-soft);
  font-size: 14px;
}
.wf-form-textarea {
  width: 100%;
  min-height: 160px;
  padding: 16px;
  border: 1px solid var(--wf-line);
  background: var(--wf-bg-soft);
  font-size: 14px;
  resize: vertical;
}
.wf-frame.sp-375 .wf-form-row { grid-template-columns: 1fr; gap: 8px; padding: 12px 0; }

/* ==========================================================================
   ヘルパー
   ========================================================================== */
.wf-row { display: flex; align-items: center; gap: 8px; }
.wf-row.gap-16 { gap: 16px; }
.wf-row.gap-24 { gap: 24px; }
.wf-row.center { justify-content: center; }
.wf-row.between { justify-content: space-between; }

.wf-mt-4 { margin-top: 4px; }
.wf-mt-8 { margin-top: 8px; }
.wf-mt-16 { margin-top: 16px; }
.wf-mt-24 { margin-top: 24px; }
.wf-mt-32 { margin-top: 32px; }
.wf-mt-48 { margin-top: 48px; }
.wf-mb-8 { margin-bottom: 8px; }
.wf-mb-16 { margin-bottom: 16px; }
.wf-mb-24 { margin-bottom: 24px; }
.wf-mb-32 { margin-bottom: 32px; }
.wf-mb-48 { margin-bottom: 48px; }

.wf-text-mute { color: var(--wf-text-mute); }
.wf-text-light { color: var(--wf-text-light); }
.wf-small { font-size: 12px; }
.wf-xs { font-size: 11px; }
.wf-line { height: 1px; background: var(--wf-line); width: 100%; }
.wf-text-center { text-align: center; }

/* ==========================================================================
   Footer
   ========================================================================== */
.wf-footer {
  background: var(--wf-img-deep);
  color: #fff;
  padding: 64px 40px 32px;
}
.wf-footer-cols {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 48px;
  max-width: var(--wf-container-max);
  margin: 0 auto 48px;
}
.wf-footer-col h4 {
  font-size: 13px;
  letter-spacing: 0.1em;
  margin-bottom: 16px;
  font-weight: 500;
}
.wf-footer-col ul li {
  font-size: 13px;
  line-height: 2.0;
  color: rgba(255,255,255,0.85);
}
.wf-footer-bar {
  border-top: 1px solid rgba(255,255,255,0.3);
  padding-top: 24px;
  max-width: var(--wf-container-max);
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: rgba(255,255,255,0.7);
}
.wf-frame.sp-375 .wf-footer { padding: 32px 16px 16px; }
.wf-frame.sp-375 .wf-footer-cols { grid-template-columns: 1fr; gap: 24px; margin-bottom: 24px; }
.wf-frame.sp-375 .wf-footer-bar { flex-direction: column; gap: 8px; font-size: 11px; }