/* --- Base Settings --- */
:root {
    --primary-color: #1B8C48; /* 誠実な深い緑 */
    --accent-color: #D64545;  /* 注意を引く赤 */
    --text-dark: #2D3436;
    --text-gray: #636E72;
    --bg-light: #F9FAFB;
    --white: #FFFFFF;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
    font-family: 'Noto Sans JP', sans-serif;
    color: var(--text-dark);
    line-height: 1.7;
    background-color: var(--white);
    -webkit-text-size-adjust: 100%;
}

.container {
    max-width: 1000px;
    margin: 0 auto;
    padding: 0 20px;
}

/* --- Header --- */
.site-header {
    background: var(--white);
    padding: 15px 0;
    border-bottom: 3px solid var(--primary-color);
}

.header-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
}

.logo-text { font-size: 12px; color: var(--primary-color); display: block; font-weight: bold; }
h1 { font-size: 24px; color: var(--text-dark); }

.header-contact { text-align: right; }
.working-hours { font-size: 11px; color: var(--text-gray); }
.tel-link { font-size: 22px; font-weight: bold; color: var(--primary-color); text-decoration: none; }

/* --- Hero --- */
.hero {
    background: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)), url('../images/mv_bg.jpg'); /* イメージ画像：必要に応じて変更 */
    background-size: cover;
    background-position: center;
    color: var(--white);
    padding: 100px 0;
    text-align: center;
}

.hero h2 { font-size: 36px; margin-bottom: 20px; line-height: 1.4; }
.sub-copy { font-size: 18px; margin-bottom: 10px; display: block; }
.hero-labels { margin-bottom: 30px; }
.hero-labels span { background: rgba(255,255,255,0.2); padding: 5px 15px; border-radius: 50px; margin: 0 5px; font-size: 14px; border: 1px solid var(--white); }

.btn-primary {
    display: inline-block;
    background: var(--accent-color);
    color: var(--white);
    padding: 18px 40px;
    border-radius: 5px;
    text-decoration: none;
    font-weight: bold;
    font-size: 20px;
    box-shadow: 0 4px 15px rgba(214,69,69,0.4);
    transition: transform 0.2s;
}

.btn-primary:hover { transform: translateY(-3px); }

/* --- Sections --- */
.section { padding: 80px 0; }
.bg-light { background: var(--bg-light); }
.section-title { text-align: center; font-size: 28px; margin-bottom: 50px; position: relative; padding-bottom: 15px; }
.section-title::after { content: ''; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 60px; height: 3px; background: var(--primary-color); }

.check-list-card { background: var(--white); border-radius: 10px; padding: 40px; box-shadow: 0 10px 30px rgba(0,0,0,0.05); }
.check-list { list-style: none; }
.check-list li { position: relative; padding-left: 35px; margin-bottom: 15px; font-size: 18px; }
.check-list li::before { content: '✔'; position: absolute; left: 0; color: var(--primary-color); font-weight: bold; font-size: 20px; }

/* --- Form --- */
.form-section { background: #2c3e50; color: var(--white); }
.form-card { background: var(--white); color: var(--text-dark); padding: 40px; border-radius: 8px; max-width: 800px; margin: 0 auto; }
.form-title { text-align: center; font-size: 24px; color: var(--primary-color); margin-bottom: 10px; }
.form-intro { text-align: center; margin-bottom: 30px; font-size: 14px; color: var(--text-gray); }

.error-summary { background: #fff5f5; border: 1px solid #feb2b2; padding: 20px; border-radius: 5px; margin-bottom: 25px; color: #c53030; font-size: 14px; }

.form-group { margin-bottom: 20px; }
.form-group label { display: block; font-weight: bold; margin-bottom: 8px; font-size: 15px; }
.badge-req { background: #e53e3e; color: #fff; font-size: 10px; padding: 2px 6px; border-radius: 3px; margin-left: 8px; vertical-align: middle; }

input[type="text"], input[type="email"], select, textarea {
    width: 100%;
    padding: 12px;
    border: 1px solid #cbd5e0;
    border-radius: 4px;
    font-size: 16px;
}

.address-inputs { display: grid; grid-template-columns: 1fr 2fr; gap: 10px; }

.btn-submit {
    background: var(--primary-color);
    color: var(--white);
    width: 100%;
    padding: 20px;
    border: none;
    border-radius: 4px;
    font-size: 20px;
    font-weight: bold;
    cursor: pointer;
    transition: background 0.3s;
}
.btn-submit:hover { background: var(--primary-dark); }
/* 送信ボタンの基本スタイル */
/* ボタンを囲むエリアの設定 */
.submit-area {
    text-align: center;  /* 中のボタンを中央に寄せる */
    margin-top: 30px;    /* フォームとの間隔 */
}

/* 送信ボタン自体の設定 */
.btn-submit {
    background-color: #1B8C48;
    color: #fff !important;    /* 文字色を白で固定 */
    border: none;
    padding: 15px 50px;
    font-size: 18px;
    font-weight: bold;
    border-radius: 5px;
    cursor: pointer;
    transition: all 0.3s ease;
    width: 100%;               /* スマホでは横幅いっぱい */
    max-width: 400px;          /* PCでも広がりすぎないように制限 */
    display: inline-block;     /* 中央寄せを有効にするために必要 */
    text-decoration: none;     /* リンクタグの場合のアンダーライン消去 */
}

/* ホバー（カーソルを合わせた時）の挙動 */
.btn-submit:hover {
    background-color: #146a36; /* 少し濃い緑に変化 */
    color: #fff !important;    /* 白飛びを完全に防止 */
    opacity: 0.9;
    transform: translateY(-2px); /* 軽く浮かせる */
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
}
/* --- Footer --- */
.site-footer { background: #1a202c; color: var(--white); padding: 40px 0; text-align: center; font-size: 14px; }

/* --- Responsive --- */
@media (max-width: 768px) {
    .header-inner { justify-content: center; text-align: center; }
    .header-contact { margin-top: 15px; width: 100%; }
    .hero h2 { font-size: 20px; }
    .hero-labels span { display: inline-block; margin-bottom: 10px; }
    .section { padding: 50px 0; }
    .form-card { padding: 20px; }
    .address-inputs { grid-template-columns: 1fr; }
}
@media print, screen and (min-width: 751px) {
br.sp { display: none; }
br.pc { display: inline; }
}
@media screen and (max-width: 750px) {
br.sp { display: inline; }
br.pc { display: none; }
}