@charset "utf-8";
/* CSS Document */
html {
  scroll-behavior: auto
}
.contact_form_section {
  position: relative;
  overflow: hidden;
  background-color: #f8f8f8;
}
.contact_form_section .contact-form_a { width: 100%; }
.contact_form_section .form-box { margin-right: auto; margin-left: auto; }
.contact_faq { position: relative; overflow: hidden; background-color: #fff; }
.contact_faq .faq_e1 .box { overflow: hidden; background-color: #f8f8f8; border-radius: 18px; }
.contact_faq .faq_e1 .box:not(:last-child) { margin-bottom: clamp(25px, 4vw, 40px); }
.contact_faq .faq_e1 .qbox { position: relative; display: flex; align-items: center; gap: 18px; min-height: 105px; padding: 25px 75px 25px 35px; box-sizing: border-box; cursor: pointer; }
.contact_faq .faq_e1 .q_icon { flex: none; margin: 0; color: #ff669d; font-size: clamp(32px, 4vw, 46px); line-height: 1; }
.contact_faq .faq_e1 .qbox h3 { margin: 0; color: #333; line-height: 1.7; letter-spacing: 0.05em; }
.contact_faq .faq_e1 .qbox .icon { position: absolute; top: 50%; right: clamp(25px, 4vw, 42px); width: 24px; aspect-ratio: 1; background-color: #ff669d; border-radius: 50%; transform: translateY(-50%); }
.contact_faq .faq_e1 .qbox .icon::before, .contact_faq .faq_e1 .qbox .icon::after { content: ""; position: absolute; top: 50%; left: 50%; background-color: #fff; border-radius: 100px; transform: translate(-50%, -50%); transition: opacity 0.25s ease; }
.contact_faq .faq_e1 .qbox .icon::before { width: 10px; height: 2px; }
.contact_faq .faq_e1 .qbox .icon::after { width: 2px; height: 10px; }
.contact_faq .faq_e1 .qbox.active .icon::after { opacity: 0; }
.contact_faq .faq_e1 .abox { display: none; padding: 0 35px 28px; background-color: #f8f8f8; }
.contact_faq .faq_e1 .abox > .flex { display: flex; align-items: flex-start; gap: 18px; padding-top: 22px; border-top: 1px dotted #bbb; }
.contact_faq .faq_e1 .a_icon { flex: none; margin: 0; color: #65bfca; font-size: clamp(34px, 4.2vw, 48px); line-height: 1; }
.contact_faq .faq_e1 .abox .lineheight22 { flex: 1; margin: 0; color: #333; line-height: 2; letter-spacing: 0.04em; }
@media screen and (max-width: 768px) {
  .contact_faq .faq_e1 .qbox { min-height: 90px; padding: 22px 65px 22px 25px; }
  .contact_faq .faq_e1 .abox { padding-right: 25px; padding-bottom: 25px; padding-left: 25px; }
}
@media screen and (max-width: 576px) {
  .contact_faq .faq_e1 .box { border-radius: 14px; }
  .contact_faq .faq_e1 .box:not(:last-child) { margin-bottom: 18px; }
  .contact_faq .faq_e1 .qbox { gap: 12px; min-height: 80px; padding: 18px 52px 18px 17px; }
  .contact_faq .faq_e1 .qbox .icon { right: 17px; width: 22px; }
  .contact_faq .faq_e1 .abox { padding: 0 17px 20px; }
  .contact_faq .faq_e1 .abox > .flex { gap: 12px; padding-top: 16px; }
  .contact_faq .faq_e1 .abox .lineheight22 { line-height: 1.8; }
}
@media all and (-ms-high-contrast: none) {}
@media screen and (max-width: 1280px) {}
@media screen and (max-width: 1080px) {}
@media screen and (max-width: 768px) {}
@media screen and (max-width: 576px) {}
@media screen and (max-width: 350px) {}
.contact-page .page-column { background: #f4f1ea url('https://famillehair.com/system_panel/uploads/images/bg1.png') repeat; }
.contact-page .about-hero, .contact-page .bg1 { background: transparent; }
.contact-page .contact_form_section { background: #faf8f4 url('https://famillehair.com/system_panel/uploads/images/bg1.png') repeat; padding-bottom: 120px; overflow: visible; }
.contact-intro { margin-top: 28px; }
.contact-faq-link { justify-content: center; margin: 20px 0 40px; }
.contact-page .sparkle-rule:after { background: transparent url('https://famillehair.com/system_panel/uploads/images/icon.png') center/contain no-repeat; clip-path: none; }
.contact-form_a .box-wrap > .box { display: block; position: relative; margin-bottom: 28px; }
.contact-form_a .box h3 { font-size: 16px; font-weight: 400; margin: 0 0 12px; padding-right: 74px; }
.contact-form_a .required-box:before { content: '必須'; position: absolute; right: 0; top: 0; background: #b30817; color: white; padding: 1px 18px; border-radius: 2px; font-size: 13px; }
.contact-form_a .inputbox { width: 100%; }
.contact-form_a input:not([type=radio]):not([type=checkbox]), .contact-form_a textarea { width: 100%; box-sizing: border-box; border: 1px solid transparent; border-radius: 4px; background: white; color: #333; padding: 14px 16px; font: inherit; font-size: 16px; line-height: 1.6; }
.contact-form_a textarea { min-height: 240px; resize: vertical; }
.contact-form_a input:focus-visible, .contact-form_a textarea:focus-visible { outline: 2px solid #bc9a5b; outline-offset: 2px; }
.contact-form_a input::placeholder, .contact-form_a textarea::placeholder { color: #aaa; }
.contact-form_a .check-wrap { display: grid; gap: 12px; }
.contact-form_a .check-box { display: flex; align-items: center; gap: 12px; }
.contact-form_a input[type=radio], .contact-form_a input[type=checkbox] { width: 20px; height: 20px; flex-shrink: 0; accent-color: #b7985f; }
.contact-form_a .check-box p { cursor: pointer; }
.contact-form_a .address1 { display: flex; gap: 10px; align-items: center; }
.contact-form_a .address1 input { max-width: 120px; }
.contact-form_a .address2 + .address2 { margin-top: 10px; }
.contact-form_a .check-area { margin: 32px 0; }
.contact-form_a .check-area > div { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 6px; }
.privacy-bt { cursor: pointer; text-decoration: underline; text-underline-offset: 4px; }
.contact-form_a .send { justify-content: center; }
.contact-form_a .send-bt { position: relative; display: flex; align-items: center; justify-content: space-between; width: 280px; max-width: 100%; min-height: 54px; padding: 12px 28px; border: 1px solid #8f8b84; border-radius: 999px; background: transparent; box-sizing: border-box; transition: background .2s; }
.contact-form_a .send-bt:hover { background: #eee7db; }
.contact-form_a .send-bt:after { content: '→'; border: 1px solid #8f8b84; border-radius: 50%; width: 24px; height: 24px; text-align: center; line-height: 22px; }
.contact-form_a .send-bt button { position: absolute; inset: 0; opacity: 0; width: 100%; height: 100%; cursor: pointer; }
.contact-form_a .send-bt p { color: #333; font-weight: 400; }
.form-status { margin-top: 24px; color: #a32222; }
.privacypolicy[hidden] { display: none; }
.privacypolicy { position: fixed; inset: 0; background: rgba(30, 28, 24, .65); z-index: 10000; overflow-y: auto; padding: 60px 20px; box-sizing: border-box; }
.privacypolicy .contents { background: #fffdf8; width: min(800px, 100%); padding: 40px; margin: auto; border-radius: 10px; box-sizing: border-box; }
.privacypolicy .title { font-size: 24px; margin-bottom: 24px; }
.privacypolicy .box { margin-top: 28px; }
.privacypolicy h3 { font-size: 18px; margin-bottom: 12px; }
.privacypolicy p { line-height: 1.9; overflow-wrap: anywhere; }
.privacypolicy a { text-decoration: underline; }
.privacypolicy .close-bt { position: fixed; right: 22px; top: 15px; width: 40px; height: 40px; border: 0; border-radius: 50%; background: white; color: #333; font-size: 28px; cursor: pointer; }
body.privacy-open { overflow: hidden; }
@media(max-width:576px) {
  .contact-page .about-section { padding: 40px 20px; }
  .contact-page .contact_form_section { padding-bottom: 120px; }
  .contact-reservation .reservation-actions { grid-template-columns: 1fr; gap: 12px; }
  .contact-reservation .reservation-tel { font-size: clamp(22px, 6vw, 32px); white-space: nowrap; }
  .contact-form_a .box h3 { font-size: 14px; }
  .contact-form_a .check-area p { font-size: 13px; }
  .contact-page .sparkle-heading-row { gap: 6px; }
  .contact-page .sparkle-heading-row h2 { font-size: 16px; }
  .privacypolicy { padding: 65px 12px 20px; }
  .privacypolicy .contents { padding: 26px 20px; }
  .privacypolicy .title { font-size: 21px; }
  .privacypolicy h3 { font-size: 16px; }
}
.contact-form_a input[type="radio"] { appearance: none; -webkit-appearance: none; width: 20px; height: 20px; box-sizing: border-box; border: 1px solid #ddd; border-radius: 50%; background: #fff; cursor: pointer; transition: border-color .2s, box-shadow .2s; }
.contact-form_a input[type="radio"]:checked { background: #fff; border: 4px solid #bc9a5b; box-shadow: 0 0 0 1px #bc9a5b; }
.privacypolicy { display: none; }
.privacypolicy.is-open { display: block; }
.form-status { display: none; }
.form-status.is-visible { display: block; }

/* Smooooth / GrapesJS対応 */
.contact-page .side-link-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
  line-height: 1.65;
  text-wrap: balance
}
.contact-page .side-link-text > p,
.contact-page .side-links > a > p {
  margin: 0
}
.contact-page .side-link-text > p {
  white-space: nowrap
}
.contact-page .circle-arrow {
  margin: 0
}
.contact-page .reservation-intro {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap
}
.contact-page .reservation-intro > p {
  margin: 0
}
.about-section.contact_form_section {
  padding-bottom: 100px;
}