@charset "utf-8";
/*
Theme Name: HAKU child
Theme URI:https://tcd-theme.com/tcd080
Description:WordPressテーマ「HAKU」の子テーマ
Template:haku_tcd080
Author:TCD
Author URI:https://tcd-theme.com/
Version:1.0
*/
/*
  ここから下にCSSを追記してください。
*/
/* ============================================================
   /company_info/ ページ専用 カスタムCSS（黒金 × 軽快トーン）
   対象ページ：page-id-374
   ============================================================ */
/* ===== HAKUテーマの余白・幅をリセット ===== */
body.page-id-374 #page_header { display: none !important; }
body.page-id-374 #container,
body.page-id-374 #page_contents,
body.page-id-374 #article,
body.page-id-374 .post_content,
body.page-id-374 #content_wrap,
body.page-id-374 #content {
  max-width: none !important;
  width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #faf8f3 !important;
}
body.page-id-374 .page_header,
body.page-id-374 .post_title,
body.page-id-374 .breadcrumb { display: none !important; }
body.page-id-374 { margin: 0 !important; padding: 0 !important; }
/* ===== 変数 ===== */
:root {
  --cp-bg-dark:   #0d0d0f;
  --cp-bg-light:  #faf8f3;
  --cp-bg-card:   #ffffff;
  --cp-line:      #e3ddcf;
  --cp-text:      #2a2a2a;
  --cp-text-mute: #6b6b6b;
  --cp-text-light:#e6e6e6;
  --cp-accent:    #c8a364;
  --cp-accent-2:  #b88f48;
  --cp-accent-3:  #e7c987;
  --cp-ff-jp:     "Noto Serif JP", "Hiragino Mincho ProN", serif;
  --cp-ff-sans:   "Noto Sans JP", "Hiragino Sans", sans-serif;
  --cp-ff-en:     "Cormorant Garamond", "Times New Roman", serif;
  --cp-ease:      cubic-bezier(0.2, 0.7, 0.2, 1);
}
/* ===== 共通リセット ===== */
.cp-section,
.cp-section *,
.cp-hero,
.cp-hero * { box-sizing: border-box; }
/* ノイズオーバーレイは無効化（スクロール軽量化） */
.cp-noise { display: none !important; }
/* ===== HERO ===== */
.cp-hero {
  position: relative;
  min-height: 90vh;
  padding: clamp(6rem, 12vw, 9rem) clamp(1.5rem, 6vw, 6rem);
  display: flex; align-items: center;
  overflow: hidden;
  background:
    radial-gradient(900px 500px at 20% 20%, rgba(200,163,100,.12), transparent 60%),
    radial-gradient(700px 500px at 90% 80%, rgba(138,26,26,.08), transparent 60%),
    linear-gradient(180deg, #0a0a0c 0%, #15161a 100%);
  color: var(--cp-text-light);
}
.cp-hero__inner {
  position: relative; z-index: 2;
  max-width: 1100px; width: 100%; margin: 0 auto;
}
.cp-hero__eyebrow {
  font-family: var(--cp-ff-en);
  font-size: clamp(.75rem, 1vw, .9rem);
  letter-spacing: .4em;
  color: var(--cp-accent);
  margin: 0 0 2rem;
  display: inline-flex; align-items: center; gap: .8rem;
}
.cp-hero__eyebrow::before {
  content: ""; width: 40px; height: 1px;
  background: var(--cp-accent); display: inline-block;
}
.cp-hero__title {
  font-family: var(--cp-ff-jp);
  font-weight: 500; line-height: 1.2;
  letter-spacing: .08em;
  margin: 0 0 2rem;
}
.cp-hero__title .ja {
  display: block;
  font-size: clamp(2rem, 6vw, 4.5rem);
  background: linear-gradient(180deg, #fff 30%, #b8b8b8 100%);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}
.cp-hero__title .en {
  display: block; margin-top: .8rem;
  font-family: var(--cp-ff-en); font-style: italic;
  font-weight: 300;
  font-size: clamp(.9rem, 1.4vw, 1.3rem);
  letter-spacing: .25em;
  color: var(--cp-accent);
}
.cp-hero__lead {
  font-family: var(--cp-ff-jp);
  font-size: clamp(.95rem, 1.1vw, 1.05rem);
  color: #cfcfcf;
  line-height: 2;
  max-width: 600px;
  margin: 0;
}
.cp-hero__deco {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
}
.cp-hero__deco span {
  position: absolute;
  right: clamp(1.5rem, 6vw, 6rem);
  bottom: 2rem;
  font-family: var(--cp-ff-jp);
  font-size: clamp(5rem, 12vw, 14rem);
  line-height: .85;
  color: rgba(200,163,100,.05);
  font-weight: 700;
  letter-spacing: 0;
}
/* ===== 共通セクション ===== */
.cp-section {
  position: relative; z-index: 1;
  padding: clamp(4rem, 10vw, 7rem) clamp(1.5rem, 6vw, 5rem);
  background: var(--cp-bg-light);
  color: var(--cp-text);
}
.cp-section__inner { max-width: 1100px; margin: 0 auto; }
.cp-eyebrow {
  font-family: var(--cp-ff-en);
  font-size: .8rem;
  letter-spacing: .4em;
  color: var(--cp-accent-2);
  margin: 0 0 1rem;
  display: inline-flex; align-items: center; gap: .6rem;
}
.cp-eyebrow::before {
  content: ""; width: 24px; height: 1px;
  background: var(--cp-accent-2); display: inline-block;
}
.cp-h2 {
  font-family: var(--cp-ff-jp);
  font-weight: 500;
  font-size: clamp(1.6rem, 3vw, 2.4rem);
  letter-spacing: .08em;
  margin: 0 0 1rem;
  color: #1a1a1a;
}
.cp-lead {
  font-family: var(--cp-ff-sans);
  font-size: clamp(.92rem, 1vw, 1rem);
  color: var(--cp-text-mute);
  line-height: 2;
  margin: 0 0 2.5rem;
}
/* ===== 会社概要 ===== */
.cp-about { background: var(--cp-bg-light); padding-top: clamp(5rem, 10vw, 7rem); }
.cp-info { margin: 0; border-top: 1px solid var(--cp-line); }
.cp-info__row {
  display: grid;
  grid-template-columns: 200px 1fr;
  padding: 1.4rem 0;
  border-bottom: 1px solid var(--cp-line);
  gap: 1rem;
}
.cp-info__row dt {
  font-family: var(--cp-ff-jp);
  font-weight: 500;
  font-size: .95rem;
  color: var(--cp-accent-2);
  letter-spacing: .12em;
}
.cp-info__row dd {
  margin: 0;
  font-family: var(--cp-ff-sans);
  font-size: 1rem;
  color: var(--cp-text);
  line-height: 1.9;
  letter-spacing: .03em;
}
.cp-info__row dd a {
  color: var(--cp-text);
  border-bottom: 1px solid var(--cp-accent);
  text-decoration: none;
  transition: color .3s var(--cp-ease);
}
.cp-info__row dd a:hover { color: var(--cp-accent-2); }
/* ===== 連絡カード ===== */
.cp-channels {
  background: #fffdf7;
  border-top: 1px solid var(--cp-line);
  border-bottom: 1px solid var(--cp-line);
  padding-top: clamp(4rem, 8vw, 6rem);
}
.cp-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}
.cp-cards--two {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
}
.cp-card {
  display: flex; flex-direction: column;
  align-items: flex-start; gap: .6rem;
  padding: 2rem 1.8rem;
  background: var(--cp-bg-card);
  border: 1px solid var(--cp-line);
  border-radius: 4px;
  text-decoration: none !important;
  color: var(--cp-text);
  transition: transform .4s var(--cp-ease), box-shadow .4s var(--cp-ease), border-color .4s var(--cp-ease);
}
.cp-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 40px -20px rgba(200,163,100,.45);
  border-color: var(--cp-accent);
}
.cp-card__icon {
  width: 52px; height: 52px;
  display: inline-flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--cp-accent), var(--cp-accent-3));
  color: #fff;
  border-radius: 50%;
  margin-bottom: .8rem;
}
.cp-card__label {
  font-family: var(--cp-ff-en);
  font-size: .75rem;
  letter-spacing: .3em;
  color: var(--cp-accent-2);
}
.cp-card__value {
  font-family: var(--cp-ff-jp);
  font-weight: 500;
  font-size: clamp(1.05rem, 1.4vw, 1.25rem);
  color: #1a1a1a;
  letter-spacing: .04em;
}
.cp-card__note {
  font-size: .82rem;
  color: var(--cp-text-mute);
  letter-spacing: .05em;
}
/* ===== コンタクトフォーム ===== */
.cp-form-wrap { background: var(--cp-bg-light); }
.cp-form {
  background: var(--cp-bg-card);
  border: 1px solid var(--cp-line);
  border-radius: 4px;
  padding: clamp(1.8rem, 4vw, 3rem);
  box-shadow: 0 10px 40px -20px rgba(0,0,0,.1);
}
/* ===== Contact Form 7 ===== */
.cp-form .wpcf7,
.cp-form .wpcf7-form { width: 100%; }
.cp-form .wpcf7-form p {
  display: block !important;
  margin: 0 0 1.5rem !important;
  font-family: var(--cp-ff-jp);
  font-weight: 500;
  font-size: .92rem;
  color: #1a1a1a;
  letter-spacing: .06em;
  line-height: 1.7;
}
.cp-form .wpcf7-form label { display: block !important; }
.cp-form .wpcf7-form label br { margin-bottom: .4rem; }
.cp-form .wpcf7-form .red {
  display: inline-block !important;
  background: var(--cp-accent) !important;
  color: #fff !important;
  font-size: .58rem !important;
  font-weight: 700 !important;
  padding: 0.05rem .5rem !important;
  border-radius: 2px !important;
  letter-spacing: .15em !important;
  margin-left: .5rem !important;
  vertical-align: 0.15em !important;
  line-height: 1.5 !important;
}
.cp-form .wpcf7-form input[type="text"],
.cp-form .wpcf7-form input[type="email"],
.cp-form .wpcf7-form input[type="tel"],
.cp-form .wpcf7-form input[type="url"],
.cp-form .wpcf7-form input[type="number"],
.cp-form .wpcf7-form select,
.cp-form .wpcf7-form textarea {
  font-family: var(--cp-ff-sans) !important;
  font-size: .95rem !important;
  padding: .85rem 1rem !important;
  border: 1px solid var(--cp-line) !important;
  border-radius: 3px !important;
  background: #fffdf7 !important;
  color: var(--cp-text) !important;
  width: 100% !important;
  box-sizing: border-box !important;
  line-height: 1.6 !important;
  transition: border-color .25s var(--cp-ease), background .25s var(--cp-ease) !important;
}
.cp-form .wpcf7-form input:focus,
.cp-form .wpcf7-form select:focus,
.cp-form .wpcf7-form textarea:focus {
  outline: none !important;
  border-color: var(--cp-accent) !important;
  background: #fff !important;
  box-shadow: 0 0 0 3px rgba(200,163,100,.15) !important;
}
.cp-form .wpcf7-form textarea {
  resize: vertical !important;
  min-height: 160px !important;
}
.cp-form .wpcf7-form p:has(input[type="submit"]),
.cp-form .wpcf7-form p:has(.wpcf7-submit) {
  font-size: 0 !important;
  text-align: center !important;
  line-height: 0 !important;
  margin-top: 2rem !important;
}
.cp-form .wpcf7-form p:has(input[type="submit"]) input,
.cp-form .wpcf7-form p:has(.wpcf7-submit) input {
  font-size: 1rem !important;
  line-height: 1 !important;
}
.cp-form .wpcf7-form input[type="submit"],
.cp-form .wpcf7-form button[type="submit"],
.cp-form .wpcf7-form .wpcf7-submit {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: .6rem !important;
  padding: 1.1rem 3rem !important;
  background: linear-gradient(120deg, var(--cp-accent), var(--cp-accent-3)) !important;
  color: #1a1a1a !important;
  font-family: var(--cp-ff-jp) !important;
  font-weight: 500 !important;
  font-size: 1rem !important;
  letter-spacing: .2em !important;
  border: none !important;
  border-radius: 3px !important;
  cursor: pointer !important;
  transition: transform .3s var(--cp-ease), box-shadow .3s var(--cp-ease) !important;
  -webkit-appearance: none !important;
  appearance: none !important;
}
.cp-form .wpcf7-form input[type="submit"]:hover,
.cp-form .wpcf7-form button[type="submit"]:hover,
.cp-form .wpcf7-form .wpcf7-submit:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 14px 30px -10px rgba(200,163,100,.5) !important;
}
.cp-form .wpcf7-not-valid-tip {
  color: #b32525 !important;
  font-size: .82rem !important;
  margin-top: .3rem !important;
}
.cp-form .wpcf7-response-output {
  margin: 2rem 0 0 !important;
  padding: 1rem 1.4rem !important;
  border-radius: 3px !important;
}
/* ===== 対応エリア（リストマーカー削除） ===== */
/* ★修正：ul と li を分離（li に padding-left:0 が当たらないように） */
.cp-area { background: #fffdf7; border-top: 1px solid var(--cp-line); }
.cp-area__list {
  list-style: none !important;
  list-style-type: none !important;
  padding-left: 0 !important;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .8rem;
  margin: 0 0 3rem;
}
.cp-area__list li {
  list-style: none !important;
  list-style-type: none !important;
}
.cp-area__list li::marker { content: "" !important; }
.cp-area__list li {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  font-family: var(--cp-ff-jp);
  font-size: .95rem;
  color: var(--cp-text);
  padding: .8rem 1.4rem;
  background: var(--cp-bg-card);
  border: 1px solid var(--cp-accent);
  border-radius: 999px;
  letter-spacing: 0;
}

/* ===== モバイル ===== */
@media (max-width: 768px) {
  .cp-hero { min-height: 70vh; padding: 5rem 1.5rem 4rem; }
  .cp-hero__deco span { font-size: 14rem; right: 0.5rem; bottom: -2rem; }
  .cp-section { padding: 4rem 1.5rem; }
  .cp-info__row {
    grid-template-columns: 1fr;
    gap: .4rem;
    padding: 1.2rem 0;
  }
  .cp-info__row dt { font-size: .85rem; color: var(--cp-accent-2); }
  .cp-info__row dd { font-size: .95rem; }
  .cp-cards { grid-template-columns: 1fr; }
  .cp-cards--two { grid-template-columns: 1fr; }
  .cp-form { padding: 1.5rem 1.2rem; }
}
/* ★古い重複ルールは全削除（page-id-374 .cp-area__list の上書きなど） */
/* ===== CF7入力欄が枠からはみ出る対策 ===== */
body.page-id-374 .cp-form .wpcf7-form,
body.page-id-374 .cp-form .wpcf7-form p,
body.page-id-374 .cp-form .wpcf7-form label,
body.page-id-374 .cp-form .wpcf7-form-control-wrap {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}
body.page-id-374 .cp-form .wpcf7-form input[type="text"],
body.page-id-374 .cp-form .wpcf7-form input[type="email"],
body.page-id-374 .cp-form .wpcf7-form input[type="tel"],
body.page-id-374 .cp-form .wpcf7-form input[type="url"],
body.page-id-374 .cp-form .wpcf7-form input[type="number"],
body.page-id-374 .cp-form .wpcf7-form select,
body.page-id-374 .cp-form .wpcf7-form textarea {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  display: block !important;
}
body.page-id-374 .cp-form {
  overflow: hidden !important;
}
/* CF7のformタグ自体の背景・枠を消す（二重カード解消） */
body.page-id-374 .cp-form .wpcf7,
body.page-id-374 .cp-form .wpcf7-form,
body.page-id-374 .cp-form form {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
  max-width: 100% !important;
  width: 100% !important;
}
body.page-id-374 .cp-form .wpcf7-form-control-wrap,
body.page-id-374 .cp-form .wpcf7-form > div {
  background: transparent !important;
  border: none !important;
}
body.page-id-374 .cp-form input,
body.page-id-374 .cp-form textarea,
body.page-id-374 .cp-form select {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  margin: 0 !important;
}


/* ============================================================
   WHO WE ARE（共感フック）セクション 専用CSS
   貼り付け先：子テーマの style.css 一番下に追記
   - 背景なし（親要素の背景を活かす）
   - 「剱」装飾なし
   ============================================================ */

.tw-hook-section {
  background: transparent !important;
  padding: clamp(4rem, 10vw, 7rem) clamp(1.5rem, 6vw, 5rem) !important;
  font-family: "Noto Sans JP", "Hiragino Sans", sans-serif !important;
  color: #2a2a2a !important;
  position: relative !important;
}
.tw-hook-inner {
  max-width: 1100px !important;
  margin: 0 auto !important;
  position: relative !important;
  z-index: 1 !important;
}
.tw-hook-eyebrow {
  font-family: "Cormorant Garamond", "Times New Roman", serif !important;
  font-size: clamp(.8rem, 1vw, .9rem) !important;
  letter-spacing: .4em !important;
  color: #b88f48 !important;
  margin: 0 0 1.2rem !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: .6rem !important;
}
.tw-hook-eyebrow::before {
  content: "" !important;
  width: 30px !important;
  height: 1px !important;
  background: #b88f48 !important;
  display: inline-block !important;
}
.tw-hook-h2 {
  font-family: "Noto Serif JP", "Hiragino Mincho ProN", serif !important;
  font-weight: 500 !important;
  font-size: clamp(1.6rem, 3.2vw, 2.6rem) !important;
  letter-spacing: .08em !important;
  margin: 0 0 3rem !important;
  color: #1a1a1a !important;
  line-height: 1.5 !important;
}
.tw-hook-list {
  list-style: none !important;
  list-style-type: none !important;
  margin: 0 0 3.5rem !important;
  padding: 0 !important;
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 1.5rem !important;
}
.tw-hook-list li {
  list-style: none !important;
  list-style-type: none !important;
}
.tw-hook-list li::marker { content: "" !important; }
.tw-hook-item {
  background: #ffffff !important;
  border: 1px solid #e3ddcf !important;
  border-radius: 4px !important;
  padding: 2.2rem 1.8rem !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 1rem !important;
  transition: transform .4s cubic-bezier(.2,.7,.2,1),
              box-shadow .4s cubic-bezier(.2,.7,.2,1),
              border-color .4s cubic-bezier(.2,.7,.2,1) !important;
}
.tw-hook-item:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 18px 40px -20px rgba(200,163,100,.4) !important;
  border-color: #c8a364 !important;
}
.tw-hook-num {
  font-family: "Cormorant Garamond", "Times New Roman", serif !important;
  font-size: 1.2rem !important;
  letter-spacing: .25em !important;
  color: #c8a364 !important;
  font-weight: 500 !important;
  font-style: italic !important;
}
.tw-hook-text {
  font-family: "Noto Serif JP", "Hiragino Mincho ProN", serif !important;
  font-weight: 500 !important;
  font-size: clamp(1rem, 1.3vw, 1.1rem) !important;
  color: #1a1a1a !important;
  line-height: 1.8 !important;
  letter-spacing: .04em !important;
  margin: 0 !important;
}
.tw-hook-answer {
  text-align: center !important;
  position: relative !important;
  padding: 2.5rem 1rem 0 !important;
  border-top: 1px solid #e3ddcf !important;
}
.tw-hook-answer::before {
  content: "↓" !important;
  position: absolute !important;
  top: -.9rem !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  color: #c8a364 !important;
  width: 1.8rem !important;
  height: 1.8rem !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 1rem !important;
}
.tw-hook-answer-text {
  font-family: "Noto Serif JP", "Hiragino Mincho ProN", serif !important;
  font-weight: 500 !important;
  font-size: clamp(1.1rem, 1.8vw, 1.5rem) !important;
  color: #1a1a1a !important;
  letter-spacing: .12em !important;
  line-height: 1.9 !important;
  margin: 0 !important;
}
.tw-hook-answer-text strong {
  font-weight: 700 !important;
  color: #b88f48 !important;
  background: linear-gradient(180deg, transparent 60%, rgba(200,163,100,.18) 60%) !important;
  padding: 0 .2rem !important;
}

