@charset "utf-8";
/* ==========================================================================
   株式会社創作工房 — themes.css
   配色・トーンの定義（Bloom / ピンク・パステル）。
   白基調＋ピンク〜ラベンダーのグラデーション。角丸は大きめ、影はやわらかく。

   構造・レイアウトは base.css 側にあり、色はすべてここの CSS 変数を参照しています。
   配色を変えたいときは、原則このファイルの値だけを触れば済みます。
   ========================================================================== */

:root {
  --ease: cubic-bezier(.22, .68, .25, 1);
  --font-sans: "Zen Kaku Gothic New", "Hiragino Kaku Gothic ProN", "Noto Sans JP",
               "Yu Gothic Medium", "Meiryo", system-ui, sans-serif;
  --font-latin: "Outfit", "Zen Kaku Gothic New", system-ui, sans-serif;
  --font-display: "Zen Maru Gothic", "Zen Kaku Gothic New", sans-serif;

  /* ベース */
  --bg:            #fffafc;
  --bg-alt:        #fdf2f7;
  --surface:       #ffffff;
  --surface-thin:  rgba(255, 255, 255, .72);
  --text:          #55414c;
  --text-muted:    #7d6a75;
  --heading:       #3f2c38;
  --line:          #f2dde7;
  --line-strong:   #e9cddc;

  /* ブランド */
  --brand:         #e8709b;
  --brand-2:       #b58ce0;
  --brand-grad:    linear-gradient(100deg, #f286ad 0%, #e8709b 45%, #b58ce0 100%);
  --on-brand:      #ffffff;
  --focus-ring:    rgba(232, 112, 155, .22);

  /* ヘッダー */
  --logo:          #3f2c38;
  --logo-sub:      #a4919c;
  --nav:           #5d4a55;
  --header-bg:     rgba(255, 250, 252, .86);
  --drawer-bg:     rgba(255, 247, 251, .96);
  --shadow-header: 0 6px 26px rgba(200, 140, 170, .13);

  /* ヒーロー */
  --hero-bg:       linear-gradient(170deg, #fff6fa 0%, #fdeef6 42%, #f4eefc 100%);
  --hero-title:    #3f2c38;
  --hero-lead:     #7d6a75;
  --hero-marker:   rgba(244, 190, 214, .5);
  --hero-orb-opacity: .55;
  --orb-1:         #ffc6dd;
  --orb-2:         #e2cdff;
  --orb-3:         #ffe0c2;

  /* カード・面 */
  --card-bg:       #ffffff;
  --card-line:     #f6e2ec;
  --shadow-card:    0 10px 30px rgba(206, 146, 176, .12);
  --shadow-card-hi: 0 20px 46px rgba(206, 146, 176, .24);
  --shadow-brand:    0 10px 26px rgba(232, 112, 155, .32);
  --shadow-brand-hi: 0 16px 36px rgba(232, 112, 155, .42);
  --shadow-hero:     0 26px 70px rgba(198, 132, 170, .3);
  --shadow-work:     0 12px 30px rgba(198, 132, 170, .18);
  --shadow-work-hi:  0 24px 52px rgba(198, 132, 170, .3);

  /* タグ */
  --tag-bg:        #fce6ef;
  --tag-text:      #d9578a;

  /* CTA */
  --cta-bg:        linear-gradient(100deg, #f9a8c6 0%, #e8709b 40%, #b58ce0 100%);
  --cta-text:      #ffffff;
  --cta-btn-bg:    #ffffff;
  --cta-btn-text:  #d9578a;

  /* フッター */
  --footer-bg:     #fff6fa;
  --footer-text:   #7d6a75;
  --footer-logo:   #3f2c38;
  --footer-line:   #f0d9e5;

  /* 角丸 */
  --radius-btn:    999px;
  --radius-card:   20px;
  --radius-img:    18px;
  --radius-hero:   28px;
  --radius-input:  14px;

  /* 作品カードのカテゴリバッジ・画像ラベル。
     明るいパステル寄りの絵に載るため、白抜きではなく「白地＋濃い文字」にしている。 */
  --cat-bg:        rgba(255, 255, 255, .82);
  --cat-fg:        #c4497a;
  --ph-label:      rgba(88, 56, 76, .58);
  --ph-label-shadow: none;
}

/* 画像が入るまでの仮ビジュアル用グラデーション（実素材が入った枠では使われません） */
.ph--hero  { --ph-a: #f9a8c6; --ph-b: #c3a3ec; }
.ph--about { --ph-a: #ffd0c2; --ph-b: #f0a9cd; }
.ph[data-tone="1"] { --ph-a: #f9a8c6; --ph-b: #f5c8dd; }
.ph[data-tone="2"] { --ph-a: #c4b0ef; --ph-b: #e9b9dd; }
.ph[data-tone="3"] { --ph-a: #a8c8f0; --ph-b: #d6bdf0; }
.ph[data-tone="4"] { --ph-a: #ffc9a8; --ph-b: #f6a9c4; }
.ph[data-tone="5"] { --ph-a: #9fd4d8; --ph-b: #bdc4ee; }

/* WORKS セクションは明るい面のまま使う */
.works {
  --works-bg:      #fdf2f7;
  --works-text:    #55414c;
  --works-heading: #3f2c38;
  --works-muted:   #7d6a75;
  --works-line:    #e9cddc;
}

/* このデザイン固有のあしらい -------------------------------------------- */
.sec-head--center .sec-label::before,
.sec-head--center .sec-label::after {
  content: "✦";
  margin: 0 12px;
  font-size: 10px;
  opacity: .7;
}
.svc-card { text-align: center; }
.svc-card__icon { margin-inline: auto; }
.svc-card__arw { align-self: center; }
.hero__title { letter-spacing: .045em; }