/* Google Fonts - Inter */
        @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
        body {
            font-family: 'Inter', sans-serif;
            font-family:"ヒラギノ丸ゴ Pro W4","ヒラギノ丸ゴ Pro","Hiragino Maru Gothic Pro","ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","HG丸ｺﾞｼｯｸM-PRO","HGMaruGothicMPRO";
            background-color: #fc9a2b   ;
        }

        html {
         scroll-padding-top: 120px; // ヘッダーの高さ分設定
}

p{
              font-size:0.95rem;
}

        /* Custom styles for colors */
        .bg-primary { background-color: #fff; } /* Sea Green */
        .text-accent { color: #fc9a2b; }
        .text-primary { color: #06a841; }
        .text-base { color: #fff; }
        .text-answer { color: #ff6600; }
        .bg-secondary { background-color: #06a841; } /* Lighter green for sections */
        .text-secondary { color: #f0fdf4; }
        .bg-base { background-color: #fff; } /* Orange for CTA */
        .bg-accent { background-color: #fc9a2b; } /* Orange for CTA */
        .hover-bg-accent:hover { background-color: #fc9a2b; }
        .bg-hero {
            /* 背景を白に変更し、透明なグラデーションを重ねる */
            background-image: linear-gradient(rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.6)), url('../img/wood.jpg');
            background-position: center;
            background-size: cover;
        }
        .text-shadow {
            text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
        }
        /* アコーディオンのアニメーション */
        details summary {
            list-style: none; /* デフォルトの矢印を非表示 */
            cursor: pointer;
        }
        details summary::-webkit-details-marker {
            display: none;
        }
        details[open] .accordion-content {
            animation: fadeIn 0.3s ease-in-out forwards;
        }
        .accordion-content {
            max-height: 0;
            overflow: hidden;
            _overflow: auto;
            transition: max-height 0.3s ease-in-out;
        }
        details[open] .accordion-content {
            max-height: 1000px; /* 十分な高さを設定 */
        }
        .logo_wrapper {
            width:200px;
            margin:0 0 20px 0px;
        }

        .logo_wrapper_sp{
         width:200px;
         margin:8px 0 20px 8px;
     }

        .map_wrapper{
            margin: 10px 0;
        }

        .name_insta_wrapper {
           display: flex;
           align-items: center;
        }

        .insta_wrapper {
            margin: 0px 0 20px 20px;
            padding:0px 0 0 0;
        }

        .insta_wrapper img{
            width: 28px;
            height: 28px;
        }



 .pricing {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
      gap: 20px;
      margin-top: 30px;
    }
    .price-card {
      _border: 4px solid #fc9a2b;
      border-radius: 15px;
      padding: 30px;
      background: #06a841;
      _box-shadow: 0 4px 8px rgba(0,0,0,0.1);
      transition: transform 0.3s;
    }
    .price-card:hover {
      transform: translateY(-5px);
    }
    .price-card h3 {
      color: #fff;
      font-size: 1.5rem;
      margin-bottom: 10px;
    }
    .price-card p.price {
      font-size: 2rem;
      font-weight: bold;
      color: yellow;
      margin: 15px 0;
    }
    .price-card ul {
      list-style: none;
      padding: 0;
      margin: 0 0 20px 0;
    }
    .price-card ul li {
      margin: 10px 0;
    }
    .price-card a {
      display: inline-block;
      padding: 10px 20px;
      background: #06a841;
      color: white;
      text-decoration: none;
      border-radius: 25px;
      font-weight: bold;
    }

    .point{
        color: #fc9a2b;
        font-weight: bold;
    }

    .profile_list{
      margin: 20px 0;
      padding: 20px;
      _border: 4px solid #fc9a2b;
      background: #fc9a2b;
      border-radius: 8px;
      background: #f9f9f9;
    }

   dl.profile_list dt{
       color:#fc9a2b;
       margin-top: 10px;
       margin-bottom: 5px;
      font-size: 1.2em;
   }

     dl.profile_list dd{
       padding-bottom: 10px;
       line-height: 1.7;
   }

.treatment_price dt{  
  font-size:1.2rem;
}

.treatment_price dd{  
  line-height: 1.7;
}

.treatment_price_comment{  
  font-size:1.2rem;
}

   .main_ttl{
    text-align: center;
    margin: 10px auto ;
    max-width: 600px;
    padding:0 20px;
   }

    .main_ttl img{
    width: 100%;
   }

   .close_button{
    position: absolute;
    top: 20px;
    right: 20px;
   }

   .profile_p{
    width:300px;
    margin:0 0 20px 0;
   }

   /* デフォルトでは改行しない */
.sp-break::after {
  content: "";
}

.copyright_wrapper{
    font-size:0.65rem;
}

/* 画面幅が768px以下の場合（スマホと想定） */
@media (max-width: 768px) {
  .sp-break::after {
    content: "\A"; /* 改行コード */
    white-space: pre; /* 改行コードを有効にする */
  }
}


@media (max-width: 767px) {
.logo_wrapper{
  width:270px;
}
.logo_wrapper img{
  width: 100%;
}

.name_insta_wrapper {
         justify-content: center;
  align-items: center;
width:100%;
        }

.profile_p{
    width:80%;
    margin:0 0 20px 0;
   }

}