/* 基本的なリセットとbodyのスタイル */
body {
    font-family: sans-serif;
    font-size: min(22px , 4vw);
    margin: 20px;
    background-color: #fff;
    width:92vw;
    max-width: 1200px;
    margin-inline:auto;
    margin-top: min(40px , 4vw);
}



.main_title{
  display: flex;
    text-align: center;
    margin-bottom: min(80px,15vw);
    gap: 20px;
    flex-wrap: wrap;
    margin-top:0;
}
.main_title img {
  margin-inline:auto;
  margin-bottom: -20px;
}

.main_title_logo{
  max-width:30vw;
}

img{
    max-width: 100%;
    height:auto;
}
.description-container{  
    display: flex;
    gap:20px;
}
@media (max-width: 640px) {
    .description-container{
        flex-direction: column;
    }
    .practice_wrapper{
        display: none;
    }
}

.lead{
    font-size: min(36px, 6.4vw);
    font-weight: bold;
    color:#391;
    margin-bottom: 16px;
    margin-top: 0;
    line-height: 1;
}
.difficulty_level{
    margin-top: min(40px , 6vw);
    margin-bottom: 8px;
    color:#82b118;
    font-size: clamp(20px , 8vw , 36px);
}
/* --- ここからが重要 --- */

/* 1. グリッドコンテナの設定 */
.grid-container {
    display: grid; /* これでGridレイアウトが有効になります */
    
    /* 2. カラム（列）の定義 */
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));

    justify-content: left;
    
    /* 3. カード間の隙間を設定 */
    gap: min(20px , 3vw); 
    margin-bottom: min(100px,10vw);
}


/* --- カード自体のスタイル --- */
.card {
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    overflow: hidden; /* 角丸を画像にも適用するため */
    transition: transform 0.2s;
}
.card:empty {
  visibility: hidden;
}
.card:hover {
    transform: translateY(-5px); /* ホバー時に少し浮き上がる効果 */
}

/* カード内の画像 */
.card img {
    width: 100%; /* 親要素（.card）の幅に合わせる */
    aspect-ratio: 1;
    object-fit: cover;
    display: block; /* 画像下の余白を消す */
}

.card a{
    text-decoration: none;
    color: black;
}
/* カード内のタイトル */
.card-title {
    font-size: min(4vw,14px);
    padding: 15px;
    margin: 0;
}

.practice_text{
    text-align: center;
    color:#82b118;
}
.green_h3{
    color:#fff;
    background:#339911;
    display: inline-block;
    padding:8px 14px;
    border-radius: 8px;
    margin-bottom: 10px;
    font-weight: normal;
}
ol.circled-list {
  list-style: none;     /* 1. デフォルトの「1. 2. 3.」を消す */
  counter-reset: my-counter; /* 2. "my-counter"という名前のカウンターを0にリセット */
  padding-left: 0;      /* 3. ブラウザ標準の左パディングを削除 */
}

/* リストの各アイテム */
ol.circled-list li {
  counter-increment: my-counter; /* 4. アイテムごとにカウンターを+1する */
  position: relative;          /* 5. 丸数字を配置する基準位置にする */
  padding-left: 2em;         /* 6. 丸数字が入るスペースを空ける */
  margin-bottom: 0.5em;      /* (お好み) アイテム間の余白 */
}

/* 丸数字のデザイン */
ol.circled-list li::before {
  content: counter(my-counter); /* 7. カウンターの現在の値を表示 */

  /* ▼ 以下で「丸」のデザインを作成 */
  display: inline-block;
  width: 1.5em;           /* 丸の幅 */
  height: 1.5em;          /* 丸の高さ */
  line-height: 1.5em;     /* 数字を丸の上下中央に配置 */
  text-align: center;       /* 数字を丸の左右中央に配置 */
  border-radius: 50%;     /* 8. 要素を正円にする */
  
  /* 色のスタイル (ここでデザインを変更できます) */
  background-color: #333; /* 丸の背景色 */
  color: #fff;            /* 数字の色 */
  
  /* 9. 丸数字の位置を調整 */
  position: absolute;
  left: 0;
  top: 0;
  
}
ol.circled-list li::before {
  /* ...（content, display, width, height, line-height, text-align, border-radius, position などは同じ）... */

  /* 色のスタイルをこちらに変更 */
  border: 2px solid #333; /* 枠線 */
  background-color: #fff;   /* 背景は白 */
  color: #333;            /* 数字の色は黒 */
}

.link_button{
  display: inline-block;
  padding:8px 12px;
  font-size:26px;
  background: orangered;
  color:#fff;
  text-decoration: none;
  border-radius: 8px;
  font-weight: bold;
}

ul.list-disc li{
  list-style: disc;
  margin-left: 2rem;
}

section + section{
  margin-top: 1.5rem;
}