/* =========================================================
   SynQ Creative — "0→1" comp build (numbered editorial)
   ========================================================= */
:root {
  /* ---- color ---- */
  --red:       #C4141C;
  --red-2:     #E2635C;
  --red-dark:  #9C0F16;
  --red-soft:  #F7E2E2;
  --yellow:    #F5B301;
  --ink:       #141414;   /* 主要テキスト */
  --ink-2:     #3A3A3A;
  --body:      #555555;   /* 本文 7.5:1 */
  --muted:     #6B6B6B;   /* 補足 5.4:1 */
  --paper:     #FAF9F7;   /* オフホワイト */
  --line:      #E3E3DF;   /* 罫線 */
  --line-2:    #EDEDE9;
  --dark:      #131313;   /* フッターのみ */
  --white:     #fff;

  /* ---- spacing token（4pxベース・11段）---- */
  --space-1:   4px;   --space-2:   8px;   --space-3:  12px;
  --space-4:  16px;   --space-5:  24px;   --space-6:  32px;
  --space-7:  48px;   --space-8:  64px;   --space-9:  80px;
  --space-10: 96px;   --space-11: 120px;

  /* セクション上下（PC 96 / Tablet 72-88 / Mobile 56-72） */
  --pad-section: clamp(3.5rem, 6.6vw, 6rem);
  /* コンテナ左右 */
  --gutter: 24px;

  /* ---- type scale ---- */
  --fs-2xs:  .75rem;    /* 12px  small label */
  --fs-xs:   .8125rem;  /* 13px  日付・注釈 */
  --fs-sm:   .875rem;   /* 14px  補足・説明 */
  --fs-base: 1rem;      /* 16px  本文 */
  --fs-md:   1.1875rem; /* 19px  リード */
  --fs-lg:   1.3125rem; /* 21px  作品・サービス名 */
  --fs-xl:   1.5625rem; /* 25px  小見出し */
  --fs-2xl:  2rem;      /* 32px  大見出し */

  /* ---- radius / border ---- */
  --r-media: 2px;
  --r-sm: 2px;
  --r-md: 4px;
  --r-lg: 4px;

  --wrap: 1320px;
  /* 明朝体を試用中。ゴシックに戻す場合は下の --jp を --jp-gothic の値に差し替え */
  --jp: "Shippori Mincho", "Hiragino Mincho ProN", "Yu Mincho", "YuMincho", "MS PMincho", serif;
  --jp-gothic: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic", "YuGothic", "Meiryo", sans-serif;
  --en: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --ease: cubic-bezier(.22,.61,.36,1);
}
@media (min-width: 768px)  { :root { --gutter: 32px; } }
@media (min-width: 1200px) { :root { --gutter: 48px; } }
@media (min-width: 1440px) { :root { --gutter: 64px; } }
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { font-family: var(--jp); color: var(--body); background: #fff; font-size: var(--fs-base); line-height: 1.9; -webkit-font-smoothing: antialiased; overflow-x: clip; }
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }
.wrap { width: min(var(--wrap), calc(100% - var(--gutter) * 2)); margin-inline: auto; }

/* ---- 日本語の文字詰め（約物のアキを詰める）----
   見出し・ナビ・ボタン・短いラベルにのみ適用。長文の本文は可読性優先で素のまま。 */
.nav a, .btn, .tlink, .footer-col a, .footer-brand p, .footer-col h4,
.page-hero .jp, .page-lead, .form label, .contact-card h3, .contact-card p {
  font-feature-settings: "palt" 1;
}

