/*
Theme Name: Meguriwa support
Theme URI: https://meguriwasupport.com/
Author: MEGURIWA / コーディ
Description: meguriwasupport.com オリジナルテーマ。STUDIO製サイトの忠実移植（パターン51・007型＝クラシックテーマ＋mu-plugin分離）。和文=Shippori Mincho（A1明朝/リュウミン代替）、ラテン6種=Google Fontsそのまま。運用ロジックは mu-plugins/meguriwa-ops.php。
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.5
Requires PHP: 7.4
License: Proprietary (MEGURIWA)
Text Domain: meguriwa-support
*/

/* =========================================================================
 * デザイントークン（:root）— captured/html の34インラインstyle群から正規化
 *   出典: digest/_tokens.md
 * ========================================================================= */
:root {
  /* 色 */
  --c-ink:      #000000;   /* 主見出し（濃） */
  --c-text:     #333333;   /* 本文 */
  --c-sub:      #666666;   /* サブテキスト */
  --c-weak:     #999999;   /* 弱テキスト */
  --c-line:     #cccccc;   /* 罫線 */
  --c-line-bg:  #eeeeee;   /* 薄背景・区切り */
  --c-bg:       #ffffff;   /* 背景白 */
  --c-bg-soft:  #fafafa;   /* わずかに灰 */
  --c-accent:   #f23a3c;   /* 必須*・強調赤（STUDIO踏襲） */

  /* 和文（A1明朝/リュウミン → Shippori Mincho 代替） */
  --f-jp:       'Shippori Mincho', 'Noto Serif JP', serif;
  /* ラテン（STUDIOと同一ソース） */
  --f-caslon:   'Libre Caslon Display', serif;   /* 英見出し・ミッション */
  --f-garamond: 'EB Garamond', serif;            /* ラテン装飾 */
  --f-lato:     'Lato', sans-serif;              /* ラテンUI */
  --f-rajdhani: 'Rajdhani', sans-serif;          /* カテゴリラベル */
  --f-script:   'Reenie Beanie', cursive;        /* 手書き風 */
  --f-roboto:   'Roboto', sans-serif;            /* 細部・© */

  /* タイポスケール（出現値: 11-32px） */
  --fz-11: 11px; --fz-12: 12px; --fz-13: 13px; --fz-14: 14px;
  --fz-15: 15px; --fz-16: 16px; --fz-18: 18px; --fz-20: 20px;
  --fz-24: 24px; --fz-32: 32px;

  /* レイアウト */
  --maxw: 1080px;          /* コンテンツ最大幅 */
  --maxw-narrow: 760px;    /* 記事・テキスト幅 */
  --gutter: 24px;
  --header-h: 72px;

  /* 余白スケール */
  --s-1: 8px; --s-2: 16px; --s-3: 24px; --s-4: 40px;
  --s-5: 64px; --s-6: 96px; --s-7: 128px;
}

/* =========================================================================
 * リセット / ベース
 * ========================================================================= */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--c-bg);
  color: var(--c-text);
  font-family: var(--f-jp);
  font-weight: 400;
  font-size: var(--fz-16);
  line-height: 1.9;
  letter-spacing: .04em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; transition: opacity .25s ease, color .25s ease; }
a:hover { opacity: .6; }
h1, h2, h3, h4 { font-weight: 700; line-height: 1.5; margin: 0; color: var(--c-ink); }
p { margin: 0 0 1.4em; }
ul { margin: 0; padding: 0; list-style: none; }

.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }
.wrap-narrow { max-width: var(--maxw-narrow); }

/* 英字ラベル（Caslon / Garamond） */
.en        { font-family: var(--f-caslon); letter-spacing: .06em; }
.en-label  { font-family: var(--f-rajdhani); letter-spacing: .14em; text-transform: uppercase; font-weight: 500; }
.en-script { font-family: var(--f-script); }
.en-garamond { font-family: var(--f-garamond); }

/* =========================================================================
 * スクロールフェード（assets/js/app.js と対）
 * ========================================================================= */
.fade-in { opacity: 0; transform: translateY(18px); transition: opacity .9s ease, transform .9s ease; }
.fade-in.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .fade-in { opacity: 1; transform: none; transition: none; }
  html { scroll-behavior: auto; }
}

