/*
Theme Name: コンプロ
Theme URI: https://conpro.jp/
Author: 株式会社コンプロ
Description: 株式会社コンプロのオリジナルテーマ。
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: conpro
*/

/* ---------- 基本 ---------- */
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: #FFFFFF; color: #1F2A66; font-family: 'IBM Plex Sans JP', sans-serif; }
img { max-width: 100%; }
a { color: #1F2A66; }
a:hover { color: #009FA8; }
h1, h2, h3, .disp { font-family: 'M PLUS 1', sans-serif; font-feature-settings: "palt"; letter-spacing: -0.02em; }
details summary { list-style: none; cursor: pointer; }
details summary::-webkit-details-marker { display: none; }
details[open] summary span[aria-hidden="true"] { transform: rotate(45deg); }
details summary span[aria-hidden="true"] { transition: transform .2s; display: inline-block; }
:focus-visible { outline: 3px solid #009FA8; outline-offset: 2px; }
a[style*="background: #1F2A66"]:hover { opacity: .88; color: #FFFFFF; }

/* ---------- ヘッダーのメニュー（スマホ） ---------- */
.menu-btn { display: none; }
@media (max-width: 960px) {
  .menu-btn {
    display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 14px;
    border: 2px solid #1F2A66; background: #FFFFFF; color: #1F2A66; font: 700 14px 'IBM Plex Sans JP', sans-serif; cursor: pointer;
  }
  .menu-btn__bar, .menu-btn__bar::before, .menu-btn__bar::after { display: block; width: 18px; height: 2px; background: #1F2A66; position: relative; transition: transform .2s; }
  .menu-btn__bar::before, .menu-btn__bar::after { content: ""; position: absolute; left: 0; }
  .menu-btn__bar::before { top: -6px; }
  .menu-btn__bar::after { top: 6px; }
  .menu-btn[aria-expanded="true"] .menu-btn__bar { background: transparent; }
  .menu-btn[aria-expanded="true"] .menu-btn__bar::before { transform: translateY(6px) rotate(45deg); }
  .menu-btn[aria-expanded="true"] .menu-btn__bar::after { transform: translateY(-6px) rotate(-45deg); }
  .site-nav { display: none !important; }
  .site-nav.is-open {
    display: flex !important; flex-direction: column; align-items: stretch !important; gap: 0 !important;
    position: absolute; top: calc(100% + 12px); left: 0; right: 0; background: #FFFFFF;
    border: 2px solid #1F2A66; box-shadow: 0 12px 32px rgba(31, 42, 102, .12); padding: 8px 20px 20px; font-size: 17px !important;
  }
  .site-nav.is-open a { padding: 16px 4px; border-bottom: 1px solid #E3E5EA; }
  .site-nav.is-open .site-nav__cta { margin-top: 16px; justify-content: center; border-bottom: 0; }
}

/* ---------- スマホの余白・文字サイズ ---------- */
@media (max-width: 767px) {
  .px { padding-left: 20px !important; padding-right: 20px !important; }
  [style*="padding: 120px"], [style*="padding: 128px"], [style*="padding: 112px"] { padding-top: 72px !important; padding-bottom: 72px !important; }
  [style*="padding: 96px"], [style*="padding: 88px"] { padding-top: 56px !important; padding-bottom: 56px !important; }
  h1.h1-fit { font-size: var(--fit) !important; }
  /* 背景の四角は、スマホでは小さく・薄くして文字を読みやすく */
  section > [style*="position: absolute"] { opacity: .28 !important; transform: scale(.5) !important; transform-origin: right top !important; }
  section[style*="min-height: 1000px"] { min-height: 0 !important; }
  .conpro-mark { zoom: .64; }
  /* ボタンが画面からはみ出さないように */
  a[style*="display: inline-flex"] { max-width: 100%; }
  a[style*="flex-shrink: 0"] { flex-shrink: 1 !important; }
}

/* ---------- 準備中・通常ページ ---------- */
.basic-page { max-width: 860px; margin: 0 auto; padding: 56px 20px 120px; box-sizing: border-box; line-height: 2; }
.basic-page h1 { font-size: clamp(32px, 4.4vw, 56px); line-height: 1.3; margin: 0 0 28px; }