/*
Theme Name: Design Tool 2026
Theme URI: https://ginzadesign.com
Author: Felidencia Capital
Description: 株式会社デザインツール コーポレートサイト（1ページ完結の企業紹介）。旧テーマ「Design Tool」は残してあるので、テーマを切り替えれば元に戻せる。
Version: 1.0.0
Requires at least: 5.0
Requires PHP: 7.0
License: Proprietary
Text Domain: designtool2026
*/

/* ─────────────────────────────────────────────
   株式会社デザインツール / マストヘッド（K4）
   地 #FFFFFF / 墨 #14161A / 副文 #575C66 / 濃青 #1E3D6F（唯一のアクセント。リンク・ボタン・フォーカスのみ）
   角丸 0 / 影なし / グラデーションなし / 暗い面はフッターの1か所だけ

   書体：題字と電話番号 Fraunces 400（欧文セリフ・光学サイズ軸あり）
         和文見出し Noto Serif JP 500
         本文・表・フォーム Noto Sans JP 400/500
   罫：1px のみ。墨＝構造（ヘッダー下／題字の下／節見出しの下）、墨20%網 #DADBDE＝台帳の行と図版の外周、
       墨50%網 #8D9096＝入力欄の枠
   級数：題字 170px / 電話 72px / h1 38px / h2 32px / リード 17px / 本文・表 16px / 見出し語・ラベル 14〜15px / キャプション 13px
   ───────────────────────────────────────────── */
:root{
  --white:#FFFFFF;
  --ink:#14161A;
  --sub:#575C66;
  --rule:#DADBDE;
  --rule-mid:#8D9096;
  --accent:#1E3D6F;
  --on-dark:#C9CBD0;
  --on-dark-sub:#B4B7BE;
  --en:"Fraunces","Times New Roman",Georgia,serif;
  --ja-serif:"Noto Serif JP","Hiragino Mincho ProN","Yu Mincho",serif;
  --ja-sans:"Noto Sans JP","Hiragino Kaku Gothic ProN","Yu Gothic",sans-serif;
  --pad:clamp(20px,5vw,64px);
  --gut:clamp(16px,2vw,24px);
  --sec:clamp(72px,10vw,128px);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;
  background:var(--white);
  color:var(--ink);
  font-family:var(--ja-sans);
  font-weight:400;
  font-size:16px;
  line-height:1.8;
  letter-spacing:.02em;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
h1,h2,p,figure,dl,dd{margin:0}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

/* 版面と12段グリッド */
.wrap{width:100%;max-width:1280px;margin-inline:auto;padding-inline:var(--pad)}
.cols{display:grid;grid-template-columns:minmax(0,1fr);row-gap:clamp(36px,5vw,56px)}
@media (min-width:1000px){
  .cols{grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gut);row-gap:0}
}

/* 欧文（題字・電話番号）。数字はライニング */
.en{font-family:var(--en);font-weight:400;font-variant-numeric:lining-nums tabular-nums;letter-spacing:.01em}
.nb{white-space:nowrap}

/* テキストリンク：墨＋細い下線。ホバーで濃青 */
.lk{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.28em;text-decoration-color:var(--rule-mid);transition:color .2s ease,text-decoration-color .2s ease}
.lk:hover{color:var(--accent);text-decoration-color:currentColor}
.brk{overflow-wrap:anywhere}

/* ── ヘッダー ─────────────────────────────── */
.head{display:flex;align-items:center;gap:20px 32px;min-height:64px;padding-block:14px;border-bottom:1px solid var(--rule)}
.head-name{font-weight:500;font-size:15px;letter-spacing:.03em;line-height:1.4;white-space:nowrap}
.head-nav{display:none;margin-left:auto;gap:28px}
.head-nav a{text-decoration:none;font-size:15px;letter-spacing:.03em;padding-bottom:2px;border-bottom:1px solid transparent;transition:color .2s ease,border-color .2s ease}
.head-nav a:hover{color:var(--accent);border-bottom-color:currentColor}
.head-tel{margin-left:auto;font-size:20px;line-height:1;text-decoration:none;transition:color .2s ease}
.head-tel:hover{color:var(--accent)}
@media (min-width:760px){
  .head-nav{display:flex}
  .head-tel{margin-left:0}
}

