/* ============================================================
 goodstory-jp-forms.css
 goodstory.jp HubSpot form CSS for hsfc-Form engine

 Current policy: visible labels with minimal CSS control.
 Updated: 2026/07/28

 Targets:
 - Newsletter registration form
   data-form-id: 1333054e-a1b6-40d7-8a68-c72b7475ff16
   placements: goodstory.jp footer and /mailmagazine/ side column
 - GOODSTORY contact form
   data-form-id: 58b2abde-9a93-4033-a7b5-190344f69e93

 Notes:
 - Both forms render with HubSpot's newer hsfc-Form engine, not classic .hs-form.
 - Field labels should remain visible so HRD can adjust labels and copy in HubSpot form settings.
 - Do not use clipped/absolute-positioned CSS to hide labels unless a new decision is made.
 - Keep label styling light; avoid fixing label color, font size, or font weight unless required for page-specific layout.
 ============================================================ */

/* ---------- 1. Newsletter registration form ---------- */

[data-form-id="1333054e-a1b6-40d7-8a68-c72b7475ff16"] .hsfc-FieldLabel {
 display: block !important;
 text-align: left !important;
 margin-bottom: 4px !important;
}

/* ---------- 1a. Footer placement on goodstory.jp top page ---------- */

.footer_form_wrap [data-form-id="1333054e-a1b6-40d7-8a68-c72b7475ff16"] {
 margin: 10px auto !important;
}

.footer_form_wrap [data-form-id="1333054e-a1b6-40d7-8a68-c72b7475ff16"] .hsfc-TextInput,
.footer_form_wrap [data-form-id="1333054e-a1b6-40d7-8a68-c72b7475ff16"] .hsfc-TextareaInput,
.footer_form_wrap [data-form-id="1333054e-a1b6-40d7-8a68-c72b7475ff16"] select {
 background-color: #ffffff !important;
 color: #495057 !important;
 border: 1px solid #bdccd4 !important;
 border-radius: 1.5px !important;
 font-size: 10px !important;
 height: 46px !important;
 padding: 3.75px 7.5px !important;
 box-sizing: border-box !important;
}

.footer_form_wrap [data-form-id="1333054e-a1b6-40d7-8a68-c72b7475ff16"] button.hsfc-Button {
 display: block !important;
 width: auto !important;
 padding: 0 24px !important;
 height: 33px !important;
 background-color: #82a7ba !important;
 color: #ffffff !important;
 border: none !important;
 border-radius: 3px !important;
 font-size: 10px !important;
 font-weight: 400 !important;
 margin: 10px auto !important;
}

/* ---------- 1b. /mailmagazine/ side column placement ---------- */

#side [data-form-id="1333054e-a1b6-40d7-8a68-c72b7475ff16"] {
 margin: 10px auto !important;
}

#side [data-form-id="1333054e-a1b6-40d7-8a68-c72b7475ff16"] .hsfc-TextInput,
#side [data-form-id="1333054e-a1b6-40d7-8a68-c72b7475ff16"] .hsfc-TextareaInput,
#side [data-form-id="1333054e-a1b6-40d7-8a68-c72b7475ff16"] select {
 background-color: #ffffff !important;
 color: #000000 !important;
 border: 1px solid #aeb0b6 !important;
 border-radius: 0 !important;
 font-size: 16px !important;
 line-height: 42px !important;
 padding: 3.2px 4.8px !important;
 box-sizing: border-box !important;
}

#side [data-form-id="1333054e-a1b6-40d7-8a68-c72b7475ff16"] button.hsfc-Button {
 display: block !important;
 width: auto !important;
 padding: 6.4px 16px !important;
 background-color: #99c47c !important;
 color: #ffffff !important;
 border: none !important;
 border-radius: 0 !important;
 font-weight: 400 !important;
 margin: 10px auto !important;
}

@media only screen and (max-width: 480px) {
 .footer_form_wrap [data-form-id="1333054e-a1b6-40d7-8a68-c72b7475ff16"],
 #side [data-form-id="1333054e-a1b6-40d7-8a68-c72b7475ff16"] {
 width: 100% !important;
 padding: 10px !important;
 }
}

/* ---------- 2. GOODSTORY contact form ---------- */

[data-form-id="58b2abde-9a93-4033-a7b5-190344f69e93"] .hsfc-FieldLabel {
 display: block !important;
 text-align: left !important;
 margin-bottom: 4px !important;
}

[data-form-id="58b2abde-9a93-4033-a7b5-190344f69e93"] .hsfc-TextInput {
 line-height: 24px !important;
 height: 42px !important;
 font-size: 16px !important;
 margin-top: 5px !important;
 margin-bottom: 10px !important;
}

[data-form-id="58b2abde-9a93-4033-a7b5-190344f69e93"] .hsfc-TextareaInput {
 line-height: 24px !important;
 height: 10.6em !important;
 font-size: 16px !important;
 margin-top: 5px !important;
 margin-bottom: 10px !important;
}

[data-form-id="58b2abde-9a93-4033-a7b5-190344f69e93"] button.hsfc-Button {
 display: block !important;
 width: 210px !important;
 margin: 15px auto !important;
}