/* 全体のスタイル */
body {
    font-family: 'Arial', sans-serif;
    background-color: #fff;
    color: #333;
    margin: 0;
    padding: 0;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}



.container {
    max-width: 100%; /* 中央寄せ用の最大幅 　h1 とnavの範囲のみ */
    margin: 0 auto;
    padding: 0 20px; /* 必要なら余白を container に適用 */
}

header {
    background-color: #4227F5; /*2DCE4E*/
    padding: 20px;
    text-align: center;
    width: 100%; /* 画面全体をカバー */
}
header h1 {
    margin: 0;
    font-size: 2rem;
    color: white;
}

/* ナビゲーション */
/* デフォルトは横並び */
nav ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
   justify-content: center; /* 中央寄せ */
}

/* li同士の間隔を少し開ける */
nav ul li {
    margin-right: 20px; /* 右側に間隔を追加 */
}

/* 最後のliの右側のマージンをなくす */
nav ul li:last-child {
    margin-right: 0;
}

header nav ul li a {
    color: white;
    text-decoration: none;
    font-size: 1.2rem;
}

header nav ul li a:hover {
    text-decoration: underline;
}

/* メインコンテンツ */
main {
    padding: 40px 0;
    max-width: 1200px; /* コンテンツ部分の最大幅 */
    margin: 0 auto; /* コンテンツを中央に配置 */
}

section {
    margin-bottom: 40px;
}

section h2 {
    font-size: 1.5rem;
    color: #4227F5; /* 濃い抹茶グリーン */
    text-align: center; /* 各タイトルを中央寄せ */
}

section ul {
    padding-left: 5px;
    text-align: left; /* section内のリストを左寄せ */
    margin: 0 auto;}

section ul li {
   display: flex;
    margin: 10px 0;
  margin: 10px 0;
    font-size: 1rem; /* 文字サイズを統一 */
}


a {
    color:#4227F5 ;
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}





/* グリッドレイアウトの設定 */
.grid-container {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* 常に2列 */
    grid-auto-rows: 110px; /* 各行の高さを110pxに統一（必要に応じて調整） */
    gap: 20px;
    max-width: 600px;
    margin: 0 auto;
    padding: 10px;
}

.grid-item {
    background-color: #4227F5; /* 青色 */
    border-radius: 10px;
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.1);
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    font-weight: bold;
    font-size: 1.2rem;
}


.grid-item a {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  color: white;
  font-weight: bold;
  font-size: 1.2rem;
  text-decoration: none;
}
.grid-item a:hover {
  background-color: #4705e3;/*濃い青*/
  border-radius: 10px;
}



/*グリッド２　紫*/
.grid-item2 {
    background-color:#27E0F5; /* 紫 */
    border-radius: 10px;
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.1);
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    font-weight: bold;
    font-size: 1.2rem;
}


.grid-item2 a {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  color: white;
  font-weight: bold;
  font-size: 1.2rem;
  text-decoration: none;
}
.grid-item2 a:hover {
  background-color: #0ad2fa;/*濃い水色*/
  border-radius: 10px;
}


/* グリッド4　白背景・青枠 */
.grid-item4 {
    background-color: #ffffff;      /* 白背景 */
    border: 2px solid #4227F5;       /* 青い外枠（色は調整OK） */
    border-radius: 10px;
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.1);
    display: flex;
    justify-content: center;
    align-items: center;
    color: #4227F5;                  /* 青文字 */
    font-weight: bold;
    font-size: 1.2rem;
}

.grid-item4 a {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  color: #4227F5;
  font-weight: bold;
  font-size: 1.2rem;
  text-decoration: none;
}
.grid-item4 a:hover {
  background-color: #83e8fc;/*うすい水色*/
  border-radius: 10px;
}


/*グリッド3　水色　いるの？これ*/
.grid-item3 {
    background-color:#32ebfa; /* 水色 */
    border-radius: 10px;
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.1);
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    font-weight: bold;
    font-size: 1.2rem;
}


.grid-item3 a {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  color: white;
  font-weight: bold;
  font-size: 1.2rem;
  text-decoration: none;
}
.grid-item3 a:hover {
  background-color:#06cbdc;/*水色*/
  border-radius: 10px;
}


/*グリッド5　赤*/
.grid-item5 {
    background-color:#fb2828; /* 赤 */
    border-radius: 10px;
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.1);
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    font-weight: bold;
    font-size: 1.2rem;
}


.grid-item5 a {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  color: white;
  font-weight: bold;
  font-size: 1.2rem;
  text-decoration: none;
}
.grid-item5 a:hover {
  background-color:#d00808;/*濃赤*/
  border-radius: 10px;
}










/* 音声プレーヤーの高さをリストの文字に合わせる */
ul li audio {
    height: 1.2em; /* 文字の高さに合わせて音声プレーヤーの高さを調整 */
    margin-left: 10px; /* 少し余白を追加 */
}