/* ── 題字（マストヘッド） ───────────────────── */
/* 題字は罫の上に載る。窓（overflow:hidden）の中を下から立ち上がるので、罫の下から現れる見え方になる */
.mast-wrap{padding-top:clamp(18px,2.4vw,30px);padding-bottom:clamp(12px,1.5vw,18px);border-bottom:1px solid var(--ink)}
.mast-clip{overflow:hidden;font-size:clamp(88px,13.3vw,170px);padding-top:.04em}
.mast{
  font-family:var(--en);font-weight:400;font-size:inherit;line-height:1;letter-spacing:.02em;
  white-space:nowrap;
  animation:rise .8s cubic-bezier(.18,.82,.26,1) both;
}
@keyframes rise{from{transform:translateY(104%)}to{transform:translateY(0)}}
@media (max-width:759px){
  /* 320px：23.5vw だと DESIGN が 286px で版面 280px からはみ出し、Nの右が切れていた（overflow:hidden なので無音で欠ける）。22vw に下げて全幅で収める */
  .mast-clip{font-size:clamp(60px,22vw,140px)}
  .mast-l{display:block}
}

/* ── 見出しとリード（2列） ──────────────────── */
.hero{padding-top:clamp(26px,3vw,38px);padding-bottom:clamp(26px,3.2vw,40px)}
.hero h1{
  font-family:var(--ja-serif);font-weight:500;
  font-size:clamp(27px,2.2vw + 10px,38px);line-height:1.4;letter-spacing:.03em;
}
.hero h1 .ph{display:block}
.lead{font-size:17px;line-height:1.9;max-width:34em}
.hero h1,.lead,.phrase{word-break:auto-phrase}
@media (min-width:1000px){
  .hero h1{grid-column:1/7}
  .lead{grid-column:8/13;align-self:end;padding-bottom:.3em}
}

/* ── 全幅の写真 ─────────────────────────────── */
.plate img{width:100%;aspect-ratio:3/2;object-fit:cover;object-position:65% 55%}
@media (min-width:760px){.plate img{aspect-ratio:2/1;object-position:center 60%;max-height:720px}}
.plate-cap{display:block;padding-top:12px;font-size:13px;letter-spacing:.04em;line-height:1.7;color:var(--sub)}

/* ── 節（会社概要・お問い合わせ） ──────────────── */
.sec{padding-top:var(--sec)}
.sec-title{
  font-family:var(--ja-serif);font-weight:500;
  font-size:clamp(28px,2.5vw,32px);line-height:1.3;letter-spacing:.05em;
  padding-bottom:16px;border-bottom:1px solid var(--ink);
  margin-bottom:clamp(32px,4vw,52px);
}
.sec-last{padding-bottom:var(--sec)}

/* ── 会社概要：表（左 1〜7 列）と写真（右 8〜13 列） ── */
@media (min-width:1000px){
  .profile-slot{grid-column:1/7}
  .profile-fig{grid-column:8/13}
}
.profile{width:100%;table-layout:fixed;border-collapse:collapse;text-align:left;font-size:16px;line-height:1.8}
.profile th,.profile td{border-bottom:1px solid var(--rule);padding-block:16px;vertical-align:top}
.profile tr:first-child th,.profile tr:first-child td{border-top:1px solid var(--rule)}
.profile th{width:8.5em;font-weight:500;font-size:15px;letter-spacing:.04em;padding-right:16px;white-space:nowrap}
.profile .biz{margin:0;padding:0;list-style:none}
.profile .biz li + li{margin-top:.35em}
.profile-fig img{width:100%;aspect-ratio:4/5;object-fit:cover;outline:1px solid var(--rule);outline-offset:-1px}
@media (max-width:999px){
  .profile-fig{max-width:480px}
}
/* 320px級の画面では住所のビル名を折り返させる（nb の nowrap のままだと横スクロールが出る） */
@media (max-width:400px){
  .profile th{width:6.5em}
  .profile .nb{white-space:normal}
}

