/* 参考ページの数値・書体をフォーム内に限定して適用する。 */
.honka-forms {
    --form-highlight-color: #a57a4f;
    --form-gray-color: #8c8c8c;
    font-family: proxima-nova, sans-serif;
    font-size: 16px;
    line-height: 1.42857143;
    color: #333;
    background: #fff;
}
.honka-forms * { box-sizing: border-box; }
.honka-forms-main { max-width: 1150px; margin: 0 auto; padding: 0 0 78px; }
.honka-forms .honka-highlight, .honka-forms .honka-form-action a, .honka-forms .honka-catalog-notice a { color: var(--form-highlight-color); }
.honka-form-intro {
    max-width: 800px;
    margin: 0 auto;
    background: #f4f4ee;
    padding: 1em;
    text-align: center;
    font-size: .9em;
    font-feature-settings: "palt" 1;
}
.honka-form-intro h1 { font-family: abril-fatface, serif; font-weight: 400; line-height: 1.25; margin: 1em 0; font-size: 1.25em; }
.honka-form-intro p { line-height: 1.5; margin: 0 0 15px; }
.honka-form-intro p, .honka-form-intro a { font-family: serif; font-weight: 700; }
.honka-form-intro span { display: inline-block; }
.honka-reservation .honka-form-intro { padding: 1em 2em; }
.honka-reservation .honka-form-intro p { text-align: left; line-height: 1.75; margin: 2em 0; }
.honka-catalogs { display: grid; grid-template-columns: 1fr 1fr; gap: 1em .125em; list-style: none; padding: 0; margin: 1em 0; }
.honka-catalogs li { display: grid; grid-template-rows: subgrid; grid-row: span 4; gap: .125em; padding: 0; margin: 0; font-size: 16px; }
.honka-catalogs h2 { font-family: abril-fatface, serif; color: var(--form-highlight-color); font-size: 1.125em; font-weight: 400; line-height: 1.1; margin: 0; }
.honka-catalogs p { font-size: .75em; font-weight: 800; margin: 0 0 .5em; }
.honka-catalogs li > div { padding: 0 1em .5em; justify-self: center; align-self: center; }
.honka-catalogs img { box-shadow: 1px 1px 2px 2px rgba(0, 0, 0, .15); max-width: 80%; height: auto; }
.honka-catalogs li:last-child { grid-column: 1 / -1; margin-inline: 22.5%; }
.honka-catalogs li:last-child img { max-width: 100%; }
.honka-forms .honka-pdf-link { display: inline-block; font-size: .86em; color: #fff; background: #b6a87e; border-radius: .25em; padding: .15em .75em .2em; margin: 1em 0; text-decoration: none; }
.honka-pdf-link::after { content: "▶"; font-size: .9em; margin-left: .25em; }
.honka-catalog .honka-form-intro .honka-small { font-size: .9em; max-width: 500px; margin: 0 auto 15px; }
.honka-catalog .honka-small a { color: var(--form-highlight-color); }
.honka-form-panel { max-width: 800px; padding: 0 .5em; margin: 0 auto; scroll-margin-top: 30px; }
.honka-form-notice { margin: 2em 0; font-size: .82em; font-family: serif; font-weight: 700; line-height: 1.75; padding: 0; font-feature-settings: "palt" 1; }
.honka-form-notice a { font-family: serif; }
.honka-field { display: flex; flex-direction: column; margin-bottom: 1.75em; }
.honka-field-label { font-size: .96em; font-weight: 400; line-height: 1.4; letter-spacing: -.75px; margin-bottom: .5em; display: flex; align-items: baseline; justify-content: flex-start; }
.honka-label-text { order: 2; }
.honka-label-text > span { display: inline-block; }
.honka-badge { display: inline-block; padding: .2em .5em .1em .4em; font-size: .9em; color: #fff; border-radius: .25em; flex-shrink: 0; order: 1; margin-right: .5em; background: var(--form-highlight-color); }
.honka-badge.optional { background: var(--form-gray-color); }
.honka-control { min-width: 0; }
.honka-control input:not([type=radio]):not([type=checkbox]),
.honka-forms .honka-control textarea, .honka-forms .honka-control select {
    display: block;
    width: 100%;
    max-width: 100%;
    height: 34px;
    border: 1px solid #251e1c;
    border-radius: 0;
    padding: 1em .5em;
    background: #fff;
    color: #333;
    font-family: proxima-nova, sans-serif;
    font-size: 1em;
    line-height: normal;
    margin: 0;
    box-shadow: none;
}
.honka-forms .honka-control select { padding: .375em .5em; font-size: .9em; }
.honka-forms .honka-control input[type=date] { padding: .25em .5em; height: 2em; width: 12em; }
.honka-forms .honka-control textarea { height: auto; resize: vertical; }
.honka-control input::placeholder { font-size: .9em; color: #777; opacity: 1; }
.honka-form-row { display: flex; gap: .5em; }
.honka-reservation [data-group=name] .honka-form-row { margin-bottom: .675em; }
.honka-form-row > .honka-control { flex: 1; min-width: 0; }
.honka-choices { display: flex; flex-wrap: wrap; gap: .5em 1em; align-items: center; padding-top: .25em; font-size: 1em; }
.honka-choices label, .honka-checkbox, .honka-other-row > label { font-family: proxima-nova, sans-serif; font-size: 15px; font-weight: 400; line-height: 1.4; letter-spacing: -.75px; display: inline-block; gap: .5em; margin: 0; cursor: pointer; }
.honka-forms input[type=radio], .honka-forms input[type=checkbox] { width: 13px; height: 13px; margin: 0; flex-shrink: 0; }
.honka-forms input[type=radio] { height: 19px; vertical-align: middle; }
.honka-checkbox input[type=checkbox] { position: relative; bottom: 1px; margin-right: .125em; }
.honka-form-address { margin-top: .75em; }
.honka-area-row { display: flex; align-items: center; flex-wrap: wrap; gap: .5em; }
.honka-area-row > .honka-control:not([data-field=area_undecided]) { flex: 1; min-width: 8em; }
.honka-forms .honka-area-row input[type=text], .honka-forms [data-field=address1] input { padding: .375em .5em; font-size: .9em; }
.honka-area-row [data-field=area_undecided] { flex: 0 0 auto; white-space: nowrap; }
.honka-other-row { display: flex; align-items: center; gap: .5em; margin-top: .5em; width: 100%; }
.honka-other-row > label { flex-shrink: 0; }
.honka-other-row > .honka-control { flex: 1; }
.honka-forms [data-field=zip] input, .honka-forms [data-field=tel] input { max-width: 14em !important; }
.honka-forms [data-field=construction_schedule_id] select, .honka-forms [data-field=construction_budget_id] select { max-width: 14em; }
.honka-forms [data-field=time] select, .honka-forms [data-field=time2] select { max-width: 13em; }
.honka-forms .honka-hint { font-size: .9em; line-height: 1.5; margin: 0; }
.honka-time-notice { text-align: center; margin: 0 0 2em; line-height: 1.5; }
.honka-form-action { margin-top: 2em; }
.honka-consent { text-align: center; }
.honka-consent .honka-checkbox { display: inline-flex; align-items: baseline; gap: .5em; font-size: 16px; letter-spacing: normal; line-height: 1.5; }
.honka-consent a { font-weight: 700; }
.honka-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; }
.honka-forms .honka-button { display: block; margin: 2em 0 0; padding: 0 3em; border: 1px solid #251e1c; background: transparent; color: #181818; font-family: proxima-nova, sans-serif; font-size: 1.1875em; font-weight: 700; line-height: 45px; letter-spacing: .125em; height: 45px; text-align: center; text-decoration: none; cursor: pointer; }
.honka-forms .honka-button:hover { background: #f4f4ee; }
.honka-forms .honka-button.secondary { color: #666; border-color: #8c8c8c; }
.honka-forms :focus-visible { outline: 2px solid #a57a4f; outline-offset: 3px; }
.honka-forms .honka-control :disabled:disabled { color: #777; background: #f5f5f5; border-color: #aaa; }
.honka-errors { background: #fff3ed; border: 1px solid #a03f1f; padding: 18px 24px; margin: 20px 0; }
.honka-errors p { margin: 0 0 8px; }
.honka-errors ul { margin: 0; padding-left: 20px; }
.honka-errors a { color: #a03f1f; text-decoration: underline; }
.honka-field-error { font-size: 13px; color: #a03f1f; margin: 8px 0 0; }
.honka-forms [aria-invalid=true] { border-color: #b03518 !important; }
.honka-steps { list-style: none; margin: 26px 0 36px; padding: 0; display: flex; border-bottom: 1px solid #ddd; }
.honka-steps li { flex: 1; text-align: center; color: #757575; padding: 16px 0; font-size: 15px; }
.honka-steps li[aria-current] { color: #a57a4f; border-bottom: 3px solid #a57a4f; font-weight: 700; }
.honka-steps span { margin-right: 8px; }
.honka-confirm { margin: 30px 0; }
.honka-recaptcha { text-align: center; margin: 24px 0; }
#honka-recaptcha { display: flex; justify-content: center; }
.honka-recaptcha p { font-size: 14px; margin-top: 12px; }
.honka-button:disabled { opacity: .5; cursor: not-allowed; }
.honka-confirm > div { display: grid; grid-template-columns: 32% 1fr; gap: 20px; padding: 18px 0; border-bottom: 1px solid #ddd; }
.honka-confirm dt { font-weight: 400; font-size: .96em; }
.honka-confirm dd { margin: 0; overflow-wrap: anywhere; }
.honka-complete { text-align: center; padding: 24px 0; }
.honka-complete h2 { font-size: 26px; margin-bottom: 24px; }
.honka-complete p { line-height: 1.9; }
.honka-receipt { font-size: 13px; overflow-wrap: anywhere; margin: 24px 0; }
.honka-sr-only, .honka-honeypot { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0,0,0,0); white-space: nowrap; border: 0 !important; }
@media (min-width: 768px) {
    .honka-catalog .honka-form-intro { padding: .5em 2em 1em; }
    .honka-catalog .honka-form-intro h1 { font-size: 2.2em; }
    .honka-catalogs { grid-template-columns: 5fr 5fr 6fr; }
    .honka-catalogs li:last-child { grid-column: 3 / 4; margin-inline: 0; }
    .honka-catalogs li:last-child img { max-width: 80%; }
    .honka-reservation .honka-form-intro { padding: 1em 4em; }
    .honka-reservation .honka-form-intro h1 { font-size: 2em; }
    .honka-field { flex-direction: row; align-items: flex-start; }
    .honka-field-label { width: 32%; flex-shrink: 0; margin-bottom: 0; padding-top: .125em; justify-content: flex-end; text-align: right; }
    .honka-field-control { width: 68%; min-width: 0; padding-left: 1.25em; }
    .honka-label-text { order: 1; margin-right: .5em; }
    .honka-badge { order: 2; margin-inline: 0; }
}
@media (max-width: 1199px) { .honka-forms-main { max-width: 950px; } }
@media (max-width: 991px) { .honka-forms-main { max-width: 730px; } }
@media (max-width: 767px) {
    .honka-forms-main { margin: 0 10px; }
    .honka-confirm > div { grid-template-columns: 1fr; gap: 8px; }
    .honka-confirm dt { color: #70635b; }
    .honka-actions { flex-direction: column-reverse; align-items: center; gap: 0; }
    .honka-button { max-width: 100%; }
}