/* =========================================================================
 * ヘッダー
 * ========================================================================= */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(255,255,255,.92);
  backdrop-filter: saturate(120%) blur(6px);
  border-bottom: 1px solid var(--c-line-bg);
}
.site-header .inner {
  max-width: var(--maxw); margin-inline: auto; padding: 18px var(--gutter) 14px;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
}
/* ロゴ中央積み2行（原本準拠） */
.site-logo { font-family: var(--f-caslon); font-size: var(--fz-20); letter-spacing: .22em; color: var(--c-ink); text-align: center; line-height: 1.35; }
.site-logo span { display: block; }
.gnav { display: flex; align-items: center; justify-content: center; gap: var(--s-4); }
.gnav a { font-family: var(--f-rajdhani); font-size: var(--fz-14); letter-spacing: .14em; text-transform: uppercase; font-weight: 600; color: var(--c-ink); }
.gnav a[aria-current="page"] { border-bottom: 1px solid var(--c-ink); }
.nav-toggle { display: none; background: none; border: 0; font-size: 22px; line-height: 1; cursor: pointer; color: var(--c-ink); }

/* =========================================================================
 * フッター
 * ========================================================================= */
.site-footer { background: var(--c-ink); color: #fff; margin-top: var(--s-7); }
.site-footer a { color: #fff; }
.site-footer .inner { max-width: var(--maxw); margin-inline: auto; padding: var(--s-6) var(--gutter) var(--s-4); }
.footer-mission { font-family: var(--f-caslon); font-size: var(--fz-18); line-height: 2; max-width: 720px; margin: 0 auto var(--s-5); text-align: center; color: #f4f4f4; }
.footer-grid { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s-4); align-items: flex-start; }
.footer-nav { display: flex; flex-wrap: wrap; gap: var(--s-3); font-family: var(--f-garamond); font-size: var(--fz-15); letter-spacing: .05em; }
.footer-sns { display: flex; gap: var(--s-2); }
.footer-sns a { display: inline-flex; width: 36px; height: 36px; border: 1px solid rgba(255,255,255,.4); border-radius: 50%; align-items: center; justify-content: center; }
.footer-sns svg { width: 16px; height: 16px; fill: #fff; }
.footer-copy { margin-top: var(--s-4); padding-top: var(--s-3); border-top: 1px solid rgba(255,255,255,.18); font-family: var(--f-roboto); font-size: var(--fz-11); letter-spacing: .04em; color: #bdbdbd; text-align: center; }

/* =========================================================================
 * 共通セクション見出し
 * ========================================================================= */
.section { padding-block: var(--s-6); }
.section-head { text-align: center; margin-bottom: var(--s-5); }
.section-head .en { display: block; font-size: var(--fz-32); color: var(--c-ink); margin-bottom: var(--s-1); }
.section-head .ja { display: block; font-size: var(--fz-16); color: var(--c-sub); letter-spacing: .12em; }

/* =========================================================================
 * トップ: ヒーロー
 * ========================================================================= */
.hero {
  position: relative; min-height: 86vh; display: flex; align-items: center;
  color: #fff;
  background: #2a2a2a center/cover no-repeat;
}
.hero::after { content: ""; position: absolute; inset: 0; background: rgba(0,0,0,.28); }
.hero .inner { position: relative; z-index: 1; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); width: 100%; text-align: center; }
.hero h1 { color: #fff; font-family: var(--f-jp); font-weight: 700; font-size: clamp(26px, 4.4vw, 46px); line-height: 1.9; letter-spacing: .12em; text-shadow: 0 1px 14px rgba(0,0,0,.25); }

/* トップ: about抜粋 */
.intro { text-align: center; }
.intro .lead-en { font-family: var(--f-caslon); font-size: var(--fz-20); color: var(--c-sub); margin-top: var(--s-3); line-height: 1.8; }
.intro .body { max-width: 720px; margin-inline: auto; color: var(--c-text); }
.btn-line {
  display: inline-block; margin-top: var(--s-3);
  font-family: var(--f-rajdhani); letter-spacing: .14em; text-transform: uppercase; font-size: var(--fz-14); font-weight: 600;
  padding-bottom: 4px; border-bottom: 1px solid var(--c-ink); color: var(--c-ink);
}

/* トップ: サービス */
.services { background: var(--c-bg-soft); }
.service-list { display: grid; gap: var(--s-5); }
.service { display: grid; grid-template-columns: 1.1fr 1fr; gap: var(--s-4); align-items: center; }
.service:nth-child(even) { direction: rtl; }
.service:nth-child(even) > * { direction: ltr; }
.service-photo { aspect-ratio: 3/2; background: var(--c-line-bg) center/cover no-repeat; }
.service-body .en { display: block; font-family: var(--f-caslon); font-size: var(--fz-24); color: var(--c-ink); }
.service-body .ja { display: block; font-size: var(--fz-18); color: var(--c-ink); font-weight: 700; margin: 6px 0 var(--s-2); }
.service-body p { color: var(--c-text); font-size: var(--fz-15); }
.service-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: var(--s-2); }
.service-tags span { font-size: var(--fz-12); color: var(--c-sub); border: 1px solid var(--c-line); border-radius: 999px; padding: 3px 12px; }

/* =========================================================================
 * NEWS & WORKS リスト（トップ最新・一覧共通）
 * ========================================================================= */
.nw-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-4) var(--s-3); }
.nw-card { display: block; }
.nw-card .thumb { aspect-ratio: 3/2; background: var(--c-line-bg) center/cover no-repeat; margin-bottom: var(--s-2); overflow: hidden; }
.nw-card .thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.nw-card:hover .thumb img { transform: scale(1.04); }
.nw-cats { display: flex; gap: 8px; margin-bottom: 6px; }
.nw-cats span { font-family: var(--f-rajdhani); font-size: var(--fz-11); letter-spacing: .12em; text-transform: uppercase; color: var(--c-sub); }
.nw-date { font-family: var(--f-garamond); font-size: var(--fz-13); color: var(--c-weak); }
.nw-title { font-size: var(--fz-16); font-weight: 700; line-height: 1.6; margin: 4px 0; color: var(--c-ink); }
.nw-excerpt { font-size: var(--fz-13); color: var(--c-sub); line-height: 1.8; }
.nw-author { font-family: var(--f-garamond); font-size: var(--fz-12); color: var(--c-weak); margin-top: 6px; }

/* フィルタタブ（newsworks） */
.nw-filter { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s-2) var(--s-3); margin-bottom: var(--s-5); }
.nw-filter a { font-family: var(--f-rajdhani); letter-spacing: .12em; text-transform: uppercase; font-size: var(--fz-13); font-weight: 600; color: var(--c-sub); }
.nw-filter a[aria-current="page"], .nw-filter a:hover { color: var(--c-ink); }