.audio-number {
    font-weight: bold;
    margin-right: 10px;
    font-size: 1.2rem; /* 番号の文字サイズを調整 */
}

/* リストの番号と音声の間隔調整 */
ol li {
    margin-bottom: 10px;
}


/* dictation-itemに適用するスタイル */
.dictation-item {
    display: flex;          /* 音声プレイヤーと答えを横並びに */
    justify-content: flex-start; /* 左寄せ */
    margin-bottom: 20px;
    align-items: center;    /* 垂直方向に中央揃え */
}



/* 音声プレイヤーのスタイル */
.audio-player {
    width: 300px;  /* 音声プレイヤーの幅を300pxに設定 */
    margin-right: 20px;  /* プレイヤーと答えの間にスペースを作る */
    display: inline-block;
    height: 40px; /* プレイヤーの高さを統一 */
    vertical-align: middle;
    margin-top: 5px; /* 少しスペースをあける */
}

/* 答えのボタンと表示部分 */
.answer-container {
    display: flex;
    flex-direction: column;  /* ボタンと答えを縦並びに */
}

/* 答え部分のスタイル */
.answer {
    margin-top: 10px;
    font-style: italic;
    color: #333;
}

/* ボタンのスタイル */
.show-answer-btn {
    padding: 5px 10px;
    background-color: #2DCE4E;
    color: white;
    border: none;
    cursor: pointer;
    font-size: 14px;
}

.show-answer-btn:hover {
    background-color: #45a049;
}







.table-scroll {
  width: 100%;          /* 親の幅いっぱいに広げる */
  overflow-x: auto;     /* 横スクロールを有効にする */
  -webkit-overflow-scrolling: touch; /* スマホでスムーズスクロール */
}

/* テーブルの幅は必要に応じて調整 */
.table-scroll table {
  width: 100%;          /* テーブルを親に合わせる */
  border-collapse: collapse; 
}

















/* テーブルのスタイル */
table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 20px;
}

.table-wrapper {
    width: 100%;
    overflow-x: auto; /* 横スクロールをテーブル内に限定 */
}

table, th, td {
    border: 1px solid #bbb5bd;
}

th, td {
    padding: 10px;
    text-align: center;
}

th {
    background-color: #27E0F5; /* 抹茶グリーン */
    color: white;
}

.skyblue{
     background-color: #55bbee;
}


td {
    background-color: #f4f4f4;
    text-align: left; /* td 内のテキストを左寄せ */
}

/*
tr:nth-child(even) td {
    background-color: #e0e0e0; /* 偶数行の背景色を変更 */
}

*/




/*意味はせまく*/
.meaning-column {
    max-width: 200px;  /* Adjust the width as needed */
    text-align: left;
}



/*動詞一覧表のみ*/

/* 1列目の背景色 - thとtdを個別に設定 */
.list th:nth-child(1) {
    background-color: #ffb3b3; /* thは少し濃い色 */
}

.list td:nth-child(1) {
    background-color: #ffe6e6; /* tdは少し薄い色 */
}

/* 2列目の背景色 - オレンジ色系 */
.list th:nth-child(2) {
    background-color: #ffcc99; /* thはオレンジ色系 */
}

.list td:nth-child(2) {
    background-color: #ffebcc; /* tdは薄いオレンジ色系 */
}

/* 3列目の背景色 - 水色系 */
.list th:nth-child(3) {
    background-color: #99ccff; /* thは水色系 */
}

.list td:nth-child(3) {
    background-color: #cce5ff; /* tdは薄い水色系 */
}

.list th{
  color: black;
}






/* フッター */
footer {
    background-color: #4227F5; /* 抹茶グリーン */
    color: white;
    text-align: center;
    width: 100%;  /* 幅を100%に設定 */
    height: 30px; /* 高さを30pxに設定 */
    display: flex; /* フレックスボックスを使う */
    align-items: center; /* 上下中央揃え */
    justify-content: center; /* 水平中央揃え */
    padding: 0; /* 上下の余白をなくす */
}


@media (max-width: 768px) {
    nav ul {
        display: block; /* 縦並びにする */
        text-align: left; /* 左寄せ */
    }
    nav ul li {
        margin-right: 0; /* 右の間隔をなくす */
        margin-bottom: 10px; /* 下に間隔を追加 */
    }
}


@media (max-width: 768px) {
    .table-wrapper {
        -webkit-overflow-scrolling: touch; /* iPhoneでスムーズスクロール */
    }
}




.scroll-to-top-btn {
    position: fixed;
    bottom: 20px;
    right: 20px;
    background-color: #4227F5;
    color: white;
    border: none;
    border-radius: 50%;
    padding: 15px;
    font-size: 18px;
    cursor: pointer;
    display: none; /* 最初は非表示 */
    transition: opacity 0.3s ease;
}

.scroll-to-top-btn:hover {
    background-color: #27E0F5;
}