@charset "UTF-8";

/* =========================================
   お問い合わせページ 固有スタイル
========================================= */
:root {
  --text-color: #555555;
  --headline-color: #333333;
  --accent-color: #f0b800;
  --background-color: #fdfdfd;
  --white: #ffffff;
  
  /* 追加したカラー変数 */
  --color-success: #28a745;
  --color-error: #d93025;
  --border-light: #eeeeee;
  --border-medium: #cccccc;
  --border-dark: #dddddd;
  --bg-error: #fff0f0;
  --bg-info: #fafafa;
  --text-muted: #777777;
}

html { scroll-behavior: smooth; }

body {
  margin: 0; padding: 0;
  font-family: 'Noto Sans JP', sans-serif;
  background: var(--background-color);
  color: var(--text-color);
  line-height: 1.9;
  font-size: 1rem; /* 16px -> 1rem */
  word-break: break-word;
  padding-top: 74px;
}

*, *::before, *::after { box-sizing: border-box; }

/* Layout */
.container { max-width: 680px; margin: 0 auto; padding: 0 20px; }
section { padding: 60px 0; }

/* Breadcrumb (パンくずリスト) */
.breadcrumb-nav { padding: 15px 0; font-size: 0.9rem; background: var(--background-color); }
.breadcrumb-list { list-style: none; padding: 0; margin: 0; display: flex; gap: 8px; flex-wrap: wrap; }
.breadcrumb-list li { color: var(--text-color); }
.breadcrumb-list li a { color: var(--text-color); text-decoration: none; }
.breadcrumb-list li a:hover { text-decoration: underline; }
.breadcrumb-list li:not(:last-child)::after { content: '>'; margin-left: 8px; font-size: 0.8rem; }

/* Typography & Rhythm */
.page-main-title {
  text-align: center;
  font-size: 2rem; /* 2em -> 2rem */
  font-weight: 700;
  color: var(--headline-color);
  margin: 0 0 40px;
  padding-bottom: 10px;
  border-bottom: 3px solid var(--accent-color);
  display: inline-block;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
}

/* リード文 */
#lead { text-align: center; margin: 0 0 40px; font-size: 1rem; } /* 1em -> 1rem */

/* 受付内容ポリシー（カード化） */
.policy-box {
  background: var(--white); padding: 25px; border-radius: 12px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.05); border: 1px solid var(--border-light);
  margin-bottom: 40px; text-align: center;
}
.policy-head {
  font-weight: 700; color: var(--headline-color); margin-bottom: 15px; display: block;
  font-size: 1.1rem; border-bottom: 2px solid var(--accent-color); display: inline-block; padding-bottom: 5px;
}

.contact-policy { list-style: none; padding: 0; margin: 0; display: inline-block; text-align: left; }
.contact-policy li { display: flex; align-items: center; margin-bottom: 10px; }
.ok { color: var(--color-success); font-weight: 900; margin-right: 10px; font-size: 1.2rem; }
.ng { color: var(--color-error); font-weight: 900; margin-right: 10px; font-size: 1.2rem; }
.sales-warning { 
  margin-top: 15px; padding-top: 15px; border-top: 1px dashed var(--border-dark); 
  color: var(--color-error); font-size: 0.9rem; font-weight: bold;
}

/* フォームスタイル */
form { margin-bottom: 60px; }
label { display: block; margin: 25px 0 8px; font-weight: 700; color: var(--headline-color); }
input, textarea, select {
  width: 100%; padding: 14px; border: 1px solid var(--border-medium); border-radius: 6px;
  font-size: 1rem; /* 16px -> 1rem: スマホのズーム防止のため16px相当を維持 */
  background: var(--white); appearance: none; -webkit-appearance: none;
}
textarea { min-height: 180px; resize: vertical; line-height: 1.6; }
select {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23333'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 10px center; background-size: 20px;
}

.required {
  color: var(--color-error); font-size: 0.8rem; margin-left: 5px;
  background: var(--bg-error); padding: 2px 6px; border-radius: 4px;
}

/* 送信ボタン */
.button-area { margin-top: 50px; text-align: center; }
.button {
  display: inline-block; width: 100%; max-width: 300px;
  padding: 18px; background: var(--headline-color); color: var(--white);
  border: none; border-radius: 50px; font-weight: 700; font-size: 1.1rem;
  cursor: pointer; transition: transform 0.3s, box-shadow 0.3s;
  box-shadow: 0 4px 10px rgba(0,0,0,0.2);
}
.button:hover { transform: translateY(-3px); box-shadow: 0 6px 15px rgba(0,0,0,0.25); opacity: 0.9; }

/* お急ぎの場合（カード化） */
.contact-info {
  background: var(--bg-info); padding: 30px; border-radius: 8px;
  border: 1px solid var(--border-dark); text-align: center; margin-top: 60px;
}
.contact-info-title { font-size: 1.1rem; margin-top: 0; }
.contact-info-note { font-size: 0.85rem; color: var(--text-muted); }
.contact-info-desc { margin-top: 20px; font-size: 0.9rem; }
.contact-info a { color: var(--headline-color); text-decoration: underline; font-weight: bold; }
.contact-info strong { display: inline-block; margin-right: 5px; }

/* =========================================
   Media Queries (なし: ベーススタイルで対応済み)
========================================= */