/* ================================================
   お問い合わせページ専用CSS（修正版）
   ファイル名: contact-page.css
   配置先: /wp-content/themes/horiprospeed/contact-page.css
   ================================================ */

/* お問い合わせページラッパー */
.contact-wrapper {
  background: #fff;
  padding: 0;
  width: 100%;
  max-width: 100%;
}

/* 2カラムレイアウト */
.contact-layout {
  display: grid;
  grid-template-columns: 1fr 400px;
  gap: 40px;
  max-width: 1200px;
  margin: 60px auto;
  padding: 0 20px;
  width: 100%;
}

@media (max-width: 968px) {
  .contact-layout {
    grid-template-columns: 1fr;
    gap: 30px;
  }
}

/* 左側：フォームエリア */
.contact-form-area {
  background: #fff;
  width: 100%;
  min-width: 0;
}

.contact-form-area h2 {
  font-size: 24px;
  font-weight: 700;
  margin-bottom: 30px;
  color: #111;
  padding-bottom: 15px;
  border-bottom: 2px solid #111;
}

/* Forminatorフォームのスタイル調整 */
.contact-form-area .forminator-ui {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
}

.contact-form-area .forminator-row {
  margin-bottom: 20px !important;
  width: 100% !important;
}

.contact-form-area .forminator-field {
  width: 100% !important;
}

.contact-form-area .forminator-label {
  font-size: 15px !important;
  font-weight: 600 !important;
  color: #333 !important;
  margin-bottom: 8px !important;
  display: block !important;
}

.contact-form-area .forminator-input,
.contact-form-area .forminator-select,
.contact-form-area .forminator-textarea {
  width: 100% !important;
  max-width: 100% !important;
  padding: 12px !important;
  border: 2px solid #e0e0e0 !important;
  border-radius: 0 !important;
  font-size: 15px !important;
  transition: border-color 0.3s ease !important;
  box-sizing: border-box !important;
}

.contact-form-area .forminator-input:focus,
.contact-form-area .forminator-select:focus,
.contact-form-area .forminator-textarea:focus {
  outline: none !important;
  border-color: #111 !important;
}

.contact-form-area .forminator-button,
.contact-form-area .forminator-button-submit {
  background: #111 !important;
  color: #fff !important;
  padding: 14px 40px !important;
  border: none !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  transition: all 0.3s ease !important;
  border-radius: 0 !important;
}

.contact-form-area .forminator-button:hover,
.contact-form-area .forminator-button-submit:hover {
  background: #333 !important;
  transform: translateY(-2px) !important;
}

/* 右側：会社概要エリア */
.contact-info-area {
  background: #fafafa;
  padding: 30px;
  border: 1px solid #eee;
  position: sticky;
  top: 100px;
  align-self: start;
  width: 100%;
  max-width: 400px;
  box-sizing: border-box;
}

.contact-info-area h3 {
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 25px;
  color: #111;
  padding-bottom: 10px;
  border-bottom: 2px solid #111;
}

/* 会社情報項目 */
.company-info-item {
  margin-bottom: 25px;
  padding-bottom: 20px;
  border-bottom: 1px solid #e0e0e0;
}

.company-info-item:last-child {
  border-bottom: none;
  margin-bottom: 0;
  padding-bottom: 0;
}

.company-info-item h4 {
  font-size: 14px;
  font-weight: 600;
  color: #666;
  margin-bottom: 8px;
  letter-spacing: 0.05em;
}

.company-info-item p {
  font-size: 15px;
  color: #333;
  line-height: 1.8;
  margin: 0;
}

.company-info-item a {
  color: #333;
  text-decoration: none;
  transition: color 0.3s ease;
}

.company-info-item a:hover {
  color: #666;
}

/* 注釈テキスト */
.contact-info-note {
  background: #fff;
  padding: 15px;
  border-left: 3px solid #111;
  margin-top: 20px;
  font-size: 13px;
  color: #666;
  line-height: 1.6;
}

/* align=leftを無効化 */
div[align="left"] {
  text-align: left !important;
}

/* レスポンシブ調整 */
@media (max-width: 968px) {
  .contact-info-area {
    position: static;
    margin-top: 40px;
    max-width: 100%;
  }
  
  .contact-layout {
    margin: 40px auto;
  }
}

@media (max-width: 640px) {
  .contact-form-area h2 {
    font-size: 20px;
  }
  
  .contact-info-area {
    padding: 20px;
  }
  
  .contact-info-area h3 {
    font-size: 18px;
  }
  
  .contact-layout {
    padding: 0 15px;
    margin: 30px auto;
  }
}