お問い合わせ

<!-- ============================================================
     WordPress「カスタムHTML」ブロック用（お問い合わせページの中身）
     この内容を丸ごとコピーして、固定ページ本文の
     「カスタムHTML」ブロックに貼り付けてください。
     ※ヘッダー・フッターはテーマが自動でつけるので入れていません。
     ============================================================ -->

<style>
/* ==========================================================
   基本設定（トップページと同じ配色・文字）
   ========================================================== */
:root{
  --ink:        #2E2410;
  --ink-soft:   #6B5A3A;
  --paper:      #FFFFFF;
  --paper-2:    #F8F4EC;
  --line:       #E7DFCF;
  --grape:      #703F07;
  --grape-soft: #F1E7D6;
  --amber:      #C08A2C;
  --amber-soft: #F7EEDA;

  --font-jp-serif: "Zen Old Mincho", "Yu Mincho", serif;
  --font-jp:       "Zen Kaku Gothic New", "Hiragino Sans", sans-serif;
  --font-en:       "Newsreader", Georgia, serif;
  --font-mono:     "JetBrains Mono", monospace;

  --shell: 1120px;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; scroll-padding-top:76px; }
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--font-jp); font-size:16px; line-height:1.9;
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block; }
a{ color:inherit; }
.shell{ width:100%; max-width:var(--shell); margin-inline:auto; padding-inline:24px; }

.sec-label{
  font-family:var(--font-mono); font-size:12px; letter-spacing:.18em;
  text-transform:uppercase; color:var(--grape); margin:0 0 14px;
  display:flex; align-items:center; gap:12px;
}
.sec-label::before{ content:""; width:28px; height:1px; background:currentColor; }
.sec-title{
  font-family:var(--font-jp-serif); font-weight:600;
  font-size:clamp(26px,3.6vw,40px); line-height:1.4; letter-spacing:.02em; margin:0 0 8px;
}
.sec-title .en{
  display:block; font-family:var(--font-en); font-weight:300; font-style:italic;
  font-size:clamp(15px,1.8vw,20px); color:var(--ink-soft); letter-spacing:.02em; margin-top:6px;
}

