/* フォント */
.m-plus-rounded-1c-regular {
  font-family: "M PLUS Rounded 1c", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.m-plus-rounded-1c-medium {
  font-family: "M PLUS Rounded 1c", sans-serif;
  font-weight: 500;
  font-style: normal;
}

.m-plus-rounded-1c-bold {
  font-family: "M PLUS Rounded 1c", sans-serif;
  font-weight: 700;
  font-style: normal;
}

.m-plus-rounded-1c-extrabold {
  font-family: "M PLUS Rounded 1c", sans-serif;
  font-weight: 800;
  font-style: normal;
}

/* index.htmlの全体の色 */
.index-background {
   background: rgb(250, 245, 231);
}

header {
    max-width: 1200px;
    margin: 0 auto;
    padding: 10px;
}

.h1-font-size {
    font-size: clamp(1.1rem, 4vw, 2.5rem);
}

.underline-center {
  width: 100%;
  border-bottom: 2px solid rgb(14, 145, 0);
}

.container-lg {
    max-width: 1200px;
    margin: 0 auto;
}

.container-md {
    max-width: 789px;
    margin: 0 auto;
}


/*　header内文字color */
.h-instructional-policy-color {
    background:rgb(255, 165, 30);
}
.h-instructional-policy-color:hover {
    background:rgb(255, 189, 90);
}

.h-target-color {
    background:rgb(124, 255, 30);
}
.h-target-color:hover {
    background:rgb(158, 255, 90);
}

.h-subject-color {
    background:rgb(30, 229, 255);
}
.h-subject-color:hover {
    background:rgb(90, 240, 253);
}

.h-fee-color {
    background:rgb(255, 240, 30);
}
.h-fee-color:hover {
    background:rgb(255, 241, 90);
}

.h-QA-color {
    background:rgb(201, 253, 30);
}
.h-QA-color:hover {
    background:rgb(216, 251, 90);
}

.h-inquiry-color {
    background:rgb(200, 200, 200);
}
.h-inquiry-color:hover {
    background:rgb(217, 217, 217);
}

/* md以上時に表示するメニュー */

nav ul li {
  border-radius: 8px; 
}

.nav-link {
    color: black;
}

/* md以下時に表示するメニュー */

.menu-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2px; 
    max-width: 768px; 
    list-style: none;
    margin: 0 auto;
    padding: 0;
}

.menu-grid li a {
    display: block;
    width: 100%;
}

.menu-item {
    color: black;
    border-radius: 8px;
    padding: 10px;
    text-align: center;
    transition: background-color 0.3s, color 0.3s;
}

/* 指導方針で使用 */
.instructional-policy-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px; 
    max-width: 1300px; 
    margin: 0 auto;
}

@media (min-width: 798px) {
    .tutor-icon {
        width: 80px;
        height: auto;
    }
    .saikyo-jpg {
        padding-top: 10px;
        padding-bottom: 10px;
    }
}

@media (max-width: 798px) {
    .tutor-icon {
        width: 50px;
        height: auto;
    }
    .saikyo-jpg {
        padding-top: 10px;
    }
    .instructional-policy-grid {
        grid-template-columns: 1fr; /* 1列レイアウト */
    }
}

@media (max-width: 360px) {
    .tutor-icon {
        width: 35px;
        height: auto;
    }
}

@media (max-width: 340px) {
    .tutor-icon {
        width: 25px;
        height: auto;
    }
}

.instructional-policy {
    display: flex;
    flex-direction: column;
    height: auto;
    border: solid 3px black;
}

.instructional-header {
    color: white;
    padding: 10px;
}

.instructional-content {
    background: white;
    color: black;
    padding: 20px;
    flex-grow: 1;
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
}


/* 実際の指導方針で使用 */
.instruction-flow {
    background: white;
    color: black;
    padding: 10px;
    border-radius: 8px;
    border: solid 2px black;
}


/* 料金の小学生・中学生のhタグで使用 */
.fee-h {
    display: inline-block;  
    color: black;  
    padding: 10px 10px; 
    border-left: 7px solid black;
}

/* 料金を表示するテーブル */
table {
    width: 100%;
    border-radius: 8px;
    border-collapse: 0;
    overflow: hidden;
}

th {
    border: 1px solid #dee2e6;
    padding: 10px;
    text-align: left;
}

td {
    border: 1px solid #dee2e6;
    padding: 10px;
    text-align: left;
    background: white;
}
thead {
    background-color: rgb(143, 143, 143);
    color: white;
}


/* Q&Aで使用 */
.QA-section {
    display: flex;
    flex-direction: column;
    height: auto;
    color: white;
    border-radius: 8px;
    border: solid 2px black;
    background: white;
}

.QA-header {
    color: white;
    padding: 20px;
    border-radius: 6px 6px 0 0;
    background: rgb(60, 89, 255)
}

.QA-content {
    color: black;
    padding: 20px;
    flex-grow: 1;
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
}


/* footer */
footer .nav-link {
    color: #6c757d;
}

footer .nav-link:hover {
    color: black;
}