/* Contact / お問い合わせ — Figma node 217:5238 */
/* お問い合わせ完了 — Figma node 223:5508（.contact-thanks*） */

:root{
    /* 松野医院テーマ（common.css / price.css のブランド・テキストトークンに準拠） */
    --ct-accent:#ff9888;
    --ct-accent-dark:#d96a58;
    --ct-border:#d4c6c3;
    --ct-text:#333333;
    --ct-muted:#555555;
    --ct-ph:#777777;
    --ct-req:#ff9888;
    --ct-white:#FFFFFF;
  }
  
  .contact-page{
    max-width:1440px;
    margin:100px auto 0;
    background:var(--ct-white);
    color:var(--ct-text);
    font-family:"Noto Sans JP",sans-serif;
  }
  
  .contact-hero{
    background:var(--ct-white);
  }
  
  .contact-hero__inner{
    max-width:1440px;
    margin:0 auto;
    padding:0 40px;
    box-sizing:border-box;
  }
  
  .contact-crumb{
    display:flex;
    justify-content:flex-end;
    align-items:center;
    flex-wrap:wrap;
    gap:16px;
    padding-top:40px;
    margin:0;
  }
  
  .contact-crumb a{
    font-size:14px;
    font-weight:500;
    letter-spacing:1.4px;
    color:var(--ct-text);
    text-decoration:underline;
    text-underline-offset:3px;
  }
  
  .contact-crumb__sep{
    display:block;
    width:1px;
    height:1em;
    flex-shrink:0;
    background-color:var(--ct-border);
    align-self:center;
  }
  
  .contact-crumb__here{
    font-size:14px;
    font-weight:500;
    letter-spacing:1.4px;
    color:var(--ct-text);
    text-decoration:none;
  }
  
  .contact-title{
    max-width:640px;
    padding:24px 0 0;
  }
  
  .contact-kicker{
    margin:0;
    font-family:Marcellus,serif;
    font-size:20px;
    line-height:1.3;
    letter-spacing:2px;
    color:var(--ct-accent);
  }
  
  .contact-title__heading{
    margin:16px 0 0;
    font-family:"Shippori Mincho",serif;
    font-size:64px;
    line-height:1.2;
    font-weight:400;
    color:var(--ct-text);
  }
  
  .contact-body{
    padding:120px 120px 120px;
    box-sizing:border-box;
  }
  
  .contact-body__inner{
    max-width:1000px;
    margin:0 auto;
  }
  
  .contact-form{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:50px;
  }
  
  .contact-form__fields{
    display:flex;
    flex-direction:column;
    gap:32px;
    width:100%;
    max-width:1000px;
  }
  
  .contact-field{
    display:flex;
    flex-wrap:wrap;
    gap:40px;
    align-items:center;
    width:100%;
    max-width:1000px;
  }
  
  .contact-field--select{
    max-width:700px;
  }
  
  .contact-field__label{
    display:flex;
    flex-wrap:wrap;
    gap:4px;
    align-items:center;
    width:160px;
    flex-shrink:0;
    box-sizing:border-box;
  }
  
  .contact-field__labelText{
    font-size:18px;
    font-weight:400;
    line-height:1;
    color:var(--ct-text);
  }
  
  .contact-req{
    font-size:16px;
    font-weight:400;
    line-height:1;
    color:var(--ct-req);
    flex-shrink:0;
  }
  
  .contact-input,
  .contact-select,
  .contact-textarea{
    font-family:"Noto Sans JP",sans-serif;
    font-size:18px;
    font-weight:400;
    color:var(--ct-text);
    background:var(--ct-white);
    border:1px solid var(--ct-border);
    border-radius:5px;
    padding:20px 12px;
    box-sizing:border-box;
  }
  
  .contact-input::placeholder,
  .contact-textarea::placeholder{
    color:var(--ct-ph);
  }
  
  .contact-input{
    width:800px;
    max-width:100%;
    flex:1;
    min-width:0;
  }
  
  .contact-field--select .contact-selectWrap{
    width:500px;
    max-width:100%;
    position:relative;
    flex-shrink:0;
  }
  
  .contact-select{
    width:100%;
    padding-right:40px;
    appearance:none;
    cursor:pointer;
    line-height:normal;
  }
  
  .contact-select:required:invalid{
    color:var(--ct-ph);
  }
  
  .contact-select option{
    color:var(--ct-text);
  }
  
  .contact-selectWrap::after{
    content:"";
    position:absolute;
    right:14px;
    top:50%;
    margin-top:-4px;
    width:0;
    height:0;
    border-left:6px solid transparent;
    border-right:6px solid transparent;
    border-top:8px solid var(--ct-accent);
    pointer-events:none;
  }
  
  .contact-field--textarea{
    align-items:flex-start;
  }
  
  .contact-textareaWrap{
    width:800px;
    max-width:100%;
    flex:1;
    min-width:0;
    position:relative;
  }
  
  .contact-textarea{
    display:block;
    width:100%;
    min-height:200px;
    resize:vertical;
    line-height:normal;
  }
  
  /* 区切り線は非表示（Figma の hr 相当を DOM に残す場合用クラス） */
  .contact-form__rule{
    display:none;
  }
  
  .contact-form__checks{
    align-self:stretch;
    max-width:1000px;
    width:100%;
    display:flex;
    flex-direction:column;
    gap:20px;
    margin-top: 32px;
  }
  
  .contact-check{
    display:flex;
    align-items:center;
    gap:8px;
    cursor:pointer;
    position:relative;
  }
  
  .contact-check__input{
    position:absolute;
    opacity:0;
    width:24px;
    height:24px;
    margin:0;
    flex-shrink:0;
    cursor:pointer;
  }
  
  .contact-check__box{
    width:24px;
    height:24px;
    flex-shrink:0;
    border:1px solid #000;
    border-radius:2px;
    background:var(--ct-white);
    box-sizing:border-box;
    pointer-events:none;
  }
  
  .contact-check__input:checked + .contact-check__box{
    background:var(--ct-accent);
    border-color:var(--ct-accent);
  }
  
  .contact-check__input:focus-visible + .contact-check__box{
    outline:2px solid var(--ct-accent);
    outline-offset:2px;
  }
  
  .contact-check__labelInner{
    display:flex;
    align-items:center;
    gap:4px;
    flex-wrap:wrap;
  }
  
  .contact-check__text{
    font-size:16px;
    font-weight:400;
    line-height:1;
    color:var(--ct-text);
  }
  
  .contact-submitBtn{
    display:flex;
    align-items:center;
    gap:12px;
    padding:20px;
    border:none;
    border-radius:5px;
    cursor:pointer;
    font-family:"Noto Sans JP",sans-serif;
    box-sizing:border-box;
  }

  .contact-submitBtn input{
    background:var(--ct-accent);
  }
  
  .contact-submitBtn__label{
    font-size:16px;
    font-weight:500;
    line-height:1.2;
    color:var(--ct-white);
    text-align:center;
    width:180px;
    flex-shrink:0;
  }
  
  .contact-submitBtn__divider{
    width:1px;
    height:32px;
    background:var(--ct-accent-dark);
    flex-shrink:0;
  }
  
  .contact-submitBtn__icon{
    display:flex;
    align-items:center;
    justify-content:center;
    width:20px;
    height:20px;
    flex-shrink:0;
  }
  
  .contact-submitBtn__icon img{
    display:block;
    width:20px;
    height:20px;
    filter:brightness(0) invert(1);
  }
  
  .contact-submitBtn:hover{
    opacity:0.92;
  }
  
  .contact-submitBtn:focus-visible{
    outline:2px solid var(--ct-accent-dark);
    outline-offset:3px;
  }
  
  .contact-thanks{
    padding:120px 120px 120px;
    box-sizing:border-box;
  }
  
  .contact-thanks__inner{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:80px;
    max-width:1200px;
    margin:0 auto;
  }
  
  .contact-thanks__message{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:40px;
    max-width:536px;
    width:100%;
    text-align:center;
  }
  
  .contact-thanks__title{
    margin:0;
    font-family:"Shippori Mincho",serif;
    font-size:48px;
    font-weight:400;
    line-height:1.3;
    color:var(--ct-accent);
  }
  
  .contact-thanks__text{
    margin:0;
    width:100%;
    font-size:16px;
    font-weight:400;
    line-height:2;
    color:var(--ct-text);
  }
  
  .contact-thanks__text p{
    margin:0;
    line-height:2;
  }
  
  .contact-thanks__actions{
    display:flex;
    justify-content:center;
  }
  
  .contact-thanks__btnTop{
    display:inline-flex;
    align-items:center;
    gap:12px;
    padding:8px 12px;
    border:1px solid var(--ct-accent);
    border-radius:4px;
    background:var(--ct-white);
    text-decoration:none;
    color:var(--ct-accent);
    box-sizing:border-box;
  }
  
  .contact-thanks__btnTop:hover{
    opacity:0.9;
  }
  
  .contact-thanks__btnTop:focus-visible{
    outline:2px solid var(--ct-accent);
    outline-offset:3px;
  }
  
  .contact-thanks__btnTopIcon{
    display:flex;
    align-items:center;
    justify-content:center;
    width:20px;
    height:20px;
    flex-shrink:0;
  }
  
  .contact-thanks__btnTopIcon img{
    display:block;
    width:20px;
    height:20px;
    transform:rotate(180deg);
  }
  
  .contact-thanks__btnTopDivider{
    width:1px;
    height:32px;
    background:var(--ct-border);
    flex-shrink:0;
  }
  
  .contact-thanks__btnTopLabel{
    width:120px;
    font-size:14px;
    font-weight:500;
    line-height:1.2;
    text-align:center;
    color:var(--ct-accent);
  }
  
  @media (max-width: 1100px){
    .contact-body{
      padding:80px 40px 100px;
    }
    .contact-field{
      flex-direction:column;
      gap:12px;
      max-width:100%;
    }
    .contact-field__label{
      width:100%;
    }
    .contact-input{
      width:100%;
    }
    .contact-field--select{
      max-width:100%;
    }
    .contact-field--select .contact-selectWrap{
      width:100%;
    }
    .contact-textareaWrap{
      width:100%;
    }
    .contact-thanks{
      padding:80px 40px 100px;
    }
    .contact-thanks__inner{
      gap:56px;
    }
    .contact-thanks__title{
      font-size:36px;
    }
  }
  
  /* SP（Figma 265:16281 / 375px） */
  @media (max-width: 767px){
    .contact-page{
      margin-top:0;
    }
  
    .contact-hero__inner{
      padding:0 20px;
    }
  
    .contact-crumb{
      justify-content:flex-start;
      gap:8px;
      padding-top:100px;
    }
  
    .contact-crumb a,
    .contact-crumb__here{
      font-size:12px;
      font-weight:500;
      letter-spacing:1.2px;
    }
  
    .contact-title{
      display:flex;
      flex-direction:column;
      gap:12px;
      max-width:none;
      padding:48px 0 0;
    }
  
    .contact-kicker{
      font-size:16px;
      letter-spacing:1.6px;
    }
  
    .contact-title__heading{
      margin:0;
      font-size:40px;
      line-height:1.2;
      max-width:335px;
    }
  
    .contact-body{
      padding:80px 20px 80px;
      box-sizing:border-box;
    }
  
    .contact-body__inner{
      max-width:335px;
      margin:0 auto;
    }
  
    .contact-form{
      align-items:center;
      gap:50px;
    }
  
    .contact-form__fields{
      gap:32px;
      max-width:335px;
      width:100%;
      align-items:stretch;
    }
  
    .contact-field{
      flex-direction:column;
      align-items:flex-start;
      gap:16px;
      max-width:100%;
    }
  
    .contact-field__label{
      width:auto;
      align-items:flex-start;
    }
  
    .contact-field__labelText{
      font-size:16px;
    }
  
    .contact-input,
    .contact-select,
    .contact-textarea{
      font-size:16px;
      padding:20px 12px;
    }
  
    .contact-input{
      width:100%;
      max-width:335px;
    }
  
    .contact-field--select{
      max-width:100%;
    }
  
    .contact-field--select .contact-selectWrap{
      width:100%;
      max-width:335px;
    }
  
    .contact-selectWrap::after{
      right:12px;
      margin-top:-3px;
      border-left:4px solid transparent;
      border-right:4px solid transparent;
      border-top:6px solid var(--ct-accent);
    }
  
    .contact-textareaWrap{
      width:100%;
      max-width:335px;
    }
  
    .contact-textarea{
      min-height:200px;
      height:200px;
      resize:vertical;
      box-sizing:border-box;
    }
  
    .contact-form__checks{
      max-width:335px;
      width:100%;
      align-self:center;
    }
  
    .contact-submitBtn{
      padding:16px;
    }
  
    .contact-submitBtn__label{
      width:140px;
      min-width:140px;
    }
  
    .contact-thanks{
      padding:48px 20px 80px;
    }
  
    .contact-thanks__inner{
      gap:40px;
    }
  
    .contact-thanks__title{
      font-size:28px;
    }
  
    .contact-thanks__btnTopLabel{
      width:auto;
      min-width:100px;
    }
  }