.btn{
  display:inline-flex; align-items:center; gap:10px;
  padding:14px 26px; border-radius:999px;
  background:var(--grape); color:#fff; text-decoration:none;
  font-size:14px; letter-spacing:.06em; font-weight:500;
  border:1px solid var(--grape); cursor:pointer;
  transition:background .25s, color .25s, transform .25s;
}
.btn:hover{ background:transparent; color:var(--grape); transform:translateY(-2px); }
.btn--ghost{ background:transparent; color:var(--ink); border-color:var(--line); }
.btn--ghost:hover{ background:var(--ink); color:#fff; border-color:var(--ink); }
.btn .arrow{ transition:transform .25s; }
.btn:hover .arrow{ transform:translateX(4px); }

/* ---- ヘッダー ---- */
.site-header{
  position:fixed; inset:0 0 auto 0; z-index:100;
  display:flex; align-items:center; height:76px;
  color:var(--ink); background:rgba(255,255,255,.94); backdrop-filter:blur(8px);
  box-shadow:0 1px 0 var(--line);
}
.site-header .shell{ display:flex; align-items:center; justify-content:space-between; gap:24px; }
.logo{ text-decoration:none; display:flex; align-items:baseline; gap:10px; }
.logo__mark{ font-family:var(--font-en); font-size:26px; letter-spacing:.14em; font-weight:400; }
.logo__name{ font-size:11px; letter-spacing:.14em; opacity:.75; }
.nav{ display:flex; align-items:center; gap:30px; }
.nav a{ text-decoration:none; font-size:13.5px; letter-spacing:.06em; position:relative; padding-block:6px; }
.nav a::after{
  content:""; position:absolute; left:0; bottom:0; width:100%; height:1px;
  background:currentColor; transform:scaleX(0); transform-origin:right; transition:transform .3s;
}
.nav a:hover::after{ transform:scaleX(1); transform-origin:left; }
.nav .nav-cta{ padding:10px 20px; border:1px solid var(--grape); border-radius:999px; color:var(--grape); }
.nav .nav-cta::after{ display:none; }
.nav .nav-cta:hover{ background:var(--grape); color:#fff; }
.menu-btn{ display:none; width:44px; height:44px; border:0; background:none; color:inherit; cursor:pointer; padding:0; align-items:center; justify-content:center; }
.menu-btn span{ display:block; width:22px; height:1.5px; background:currentColor; position:relative; }
.menu-btn span::before,.menu-btn span::after{ content:""; position:absolute; left:0; width:22px; height:1.5px; background:currentColor; transition:.3s; }
.menu-btn span::before{ top:-7px; } .menu-btn span::after{ top:7px; }
.menu-btn[aria-expanded="true"] span{ background:transparent; }
.menu-btn[aria-expanded="true"] span::before{ top:0; transform:rotate(45deg); }
.menu-btn[aria-expanded="true"] span::after{ top:0; transform:rotate(-45deg); }

/* ---- ページ見出し（小さめのヒーロー） ---- */
.page-hero{
  padding:140px 0 60px;
  background:radial-gradient(120% 120% at 85% 0%, #FFFFFF 0%, #F8F1E3 55%, #F1E7D2 100%);
  border-bottom:1px solid var(--line);
}
.page-hero .eyebrow{ font-family:var(--font-mono); font-size:12px; letter-spacing:.2em; color:var(--grape); margin:0 0 14px; }
.page-hero h1{ font-family:var(--font-en); font-weight:300; font-size:clamp(34px,6vw,60px); margin:0; letter-spacing:.01em; }
.page-hero .ja{ font-family:var(--font-jp-serif); font-size:clamp(16px,2vw,20px); color:var(--ink-soft); margin:10px 0 0; }
.crumbs{ font-family:var(--font-mono); font-size:11px; letter-spacing:.1em; color:var(--ink-soft); margin:0 0 22px; }
.crumbs a{ text-decoration:none; } .crumbs a:hover{ color:var(--grape); }

/* ---- 本文（説明＋フォーム） ---- */
.contact-wrap{ padding:clamp(56px,8vw,96px) 0; }
.contact{ display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); gap:clamp(32px,6vw,72px); align-items:start; }
.contact__lead{ font-size:15px; color:var(--ink-soft); margin:20px 0 0; }
.contact__info{ margin:28px 0 0; padding:0; list-style:none; display:grid; gap:16px; }
.contact__info li{ font-size:14px; }
.contact__info .k{ font-family:var(--font-mono); font-size:11px; letter-spacing:.12em; color:var(--grape); display:block; margin-bottom:2px; }

.form-grid{ display:grid; gap:20px; }
.field{ display:grid; gap:8px; }
.field label{ font-size:13.5px; letter-spacing:.06em; }
.field .req{ color:var(--grape); font-size:11px; margin-left:8px; letter-spacing:.1em; }
.field input,.field textarea{
  font-family:inherit; font-size:15px; color:var(--ink);
  padding:14px 16px; border:1px solid var(--line); border-radius:3px; background:var(--paper);
  transition:border-color .2s, box-shadow .2s;
}
.field input:focus,.field textarea:focus{
  outline:none; border-color:var(--grape); box-shadow:0 0 0 3px var(--grape-soft);
}
.field textarea{ min-height:170px; resize:vertical; }
.form-note{ font-size:12.5px; color:var(--ink-soft); margin:4px 0 0; }
.form-msg{ margin:16px 0 0; font-size:14px; color:var(--grape); }

/* ---- Contact Form 7 のデザイン（フォームプラグイン用） ---- */
.cf7-wrap .wpcf7-form p{ margin:0 0 20px; display:grid; gap:8px; }
.cf7-wrap label{ font-size:13.5px; letter-spacing:.06em; display:grid; gap:8px; }
.cf7-wrap input[type="text"],
.cf7-wrap input[type="email"],
.cf7-wrap input[type="tel"],
.cf7-wrap textarea{
  width:100%; font-family:inherit; font-size:15px; color:var(--ink);
  padding:14px 16px; border:1px solid var(--line); border-radius:3px; background:var(--paper);
  transition:border-color .2s, box-shadow .2s;
}
.cf7-wrap input:focus, .cf7-wrap textarea:focus{
  outline:none; border-color:var(--grape); box-shadow:0 0 0 3px var(--grape-soft);
}
.cf7-wrap textarea{ min-height:170px; resize:vertical; }
.cf7-wrap .wpcf7-not-valid-tip{ color:#b3261e; font-size:12.5px; }
.cf7-wrap .wpcf7-spinner{ margin:0 0 0 12px; }
.cf7-wrap input[type="submit"]{
  font-family:inherit; font-size:14px; letter-spacing:.06em; font-weight:500; cursor:pointer;
  padding:14px 30px; border-radius:999px; color:#fff;
  background:var(--grape); border:1px solid var(--grape);
  transition:background .25s, color .25s, transform .25s;
}
.cf7-wrap input[type="submit"]:hover{ background:transparent; color:var(--grape); transform:translateY(-2px); }
.cf7-wrap .wpcf7-response-output{
  margin:16px 0 0 !important; padding:12px 16px !important;
  border-radius:3px; font-size:13.5px; border:1px solid var(--line);
}

/* ---- フッター ---- */
.site-footer{ background:var(--paper-2); color:var(--ink-soft); padding-block:64px 32px; border-top:1px solid var(--line); }
.site-footer a{ color:inherit; text-decoration:none; }
.site-footer a:hover{ color:var(--grape); }
.footer-top{ display:flex; flex-wrap:wrap; gap:40px; justify-content:space-between; align-items:flex-start; }
.footer-logo .logo__mark{ color:var(--grape); font-size:32px; }
.footer-logo p{ margin:14px 0 0; font-size:13px; color:var(--ink); }
.footer-nav{ display:flex; flex-wrap:wrap; gap:44px; }
.footer-nav ul{ list-style:none; margin:0; padding:0; display:grid; gap:12px; font-size:13.5px; }
.footer-nav .head{ font-family:var(--font-mono); font-size:11px; letter-spacing:.16em; color:var(--grape); margin-bottom:4px; }
.footer-bottom{
  margin-top:56px; padding-top:24px; border-top:1px solid var(--line);
  display:flex; flex-wrap:wrap; gap:16px; justify-content:space-between;
  font-family:var(--font-mono); font-size:11px; letter-spacing:.08em;
}

/* ---- スマホ対応 ---- */
@media (max-width:900px){
  .menu-btn{ display:flex; }
  .nav{
    position:fixed; inset:76px 0 auto 0; flex-direction:column; align-items:stretch; gap:0;
    background:var(--paper); color:var(--ink); padding:8px 24px 28px;
    box-shadow:0 20px 30px -20px rgba(46,36,16,.4); display:none;
  }
  .nav.is-open{ display:flex; }
  .nav a{ padding:16px 0; border-bottom:1px solid var(--line); font-size:15px; }
  .nav a::after{ display:none; }
  .nav .nav-cta{ margin-top:20px; text-align:center; }
  .contact{ grid-template-columns:1fr; }
}
@media (prefers-reduced-motion:reduce){
  *{ animation:none !important; transition:none !important; }
  html{ scroll-behavior:auto; }
}
</style>

<!-- ページ見出し -->
<section class="page-hero">
  <div class="shell">
    <p class="crumbs"><a href="/">HOME</a> ／ CONTACT</p>
    <p class="eyebrow">CONTACT</p>
    <h1>Get in touch</h1>
    <p class="ja">お問い合わせ</p>
  </div>
</section>

<!-- 本文 -->
<section class="contact-wrap">
  <div class="shell contact">
    <div>
      <p class="sec-label">お問い合わせ先</p>
      <p class="contact__lead">
        データベースの利用、共同研究、取材のご依頼など、お気軽にご連絡ください。
        内容を確認のうえ、担当者よりご返信いたします。
      </p>
      <ul class="contact__info">
        <li>
          <span class="k">会社名</span>
          株式会社 感覚栄養学研究所
        </li>
        
        <!-- ★メールや電話を載せる場合は、下のコメントを外して書き換えてください
        <li>
          <span class="k">Email</span>
          info@example.com
        </li>
        -->
      </ul>
    </div>

    <!-- お問い合わせフォーム（Contact Form 7）
         下のショートコード1行が実際のフォームになります。
         フォームの項目を変えたいときは、WordPress管理画面の
         「お問い合わせ」→ 該当フォームの編集で行ってください。 -->
    <div class="cf7-wrap">
      [contact-form-7 id="ae830e6" title="無題"]
    </div>
  </div>
</section>