/*
Theme Name: Shu Theme
*/

/*
Theme Name: Shu Corporate Theme
Theme URI: https://shu-marketing.co.jp
Author: Shu Inc.
Description: 株式会社 刕（シュウ） コーポレートサイト用テーマ
Version: 1.0
*/

/* =========================================
   基本設定・スクロールバーのカスタマイズ
   ========================================= */
::-webkit-scrollbar {
    width: 8px;
}
::-webkit-scrollbar-track {
    background: #f1f1f1;
}
::-webkit-scrollbar-thumb {
    background: #6d8389; 
    border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
    background: #4a5b60;
}

/* スムーズスクロール */
html {
    scroll-behavior: smooth;
}

/* =========================================
   アニメーション・演出
   ========================================= */

/* スクロール時のフェードイン演出（JSで制御） */
.reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.8s ease-out;
}
.reveal.active {
    opacity: 1;
    transform: translateY(0);
}

/* ヘッダーのすりガラス効果 */
.glass-header {
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(0,0,0,0.05);
}

/* =========================================
   Contact Form 7 プラグイン用デザイン調整
   ========================================= */

/* 送信中のローディングアイコン位置 */
.wpcf7-spinner { 
    margin: 0 0 0 10px; 
}

/* 送信成功時のメッセージボックス */
.wpcf7 form.sent .wpcf7-response-output { 
    border-color: #46b450; 
    background: #e0f2f1; 
    color: #004d40; 
    padding: 1rem; 
    margin-top: 1rem; 
    font-size: 0.9rem; 
    border-radius: 2px;
}

/* エラー時のメッセージボックス */
.wpcf7 form.invalid .wpcf7-response-output, 
.wpcf7 form.failed .wpcf7-response-output { 
    border-color: #dc3232; 
    background: #ffebee; 
    color: #b71c1c; 
    padding: 1rem; 
    margin-top: 1rem; 
    font-size: 0.9rem; 
    border-radius: 2px;
}

/* =========================================
   WordPress管理画面バー表示時の調整
   ========================================= */
/* ログイン中、ヘッダーが管理バーの下に隠れないようにする */
body.admin-bar #header { 
    top: 32px; 
}
@media screen and (max-width: 782px) { 
    body.admin-bar #header { 
        top: 46px; 
    } 
}

/* =========================================
   Contact Form 7 入力文字色の修正
   ========================================= */

.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 input[type="tel"],
.wpcf7 textarea {
  color: #111 !important;
  background-color: #fff;
}

/* =========================================
   Contact Form 7 デザイン統一（最終版）
   ========================================= */

/* フォーム全体を中央寄せ */
.wpcf7 form {
  max-width: 640px;
  margin: 0 auto;
  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
               "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans";
}

/* 各入力ブロックの余白 */
.wpcf7 form p {
  margin-bottom: 1.5rem;
}

/* ラベル文字 */
.wpcf7 label {
  display: block;
  font-size: 0.85rem;
  letter-spacing: 0.05em;
  color: #ccc;
  margin-bottom: 0.4rem;
}

/* 入力欄（text / email / tel / textarea） */
.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 input[type="tel"],
.wpcf7 textarea {
  width: 100%;
  padding: 0.75rem 0.75rem;
  font-size: 0.95rem;
  color: #111;
  background-color: #fff;
  border: 1px solid #d1d5db;
  border-radius: 2px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

/* フォーカス時 */
.wpcf7 input:focus,
.wpcf7 textarea:focus {
  outline: none;
  border-color: #999;
  box-shadow: 0 0 0 1px rgba(0,0,0,0.05);
}

/* textarea 高さ */
.wpcf7 textarea {
  min-height: 140px;
  resize: vertical;
}

/* 送信ボタン */
.wpcf7 input[type="submit"] {
  display: inline-block;
  width: 100%;
  padding: 0.9rem 1rem;
  font-size: 0.9rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  background: #fff;
  color: #111;
  border: 1px solid #fff;
  cursor: pointer;
  transition: all 0.25s ease;
}

/* ホバー時 */
.wpcf7 input[type="submit"]:hover {
  background: transparent;
  color: #fff;
  border-color: #fff;
}

/* 送信中・無効状態 */
.wpcf7 input[type="submit"]:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* =========================================
   Header（ナビ）すりガラス化
   ========================================= */

/* ヘッダー本体（常に上に固定） */
#header {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  z-index: 9999;

  /* デフォは“ほぼ透明な壁” */
  background: rgba(255, 255, 255, 0.25);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);

  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  transition: background 0.25s ease, border-color 0.25s ease, backdrop-filter 0.25s ease;
}

/* スクロールしたら、もう少し“壁感”を強める（JSが glass-header を付ける前提） */
#header.glass-header {
  background: rgba(255, 255, 255, 0.78);
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
}

/* ナビ文字（雰囲気合わせて締める） */
#header a {
  color: rgba(17, 24, 39, 0.82);
  transition: color 0.2s ease, opacity 0.2s ease;
}

#header a:hover {
  color: rgba(17, 24, 39, 1);
}

/* 右上の CONTACT ボタンが透明壁で沈まないように */
#header .nav-contact,
#header a[href*="#contact"],
#header a[href*="contact"] {
  border: 1px solid rgba(17, 24, 39, 0.28);
  background: rgba(255, 255, 255, 0.55);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

/* ヘッダー固定にした分、本文が裏に潜らないように余白 */
body {
  padding-top: 84px; /* ヘッダー高さに合わせて調整。大きい/小さいならここをいじる */
}