@charset "utf-8";

.row2 {
    display: flex;
    flex-wrap: wrap;
}

div.area-colum h2{
    margin-top: 2rem;
    padding: 0.5em;
    background: #f4f4f4;
    border-left: solid 5px #d7d7d7;
}
div.area-colum h3{
    margin-top: 1rem;
    padding: 0.5em 0;
    border-top: solid 3px #d7d7d7;
    border-bottom: solid 3px #d7d7d7;
}
div.area-colum h3.h-point{
   border: 0;
   color: #d2374c;
}
div.area-colum h3.h-point::before{
   content: "○ ";
   color: #d2374c;
}

div.area-colum .bg-grey{
   padding-top: 15px;
   padding-right: 15px;
   padding-left: 15px;
   background-color : #f8f9fa;
}
table.area-table{
  border-collapse:  collapse;
  width: 100%;
  margin-bottom: 1rem;
}
table.area-table th,table.area-table td {
  border: 1px solid #dee2e6;
  padding:0.75rem;
}
table.area-table th {
  background-color :rgba(204,204,204,0.2);
  text-align: center;
}
div.area-colum .article-bgarea {
    background: #eee;
    padding: 1.5rem 1.5rem 1rem;
    margin-bottom: 1.5rem;
}

.card-school-min__title {
  font-weight: bold;
}

.footer .h6 {
  color: #6c757d;
  font-weight: bold;
  border-bottom: 1px solid #6c757d;
  padding: 0.5rem 0;
}

@media screen and (max-width: 767px) {
  /* YouTube 動画埋め込みのレスポンシブ対応方法 */
  .youtube {
    width: 100%;
    aspect-ratio: 16 / 9;
  }
  .youtube iframe {
    width: 100%;
    height: 100%;
  }
}

@media screen and (max-width: 992px) {

  table.vertical-table {
    width: 100%;
  }
  table.area-table thead tr th{
    background-color : #C0C0C0;
  }
  table.vertical-table tr td,
  table.vertical-table tr th {
    width: auto;
    display: block;
  }

}

/**
 * トップのグラデーションボタン
 * gradient-button
**/

.button-container {
  display: flex;
  gap: 5px; /* ボタン間の間隔 */
  margin-left: 10px;
}

.gradient-button {
  display: inline-block;
  padding: 0.5rem 1.5rem;
  font-size: 1rem;
  font-weight: bold;
  text-decoration: none;
  text-align: center;
  border-radius: 50px; /* 丸みのあるボタン */
  border: 2px solid transparent; /* 外枠を設定 */
  color: transparent; /* テキスト色を透明に */
  background: white; /* 背景は白 */
  background-clip: padding-box; /* 背景の適用範囲を設定 */
  -webkit-background-clip: text; /* テキストにグラデーションを適用 */
  background-image: linear-gradient(to right, #4a90e2, #d94e75); /* テキストのグラデーション */
  position: relative; /* 疑似要素を配置するための基準 */
  overflow: hidden; /* 丸みに合わせて切り取る */
  z-index: 0; /* 疑似要素より上に配置 */
  transition: all 0.3s ease; /* スムーズな変化 */
}

.gradient-button::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 50px; /* 丸みを適用 */
  background: linear-gradient(to right, #4a90e2, #d94e75); /* グラデーション枠線 */
  z-index: -1; /* ボタンの後ろに配置 */
  padding: 2px; /* 外枠の太さ */
  background-clip: border-box;
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite: exclude; /* 背景グラデーションを枠線のみに適用 */
}

.gradient-button:hover {
  background: linear-gradient(to right, #4a90e2, #d94e75); /* ホバー時に背景をグラデーションで塗りつぶし */
  color: white; /* テキストを白に */
  -webkit-background-clip: border-box; /* テキストの背景をホバー時にクリップ */
}

.gradient-button:hover::before {
  background: transparent; /* ホバー時に外枠を消す */
}