@charset "utf-8";

#Servise {
    background: #FFF;
}
#Servise .Results {
    background-image: none; /* ここだけちがう */
    padding: 0;　/* ここだけちがう */
}
#Servise .toggle-title {
  background: #2644AC; /* ここだけちがう */
  color: #FFF;
}
#Servise .toggle-content {
	background: #FFF;
	xpadding: 0;
	box-shadow: 0 3px 6px rgba(0, 0, 0, .16);
	box-sizing: border-box;
}

#ServiseTop {
    background: #f1fcff;
}
#Servise .ContentsHead h2 {
    filter: drop-shadow(2px 2px 1px #FFF);
    font-size: clamp(1.5rem, 4vw, 3.5rem);
    margin: 40px auto 24px;
    color: #333;
}
#Servise .ContentsHead h3 {
    filter: drop-shadow(2px 2px 1px #FFF);
    font-size: clamp(1.2rem, 2.5vw, 3rem);
    margin: 24px auto;
    color: #333 !important;
}
#Servise .ContentsHead p {
    font-size: clamp(0.9rem, 2vw, 1.2rem);
    margin: 8px auto 16px;
    max-width: 780px;
    color: #333 !important;
}
.advantage {
	margin-bottom: 40px;
}

.ServiseAccount {
    margin: 40px auto;
    position: relative;
    color: #FFF;
}
#Servise .AccountBox {
    box-shadow: none;
	padding: 24px 0;
}

/* リストをグリッド表示 */
#Servise .grid-list {
  display: grid;
  grid-template-columns: repeat(4, 1fr); /* 4列に分割 */
  gap: 20px; /* 各列間にスペースを追加 */
  list-style-type: none; /* リストマーカーを削除 */
  padding: 0;
  margin: 16px auto;
}

/* 各リンクをボタン風にスタイル */
#Servise .grid-list li a {
  display: block;
  background-color: #4BB5EB; /* 背景色 */
  color: #fff; /* テキスト色 */
  text-align: center;
  padding: 12px;
  border-radius: 5px;
  text-decoration: none;
  font-weight: bold;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
    transition: all 0.3s ease;
}

/* ホバー時のスタイル */
#Servise .grid-list li a:hover {
  background-color: #007acc; /* ホバー時の色変更 */
  color: #ffffff; /* テキスト色を白で統一 */
    box-shadow: 0 6px 8px rgba(0, 0, 0, 0.3);
    transform: translateY(-2px);
}

/* レスポンシブ対応 */
@media screen and (max-width: 1024px) {
#Servise .grid-list {
    grid-template-columns: repeat(2, 1fr); /* タブレットでは2列に */
  }
}

@media screen and (max-width: 680px) {
#Servise .AccountBox {
   padding: 0;
}
#Servise .grid-list {
    grid-template-columns: 1fr; /* スマホでは1列に */
  }
}
#Servise .LinksAreas {
    position: relative;
}