@charset "UTF-8";

.main-text h3 {
font-weight: 300;
}
.h3-it-toto {
color: lightgrey;
font-weight: 600;
font-size: 16px;
font-size: 1.6rem;
text-shadow: none;
letter-spacing: 0.07em;
}


#about-materials {
background-color: lightgoldenrodyellow;
background-color: beige;
margin-top: 30px;
margin-bottom: 90px;
padding: 30px;
}
#about-materials h3 {
margin: 0 0 18px;
padding: 0 0 9px;
color: darkkhaki;
color: olive;
text-shadow: 0 0 2px snow;
font-weight: 400;
border-bottom: dotted 1px darkkhaki;
text-align: center;
}

.material-list {
color: dimgray;
}
.material-list li {
margin-top: 20px;
line-height: 1.6;
font-size: 15px;
font-size: 1.5rem;
}
.material-name {
font-weight: 600;
font-size: 14px;
font-size: 1.4rem;
letter-spacing: 0.05em;
}
.comment {
font-size: 13px;
font-size: 1.3rem;
margin-top: 5px;
line-height: 1.8;
color: grey;
}


/* ===== width 700 以上 ===== */

@media (min-width: 700px) {

#about-materials {
padding: 45px;
}

.material-list {
display: flex;
flex-wrap: nowrap;
justify-content: space-between;
}
.material-list div {
width: 47%;
flex-grow: none;
}

}


/* ===== width 1100以上 ===== */

@media (min-width: 1100px) {

#about-materials {
padding: 45px 90px;
}

}