@media (max-width: 768px) {
  .tw-hook-section { padding: 4rem 1.5rem !important; }
  .tw-hook-h2 { margin-bottom: 2rem !important; }
  .tw-hook-list {
    grid-template-columns: 1fr !important;
    gap: 1rem !important;
    margin-bottom: 2.5rem !important;
  }
  .tw-hook-item { padding: 1.6rem 1.4rem !important; }
}

/* ============================================================
   右端固定「無料相談」CTAボタン（全ページ共通）
   貼り付け先：子テーマの style.css 一番下に追記
   ============================================================ */
/* ============================================================
   ヘッダー付近（右上）固定「無料相談」CTAボタン
   ============================================================ */

.tw-float-cta {
  position: fixed !important;
  right: 1.5rem !important;
  top: 0.6rem !important;
  z-index: 9990 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: .5rem !important;
  padding: .85rem 1.4rem !important;
  background: linear-gradient(135deg, #c8a364 0%, #b88f48 100%) !important;
  color: #1a1a1a !important;
  text-decoration: none !important;
  font-family: "Noto Serif JP", "Hiragino Mincho ProN", serif !important;
  font-weight: 700 !important;
  font-size: .82rem !important;
  letter-spacing: .18em !important;
  border-radius: 999px !important;
  box-shadow: 0 4px 16px -4px rgba(0,0,0,.3),
              0 2px 8px -2px rgba(200,163,100,.4) !important;
  transition: transform .35s cubic-bezier(.2,.7,.2,1),
              box-shadow .35s cubic-bezier(.2,.7,.2,1),
              background .35s cubic-bezier(.2,.7,.2,1) !important;
  cursor: pointer !important;
  white-space: nowrap !important;
}
.tw-float-cta::before {
  content: "✉" !important;
  font-size: .9rem !important;
  line-height: 1 !important;
  color: #1a1a1a !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.tw-float-cta:hover {
  transform: translateY(-3px) !important;
  box-shadow: 0 8px 24px -4px rgba(0,0,0,.3),
              0 4px 16px -2px rgba(200,163,100,.6) !important;
  background: linear-gradient(135deg, #e7c987 0%, #c8a364 100%) !important;
}

/* WPログイン時：管理バー(32px)を避ける */
body.admin-bar .tw-float-cta {
  top: calc(32px + 1.5rem) !important;
}

/* スマホ */
@media (max-width: 768px) {
  .tw-float-cta {
    right: 1rem !important;
    top: 1rem !important;
    padding: .65rem 1rem !important;
    font-size: .72rem !important;
    letter-spacing: .12em !important;
    gap: .35rem !important;
  }
  .tw-float-cta::before { font-size: .75rem !important; }
  body.admin-bar .tw-float-cta {
    top: calc(46px + 1rem) !important;
  }
}