/* UTF-8エンコーディング指定 */
@charset "UTF-8";

* {
  font-family: "Zen Maru Gothic", serif;
  font-weight: 400;
  font-style: normal;
}

img {
  /* PCの右クリック禁止 */
  pointer-events: none;
  /* SPの長押し禁止 */
  -webkit-touch-callout:none;
  -webkit-user-select:none;
  -moz-touch-callout:none;
  -moz-user-select:none;
  user-select:none;
}
.w-35 {
  width: 35%!important;
}

/* サービスアイコンの背景スタイル */
.service-icon-bg {
    background-color: #691C23; /* 落ち着いたトーンのグレー */
    padding: 0.5rem;
    border-radius: 5px;
    color: #ffffff;
}

/* サービスアイコンのスタイル */
.service-icon-style {
    font-size: 1.2em;
    color: #691C23; /* アイコンカラー */
}

/* 見出しのスタイル */
.service-title {
    font-size: 1.1em;
    margin: 0;
    font-weight: bold;
}



/*ボタン*/
.cta-button {
  display: inline-block;
  padding: 15px 40px;
  background-color: #ff66a1; /* ピンク色 */
  color: white; /* 文字色を白に設定 */
  text-decoration: none;
  font-size: 20px;
  font-weight: bold;
  border-radius: 50px; /* 丸みのあるデザイン */
  box-shadow: 0px 6px 15px rgba(0, 0, 0, 0.2); /* ボタンの影 */
  transition: background-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
}

.cta-button:hover {
  background-color: #ff85c2; /* ホバー時の背景色 */
  color: white; /* ホバー時も文字色は白に固定 */
  transform: translateY(-5px); /* 浮き上がる */
  box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.3); /* 影を強調 */
}

.dynamic-contact-button {
  display: inline-block;
  padding: 20px 50px; /* ボタンを大きくする */
  background-color: #ff66a1; /* ピンク色 */
  color: white; /* 文字色は常に白 */
  text-decoration: none;
  font-size: 22px; /* 文字も少し大きく */
  font-weight: bold;
  border-radius: 50px;
  box-shadow: 0px 8px 20px rgba(0, 0, 0, 0.2); /* 影を強めにして立体感を追加 */
  transition: transform 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease;
}

.dynamic-contact-button:hover {
  background-color: #e96090; /* ホバー時の濃いピンク色 */
  color: white; /* ホバー時も文字色は白 */
  transform: scale(1.05) translateY(-5px); /* 少し大きくして浮き上がる */
  box-shadow: 0px 12px 24px rgba(0, 0, 0, 0.3); /* 影をさらに強調 */
}