@charset "utf-8";
/* CSS Document */
a:hover{ color:#F00}
.first{ text-align:center;margin:0; position:relative; }
.first h1{ font-size:2.0rem; line-height:2.4rem; padding:50px 0 30px 0; margin:0}
.first p{ padding:50px 0; margin:0 auto; text-align:left;width:90%; max-width:1024px  }
.first img{ width:90%; max-width:1024px; }
.second{ text-align:center; margin:50px auto; padding:0; width:90%; max-width:1024px; box-sizing:border-box }
section{ box-sizing:border-box;}
h2{ font-size:1.8rem; line-height:2.4rem; padding:0; margin:0; text-align:center}
h3{ font-size:0.8rem; line-height:1.4rem; padding:0; margin:0; font-weight:normal; text-align:center}
.second h1{ font-size:2.2rem; line-height:2.6rem; padding:0; margin:0}
.second p{ padding:40px 0 0 0; margin:0}
.third{ padding:50px 0; margin:0; box-sizing:border-box}
.square{ margin:50px auto; justify-content: center;width:90%; max-width:1024px }
.square div{ width:40%; }
.square div{ margin:0; padding:0 60px 20px 0; box-sizing:border-box}
.square1 span{ text-indent:-40px; margin:0; padding:0}
.square1 p{ text-indent:-40px; margin:0; padding:0}
.square1 p:before {content:'□'; padding:0 5px 0 20px}
.pc{ display:block}
.sp{ display:none}
.flex2{text-align:left;justify-content: space-around; flex-direction: row-reverse; margin:50px 0}
.fourth{ margin:50px 0; text-align:center}
.fourth img{ margin:50px 0;}
@media print, screen and (max-width: 1024px) {
.pc{ display:none}
.sp{ display:block}
.square1 div{ width:50%; }
}
@media print, screen and (max-width: 768px) {
	.first{margin:0;}
	.flex2 div{ width:100%}
.square div{ width:100%;}
}