/* ---- buttons ---- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .7em; height: 44px; padding: 0 var(--space-5); border-radius: var(--r-md); font-family: var(--jp); font-weight: 700; font-size: var(--fs-sm); transition: background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease); white-space: nowrap; }
.btn .ic { transition: transform .25s var(--ease); }
.btn:hover .ic { transform: translateX(4px); }
.btn-red { background: var(--red); color: #fff; }
.btn-red:hover { background: var(--red-dark); }
.btn-lg { height: 46px; padding: 0 var(--space-6); font-size: var(--fs-base); }
.btn-outline { background: #fff; color: var(--ink); border: 1px solid var(--line); }
.btn-outline:hover { border-color: var(--ink); }
.btn-ghost-light { background: transparent; color: #fff; border: 1px solid rgba(255,255,255,.45); }
.btn-ghost-light:hover { border-color: #fff; background: rgba(255,255,255,.1); }

/* ---- text link ---- */
.tlink { display: inline-flex; align-items: center; gap: .55em; font-weight: 700; font-size: var(--fs-xs); letter-spacing: .04em; color: var(--ink); transition: color .25s var(--ease); }
.tlink--red { color: var(--red); }
.tlink::after { content: "→"; color: var(--red); transition: transform .25s var(--ease); }
.tlink:hover::after { transform: translateX(5px); }
.tlink--ink { color: var(--ink); } .tlink--ink::after { color: var(--red); }

/* =========================================================
   Header
   ========================================================= */
/* 現行サイトに合わせ、ヒーローの上では透過。スクロールで白へ */
.site-header { position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  background: transparent; border-bottom: 1px solid transparent;
  transition: background .4s var(--ease), border-color .4s var(--ease); }
.header-inner { display: flex; align-items: center; gap: var(--space-6); height: 72px;
  width: min(1280px, calc(100% - var(--gutter) * 2)); margin-inline: auto; }