.loadmore-wrap { text-align: center; margin-top: var(--s-5); }

/* =========================================================================
 * about ページ
 * ========================================================================= */
.page-hero { text-align: center; padding-block: var(--s-6) var(--s-4); }
.page-hero .en { display: block; font-family: var(--f-caslon); font-size: var(--fz-32); color: var(--c-ink); }
.page-hero .ja { display: block; font-size: var(--fz-16); color: var(--c-sub); letter-spacing: .12em; margin-top: 6px; }

/* 罫線ボックス＋肖像写真左の組み（原本準拠・縦積み） */
.team { display: grid; grid-template-columns: 1fr; gap: var(--s-3); max-width: 860px; margin-inline: auto; }
.member { display: grid; grid-template-columns: 200px 1fr; gap: var(--s-4); border: 1px solid var(--c-line); padding: var(--s-3); align-items: start; text-align: left; }
.member.no-photo { grid-template-columns: 1fr; }  /* 肖像なしメンバー（STUDIO元データに画像なし）はテキスト全幅 */
.member .photo { width: 100%; aspect-ratio: 3/4; border-radius: 0; margin: 0; background: var(--c-line-bg) center/cover no-repeat; }
.member .name { font-size: var(--fz-20); font-weight: 700; color: var(--c-ink); }
.member .role { font-family: var(--f-garamond); font-size: var(--fz-14); color: var(--c-sub); letter-spacing: .06em; margin-bottom: var(--s-2); }
.member .bio { font-size: var(--fz-14); color: var(--c-text); text-align: left; line-height: 1.95; }
.member .sns { display: flex; justify-content: flex-start; gap: 12px; margin-top: var(--s-2); }
.member .sns svg { width: 16px; height: 16px; fill: var(--c-sub); }

