/*** for PC Browser ***/
@media (min-width:401px)
{
:root {
--white:#fff;
--black:#000;
--primary:#99cc65;
--secondary:#197a4b;
--tertiary:#0c472a;
--bg:#e6f5ec;
}


section {
  padding: 30px;
  margin-bottom: 10px;
}

section p, 
section li,
section table td {
  line-height: 1.8 !important;
  font-size: 16px !important;
  letter-spacing: 0.1em !important;
}


section img {
max-width: 100%;
aspect-ratio: 4/3;
object-fit: cover;
border-radius: 2%;
}

.py10 {
padding: 0 10px;
}

section h3 {
color: var(--secondary);
text-align: left;
padding-left: 20px;
margin-bottom:30px !important;
position: relative;
border-width:0px !important;
}

section h3::before {
content: "";
background-color: var(--secondary);
width: 25%;
height: 4px;
position: absolute;
left: 0;
bottom: -8px;
z-index: 1;
}

section h3::after {
content: "";
background-color: var(--primary);
width: 100%;
height: 4px;
position: absolute;
left: 0;
bottom: -8px;
z-index: 0;
}

section ul, li {
margin: 0;
padding: 0;
}
section ul {
list-style-type: none !important;
list-style-image: none !important;
}

section li {
position: relative;
margin: 0 0 5px 20px;
}

section li::before {
content: "⚫︎";
position: absolute;
top: 4px;
left: -20px;
color: var(--secondary);
font-size: 14px;
}


section {
padding: 20px;
margin-bottom: 20px;
}


section table {
width: 100%;
border-collapse: collapse;
text-align: left;
}

section th, td {
padding: 12px;
border: 1px solid black;
}

section th {
color: var(--white);
background-color: var(--secondary);
font-size: 20px;
font-weight: bold;
text-align: center;
}

section td {
color: black;
font-size:16px;
}

section button {
height: 50px;
border-radius: 20px;
background-color: var(--bg);
border: 2px solid var(--secondary);
margin-top: 10px;
transition: 0.5s;
margin: 20px 0;
cursor: pointer;
box-shadow: 0 2px 3px 0 #ddd;
}

section button a {
font-size: 16px;
font-weight: bold;
color: var(--secondary) !important;
margin: 5px 20px;
text-decoration: none !important;
}

section button:hover {
background-color: var(--secondary) !important;
border: 2px solid var(--primary) !important;
}

section button:hover a {
color: var(--white) !important;
}


/* ここまで共通部分 */

.container {
display: flex;
justify-content: space-between;
}
.container div {
width: 46%;
margin: 0 10px;
}

.reverse {
flex-direction: row-reverse;
}

.hero-text {
font-size: 20px;
font-weight: bold;
color: var(--secondary);
}


/* 体験できる教室 */
table tr td:first-child {
text-align: center;
width: 60px;
}

table tr td:nth-child(2) {
text-align: left;
width: 150px;
}
table tr td:nth-child(3) {
text-align: left;
width: 300px;
}
table tr td:last-child {
text-align: left;
font-size:14px;
}
}


/*** for Smart Phone ***/
@media (max-width:400px)
{
:root {
--white:#fff;
--black:#000;
--primary:#99cc65;
--secondary:#197a4b;
--tertiary:#0c472a;
--bg:#e6f5ec;
}

section p, 
section li,
section table td {
  line-height: 1.8 !important;
  font-size: 16px !important;
  letter-spacing: 0.1em !important;
}

section img {
aspect-ratio: 4/3;
object-fit: cover;
border-radius: 2%;
margin: 0 !important;
}

.py10 {
padding: 0;
}

section h3 {
color: var(--secondary);
text-align: left;
padding-left: 10px;
margin-bottom:20px !important;
position: relative;
border-width:0px !important;
}

section h3::before {
content: "";
background-color: var(--secondary);
width: 25%;
height: 4px;
position: absolute;
left: 0;
bottom: -8px;
z-index: 1;
}

section h3::after {
content: "";
background-color: var(--primary);
width: 100%;
height: 4px;
position: absolute;
left: 0;
bottom: -8px;
z-index: 0;
}

section ul, li {
margin: 0;
padding: 0;
}
section ul {
list-style-type: none !important;
list-style-image: none !important;
}

section li {
position: relative;
margin: 0 0 5px 20px;
}

section li::before {
content: "⚫︎";
position: absolute;
top: 4px;
left: -20px;
color: var(--secondary);
font-size: 14px;
}


section {
/* padding: 20px; */
padding: 0;
margin-bottom: 20px;
}


section table {
width: 90%;
border-collapse: collapse;
text-align: left;
}

section th, td {
padding: 12px;
border: 1px solid black;
}

section th {
color: var(--white);
background-color: var(--secondary);
font-size: 20px;
font-weight: bold;
text-align: center;
}

section td {
color: black;
font-size:16px;
}

section button {
height: 50px;
border-radius: 20px;
background-color: var(--bg);
border: 2px solid var(--secondary);
margin-top: 10px;
transition: 0.5s;
margin: 20px 0;
cursor: pointer;
box-shadow: 0 2px 3px 0 #ddd;
}

section button a {
font-size: 16px;
font-weight: bold;
color: var(--secondary) !important;
margin: 5px 20px;
text-decoration: none !important;
}

section button:hover {
background-color: var(--secondary) !important;
border: 2px solid var(--primary) !important;
}

section button:hover a {
color: var(--white) !important;
}


/* ここまで共通部分 */

.container {
display: flex;
flex-direction: column;
/* justify-content: space-between; */
}
.container div {
width: 100%;
margin: 0 auto;
}

.reverse {
flex-direction: column;
}

.hero-text {
font-size: 24px;
font-weight: bold;
color: var(--secondary);
}


/* 体験できる教室 */
/* 
table tr td:first-child {
text-align: center;
}

table tr td:nth-child(2) {
text-align: left;
}
table tr td:nth-child(3) {
text-align: left;
}
table tr td:last-child {
text-align: left;
}
*/


/* テーブルのレスポンシブ */
table th, table tr td:first-child{
display: none;
}
table tr td:nth-child(2){
color: var(--white);
background-color: var(--secondary);
font-size: 20px;
font-weight: bold;
text-align: center;
}

table tr, table td  {
display: block;
width: 100%;
}

table tr {
border-bottom: none;
}

table tr:last-child {
}
}