.brand { display: flex; align-items: center; gap: var(--space-3); flex: none; }
.brand-mark { width: 32px; height: 32px; border-radius: 50%; background: var(--red);
  display: grid; place-items: center; color: #fff; flex: none; transition: transform .25s var(--ease); }
.brand:hover .brand-mark { transform: scale(1.08); }
.brand-mark svg { width: 15px; height: 15px; }
.brand-name { font-family: var(--en); font-weight: 500; font-size: var(--fs-sm);
  letter-spacing: .2em; color: #fff; white-space: nowrap; transition: color .4s var(--ease); }
.brand-name b { font-weight: 500; }
.nav { display: flex; align-items: center; gap: var(--space-7); margin-left: auto; }
.nav a { font-family: var(--en); font-size: var(--fs-xs); font-weight: 500; letter-spacing: .2em;
  color: rgba(255,255,255,.5); white-space: nowrap; transition: color .25s var(--ease); }
.nav a:hover { color: #fff; }
.header-cta { display: inline-flex; align-items: center; gap: var(--space-2); height: 38px;
  padding: 0 var(--space-5); border: 1px solid rgba(255,255,255,.4); border-radius: var(--r-md);
  font-family: var(--en); font-size: var(--fs-2xs); font-weight: 600; letter-spacing: .12em;
  color: #fff; flex: none; transition: background .25s, border-color .25s, color .25s; }
.header-cta:hover { background: rgba(255,255,255,.12); border-color: #fff; }
.header-cta svg { flex: none; }
.header-dl { display: inline-flex; align-items: center; gap: var(--space-2); height: 38px;
  padding: 0 var(--space-5); background: var(--red); border-radius: var(--r-md);
  font-family: var(--en); font-size: var(--fs-2xs); font-weight: 600; letter-spacing: .12em;
  color: #fff; flex: none; transition: background .25s; }
.header-dl:hover { background: var(--red-dark); }
.nav-cta { display: none; }
.nav-toggle { display: none; flex-direction: column; gap: 5px; width: 32px; margin-left: auto;
  border: 0; background: none; cursor: pointer; align-items: center; justify-content: center; }
.nav-toggle span { width: 22px; height: 1.5px; background: #fff; transition: background .4s var(--ease); }

/* 白い面のヘッダー
   ・トップ：スクロールでJSが .is-solid を付ける
   ・下層  ：body に .page-solid（WordPressでは body_class() で出す）
   これで header の markup は全ページ同一になり、header.php に一本化できる */
.site-header.is-solid,
.page-solid .site-header { background: rgba(255,255,255,.94); backdrop-filter: blur(10px);
  border-bottom-color: var(--line); }
.is-solid .brand-name,
.page-solid .brand-name { color: var(--ink); }
.is-solid .nav a,
.page-solid .nav a { color: var(--muted); }
.is-solid .nav a:hover,
.page-solid .nav a:hover { color: var(--red); }
.is-solid .header-cta,
.page-solid .header-cta { border-color: var(--line); color: var(--ink); }
.is-solid .header-cta:hover,
.page-solid .header-cta:hover { background: var(--paper); border-color: var(--ink); }
.is-solid .nav-toggle span,
.page-solid .nav-toggle span { background: var(--ink); }

/* =========================================================
   Footer (dark)
   ========================================================= */
.site-footer { background: var(--dark); color: #fff; padding: clamp(4rem, 6vw, 6rem) 0 var(--space-5); }
.footer-top { display: grid; grid-template-columns: 1.5fr repeat(6, minmax(0, 1fr)); gap: var(--space-6); }
.footer-brand .brand { margin-bottom: var(--space-4); }
.footer-brand .brand-name { color: #fff; }
.footer-brand p { font-size: var(--fs-sm); color: rgba(255,255,255,.62); line-height: 1.8; max-width: 30ch; }
.footer-social { display: flex; gap: var(--space-3); margin-top: var(--space-5); }
.footer-social a { width: 36px; height: 36px; border-radius: 50%; background: rgba(255,255,255,.08); display: grid; place-items: center; color: #fff; transition: .2s; }
.footer-social a:hover { background: rgba(255,255,255,.18); }
.footer-col h4 { font-family: var(--en); font-size: var(--fs-xs); font-weight: 700; letter-spacing: .06em; color: #fff; margin-bottom: var(--space-4); }
.footer-col li { margin-bottom: var(--space-3); }
.footer-col a { font-size: var(--fs-sm); color: rgba(255,255,255,.62); }
.footer-col a:hover { color: #fff; }
.footer-bottom { margin-top: var(--space-7); padding-top: var(--space-5); border-top: 1px solid rgba(255,255,255,.1); display: flex; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap; font-family: var(--en); font-size: var(--fs-2xs); color: rgba(255,255,255,.55); }

/* =========================================================
   Sub pages (contact.html)
   ========================================================= */
.page-hero { background: var(--paper); padding: calc(72px + clamp(2.5rem,5vw,4rem)) 0 clamp(2.5rem,5vw,4rem); text-align: center; border-bottom: 1px solid var(--line); }
.page-hero .en { font-family: var(--en); font-weight: 800; font-size: clamp(1.8rem,4vw,2.6rem); letter-spacing: -.01em; color: var(--ink); }
.page-hero .jp { font-size: var(--fs-sm); font-weight: 700; color: var(--red); margin-top: var(--space-2); letter-spacing: .1em; }
.breadcrumb { display: flex; gap: var(--space-2); justify-content: center; margin-top: var(--space-4); font-size: var(--fs-xs); color: var(--muted); font-family: var(--en); }
.breadcrumb a:hover { color: var(--red); }
.page-section { padding: clamp(4rem,7.5vw,7.5rem) 0; }
.page-narrow { width: min(760px, 92%); margin-inline: auto; }
.page-lead { text-align: center; color: var(--body); font-size: var(--fs-base); margin-bottom: var(--space-7); line-height: 1.8; }
.form { display: grid; gap: var(--space-5); }
.form-row { display: grid; gap: var(--space-2); }
.form-row.two { grid-template-columns: 1fr 1fr; gap: var(--space-5); }
.form label { font-size: var(--fs-sm); font-weight: 700; color: var(--ink); display: flex; align-items: center; gap: var(--space-2); }
.form label .req { font-size: var(--fs-2xs); font-weight: 700; color: #fff; background: var(--red); padding: .1em .5em; border-radius: var(--r-sm); }
.form input, .form select, .form textarea { width: 100%; font-family: var(--jp); font-size: 16px; color: var(--ink); padding: .8em 1em; border: 1px solid var(--line); border-radius: var(--r-md); background: #fff; transition: border-color .2s; }
.form input:focus, .form select:focus, .form textarea:focus { outline: none; border-color: var(--red); }
.form textarea { min-height: 160px; resize: vertical; }
.form-privacy { display: flex; align-items: center; gap: var(--space-3); font-size: var(--fs-sm); color: var(--body); justify-content: center; }
.form-privacy input { width: auto; }
.form-submit { text-align: center; }
.contact-info { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-5); margin-top: var(--space-8); }
.contact-card { text-align: center; padding: var(--space-6) var(--space-5); border: 1px solid var(--line); border-radius: var(--r-lg); }
.contact-card .ci-ic { width: 46px; height: 46px; margin: 0 auto var(--space-4); border-radius: 50%; background: var(--red-soft); display: grid; place-items: center; color: var(--red); }
.contact-card h3 { font-size: var(--fs-base); font-weight: 700; color: var(--ink); margin-bottom: var(--space-2); }
.contact-card p { font-size: var(--fs-sm); color: var(--muted); }

/* =========================================================
   Reveal
   ========================================================= */
.reveal { opacity: 0; transform: translateY(12px); transition: opacity .45s ease-out, transform .45s ease-out; }
.reveal.in { opacity: 1; transform: none; }
.reveal.d1 { transition-delay: .07s; } .reveal.d2 { transition-delay: .14s; }

/* =========================================================
   Responsive（共通部品のみ / 各セクションは editorial.css 側）
   ========================================================= */
/* 1400px以下：ナビとCTAの余白を詰める */
@media (max-width: 1400px) {
  .nav { gap: var(--space-4); padding: 0 var(--space-4); }
  .header-cta, .header-dl { padding: 0 var(--space-5); }
}
/* 1200px以下：ナビとCTAをハンバーガーへ格納 */
@media (max-width: 1200px) {
  .nav, .header-dl, .header-cta { display: none; }
  .nav-toggle { display: flex; margin-left: auto; }
  .header-inner { padding-left: 4%; padding-right: 0; }
  .site-header .nav.open { display: flex; flex-direction: column; align-items: flex-start; position: absolute; top: 72px; left: 0; right: 0; background: #fff; border-bottom: 1px solid var(--line); padding: var(--space-4) 5% var(--space-6); gap: 0; z-index: 90; }
  .site-header .nav.open a { padding: var(--space-3) 0; width: 100%; border-bottom: 1px solid var(--line); color: var(--ink); letter-spacing: .12em; }
  .site-header .nav.open .nav-cta { display: flex; align-items: center; justify-content: center;
    height: 46px; margin-top: var(--space-4); border: 1px solid var(--line); border-radius: var(--r-md);
    font-weight: 700; font-size: var(--fs-sm); color: var(--ink); width: 100%; padding: 0; }
  .site-header .nav.open .nav-cta--red { margin-top: var(--space-5); background: var(--red);
    border-color: var(--red); color: #fff; }
}
@media (max-width: 1080px) {
  .footer-top { grid-template-columns: 1fr 1fr 1fr; }
  .footer-brand { grid-column: 1 / -1; }
}
@media (max-width: 860px) {
  .contact-info { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
  .footer-top { grid-template-columns: 1fr 1fr; }
  .form-row.two { grid-template-columns: 1fr; }
}
@media (max-width: 420px) {
  .footer-top { grid-template-columns: 1fr; }
}

.br-sp { display: none; }
@media (max-width: 767px) { .br-sp { display: inline; } }

/* 固定ヘッダーぶんの逃げ（ヒーローのないページ）*/
.art { padding-top: calc(72px + var(--space-9)); }