/* ── お問い合わせ：連絡先（左 1〜6 列）とフォーム（右 7〜13 列） ── */
@media (min-width:1000px){
  .ci{grid-column:1/6}
  .form{grid-column:7/13}
}
.ci dt{font-size:14px;font-weight:500;letter-spacing:.04em;line-height:1.6}
.ci dd{padding-top:4px}
.ci dd + dt{margin-top:30px}
.ci .tel{
  display:inline-block;white-space:nowrap;font-size:clamp(40px,11.5vw,72px);line-height:1.05;
  text-decoration:none;color:var(--ink);transition:color .2s ease;
}
@media (min-width:760px){.ci .tel{font-size:clamp(56px,5.6vw,72px)}}
.ci .tel:hover{color:var(--accent)}
.ci .fax{display:block;font-size:15px;color:var(--sub);padding-top:6px}
.ci .val{font-size:17px}

/* フォーム：Contact Form 7 に差し替えても体裁が乗るよう、要素セレクタで当てる */
.form p,.form .field{margin:0 0 22px}
.form label{display:block;font-size:14px;font-weight:500;letter-spacing:.04em;line-height:1.6;padding-bottom:8px}
.form input:not([type="submit"]):not([type="button"]),
.form textarea{
  display:block;width:100%;font-family:inherit;font-size:16px;line-height:1.5;letter-spacing:.02em;color:var(--ink);
  background:var(--white);border:1px solid var(--rule-mid);border-radius:0;padding:12px 14px;
  -webkit-appearance:none;appearance:none;transition:border-color .2s ease;
}
.form textarea{min-height:168px;resize:vertical}
.form input:not([type="submit"]):not([type="button"]):hover,
.form textarea:hover{border-color:var(--ink)}
.form input:not([type="submit"]):not([type="button"]):focus,
.form textarea:focus{border-color:var(--accent);outline:none}
.form input:not([type="submit"]):not([type="button"]):focus-visible,
.form textarea:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.form input[type="submit"],.form .send{
  font-family:inherit;font-size:16px;font-weight:500;letter-spacing:.08em;
  color:var(--white);background:var(--accent);border:0;border-radius:0;
  padding:17px 56px;margin-top:6px;cursor:pointer;transition:background-color .2s ease;
}
.form input[type="submit"]:hover,.form .send:hover{background:var(--ink)}

/* ── フッター：墨地の帯 ─────────────────────── */
.foot{background:var(--ink);color:var(--white);padding-top:clamp(40px,4.4vw,52px);padding-bottom:clamp(26px,2.6vw,32px)}
.foot .cols{row-gap:28px}
@media (min-width:1000px){
  .foot-id{grid-column:1/5}
  .foot-addr{grid-column:5/9}
  .foot-note{grid-column:9/13}
}
.foot-name{display:block;font-weight:500;font-size:16px;letter-spacing:.03em;line-height:1.5}
.foot-mark{display:block;font-size:22px;line-height:1.3;padding-top:6px;color:var(--on-dark)}
.foot-addr{font-style:normal;font-size:15px;line-height:1.9;color:var(--on-dark)}
.foot-note{font-size:14px;line-height:1.9;color:var(--on-dark-sub)}
.foot-bottom{
  display:flex;flex-wrap:wrap;gap:6px 24px;justify-content:space-between;
  margin-top:36px;padding-top:18px;border-top:1px solid rgba(255,255,255,.2);
  font-size:13px;letter-spacing:.03em;color:var(--on-dark-sub);
}
.foot-bottom a{text-decoration:none;color:var(--on-dark);transition:color .2s ease}
.foot-bottom a:hover{color:var(--white)}
.foot :focus-visible{outline-color:var(--white)}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .mast{animation:none}
  *{transition-duration:.01ms!important}
}


/* ── Contact Form 7（フォームID 56）の出力に同じ体裁を乗せる ──────────
   CF7 は <p><label>ラベル<br><span class="wpcf7-form-control-wrap"><input></span></label></p> を出す。
   ラベルと入力欄の間隔は .wpcf7-form-control-wrap の padding-top で作る（静的版は .field > label の padding-bottom） */
