@charset "UTF-8";


/* ================================================================= */
/* ======================== 0 〜 824px以上 =========================== */
/* ============================================================== */

@media screen and (max-width:824px) {

#material {
margin-top: 60px;
}

/* materialarea */
#material .materialarea {
background-color: #ffffff;
padding: 40px 0 0;
text-align: center;
}
#material .materialarea h2 {
font-size: 30px;
font-family: 'Noto Serif JP', sans-serif;font-weight: 600;
text-align: center;
}
#material .materialarea h2 span {
display: block;
font-size: 14px;
margin-top: 10px;
}
#material .materialarea h3 {
font-size: 36px;
font-family: 'Noto Serif JP', sans-serif;font-weight: 600;
text-align: center;
line-height: 1.2;
margin: 40px 0;
}
#material .materialarea p {
font-size: 16px;
line-height: 2;
font-family: 'Noto Serif JP', sans-serif;
margin-bottom: 40px;
}
#material .materialarea p span {
font-family: 'Noto Serif JP', sans-serif;font-weight: 600;
}
#material .materialarea h4 {
color: #c2a915;
font-size: 36px;
font-family: 'Noto Serif JP', sans-serif;font-weight: 600;
text-align: left;
margin: 30px 0;
}
#material .materialarea ul {
width: 86.667%;
margin: 0 auto;
}
#material .materialarea ul li {
width: 100%;
margin-bottom: 60px;
}
#material .materialarea ul li img {

}
#material .materialarea ul li p {
margin-bottom: 0;
text-align: left;
font-size: 16px;
font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", YuGothic, "ヒラギノ角ゴ ProN W3", Hiragino Kaku Gothic ProN, Arial, "メイリオ", Meiryo, sans-serif;
}


}

/* ================================================================= */
/* ======================== SP END =========================== */
/* ============================================================== */


/* ================================================================= */
/* ======================== 825px以上 =========================== */
/* ============================================================== */

@media screen and (min-width:825px) {


#material {
background-color: #ffffff;
}

/* materialarea */
#material .materialarea {
padding: 140px 0 0;
text-align: center;
}
#material .materialarea h2 {
font-size: 46px;
font-family: 'Noto Serif JP', sans-serif;font-weight: 600;
text-align: center;
}
#material .materialarea h2 span {
display: block;
font-size: 16px;
margin-top: 20px;
}
#material .materialarea h3 {
font-size: 50px;
font-family: 'Noto Serif JP', sans-serif;font-weight: 600;
text-align: center;
margin: 50px 0;
}
#material .materialarea h4 {
color: #c2a915;
font-size: 36px;
font-family: 'Noto Serif JP', sans-serif;font-weight: 600;
text-align: left;
margin: 30px 0;
}
#material .materialarea p {
font-size: 18px;
font-family: 'Noto Serif JP', sans-serif;
line-height: 2;
margin-bottom: 100px;
}
#material .materialarea p span {
font-family: 'Noto Serif JP', sans-serif;font-weight: 600;
}
#material .materialarea ul {
width: 1100px;
margin: 0 auto;
display:-webkit-box;
display:-moz-box;
display:-ms-box;
display:-webkit-flexbox;
display:-moz-flexbox;
display:-ms-flexbox;
display:-webkit-flex;
display:-moz-flex;
display:-ms-flex;
display:flex;
-webkit-box-lines:multiple;
-moz-box-lines:multiple;
-webkit-flex-wrap:wrap;
-moz-flex-wrap:wrap;
-ms-flex-wrap:wrap;
flex-wrap:wrap;
}
#material .materialarea ul li {
width: 480px;
margin-right: 40px;
margin-bottom: 100px;
float: left;
}
#material .materialarea ul li:nth-child(2n) {
margin-right: 0;
}
#material .materialarea ul li img {

}
#material .materialarea ul li p {
margin-bottom: 0;
text-align: left;
font-size: 16px;
font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", YuGothic, "ヒラギノ角ゴ ProN W3", Hiragino Kaku Gothic ProN, Arial, "メイリオ", Meiryo, sans-serif;
}


}

/* ================================================================= */
/* ======================== SP END =========================== */
/* ============================================================== */