/* プラン（つかいかた） */
.plan-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s-3); }
.plan { border: 1px solid var(--c-line); padding: var(--s-3); }
.plan h3 { font-size: var(--fz-18); margin-bottom: 8px; }
.plan .desc { font-size: var(--fz-14); color: var(--c-sub); margin-bottom: var(--s-2); }
.plan ol { padding-left: 1.3em; margin: 0 0 var(--s-2); list-style: decimal; font-size: var(--fz-14); color: var(--c-text); }
.plan .price { font-family: var(--f-garamond); font-size: var(--fz-20); color: var(--c-ink); font-weight: 700; }
.plan .note { font-size: var(--fz-12); color: var(--c-weak); }

/* 料金表 */
.price-table { width: 100%; border-collapse: collapse; font-size: var(--fz-15); }
.price-table th, .price-table td { text-align: left; padding: 14px 10px; border-bottom: 1px solid var(--c-line-bg); vertical-align: top; }
.price-table .item { font-weight: 700; color: var(--c-ink); white-space: nowrap; }
.price-table .price { font-family: var(--f-garamond); color: var(--c-ink); white-space: nowrap; }
.price-table .desc { color: var(--c-sub); font-size: var(--fz-14); }

/* 会社情報 */
.company-info { max-width: 640px; margin-inline: auto; font-size: var(--fz-15); }
.company-info dl { display: grid; grid-template-columns: 160px 1fr; gap: 10px 0; }
.company-info dt { color: var(--c-sub); }
.company-info dd { margin: 0; color: var(--c-text); }
.company-info .biz { grid-column: 1 / -1; }
.company-info .biz li { padding-left: 1em; text-indent: -1em; }

/* =========================================================================
 * contact / privacy / 汎用ページ
 * ========================================================================= */
.page-body { max-width: var(--maxw-narrow); margin-inline: auto; }
.page-body h2 { font-size: var(--fz-20); margin: var(--s-4) 0 var(--s-2); }
.page-body h3 { font-size: var(--fz-16); margin: var(--s-3) 0 var(--s-1); }
.page-body p { font-size: var(--fz-15); }
.page-body .intro-lead { color: var(--c-text); margin-bottom: var(--s-4); }

/* HubSpotフォーム枠（V2 hbspt.forms.create のラップ）
 * 原本準拠: 罫線ボックス内に1カラム縦積み。HubSpot既定の2/3カラムをスコープCSSで上書き。 */
.hs-form-frame { max-width: 640px; margin-inline: auto; border: 1px solid var(--c-line); padding: var(--s-4); }
/* 全フィールド1カラム・全幅 */
.hs-form-frame .hs-form fieldset { max-width: 100% !important; }
.hs-form-frame .hs-form .form-columns-1,
.hs-form-frame .hs-form .form-columns-2,
.hs-form-frame .hs-form .form-columns-3 { display: block !important; }
.hs-form-frame .hs-form .hs-form-field { width: 100% !important; float: none !important; margin-bottom: var(--s-2); }
.hs-form-frame .hs-form .hs-form-field > .input { margin-right: 0 !important; }
.hs-form-frame .hs-form label { display: block; font-size: var(--fz-14); color: var(--c-text); margin-bottom: 6px; letter-spacing: .04em; }
.hs-form-frame .hs-form input[type="text"],
.hs-form-frame .hs-form input[type="email"],
.hs-form-frame .hs-form input[type="tel"],
.hs-form-frame .hs-form input[type="number"],
.hs-form-frame .hs-form textarea,
.hs-form-frame .hs-form select {
  width: 100% !important; box-sizing: border-box;
  border: 1px solid var(--c-line); background: var(--c-bg-soft);
  padding: 10px 12px; font-size: var(--fz-15); font-family: var(--f-jp); color: var(--c-text);
}
.hs-form-frame .hs-form textarea { min-height: 140px; resize: vertical; }
.hs-form-frame .hs-form .hs-error-msgs { font-size: var(--fz-12); color: var(--c-accent); list-style: none; padding: 4px 0 0; }
.hs-form-frame .hs-form .legal-consent-container { font-size: var(--fz-13); color: var(--c-sub); margin-top: var(--s-2); }
.hs-form-frame .hs-form .hs-submit { text-align: center; margin-top: var(--s-3); }
.hs-form-frame .hs-form .hs-button {
  display: inline-block; width: 100%; max-width: 280px;
  background: var(--c-ink); color: #fff; border: 0; cursor: pointer;
  font-family: var(--f-rajdhani); letter-spacing: .14em; text-transform: uppercase; font-weight: 600;
  font-size: var(--fz-14); padding: 14px 40px;
}
.hs-form-frame .hs-form .hs-button:hover { opacity: .85; }

