@page {
    size: A4 portrait;
    margin: 10mm 10mm 12mm;
  }
  
  @media print {
  
    html,
    body {
      width: 100%;
      height: auto;
      background: #fff !important;
      color: #383838 !important;
      -webkit-print-color-adjust: exact;
      print-color-adjust: exact;
    }
  
    html {
      font-size: 80%;
    }
  
    body {
      font-size: 10.5pt;
      line-height: 1.7;
      /* zoom: 0.8; ← これが位置ズレの原因になりやすいので外す */
    }
  
    /* ========= 非表示 ========= */
    #toggle,
    #nav-content,
    body.is-open::before,
    .contact_btn_static {
      display: none !important;
    }
  
    /* ========= 共通 ========= */
    a,
    a:hover {
      color: inherit !important;
      text-decoration: none !important;
    }
  
    img {
      max-width: 100% !important;
      height: auto !important;
      page-break-inside: avoid;
      break-inside: avoid;
    }
  
    .animation,
    .animate,
    .anim,
    .fadein {
      opacity: 1 !important;
      transform: none !important;
      transition: none !important;
      animation: none !important;
    }
  
    .for_sp {
      display: none !important;
    }
  
    .for_pc {
      display: inline !important;
    }
  
    h1, h2, h3 {
      page-break-after: avoid;
      break-after: avoid;
    }
  
    .category_txt,
    .category_txt2 {
      letter-spacing: 0.08em !important;
      white-space: nowrap !important;
      font-size: 9pt !important;
    }
  
    /* ========= header ========= */
    header {
      position: static !important;
      display: block !important;
      width: 100% !important;
      padding: 0 0 5mm !important;
      margin: 0 0 8mm !important;
      border-bottom: 1px solid #ccc;
    }
  
    header .site-title {
      margin: 0 !important;
      font-size: 18pt !important;
      width: auto !important;
      height: auto !important;
    }
  
    /* ========= KV ========= */
    .kv_blk {
      width: 100% !important;
      max-width: 190mm !important;   /* A4内に収める */
      min-height: 0 !important;
      margin: 0 auto 10mm !important;
      padding: 14mm 8mm 12mm !important;
      background-image: url("../images/kv_bg.jpg") !important;
      background-size: cover !important;
      background-position: center center !important;
      background-repeat: no-repeat !important;
      overflow: hidden !important;
      box-sizing: border-box !important;
      page-break-inside: avoid;
      break-inside: avoid;
    }
  
    .kv_txt_blk {
      width: 100% !important;
      max-width: 170mm !important;
      margin: 0 auto !important;
      padding: 0 !important;
      box-sizing: border-box !important;
    }
  
    .kv_txt_blk .kv_logo {
      width: 320px !important;
      max-width: 100% !important;
      margin: 0 auto !important;
    }
  
    .kv_txt_blk .kv_logo img {
      width: 150px !important;
      margin: 0 auto 0 34px !important;
    }
  
    .kv_txt_blk .kv_copy {
      margin: 10mm 0 7mm !important;
    }
  
    .kv_txt_blk .kv_copy p {
      font-size: 15pt !important;
      line-height: 1.8 !important;
    }
  
    .kv_txt_blk .kv_copy2 {
      position: relative !important;
      width: 100% !important;
    }
  
    .kv_txt_blk .kv_copy2 hr {
      width: 70px !important;
      top: 7px !important;
      left: 0 !important;
    }
  
    .kv_txt_blk .kv_copy2 h1 {
      font-size: 13pt !important;
      padding-left: 84px !important;
      text-align: left !important;
    }
  
    /* ========= contents 共通 ========= */
    .contents {
      width: 100% !important;
      max-width: 190mm !important;
      margin: 10mm auto !important;
      page-break-inside: avoid;
      break-inside: avoid;
    }
  
    .contents .inner,
    .contents .contents_body {
      max-width: none !important;
    }
  
    .contents p {
      line-height: 1.85 !important;
      margin-bottom: 0.7em !important;
      font-size: 10.5pt !important;
      text-align: left !important;
    }
  
    /* ========= Lead ========= */
    .contents.lead .inner {
      display: flex !important;
      align-items: center !important;
      justify-content: space-between !important;
      gap: 6mm;
    }
  
    .contents.lead .inner .contents_left,
    .contents.lead .inner .contents_right {
      width: 48% !important;
    }
  
    .contents.lead .inner .contents_right {
      position: static !important;
      min-height: 0 !important;
    }
  
    .contents.lead .inner .contents_right img {
      position: static !important;
      width: 100% !important;
    }
  
    /* ========= About ========= */
    .contents.about {
      margin: 12mm auto !important;
    }
  
    .contents.about .contents_body {
      position: relative !important;
      width: 100% !important;
      max-width: 190mm !important;
      margin: 0 auto !important;
      padding: 12mm 12mm 10mm !important;
      border-radius: 20px !important;
      background: #FFF5F0 !important;
      box-sizing: border-box !important;
    }
  
    .contents.about .contents_body h2 {
      font-size: 15pt !important;
      margin-bottom: 5mm !important;
      text-align: left !important;
    }
  
    .contents.about .contents_body p {
      width: 56% !important;
    }
  
    .contents.about .contents_image {
      position: absolute !important;
      top: 12mm !important;
      right: 12mm !important;
      width: 30% !important;
      margin: 0 !important;
    }
  
    /* ========= Treatment ========= */
    .contents.treatment {
      margin: 12mm auto !important;
    }
  
    .contents.treatment .contents_body {
      position: relative !important;
      width: 100% !important;
      max-width: 190mm !important;
      margin: 0 auto !important;
      padding: 12mm 12mm 10mm !important;
      border-radius: 20px !important;
      background: #FFF5F0 !important;
      box-sizing: border-box !important;
    }
  
    .contents.treatment .contents_body h2 {
      font-size: 15pt !important;
      margin-bottom: 5mm !important;
      text-align: left !important;
    }
  
    .contents.treatment .contents_body p {
      width: 55% !important;
    }
  
    .contents.treatment .contents_image01 {
      position: absolute !important;
      top: 12mm !important;
      right: 12mm !important;
      width: 24% !important;
    }
  
    .contents.treatment .contents_image02 {
      position: absolute !important;
      top: 49mm !important;
      right: 0 !important;
      width: 20% !important;
    }
  
    .contents.treatment .contents_image03 {
      position: absolute !important;
      bottom: 9mm !important;
      left: 47% !important;
      width: 16% !important;
    }
  
    /* ========= Message ========= */
    .contents.message {
      background-image: url("../images/message_bg.svg") !important;
      background-size: contain !important;
      background-repeat: no-repeat !important;
      background-position: center top 25mm !important;
    }
  
    .contents.message .contents_body {
      max-width: 190mm !important;
      margin: 0 auto !important;
      padding: 12mm 0 !important;
    }
  
    .contents.message .contents_body .message_box01,
    .contents.message .contents_body .message_box02 {
      display: flex !important;
      justify-content: space-between !important;
      gap: 6mm;
      page-break-inside: avoid;
      break-inside: avoid;
    }
  
    .contents.message .contents_body .message_box01 .box_left {
      width: 25% !important;
      padding-top: 0 !important;
    }
  
    .contents.message .contents_body .message_box01 .box_right {
      width: 70% !important;
    }
  
    .contents.message .contents_body .message_box01 .box_right h2 {
      font-size: 15pt !important;
      text-align: left !important;
    }
  
    .contents.message .contents_body .message_box01 .box_left p {
      font-size: 9.5pt !important;
      line-height: 1.8 !important;
      text-align: left !important;
    }
  
    .contents.message .contents_body .message_box02 .box_left {
      width: 58% !important;
    }
  
    .contents.message .contents_body .message_box02 .box_right {
      width: 34% !important;
    }
  
    /* ここを縮小 */
    .contents.message .contents_body .contents_image02 {
      position: static !important;
      width: 62% !important;
      margin: 0 auto 4mm !important;
    }
  
    .contents.message .contents_body .contents_image03 {
      position: static !important;
      width: 50% !important;
      margin: 0 auto 4mm !important;
    }
  
    .contents.message .contents_body .contents_image04 {
      position: static !important;
      width: 68% !important;
      margin: 0 auto !important;
    }
  
    /* ========= Salon ========= */
    .contents.salon .contents_body {
      max-width: 190mm !important;
      margin: 0 auto !important;
      padding: 12mm !important;
      border: 1px solid #ddd !important;
      box-shadow: none !important;
      text-align: left !important;
    }
  
    .contents.salon .contents_body h2 {
      font-size: 15pt !important;
      margin-bottom: 4mm !important;
      text-align: left !important;
    }
  
    .contents.salon .contents_body p {
      font-size: 10.5pt !important;
      text-align: left !important;
    }
  
    .contents.salon .contents_body .salon_blk {
      display: flex !important;
      justify-content: space-between !important;
      gap: 5mm;
      margin-top: 6mm !important;
      margin-bottom: 6mm !important;
    }
  
    .contents.salon .contents_body .salon_blk img {
      width: 49% !important;
      height: auto !important;
    }
  
    .contents.salon .contents_body .salon_blk2 {
      display: flex !important;
      justify-content: space-between !important;
      align-items: flex-start !important;
      gap: 6mm;
      margin-top: 6mm !important;
    }
  
    .contents.salon .contents_body .salon_blk2 h3 {
      width: 40% !important;
      font-size: 11.5pt !important;
      line-height: 1.8 !important;
      text-align: left !important;
    }
  
    .contents.salon .contents_body .salon_blk2 p {
      width: 55% !important;
      font-size: 10pt !important;
      line-height: 1.85 !important;
      text-align: left !important;
    }
  
    /* ========= Contact ========= */
    .contact-form {
      max-width: 190mm !important;
      margin: 12mm auto 0 !important;
      padding: 0 !important;
      page-break-before: auto;
    }
  
    .contact-form h2 {
      font-size: 15pt !important;
      margin: 0 0 5mm !important;
      text-align: left !important;
    }
  
    .contact-form__card {
      max-width: none !important;
      box-shadow: none !important;
      border: 1px solid #ddd !important;
      padding: 10mm !important;
    }
  
    .form-row {
      grid-template-columns: 38mm 1fr !important;
      column-gap: 4mm !important;
      padding: 2mm 0 !important;
      page-break-inside: avoid;
      break-inside: avoid;
    }
  
    .form-label {
      font-size: 10pt !important;
    }
  
    input[type="text"],
    input[type="email"],
    input[type="tel"],
    input[type="number"],
    textarea {
      background: #f4efe6 !important;
      border: 1px solid #ccc !important;
      box-shadow: none !important;
      font-size: 10pt !important;
    }
  
    textarea {
      min-height: 30mm !important;
    }
  
    .privacy {
      margin-top: 5mm !important;
      text-align: center !important;
    }
  
    .privacy__title {
      font-size: 12pt !important;
    }
  
    .privacy__text {
      font-size: 9.5pt !important;
    }
  
    .submit-btn {
      opacity: 1 !important;
      visibility: visible !important;
      pointer-events: auto !important;
      transform: none !important;
      width: 52mm !important;
      height: 13mm !important;
      box-shadow: none !important;
      border: 1px solid #ccc !important;
    }
  
    /* ========= footer ========= */
    footer {
      text-align: center !important;
      padding: 6mm 0 0 !important;
      margin-top: 6mm !important;
      border-top: 1px solid #ccc;
    }
  
    /* ========= 改ページ ========= */
    .contents.lead,
    .contents.about,
    .contents.treatment,
    .contents.message,
    .contents.salon,
    .contact-form,
    footer {
      page-break-inside: avoid;
      break-inside: avoid;
    }
  }

  @media print {

    /* =================================
       1ページ目がヘッダのみになる対策
    ================================= */
    header {
      margin: 0 0 4mm !important;
      padding: 0 0 3mm !important;
      page-break-after: avoid !important;
      break-after: avoid !important;
    }
  
    .kv_blk {
      margin-top: 0 !important;
      margin-bottom: 8mm !important;
      padding-top: 10mm !important;
      padding-bottom: 10mm !important;
      page-break-before: auto !important;
      break-before: auto !important;
      page-break-inside: auto !important;
      break-inside: auto !important;
    }
  
    /* =================================
       category_txt 背景画像を優先し、文字は非表示
       ※ 画面CSSで背景画像が設定済み前提
    ================================= */
    .category_txt {
      display: block !important;
      background-repeat: no-repeat !important;
      background-position: left center !important;
      background-size: contain !important;
  
      font-size: 0 !important;
      line-height: 0 !important;
      color: transparent !important;
      text-indent: -9999px !important;
      overflow: hidden !important;
      white-space: nowrap !important;
  
      margin-bottom: 4mm !important;
    }
    .category_txt2 {
        display: none;
    }
  
  /* About */
  .contents.about .category_txt {
    width: 90px !important;
    height: 18px !important;
    background-image: url("../images/about_txt.svg") !important;
  }

  /* Treatment */
  .contents.treatment .category_txt {
    width: 150px !important;
    height: 18px !important;
    background-image: url("../images/treatment_txt.svg") !important;
  }

  /* Message */
  .contents.message .category_txt {
    width: 110px !important;
    height: 18px !important;
    background-image: url("../images/message_txt.svg") !important;
  }

  /* Salon */
  .contents.salon .category_txt {
    width: 100% !important;
    height: 18px !important;
    background-image: url("../images/salon_txt.svg") !important;
    background-position: center top !important;
  }
    /* =================================
       Message
    ================================= */
  
    /* 背景に対して本文左右余白を増やす */
    .contents.message .contents_body .message_box01 .box_right {
      width: 68% !important;
      padding: 6mm 8mm 6mm 8mm !important;
      box-sizing: border-box !important;
    }
  
    .contents.message .contents_body .message_box02 .box_left {
      width: 56% !important;
      padding: 4mm 6mm 0 2mm !important;
      box-sizing: border-box !important;
    }
  
    /* オーナー肩書きをセンター揃え */
    .contents.message .contents_body .message_box01 .box_left p,
    .contents.message .contents_body .message_box01 .box_left .owner_name {
      text-align: center !important;
      font-size: 9.5pt !important;
      line-height: 1.8 !important;
    }
  
    .contents.message .contents_body .message_box01 .box_left p span,
    .contents.message .contents_body .message_box01 .box_left .owner_name span {
      display: block !important;
    }
  
    /* 右側画像をさらに小さく */
    .contents.message .contents_body .contents_image02 {
      width: 54% !important;
      margin: 0 auto 4mm !important;
    }
  
    .contents.message .contents_body .contents_image03 {
      width: 42% !important;
      margin: 0 auto 4mm !important;
    }
  
    .contents.message .contents_body .contents_image04 {
      width: 62% !important;
      margin: 0 auto !important;
    }
  
    /* =================================
       Salon
    ================================= */
  
    /* 見出し・導入文をセンター揃え */
    .contents.salon .contents_body h2 {
      text-align: center !important;
    }
  
    .contents.salon .contents_body > p {
      text-align: center !important;
      width: 100% !important;
      margin: 0 auto 6mm !important;
    }
  
    .contents.salon .contents_body .salon_blk2 h3 {
      font-size: 11.5pt !important;
      line-height: 1.8 !important;
      text-align: left !important;
    }
  
    .contents.salon .contents_body .salon_blk2 p {
      font-size: 10pt !important;
      line-height: 1.85 !important;
      text-align: left !important;
    }
  
    /* =================================
       お問い合わせ
    ================================= */
  
    .contact-form h2 {
      text-align: center !important;
    }
  
    /* =================================
       固定お問い合わせ縦ボタンは非表示
    ================================= */
    .contact_btn_static {
      display: none !important;
    }
  }