.form .wpcf7{margin:0}
.form .wpcf7-form-control-wrap{display:block;padding-top:8px}
.form .wpcf7-form>p{margin:0 0 22px}
.form .wpcf7-form>p:last-of-type{margin-bottom:0}
.form .wpcf7 br{display:none}
.form .wpcf7-list-item{margin:0}
.form .wpcf7-spinner{margin:0 0 0 14px}
/* エラー文言。赤は #A02A20（白地で 6.0:1）＝アクセントの濃青とは別系統だが、
   「間違いを指す」以外に使わないので装飾の第2色にはならない */
.form .wpcf7-not-valid-tip{color:#A02A20;font-size:13px;line-height:1.7;padding-top:6px}
.form input.wpcf7-not-valid,.form textarea.wpcf7-not-valid{border-color:#A02A20}
.form .wpcf7-response-output{
  margin:24px 0 0;padding:14px 16px;border:1px solid var(--rule-mid);border-radius:0;
  font-size:15px;line-height:1.8;
}
.form .wpcf7 form.invalid .wpcf7-response-output,
.form .wpcf7 form.unaccepted .wpcf7-response-output,
.form .wpcf7 form.failed .wpcf7-response-output{border-color:#A02A20}
.form .wpcf7 form.sent .wpcf7-response-output{border-color:var(--accent)}
.form .screen-reader-response{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
/* Akismet の隠しフィールドが余白を作らないように */
.form .akismet-fields-container{display:none!important}

/* ── WordPress 用の追記 ────────────────────────────────
   ①短い下層ページでもフッターが画面下に着くようにする（flexの縦積み。中身は今までどおり縦に流れる）
   ②下層ページ（/about/ /contact/ /qanda/ /privacy-policy/）の本文に、本編と同じ級数・行間・罫を当てる */
body{min-height:100vh;display:flex;flex-direction:column}
body>header,body>footer{flex:none}
body>main{flex:1 0 auto}

.page-body{font-size:16px;line-height:1.9;max-width:44em}
.page-body>*+*{margin-top:1.4em}
.page-body h2,.page-body h3,.page-body h4{
  font-family:var(--ja-serif);font-weight:500;line-height:1.5;letter-spacing:.03em;
  margin-top:2.2em;padding-bottom:12px;border-bottom:1px solid var(--rule);
}
.page-body h2{font-size:24px}
.page-body h3{font-size:20px}
.page-body h4{font-size:17px}
.page-body ul,.page-body ol{padding-left:1.4em}
.page-body li+li{margin-top:.5em}
.page-body a{color:var(--ink);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.28em;text-decoration-color:var(--rule-mid)}
.page-body a:hover{color:var(--accent);text-decoration-color:currentColor}
.page-body figure{margin:0}
/* 本文は本番のWordPressが吐いたHTML（画像・Googleマップのiframe・段組ブロック）が入る。
   携帯幅で横に溢れないよう、幅を持つ要素は版面に収める。iframeは 600x450 の指定付きで入ってくる */
.page-body img,.page-body iframe,.page-body video,.page-body table{max-width:100%}
.page-body img{height:auto;margin-inline:auto}
.page-body iframe{display:block;border:0}
.page-body a{overflow-wrap:anywhere}
/* 段組ブロック（.wp-block-columns）は縦積みのままにする＝携帯でも同じ見え方 */
.page-body .wp-block-column+.wp-block-column{margin-top:1.4em}
.page-body table{width:100%;border-collapse:collapse;font-size:15px}
.page-body th,.page-body td{border-bottom:1px solid var(--rule);padding:14px 12px 14px 0;vertical-align:top;text-align:left}
.page-body blockquote{margin:0;padding-left:20px;border-left:1px solid var(--rule-mid);color:var(--sub)}
.page-body hr{border:0;border-top:1px solid var(--rule);margin-block:2em}
/* 本文の中に置かれた問い合わせフォーム（/contact/）にも同じ体裁を当てる */
.page-body .wpcf7{margin-top:2em}