/* =========================================================================
 * 共通CTA（softcta）
 * ========================================================================= */
.softcta { background: var(--c-line-bg); text-align: center; }
.softcta .en { display: block; font-family: var(--f-caslon); font-size: var(--fz-24); color: var(--c-ink); margin-bottom: var(--s-2); }
.softcta p { color: var(--c-text); font-size: var(--fz-15); margin: 0 0 .5em; }
.softcta .btn { display: inline-block; margin-top: var(--s-3); padding: 14px 40px; background: var(--c-ink); color: #fff; font-family: var(--f-rajdhani); letter-spacing: .14em; text-transform: uppercase; font-size: var(--fz-14); font-weight: 600; }
.softcta .btn:hover { opacity: .85; }

/* =========================================================================
 * 投稿詳細（single）
 * ========================================================================= */
.single-head { text-align: center; padding-block: var(--s-5) var(--s-3); }
.single-head .nw-cats { justify-content: center; }
.single-head h1 { font-size: clamp(22px, 3vw, 30px); line-height: 1.6; margin: var(--s-1) auto; max-width: 760px; letter-spacing: .04em; }
.single-head .date { font-family: var(--f-garamond); color: var(--c-weak); font-size: var(--fz-14); }
.single-eyecatch { max-width: var(--maxw); margin: var(--s-3) auto var(--s-5); }
.art-body { max-width: var(--maxw-narrow); margin-inline: auto; }
.art-body p { font-size: var(--fz-16); line-height: 2.0; }
.art-body img { margin: var(--s-3) auto; }
.art-body h2 { font-size: var(--fz-20); margin: var(--s-4) 0 var(--s-2); padding-left: 12px; border-left: 3px solid var(--c-ink); }
.single-meta { max-width: var(--maxw-narrow); margin: var(--s-4) auto 0; padding-top: var(--s-3); border-top: 1px solid var(--c-line-bg); font-size: var(--fz-13); color: var(--c-sub); }
.single-nav { max-width: var(--maxw-narrow); margin: var(--s-4) auto 0; display: flex; justify-content: space-between; font-family: var(--f-rajdhani); letter-spacing: .1em; text-transform: uppercase; font-size: var(--fz-13); }

/* パンくず */
.crumb { font-size: var(--fz-12); color: var(--c-weak); padding-block: var(--s-2); }
.crumb a:hover { color: var(--c-ink); }
.crumb span { margin: 0 .5em; }

/* =========================================================================
 * レスポンシブ
 * ========================================================================= */
@media (max-width: 880px) {
  /* モバイルはロゴ左＋トグル右の1行に戻し、ナビはドロップダウン */
  .site-header .inner { flex-direction: row; align-items: center; justify-content: space-between; padding: 12px var(--gutter); gap: 0; }
  .site-logo { font-size: var(--fz-16); letter-spacing: .14em; }
  .site-logo span { display: inline; }
  .gnav { position: fixed; inset: 56px 0 auto 0; background: #fff; flex-direction: column; gap: 0; padding: var(--s-2) 0; border-bottom: 1px solid var(--c-line-bg); transform: translateY(-130%); transition: transform .3s ease; z-index: 99; }
  .gnav.is-open { transform: none; }
  .gnav a { padding: 14px var(--gutter); width: 100%; text-align: center; }
  .nav-toggle { display: block; }
  .service { grid-template-columns: 1fr; direction: ltr !important; }
  .service:nth-child(even) > * { direction: ltr; }
  .nw-list { grid-template-columns: repeat(2, 1fr); }
  .plan-grid { grid-template-columns: 1fr; }
  .member { grid-template-columns: 1fr; gap: var(--s-2); }
  .member .photo { aspect-ratio: 16/10; max-width: 280px; }
  .company-info dl { grid-template-columns: 110px 1fr; }
}
@media (max-width: 520px) {
  body { font-size: var(--fz-15); }
  .nw-list { grid-template-columns: 1fr; }
  .price-table .desc { display: none; }
  .footer-grid { flex-direction: column; }
}